<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" :rules="rules" :disabled="dialogObj.read">
        <el-form-item label="课程标题" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="课程封面(670*472)">
          <el-upload
            action="/api/public/upload"
            :http-request="uploadFileMain"
            :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-row>
          <el-col :span="10">
            <el-form-item label="课程类型">
              <el-select
                v-model="form.type" placeholder="请选择课程类型"
                @change="changLessonItem">
                <!--@change="selectedLesson = [], selectedLessonList = []">-->
                <el-option label="月课" :value="0"></el-option>
                <el-option label="日课" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="选择课程">
              <el-cascader
                ref="cascader"
                clearable
                :value="selectedLesson"
                :options="showLessonList"
                :show-all-levels="false"
                @change="selectLesson"
                :props="{label: 'name',value:'id',children:'children'}"
              ></el-cascader>
              <!--@active-item-change="changLessonItem"-->
            </el-form-item>
          </el-col>
        </el-row>
        <!--暂时注释-->
        <el-row>
          <el-col :span="24">
            <el-form-item label="已选课程">
              <div class="selected-block" v-for="(data, index) in selectedLessonList" :key="index">
                <el-card shadow="always">
                  <div class="name">{{index+1}}.{{data.name}}</div>
                  <div class="move" v-if="!dialogObj.read">
                    <img class="directionIcon" :src="upSrc" v-if="index !== 0" @click="moveItem(index-1,index)"/>
                    <img class="directionIcon" :src="downSrc" v-if="index !== selectedLessonList.length - 1" @click="moveItem(index,index+1)"/>
                    <i class="el-icon-delete grey" @click="delLesson(data)"></i>
                    <!--<el-button type="info" icon="el-icon-sort-up" v-if="index !== 0" @click="moveItem(index-1,index)" round size="mini"></el-button>-->
                    <!--<el-button type="info" icon="el-icon-sort-down" v-if="index !== selectedLessonList.length - 1" @click="moveItem(index,index+1)" round size="mini"></el-button>-->
                    <!--<el-button type="text" class="button" v-if="index !== 0" @click="moveItem(index-1,index)">上移</el-button>-->
                    <!--<el-button type="text" class="button" v-if="index !== selectedLessonList.length - 1" @click="moveItem(index,index+1)">下移</el-button>-->
                    <!--<el-button type="danger" icon="el-icon-close" @click="delLesson(data)" circle size="mini"></el-button>-->
                  </div>
                </el-card>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <!--<el-row>
          <el-col :span="10">
               <el-form-item label="选择盒子">
                 <el-select filterable v-model="form.cargo" placeholder="请选择" clearable>
                   <el-option
                     v-for="data in cargoList"
                     :key="data.id"
                     :label="data.cargo_name"
                     :value="data.id">
                   </el-option>
                 </el-select>
               </el-form-item>
          </el-col>
        </el-row>-->
       <!--  <el-row>
           <el-col :span="24">
             <el-form-item label="已选盒子">
               <div class="selected-block" v-for="(data,index) in selectedBoxList" :key="data.id">
                 <el-card shadow="always">
                   <div class="name">{{data.name}}</div>
                   <div class="move" v-if="!dialogObj.read">
                     <img class="directionIcon" :src="upSrc" v-if="index !== 0" @click="moveBox(index-1, index)">
                     <img class="directionIcon" :src="downSrc" v-if="index !== selectedBoxList.length - 1" @click="moveBox(index, index+1)">
                     <i class="el-icon-delete grey" @click="delBox(data)"></i>
                     &lt;!&ndash;<el-button type="danger" icon="el-icon-close" @click="delBox(data)" circle size="mini" style="float: right;padding: 3px"></el-button>&ndash;&gt;
                   </div>
                 </el-card>
               </div>
             </el-form-item>
           </el-col>
         </el-row>-->
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="dialogObj.type !== 2 && !dialogObj.read">
        <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,
        addLessonApi,
        getLessonDetailApi,
        editLessonApi,
        uploadFileApi,
        // cargoListApi
    } from "../../service/api";
    import downSrc from "../../assets/down.png"
    import upSrc from "../../assets/up.png"

    export default {
        name: "dialogObj",
        props: [
            'dialogObj'
        ],
        data() {
            return {
                lessList: [],
                fullList: [],
                showLessonList: [],
                selectedLesson: [],
                selectedLessonList: [],
                lessonList: [],
                selectedBox: [],
                selectedBoxList: [],
                boxList: [],
                showBoxList: [],
                imageList: [],
                loading: false,
                uploadShow: true,
                downSrc: downSrc,
                upSrc: upSrc,
                form: {
                    title: '',
                    type: '',
                    text_category_ids: [],
                    // item_category_ids: [],
                    cargo: '',
                    cover: 0,
                },
                rules: {
                    title: [
                        {required: true, message: '请输入课程标题', trigger: 'change'}
                    ]
                },
                cargoList: []
            }
        },
        methods: {
            handleItemChange(val) {

            },
            changLessonItem() {
                this.selectedLesson = [];
                this.selectedLessonList = [];
                // debugger
                // this.$refs.cascader.clearCheckedNodes();
                /*if(this.form.type == 0){
                  /!*var arr = JSON.parse(JSON.stringify(this.lessonList));
                  arr.forEach(a=>{
                    a.children =  a.children || [];
                    a.children.forEach(b=>{
                      if(b.children){
                        delete b.children
                      }
                    })
                  })*!/
                  this.showLessonList = this.lessList;
                } else {
                  this.showLessonList = this.fullList;
                }*/
            },
            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]
                });
                if (select.children) {
                    select = select.children.find(i => {
                        return i.id === data[1]
                    });
                } else {
                    return
                }
                if (data.length === 3) {
                    if (select.children) {
                        select = select.children.find(i => {
                            return i.id === data[2]
                        });
                    }
                }
                let index = this.selectedLessonList.findIndex(val => val === select);
                if (index === -1) {
                    this.selectedLessonList.push(select)
                } else {
                    this.$message({
                        type: 'info',
                        message: '不能重复添加!'
                    });
                }
            },
            selectBox(data) {
                let select = this.showBoxList.find(i => {
                    return i.id === data[0]
                });
                let index = this.selectedBoxList.findIndex(val => val === select);
                if (index === -1) {
                    this.selectedBoxList.push(select)
                } else {
                    this.$message({
                        type: 'info',
                        message: '不能重复添加!'
                    });
                }

            },
            sub() {
                this.$refs['form'].validate((valid) => {
                    // let itemIds = [];
                    let textIds = [];
                    /*this.selectedBoxList.forEach(i => {
                        itemIds.push(i.id)
                    });*/
                    this.selectedLessonList.forEach(i => {
                        textIds.push(i.id)
                    });
                    if (this.imageList[0]) {
                        this.form.cover = this.imageList[0].name;
                    }
                    let json = this.form;
                    // json.item_category_ids = itemIds.toString();
                    json.item_category_ids = this.form.cargo;
                    json.text_category_ids = textIds.toString();
                    if (valid) {
                        if (!this.form.cover) {
                            this.$message({
                                type: 'error',
                                message: '请上传封面!'
                            });
                            return
                        }
                        console.log(this.form.type);
                        if (this.form.type === "") {
                            this.$message({
                                type: 'error',
                                message: '请选择课程类型!'
                            });
                            return
                        }
                        if (!json.text_category_ids) {
                            this.$message({
                                type: 'error',
                                message: '请选择课程!'
                            });
                            return
                        }
                        switch (this.dialogObj.type) {
                            case 1:
                                // this.$refs['form'].validate((valid) => {
                                //     if(valid){
                                editLessonApi(this.dialogObj.id, json).then(res => {
                                    this.$message({
                                        type: 'success',
                                        message: '修改成功!'
                                    });
                                    this.$emit("reflash");
                                    this.dialogObj.show = false;
                                });
                                //     }
                                // });
                                break;
                            case 0:
                                // this.$refs['form'].validate((valid) => {
                                //   if(valid){
                                addLessonApi(json).then(res => {
                                    this.$message({
                                        type: 'success',
                                        message: '新增成功!'
                                    });
                                    this.$emit("reflash");
                                    this.dialogObj.show = false;
                                })
                                //   }
                                // });
                                break
                        }
                    }
                })
            },
            initDialog() {
               /* cargoListApi().then(res => {
                    this.cargoList = res;
                });*/
                getBoxTypeListApi().then(res => {
                    if (res) {
                        this.boxList = res;
                        this.showBoxList = JSON.parse(JSON.stringify(res))
                    }
                });
                getCategoryApi().then(res => {
                    this.lessonList = res;

                    var lessList = JSON.parse(JSON.stringify(res));
                    lessList.forEach(a => {
                        a.children = a.children || [];
                        a.children.forEach(b => {
                            if (b.children) {
                                delete b.children
                            }
                        })
                    })
                    this.lessList = lessList;
                    this.fullList = JSON.parse(JSON.stringify(res));

                    if (this.form.type == 0) {
                        this.showLessonList = this.lessList;
                    } else {
                        this.showLessonList = this.fullList;
                    }
                    switch (this.dialogObj.type) {
                        case 0:
                            this.form = {
                                title: '',
                                type: '',
                                text_category_ids: [],
                                // item_category_ids: [],
                                cargo: '',
                                cover: 0,
                            };
                            this.uploadShow = true;
                            this.imageList = [];
                            this.selectedLessonList = [];
                            this.selectedBoxList = [];
                            break;
                        case 1:
                            getLessonDetailApi(this.dialogObj.id).then(resL => {
                                console.log(resL);
                                let cargo = '';
                                if (resL.detail[2]) {
                                    resL.detail[2].forEach(v => {
                                        cargo = v.id
                                    })
                                }
                                this.form = {
                                    title: resL.title,
                                    type: resL.type,
                                    text_category_ids: [],
                                    // item_category_ids: [],
                                    cargo: cargo,
                                    cover: '',
                                };
                                this.imageList = [{name: resL.cover, url: process.env.IMAGE_URL_HEAD + resL.cover}];
                                this.uploadShow = false;
                                this.selectedLessonList = [];
                                this.selectedBoxList = [];
                                if (resL.type === 0) {
                                    resL.detail['0'].forEach(i => {
                                        this.selectLesson([i.pid, i.id])
                                    });
                                } else if (resL.type === 1) {
                                    resL.detail['1'].forEach(t => {
                                        let x = this.showLessonList.find(i => {
                                            i.children = i.children || [];
                                            return i.children.find(j => {
                                                return j.id === t.pid
                                            })
                                        })
                                        this.selectLesson([x.id, t.pid, t.id])
                                    })
                                }
                                if (resL.detail['2']) {
                                    resL.detail['2'].forEach(i => {
                                        this.selectBox([i.id])
                                    });
                                }
                            });
                            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}]
            },
            uploadFileMain(a) {
                this.$store.dispatch('setProgress', {type: 'new', id: a.file.uid});
                this.fileUid = a.file.uid;
                uploadFileApi({file: a.file, type: 'local'}).then(res => {
                    this.form.cover = process.env.IMAGE_URL_HEAD + res.url;
                    this.imageList[0] = {
                        name: res.url,
                        url: process.env.IMAGE_URL_HEAD + res.url,
                        title: '',
                        lable: ''
                    };
                })
            },
            moveBox(first, second) {
                let list = this.selectedBoxList;
                let oFirst = list[first];
                let oSecond = list[second];
                this.selectedBoxList.splice(first, 1, oSecond);
                this.selectedBoxList.splice(second, 1, oFirst);
            },
            moveItem(first, second) {
                let list = this.selectedLessonList;
                let oFirst = list[first];
                let oSecond = list[second];
                this.selectedLessonList.splice(first, 1, oSecond);
                this.selectedLessonList.splice(second, 1, oFirst);
            }
        },
        watch: {
            'form.type'() {
                if (this.form.type == 0) {
                    this.showLessonList = this.lessList;
                } else {
                    this.showLessonList = this.fullList;
                }
            },
            'dialogObj.show'(val) {
                if (val) {
                    if (this.dialogObj.type == 0) {
                        this.$nextTick(() => {
                            this.$refs['form'].resetFields();
                        });
                    }
                    this.initDialog();
                }
            },
        },
        // mounted(){
        //   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 {
    width: 46%;
    white-space: nowrap;
    height: auto;
    padding: 5px;
    margin: 0;
    text-align: left;
    float: left;
  }

  .move {
    display: flex;
    flex-flow: row;
    justify-content: flex-end;
    align-items: center;
    margin: 3px;
  }

  .name {
    line-height: 20px;
  }

  .directionIcon {
    width: 16px !important;
  }

  .grey {
    color: #666;
  }
</style>
<style lang="less" scoped>
  .disabled .el-upload--picture-card {
    display: none !important;
  }

  .el-card__body {
    padding: 3px 10px;
  }
</style>

