<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 label="机构名称">
                  <a-input  v-model="searchPage.orgName" 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 
                        
                        icon="edit"
                        @click="showModal(record)"
                        type="link"
                    >
                        修改
                    </a-button>
                    <a-button 
    
                        icon="delete"
                        @click="deleteRow(record)"
                        type="link"
                    >
                        删除
                    </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: 12}"
                    :rules="formRules"
                    ref="formModelRef"
                >
                    <a-form-model-item
                        v-if="modalType == 'edit'"
                        label="讲师编号"
                        prop="code"
                    >
                        <a-input
                            v-model="formModel.code"
                        >
                        </a-input>
                    </a-form-model-item>
                    <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="联系电话"
                        prop="mobile"
                    >
                        <a-input
                            v-model="formModel.mobile"
                        >
                        </a-input>
                    </a-form-model-item>
                    <a-form-model-item
                        label="所属机构"
                        prop="orgId"
                    >
                        <a-select v-model="formModel.orgId">
                          <a-select-option v-for="org in orgList" :key="org.id" :value="org.id">
                              {{org.name}}
                          </a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item
                        label="简介"
                        prop="introduce"
                        :wrapperCol="{span:18}"
                    >
                        <a-textarea
                            v-model="formModel.introduce"
                            placeholder="个人简介"
                            :auto-size="{ minRows: 3, maxRows: 5 }"
                        />
                    </a-form-model-item>
                    
                    <a-form-model-item
                        label="讲师账号"
                        prop="account"
                    >
                        <a-input
                            v-model="formModel.account" :disabled="isReadOnly"
                        >
                        </a-input>
                    </a-form-model-item>
                    

                </a-form-model>
            </a-modal>
        </template>
    </div>
</template>
<script>
import {fetchList,addObj,putObj,delObj} from '@/api/biz/teacher'
import {fetchList as fetchOrgList} from '@/api/biz/institution'
import {disposereq} from '@/utils/util'

let columns = [
    {
        title: "讲师编号",
        dataIndex: "code",
        align: "center",
        width: 120,
    },
    {
        title: "讲师名称",
        dataIndex: "name",
        align: "center"
    },
    {
        title: "联系方式",
        dataIndex: "mobile",
        align: "center"
    },
    {
        title: "所属机构",
        dataIndex: "orgName",
        align: "center"
    },
    {
        title: "简介",
        dataIndex: "introduce",
        align: "center",
        ellipsis: true
    },
    {
        title: "课程数",
        dataIndex: "courseCount",
        align: "center",
        width: 80,
    },
    {
        title: '操作',
        key: "action",
        scopedSlots: { customRender: "action" },
        align: "center",
        width: 180,
    }
]

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

            },
            pagination: {
                showQuickJumper: true,
                showSizeChanger: true
            },
            modalVisible: false,
            modalTitle: '添加',
            modalType: 'add',
            isReadOnly: false,
            formModel: {
                id: '',
                name: '',
                mobile: '',
                introduce: '',
                orgId: ''

            },
            formRules: {
                name: [
                    {
                        required: true,
                        message: '不能为空',
                        trigger: 'blur'
                    }
                ],
                orgId: [
                    {
                        required: true,
                        message: '不能为空',
                        trigger: 'change' 
                    }
                ],
                account: [
                    {
                        required: true,
                        message: '不能为空',
                        trigger: 'change' 
                    }
                ]
            },
            orgList: []

        }
    },
    created() {
        this.getList(this.searchPage)
        this.getOrgList();
    },
    beforeUpdate() {
        
    },
    methods: {
        getOrgList(){
            let query= {
                pageIndex: 1,
                pageSize: 5000,
            }
            fetchOrgList(query).then(res => {
                if(res.code == 200){
                    this.orgList = res.data
                }
            }).catch(err => {
                disposereq(this,err)
            })
            
        },
        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'
                this.isReadOnly = false;
            }else{
                this.modalTitle = '编辑'
                this.modalType = 'edit'
                this.isReadOnly = true;
                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()
        },
        handleOrgChange(){

        }
    }
}
</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>