<template>
  <el-dialog
    :title="dialogObj.title"
    :visible.sync="dialogObj.show"
  >
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="期数" v-if="!this.dialogObj.periodsId">
        <el-cascader
          :options="goodsList"
          :props="{value:'id',label:'name'}"
          @active-item-change="handleItemChange"
          @change="changePeriods"
        >
        </el-cascader>
      </el-form-item>
      <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-item label="最大学员">
        <el-input-number v-model="form.max_join_num"></el-input-number>
      </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,getClassDetailApi,editClassApi,addClassApi,getPeriodsApi,getGoodsListApi,getPeriodsTeacherApi} from "../../service/api";
  export default {
    props:[
      'dialogObj'
    ],
    data(){
      return{
        form:{
          teacher_id:'',
          max_join_num:''
        },
        teacherList:[],
        exitTeacherList: [],
        goodsList: [],
        periods: {}
      }
    },
    methods:{
      findDifferentArray(array1, array2){
        let newArray = [];
        array1.forEach((val)=>{
            let index = array2.findIndex((item)=>{
                return item.teacher_id === val.id
            })
            if (index === -1) {
              newArray.push(val)
            }
        })
        return newArray
      },
      getTeacher(){
        this.exitTeacherList = this.dialogObj.teacherList.length > 0 ? this.dialogObj.teacherList :  [];
        getTeacherListApi().then(res=>{
          if (this.exitTeacherList.length > 0) {
            this.teacherList =  this.findDifferentArray(res.list, this.exitTeacherList);
            if (this.form.teacher_id){
                let _index = this.teacherList.findIndex((ts)=>{
                    return ts.id == this.form.teacher_id
                  })
                if (_index === -1) {
                    let obj = res.list.find((item)=>{ return item.id == this.form.teacher_id})
                  this.teacherList.push(obj)
                }
            }
          } else {
            this.teacherList = res.list
          }
        });

      },
      getTeacherByPeriods(){
        getPeriodsTeacherApi(this.periods.id).then(res1=>{
          this.exitTeacherList = res1
          getTeacherListApi().then(res=>{
            if (this.exitTeacherList.length > 0) {
              this.teacherList =  this.findDifferentArray(res.list, this.exitTeacherList)
            } else {
              this.teacherList = res.list
            }
          });
        })
      },
      initPage(){
        this.periods = this.dialogObj.periods
        switch (this.dialogObj.type) {
          case 0:
            if(!this.dialogObj.periodsId){
              this.getPeriodList();
            }
            this.form = {
              teacher_id:'',
              max_join_num:''
            };
            this.getTeacher();
            break;
          case 1:
            getClassDetailApi(this.dialogObj.id).then(res=>{
              this.form = {
                teacher_id: parseInt(res.teacher_id),
                max_join_num:res.max_join_num
              };
              this.getTeacher();
            })
        }
      },
      getPeriodList(){
        getGoodsListApi().then(res=>{
          res.list.forEach(i=>{
            i.children = [];
          });
          this.goodsList = res.list;
          if(!this.periods) {
            getPeriodsApi({goods_id:this.goodsList[0].id}).then(res=>{
              res.list.forEach(i=>{i.name = i.title});
              this.goodsList[0].children = res.list;
              this.periods = res.list[0]
            })
          }
        });
      },
      onSave(){
        switch (this.dialogObj.type) {
          case 0:
            let id = this.dialogObj.periodsId ? this.dialogObj.periodsId : this.periods.id;
            addClassApi(id,this.form).then(res=>{
              this.$message({
                type: 'success',
                message: '添加成功!'
              });
              this.$emit("reflash", this.periods);
              this.dialogObj.show = false;
            });
            break;
          case 1:
            editClassApi(this.dialogObj.id,this.form).then(res=>{
              this.$message({
                type: 'success',
                message: '修改成功!'
              });
              this.$emit("reflash",this.periods);
              this.dialogObj.show = false;
            })
        }
      },
      handleItemChange(val){
        getPeriodsApi({goods_id:val[0]}).then(res=>{
          res.list.forEach(i=>{i.name = i.title});
          this.goodsList.find(i=>{return i.id === val[0]}).children = res.list
        })
      },
      changePeriods(data){
        if(data.length>1){
          let nowGoods = this.goodsList.find(i=>{return i.id === data[0]});
          this.periods = nowGoods.children.find(i=>{return i.id === data[1]});
          this.getTeacherByPeriods()
        }
      }
    },
    watch:{
      'dialogObj'(value){
        this.initPage()
      }
    }
  }
</script>

<style scoped>

</style>
