<template>
    <el-dialog  title="绑定班级" :visible.sync="classVisible" width="30%" center>
      <el-form v-loading="load" label-position="right" label-width="80px" :model="bindClassTeacherForm">
        <el-form-item label="老师姓名" prop="teacherName">
          <el-input v-model="bindClassTeacherForm.teacherName" disabled placeholder="请输入老师姓名" />
        </el-form-item>
        <el-form-item label="所属学校" prop="schoolId">
          <el-select v-model="bindClassTeacherForm.schoolId" disabled placeholder="请选择学校" style="width: 100%;">
            <el-option v-for="dict in dictTables.schoolDict" :key="dict.value" :label="dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="绑定班级" prop="classId">
          <el-select
            v-model="bindClassTeacherForm.classId" 
            :loading="bindOptionLoding" 
            loading-text="正在加载中~~~"
            reserve-keyword @visible-change="searchClassOption" 
            :multiple="true"
            placeholder="请选择班级" style="width: 100%;">
            <el-option v-for="item in clazzOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="classVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitBindClassForm">确 定</el-button>
      </span>
    </el-dialog>    
</template>

<script>
import { listClazzOption } from '@/api/system/clazz'
import {teacherBindClass, searchTeacherBindClass} from '@/api/system/teacher_class_relation'
export default {
    props: {
        dictTables: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    data() {
        return {
            // 绑定班级和教师表单对象
            bindClassTeacherForm: {},
            // 班级下拉列表
            clazzOption: [],
            bindOptionLoding: false,
            classVisible: false,
            load: true,
        }
    },
    methods: {
         /** 绑定班级按钮操作 */
        handleBindClass(row) {
            // this.reset();
            this.load = true
            this.classVisible = true
            this.bindClassTeacherForm = row
     
            // 发送请求
            searchTeacherBindClass(row.id).then(res => {
              this.bindClassTeacherForm.classId = res.data
              this.searchClassOption(true)
            }).finally(() => {
              setTimeout(() => {
                this.load = false
              }, 500)
            })
        },
        submitBindClassForm() {
            let fomrData = {
                teacherId: this.bindClassTeacherForm.id,
                classId: this.bindClassTeacherForm.classId,
                schoolId: this.bindClassTeacherForm.schoolId
            }
            // 发送请求
            teacherBindClass(fomrData).then(res => {
                this.$message.success("操作成功");
                this.classVisible = false;
                this.bindClassTeacherForm = {}
                
                // 父组件调用刷新列表方法
                this.$emit('ok')
            })
        },
        /** 懒加载班级列表 */
        searchClassOption(openSelect) {
            if (openSelect) {
                this.bindOptionLoding = true
                listClazzOption(this.bindClassTeacherForm.schoolId).then(response => {
                  console.log(response);
                  this.clazzOption = response.data
                  this.bindOptionLoding = false
                })
            }
        },
    },
}
</script>

<style>

</style>