<template>
  <el-dialog
    :title="dialogObj.title"
    append-to-body
    :visible.sync="dialogObj.show"
  >
    <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, addRelatedTeacherApi} from "../../service/api";

  export default {
    props: [
      'dialogObj'
    ],
    data() {
      return {
        form: {
          id: '',
          teacher_id: '',
        },
        teacherList: [],
      }
    },
    methods: {
      initPage() {
        let json = {
          page: 1,
          limit: 500
        }
        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 json = {
          teacher_id: this.form.teacher_id ? this.form.teacher_id : 0
        };
        addRelatedTeacherApi(this.form.id, json).then(res => {
          this.$message({
            type: 'success',
            message: '绑定成功!'
          });
          this.$emit("reflash");
          this.dialogObj.show = false;
        })
      }
    },
    watch: {
      'dialogObj.show'(value) {
        if (value) {
          this.initPage()
        }
      }
    }
  }
</script>

<style scoped>

</style>