<template>
  <el-dialog
    :title="dialogObj.title"
    center
    append-to-body
    :visible.sync="dialogObj.show"
    width="800px">
    <div v-loading="loading">
      <el-form ref="form" :model="form"  label-width="120px">
        <el-form-item label="课程标题">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="课程封面">
          <el-upload
            action="/api/public/upload"
            :class="{disabled:!uploadShow}"
            :before-upload="beforeAvatarUpload"
            list-type="picture-card"
            :file-list="imageList"
            :on-success="handleAvatarSuccess"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="课程类型">
          <el-select v-model="form.type" placeholder="请选择课程类型" @change="selectedLesson = []">
            <el-option label="月课" :value="0"></el-option>
            <el-option label="日课" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择课程">
          <el-cascader
            :value="selectedLesson"
            :options="showLessonList"
            :show-all-levels="false"
            @active-item-change="changLessonItem"
            @change="selectLesson"
            :props="{label: 'name',value:'id',children:'children'}"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="已选课程">
          <el-row>
            <el-col :span="12" class="selected-block" v-for="data in selectedLessonList" :key="data.id">
              <el-card shadow="always">
                {{data.name}}
                <el-button type="danger" icon="el-icon-close" @click="delLesson(data)" circle size="mini" style="float: right;padding: 3px"></el-button>
              </el-card>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="选择盒子">
          <el-cascader
            :value="selectedBox"
            :options="showBoxList"
            :show-all-levels="false"
            @active-item-change="changBoxItem"
            @change="selectBox"
            expand-trigger="hover"
            :props="{label: 'name',value:'id',children:'children'}"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="已选盒子">
          <el-row>
            <el-col :span="12" class="selected-block" v-for="data in selectedBoxList" :key="data.id">
              <el-card shadow="always">
                {{data.name}}
                <el-button type="danger" icon="el-icon-close" @click="delBox(data)" circle size="mini" style="float: right;padding: 3px"></el-button>
              </el-card>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="dialogObj.type !== 1">
        <el-button @click="dialogObj.show = false">取 消</el-button>
        <el-button type="primary" @click="sub">确 定</el-button>
      </span>
    </div>
  </el-dialog>

</template>

<script>
  import {getCategoryApi,getBoxTypeListApi,getBoxListApi,addLessonApi,editLessonApi} from "../../service/api";
  export default {
    name: "dialogObj",
    props:[
      'dialogObj'
    ],
    data(){
      return{
        selectedLesson:[],
        selectedLessonList:[],
        lessonList:[],
        showLessonList:[],
        selectedBox:[],
        selectedBoxList:[],
        boxList:[],
        showBoxList:[],
        imageList:[],
        loading:false,
        uploadShow:true,
        form:{
          title:'',
          type:0,
          text_category_ids:[],
          item_category_ids:[],
          cover:0,
        },
      }
    },
    methods:{
      handleItemChange(val){

      },
      changLessonItem(){
        if(this.form.type === 0){
          this.showLessonList.forEach(a=>{
            a.children.forEach(b=>{
              if(b.children){
                delete b.children
              }
            })
          })
        }else{
          this.showLessonList = this.lessonList
        }
      },
      delLesson(data){
        this.selectedLessonList = this.selectedLessonList.filter(i=>{
          return i.id !== data.id
        })
      },
      delBox(data){
        this.selectedBoxList = this.selectedBoxList.filter(i=>{
          return i.id !== data.id
        })
      },
      selectLesson(data){
        let select = this.showLessonList.find(i=>{return i.id === data[0]});
        select = select.children.find(i=>{return i.id === data[1]});
        if(data.length === 3)select = select.children.find(i=>{return i.id === data[2]});
        this.selectedLessonList.push(select)
      },
      changBoxItem(data){
        let select = this.showBoxList.find(i=>{return i.id === data[0]});
        getBoxListApi(select.id).then(res=>{
          res.list.forEach(i=>{
            i.name = i.title
          });
          this.showBoxList.find(i=>{return i.id === data[0]}).children = res.list
        })
      },
      selectBox(data){
        let select = this.showBoxList.find(i=>{return i.id === data[0]});
        select = select.children.find(i=>{return i.id === data[1]});
        if(data.length === 3)select = select.children.find(i=>{return i.id === data[2]});
        this.selectedBoxList.push(select)
      },
      sub(){
        this.selectedBoxList.forEach(i=>{this.form.item_category_ids.push(i.id)});
        this.selectedLessonList.forEach(i=>{this.form.text_category_ids.push(i.id)});
        this.form.text_category_ids = this.form.text_category_ids.toString();
        this.form.cover = this.imageList[0].name;
        this.form.item_category_ids = this.form.item_category_ids.toString();
        switch(this.dialogObj.type){
          case 2:
            this.$refs['form'].validate((valid) => {
                if(valid){
                  editTeacherApi(this.id,this.form).then(res=>{
                    this.$message({
                      type: 'success',
                      message: '修改成功!'
                    });
                    this.$emit("reflash");
                    this.show = false;
                  })
                }
            });
            break;
          case 0:
            console.log(this.form)
            // this.$refs['form'].validate((valid) => {
            //   if(valid){
                addLessonApi(this.form).then(res=>{
                  this.$message({
                    type: 'success',
                    message: '新增成功!'
                  });
                  this.$emit("reflash");
                  this.dialogObj.show = false;
                })
            //   }
            // });
            break
        }
      },
      initDialog(){
        getBoxTypeListApi().then(res=>{
          res.forEach(i=>{
            i.children = []
          });
          this.boxList = res;
          this.showBoxList = JSON.parse(JSON.stringify(res))
        });
        getCategoryApi().then(res=>{
          this.lessonList = res;
          this.showLessonList = JSON.parse(JSON.stringify(res))
        });
        switch(this.dialogObj.type){
          case 0:
            this.form={
            title:'',
              type:0,
              text_category_ids:[],
              item_category_ids:[],
              cover:0,
          };
            this.selectedLessonList = [];
            this.selectedBoxList = [];
            break;
          case 1:
            this.title = '教师详情';
            this.show = this.dialogObj.show;
            this.id = this.dialogObj.id;
            this.type = 1;
            getTeacherDetailApi(this.id).then(res=>{
              this.teacherDetail = res;
              this.loading = false
            });
            break;
          case 2:
            this.title = '编辑';
            this.show = this.dialogObj.show;
            this.id = this.dialogObj.id;
            this.type = 2;
            getTeacherDetailApi(this.id).then(res=>{
              this.form.name = res.name;
              this.form.alias = res.alias;
              this.form.qr = res.qr;
              this.form.type = res.type;
              this.form.status = res.status;
              this.loading = false
            });
            break
        }
      },
      beforeAvatarUpload(){
        this.uploadShow = false
      },
      handleRemove(){
        this.uploadShow = true
      },
      handleAvatarSuccess(res) {
        this.imageList = [{name:res.data.url,url:process.env.IMAGE_URL_HEAD + res.data.url}]
      },
    },
    watch:{
      dialogObj(){
        this.initDialog()
      }
    }
  }
</script>

<style scoped lang="less">
  .el-col{
    height: 50px;
    text-align: center;
    margin-bottom: 20px;
    line-height: 40px;
    .el-select{
      width: 100%;
    }
    img{
      width: 50px;
      border-radius: 100px;
    }
    label{
      color: #5982e6;
    }
  }
  .dialog-footer{
    display: block;
    text-align: center;
  }
  .selected-block{
    height: auto;
    padding: 5px;
    margin: 0;
    text-align: left;
  }
</style>
