<template>
  <div class="edit-course-wrapper dialog-title-border">
    <el-dialog ref="testDialogRef"
      title="上传课程"
      :visible="dialogVisible"
      @close="close"
      center
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="800px"
    >
      <div slot="title" style="text-align: left;">
        <span style="font-weight: 700;">上传课程</span>
        <span style="font-size: 12px;color: #999;">请认真核对上传内容，一旦提交后将不能修改</span>
      </div>
      <div class="course-content">
        <el-form
          ref="formDataRef"
          :model="formData"
          :rules="rules"
          label-width="120px"
          class="basic-form"
        >
          <el-form-item label="课程名称：" prop="name">
            <el-col :span="18">
              <el-input
                size="small"
                v-model="formData.name"
                placeholder="请输入课程名称"
                style="width: 360px"
                maxlength="25"
                :disabled="disabled"
              ></el-input>
              <span class="word-num">{{(formData.name).replace(/\s+/g,"").length}}/25</span>
            </el-col>
          </el-form-item>

          <el-form-item label="学科分类：" prop="subjectId">
            <el-col :span="18">
              <!-- :props="{ expandTrigger: 'hover' }" -->
              <el-cascader
                style="width: 360px"
                v-model="formData.subjectId"
                :options="labelOptions"
                :props="{ value: 'id', label: 'name', children: 'subList'}"
                @change="handleChange">
                <!-- <template slot-scope="{ node, data }">
                  <span>{{ data.name }}</span>
                </template>                 -->
              </el-cascader>
            </el-col>
          </el-form-item>


          <el-form-item label="开放范围：" prop="range">
            <el-radio-group v-model="formData.range">
              <el-radio :label="1">机构共享</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="课程视频：" prop="range">
            <!-- action="https://jsonplaceholder.typicode.com/posts/" -->
            <el-upload
              class="upload-demo"
              action="https://sc.yunqueyi.com/contents/admin/qiniu/token1"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="100"
              :on-exceed="handleExceed"
              :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>


          <div class="other-content" v-show="isShowOtherContent" >
            <div class="tips">注：以下信息为非必填项，您也可以根据实际情况修改</div>
            <div class="basic-item-icon">
              <!-- <span class="require">*</span> -->
              <el-form-item label="课程封面：">
                <el-upload
                  v-model="formData.attachmentUrl"
                  class="bg-uploader"
                  action="#"
                  :show-file-list="false"
                  :before-upload="beforeUploadListPic"
                  :disabled="disabled"
                >
                  <div class="bg-img-wrapper">
                    <img v-if="formData.attachmentUrl" @mouseover.stop="imgMouseOver=true" :src="formData.attachmentUrl" class="bg-img">
                    <img v-if="!formData.attachmentUrl" class="bg-img" src="../../../assets/image/small.png">
                  </div>                
                  <div class="img-delete" v-show="imgMouseOver && !disabled" @click.stop="deleteImg(1)" @mouseout.stop="imgMouseOver=false"><i class="el-icon-delete"></i></div>
                </el-upload>
                <div class="limit-text">
                  尺寸：750*420，只支持jpeg格式
                </div>
              </el-form-item>
              <p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
            </div>

            <el-form-item label="课程难度：">
              <el-radio-group v-model="formData.range">
                <el-radio :label="1">初级</el-radio>
                <el-radio :label="2">中级</el-radio>
                <el-radio :label="3">高级</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="讲师名称：">
              <el-col :span="18">
                <el-input
                  size="small"
                  v-model="formData.lectureName"
                  placeholder="请输入讲师名称"
                  style="width: 360px"
                  maxlength="25"
                  :disabled="disabled"
                ></el-input>
                <span class="word-num">{{(formData.name).replace(/\s+/g,"").length}}/25</span>
              </el-col>
            </el-form-item>

            <el-form-item label="所属机构：">
              <el-col :span="18">
                <el-input
                  size="small"
                  v-model="formData.lectureName"
                  placeholder="请输入所属机构"
                  style="width: 360px"
                  maxlength="25"
                  :disabled="disabled"
                ></el-input>
                <span class="word-num">{{(formData.name).replace(/\s+/g,"").length}}/25</span>
              </el-col>
            </el-form-item>
            <div class="basic-item-icon">
              <el-form-item label="讲师头像：">
                <el-upload
                  v-model="formData.attachmentUrl"
                  class="bg-uploader"
                  action="#"
                  :show-file-list="false"
                  :before-upload="beforeUploadListPic"
                  :disabled="disabled"
                >
                  <div class="bg-img-wrapper">
                    <img v-if="formData.attachmentUrl" @mouseover.stop="imgMouseOver=true" :src="formData.attachmentUrl" class="bg-img">
                    <img v-if="!formData.attachmentUrl" class="bg-img" src="../../../assets/image/small.png">
                  </div>                
                  <div class="img-delete" v-show="imgMouseOver && !disabled" @click.stop="deleteImg(1)" @mouseout.stop="imgMouseOver=false"><i class="el-icon-delete"></i></div>
                </el-upload>
                <div class="limit-text">
                  尺寸：80*80，只支持jpeg格式
                </div>
              </el-form-item>
              <p class="upload-message" v-if="uploadImgMessage">请选择列表图片</p>
            </div>
            <el-form-item label="课程简介：">
              <el-col :span="22">
                <el-input
                  size="small"
                  type="textarea"
                  :autosize="{ minRows: 5}"
                  placeholder="请输入课程简介"
                  v-model="formData.courseIntro"
                  style="width:90%;"
                ></el-input>
                <span class="word-num">{{(formData.courseIntro).replace(/\s+/g,"").length}}/200</span>
              </el-col>
            </el-form-item>
          </div>



          <div class="separator-line">
            <span class="line-left"></span>
            <div @click="toggleOtherContent" class="center">
              <span>展开更多信息</span>
              <img src="../../../assets/image/plus.png"/>
            </div>
            <span class="line-right"></span>
          </div>
        </el-form>

      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submitForm('formDataRef')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { doUpload, getFilePath } from "@/utils/qiniu-util";
