<template>
    <div class="box">
        <!-- 添加或修改班级管理对话框 -->
        <el-dialog 
            :title="title" 
            :close-on-click-modal="false" 
            :visible.sync="open" 
            width="500px" 
            append-to-body
        >
            <el-form
             v-loading="loading"  
             ref="Cform" 
             :model="form" 
             :rules="rules" 
             label-width="80px"
            >
                <el-form-item label="所属学校" prop="schoolId">
                    <el-select 
                        v-model="form.schoolId" 
                        :loading="schoolLoading" 
                        loading-text="正在加载中~~~"
                        @visible-change="searchSchoolOption" 
                        placeholder="请选择学校" style="width: 100%;">
                        <el-option v-for="dict in schoolOptions" :key="dict.value" :label="dict.label"
                        :value="dict.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="绑定教师" prop="teacherIds">
                    <el-select 
                        v-model="form.teacherIds" 
                        :disabled="!form.schoolId" 
                        :loading="teacherLoaging" 
                        loading-text="正在加载中~~~"
                        :reserve-keyword="true" 
                        multiple
                        @visible-change="searchTeacherOption" 
                        :placeholder="!form.schoolId ?'请先选择学校' : '请选择教师'"
                        style="width: 100%;">
                        <el-option 
                            v-for="item in teacherOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="班级名称" prop="className">
                    <el-input v-model="form.className" placeholder="请输入班级名称" />
                </el-form-item>
                <el-form-item label="班级人数" prop="classCount">
                    <el-input v-model.number="form.classCount" autocomplete="off" placeholder="请输入班级人数" />
                </el-form-item>
                <el-form-item label="班级电话" prop="phone">
                    <el-input v-model="form.phone" placeholder="请输入班级电话" />
                </el-form-item>
                
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Textyixia from "@/mixin/Textyixia"
import { listTeacherOption } from '@/api/system/teacher'

export default {
    name: 'ClazzForm',
    mixins: [Textyixia],
    data() {
        return {
            loading: true,
            open: false,
            title: '',
            // 教师下拉框数据
            teacherOptions: [],
            teacherLoaging: false,
            // 学校下拉框数据
            schoolOptions: [],
            schoolLoading: false,
            form: {},
             // 表单校验
            rules: {
              schoolId: [
                { required: true, message: "学校id不能为空", trigger: "change" }
              ],
              className: [
                { required: true, message: "班级名称不能为空", trigger: "blur" }
              ],
              classCount: [
                { required: true, message: "班级人数不能为空", trigger: "blur" }
              ],
            }
        }
    },  
   
    methods: {
        /** 搜索当前学校教师的列表 */
        searchTeacherOption(openSelect) {
            if (openSelect) {
                this.teacherLoaging = true;
                // 根据id去查询对应的学校教师
                listTeacherOption(this.form.schoolId).then(res => {
                    this.teacherOptions = res.data
                    this.teacherLoaging = false
                })
            }
        },
        /** 搜索当前平台拥有的学校 */
        searchSchoolOption(openSelect) {
            if (openSelect) {
                this.schoolLoading = true
                this.dictTableData("tb_school,school_name,id").then(data => {
                    this.schoolOptions = data
                    this.schoolLoading = false
                })
            }
            
        },
        submitForm() {
            this.$refs.Cform.validate(isOK=>{
                clearTimeout(this.timer)
                if(isOK){
                    console.log(this.form);
                    this.loading = true
                    this.timer = setTimeout(()=>{
                        this.$emit('submit', this.form);
                    },500)
                }else{
                    console.log('====');
                }
            })
           
        },
        cancel() {
            this.$emit('cancel');
        },
        // 重置表单
        reset(){
            this.form = {
                id: null,
                schoolId: null,
                className: null,
                classCount: null,
                phone: null,
                delFlag: null,
                createBy: null,
                createTime: null,
                updateBy: null,
                updateTime: null
            };
            this.loading = true;
            this.resetForm("form");
        }
    }
}
</script>
                

<style lang="scss" scoped>
.box {
    margin-top: 10px;
}
</style>