<template>
  <el-dialog
    :title="dialogObj.title"
    :visible.sync="dialogObj.show"
    center
      width="800px"
  >
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="老师">
        <el-select v-model="form.teacher_id" placeholder="请选择">
          <el-option
            v-for="(data,index) in teacherList"
            :key="index"
            :label="data.name"
            :value="data.id">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogObj.show = false">取 消</el-button>
        <el-button type="primary" @click="onSave">确 定</el-button>
      </span>
  </el-dialog>
</template>

<script>
  import {getTeacherListApi,bindTeacherApi} from "../../service/api";
  export default {
    props:[
      'dialogObj'
    ],
    data(){
      return{
        form:{
          id: '',
          teacher_id:'',
        },
        teacherList:[],
      }
    },
    methods:{
      initPage(){
        let json ={
          page:1,
          limit:200
        }
        getTeacherListApi(json).then(res=>{
          this.teacherList = res.list;
        });
        this.form = {
          id: this.dialogObj.id,
          teacher_id: this.dialogObj.teacher_id ? this.dialogObj.teacher_id : ''
        };
      },
      onSave(){
        let  teacher_id=this.form.teacher_id ? this.form.teacher_id : 0
        bindTeacherApi(this.form.id,teacher_id).then(res => {
          this.$message({
            type: 'success',
            message: '绑定成功!'
          });
          this.dialogObj.show = false;
        })
      }
    },
    watch:{
      'dialogObj'(value){
        this.initPage()
      }
    }
  }
</script>

<style scoped>

</style>