import { openLoading, closeLoading, getQiniuToken1 } from "@/utils/utils";
let vm = null;
export default {
  data() {
    let checkCourseName = (rule, value, callback) => {
      // 如果有审核的信息，则直接报错
      if(this.needShowAuditMsg && this.auditMsgMap.name.desc) {
        callback(new Error(this.auditMsgMap.name.desc));
        return;
      }
      if(!this.needShowAuditMsg && !value) {
        callback(new Error('请输入课程名称'));
      } else {
        callback();
      }
    };
    return {
      needShowAuditMsg: true,
      auditMsgMap: {
        name: {
          desc: '填写的课程名称不对'
        }
      },
      disabled: false,
      formData: {
        name: '',
        subjectId: '',
        range: 1,
        attachmentUrl: '',
        courseIntro: ''
      },
      uploadImgMessage: false,
      imgMouseOver: false,
      rules: {
        name: [
          { required: true, message: "请输入课程名称"},
          { validator: checkCourseName }
        ], 
        subjectId: [
          { required: true, message: "请输入课程名称", trigger: "blur"},
        ],
        range: [
          { required: true, message: "请选择开放范围", trigger: "blur"},
        ], 
      },
      labelOptions: [],
      isShowOtherContent: false,
      fileList: [
        {name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, 
        {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}
      ]
    };
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  computed: {

  },
  created() {
    vm = this;
  },
  mounted() {
    this.getLabelList();
    setTimeout(() => {
      console.log(this.$refs.formDataRef);
      this.$refs['formDataRef'].validateField("name");
    }, 2000);
  },
  methods: {
    close() {
      this.$emit('close');
    },

    // 获取学科列表
    getLabelList() {
      let req = {};
      this.GET("aggregate/content/labelList", req).then(res => {
        if (res.code == '000000') {
          // TODO
          this.convertLabelList(res.data);
          // this.labelOptions = res.data;
        }
      });
    },

    // 将所有子分类中的“全部”去掉
    convertLabelList(labelList) {
      let newLabelList = [];
      labelList.forEach( item => {
        item.subList = item.subList.slice(1);
      })
      this.labelOptions = labelList;
    },

    //上传列表图片
    beforeUploadListPic(file) {
      let fileLimit = {
        width: 230,
        height: 172,
        size: 0.5,
        sizeText: "500K",
        key: "attachmentUrl",
        more: "attachmentMore1",
        show: "uploadImgMessage"
      };
      vm.beforeAvatarUpload(file, fileLimit);
    },

    //上传图片校验
    beforeAvatarUpload(file, fileLimit) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
      console.log('isJPG', isJPG, 'isPNG', isPNG, 'isLt2M', isLt2M);
      if (!isJPG && !isPNG) {
        vm.$message.error("图片不符合规范，请根据规范上传图片");
        return;
      }
      if (!isLt2M) {
        vm.$message.error("图片不符合规范，请根据规范上传图片 ");
        return;
      }
      let _img = new FileReader();
      _img.readAsDataURL(file);
      _img.onload = function(theFile) {
        let image = new Image();
        image.src = theFile.target.result;
        image.onload = function() {
          let _vm = this;
          if (
            false
            // true ||
            // _vm.width != fileLimit.width ||
            // _vm.height != fileLimit.height
          ) {
            vm.$message.error("图片不符合规范，请根据规范上传图片");
          } else {
            openLoading(vm);
            doUpload(
              vm,
              file,
              getFilePath(file, null),
              "preview4",
              "progress1",
              1
            ).then(function(path) {
              closeLoading(vm);
              console.log(path);
              if (fileLimit.show == "uploadImgMessage") {
                vm.uploadImgMessage = false;
              } 
              // else if (fileLimit.show == "uploadImgMessage2") {
              //   vm.uploadImgMessage2 = false;
              // }
              vm.formData[fileLimit.key] = path.fullPath;
              vm.formData[fileLimit.more] = {
                attachmentName: path.name,
                attachmentExt: path.ext,
                attachmentSize: path.size
              };
              vm.$message.success("上传成功");
            });
          }
        };
      };
      return isJPG && isLt2M;
    },

    //  删除图片
    deleteImg(type) {
      if (type == 1) {
        vm.formData.attachmentUrl = "";
        vm.imgMouseOver = false;
      } else {
        // vm.formData.attachmentUrl2 = "";
        // vm.imgMouseOver2 = false;
      }
    },
    toggleOtherContent() {
      this.isShowOtherContent = !this.isShowOtherContent;
    },

    // 上传文件相关
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },

    //表单校验
    submitForm(formName) {
      console.log('this.formData', this.formData);
      this.needShowAuditMsg = false;
      let flag = null;
      this.$refs[formName].validate(valid => {
        if (valid) {
          //console.log("success");
          flag = true;
        } else {
          console.log("error submit!!");
          flag = false;
        }
      });
      return flag;
    },
    handleChange(value) {
      console.log(value);
    },
  }
};
</script>
<style scoped lang="scss">
  .edit-course-wrapper {
    .course-content {
      // color: red;
      .basic-item-icon {
        position: relative;
        margin-top: 20px;
        .require {
          position: absolute;
          left: 40px;
          top: 11px;
          color: #f56c6c;
        }
        .upload-message {
          position: absolute;
          left: 160px;
          top: 105px;
          font-size: 12px;
          color: #f56c6c;
        }
        .img-delete {
          position: absolute;
          left: 0px;
          top: 0px;
          width: 84px;
          height: 100px;
          background: #000;
          opacity: 0.7;
          z-index: 999;
          i {
            color: #fff;
            margin-top: 39px;
            margin-left: 0px;
          }
        }
      }
      .word-num {
        font-size: 12px;
        color: #999;
        padding-top: 5px;
      }
      .bg-uploader {
        img {
          float: left;
        }
        .bg-img-wrapper {
          .bg-img {
            display: block;
            width: 160px;
            height: 90px;
          }
        }
        .bg-video {
          float: left;
          width: 84px;
          height: 100px;
        }
      }
      .limit-text {
        position: absolute;
        top: 80px;
        left: 10px;
        font-size: 12px;
        color: #979899;
      }      
      .separator-line {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-content: center;
        align-items: center;
        justify-content: space-between;
        .center {
          width: 130px;
          color: #666666;
          img {
            width: 12px;
          }
        }
        .line-left, .line-right {
          // display: inline-block;
          // width: 100%;
          flex: 1;
          border-bottom: 1px dashed #E4E7ED;
        }
      }
      .tips {
        width: 100%;
        height:32px;
        line-height: 32px;
        padding-left: 12px;
        background:rgba(254,250,245,1);
        border-radius:3px;
        color: #E6A23C;      
      } 
    }
  }
</style>
