<template>
    <div class="template_content">
        <!-- 搜索 -->
        <div class="search_box">
            <a-form layout="inline">
              <a-form-item label="机构名称">
                  <a-input  v-model="searchPage.name" placeholder="请输入机构名称" allowClear></a-input>
              </a-form-item>
              <a-form-item>
                  <a-button type="primary" icon="search" @click="handlSearch">查询</a-button>
              </a-form-item>
            </a-form>
        </div>
        <!-- 表格内容 -->
        <div class="content_box">
            <!-- 表头操作 -->
            <div class="table_top">
                <a-button 
                    type="primary"
                    icon="plus"
                    @click="showModal('')"
                >
                添加
                </a-button>
            </div>
            <!-- 表格 -->
            <a-table
                :columns="columns"
                :dataSource="data"
                :loading="loading"
                :pagination="pagination"
                bordered
                size="small"
                @change="handleTableChange"
                rowKey="id"
            >
                <!-- 表格操作 -->
                <template slot="action" slot-scope="text,record">
                    <a-button 
                        type="primary"
                        icon="edit"
                        @click="showModal(record)"
                        class="btn_margin"
                    >
                        修改
                    </a-button>
                    <a-button 
                        type="danger"
                        icon="delete"
                        @click="deleteRow(record)"
                        class="btn_margin"
                    >
                        删除
                    </a-button>
                </template>
            </a-table>
        </div>

        <!-- Modal窗口 -->
        <template>
            <a-modal 
                :visible="modalVisible" 
                :title="modalTitle"
                @ok="onConfirm"
                @cancel="onCancel"
            >
                <a-form-model
                    :model="formModel"
                    :label-col="{span: 4}"
                    :wrapper-col="{span: 8}"
                    :rules="formRules"
                    ref="formModelRef"
                >
                    <a-form-model-item
                        label="机构名称"
                        ref="nameVal"
                        prop="name"
                    >
                        <a-input
                            v-model="formModel.name"
                        >
                        </a-input>
                    </a-form-model-item>
                    <a-form-model-item
                        label="联系人名称"
                        ref="contactNameVal"
                        prop="contactName"
                    >
                        <a-input
                            v-model="formModel.contactName"
                        >
                        </a-input>
                    </a-form-model-item>
                    <a-form-model-item
                        label="联系人电话"
                        ref="contactTelVal"
                        prop="contactTel"
                    >
                        <a-input
                            v-model="formModel.contactTel"
                        >
                        </a-input>
                    </a-form-model-item>
                </a-form-model>
            </a-modal>
        </template>
    </div>
</template>
<script>
import {fetchList,addObj,putObj,delObj} from '@/api/biz/institution'
import {disposereq} from '@/utils/util'

let columns = [
    {
        title: "机构名称",
        dataIndex: "name",
        align: "center"
    },
    {
        title: "联系人名称",
        dataIndex: "contactName",
        align: "center"
    },
    {
        title: "联系人电话",
        dataIndex: "contactTel",
        align: "center"
    },
    {
        title: '操作',
        key: "action",
        scopedSlots: { customRender: "action" },
        align: "center"
    }
]

export default {
    data(){
        return {
            columns: columns,
            data: [],
            loading: false,
            searchPage: {
                pageIndex: 1,
                pageSize: 10,
                name: ''

            },
            pagination: {
                showQuickJumper: true,
                showSizeChanger: true
            },
            modalVisible: false,
            modalTitle: '添加',
            modalType: 'add',
            formModel: {
                id: '',
                name: '',
                contactName: '',
                contactTel: ''

            },
            formRules: {
                name: [
                    {
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    }
                ]
            }
        }
    },
    created() {
        this.getList(this.searchPage)
    },
    beforeUpdate() {
        
    },
    methods: {
        getList(query){
            this.loading = true;
            fetchList(query).then(res => {
                if(res.code == 200){
                    this.data = res.data
                    let paper = {...this.pagination}
                    paper.current = query.pageIndex
                    paper.total = res.count
                    this.pagination = paper
                }else{
                    this.$message.info(res.resp_code)
                }
                this.loading = false
            }).catch(err => {
                this.loading = false
                disposereq(this,err)
            })
        },
        handlSearch(){
            let queryParam = {...this.searchPage}
            this.getList(queryParam)
        },
        showModal(row){
            this.modalVisible = true
            if(row == ''){
                this.modalTitle = '添加'
                this.modalType = 'add'
            }else{
                this.modalTitle = '编辑'
                this.modalType = 'edit'
                this.formModel = {...row}
            }
        },
        deleteRow(row){
            let ids = [row.id]
            delObj(ids).then(res => {
                if(res.resp_code == 200){
                    this.$message.info('删除成功')
                    this.getList(this.searchPage)
                }else{
                    this.$message.info(res.resp_msg)
                }
            }).catch(err => {
                disposereq(this,err)
            })
        },
        handleTableChange(pagination,filters,sorter){
            console.log(this.searchPage)
            let queryParam = {...this.searchPage}
            queryParam.pageIndex = pagination.current
            queryParam.pageSize = pagination.pageSize
            this.getList(queryParam)
        },
        saveData(){
            if(this.modalType == 'add'){
                let data = {...this.formModel}
                addObj(data).then(res => {
                    if(res.resp_code == 200){
                        this.$message.info('保存成功')
                        this.getList(this.searchPage)
                    }else{
                        this.$message.info(res.resp_msg)
                    }
                }).catch(err => {
                    disposereq(this.err)
                })
            }else if(this.modalType == 'edit'){
                let data = {...this.formModel}
                putObj(data).then(res => {
                    if(res.resp_code == 200){
                        this.$message.info('保存成功')
                        this.getList(this.searchPage)
                    }else{
                        this.$message.info(res.resp_msg)
                    }
                })
            }
        },
        onConfirm(){
            this.$refs.formModelRef.validate(valid => {
                if(valid){
                    this.saveData()
                    this.closeModal()
                }else{
                    return false
                }
            })
        },
        onCancel(){
            this.closeModal()
        },
        closeModal(){
            this.modalVisible = false
            this.$refs.formModelRef.resetFields()
        },
        // blurValidate(propVal){
        //     this.$refs[propVal].onFieldBlur()
        // }
    }
}
</script>
<style>
.template_content {
  background-color: #f0f2f5;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.search_box {
  width: 100%;
  box-sizing: border-box;
  padding: 14px;
  background-color: #fff;
}
.content_box {
  width: 100%;
  background-color: #fff;
  margin-top: 10px;
  padding: 14px;
}
.table_top {
  padding-bottom: 14px;
}
.btn_margin {
  margin: 0px 5px;
}
</style>