<template>
  <div id="handoutListAdd">
    <div class="boxWidth">
      <el-form
        label-position="right"
        label-width="120px"
        :model="listData"
        :rules="rules"
        ref="listData"
      >
        <el-form-item label="适用业务层级">
          <el-select
            v-model="eduType"
            placeholder="请选择教育类型"
            @change="changeEduType"
          >
            <el-option
              v-for="(item, index) in eduTypeOptions"
              :key="index"
              :label="item.educationName"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="courType"
            placeholder="请选择业务层次"
            @change="changecourseType"
          >
            <el-option
              v-for="(item, index) in newCourTypeOptions"
              :key="index"
              :label="item.projectName + '-' + item.businessName"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-popover
            ref="popovers"
            placement="bottom"
            width="200"
            trigger="click"
            @show="showHandle"
            @hide="hideHandle"
            :disabled="courType ? false : true"
          >
            <el-checkbox
              v-model="checkAll"
              @change="handleCheckAllChange"
              :indeterminate="isIndeterminate"
              >全选</el-checkbox
            >
            <el-checkbox-group
              v-model="sujectArray"
              class="checkboxSty"
              @change="handleCheckedCitiesChange"
            >
              <el-checkbox
                v-for="(item, index) in newSujectOption"
                :label="item.newId"
                :key="index"
                >{{ item.subjectName }}</el-checkbox
              >
            </el-checkbox-group>
            <div style="display: block; text-align: center; margin-top: 10px">
              <el-button size="mini" type="primary" @click="submitSujectArray"
                >确定</el-button
              >
            </div>
            <el-button slot="reference" style="margin-left: 12px"
              >请选择科目</el-button
            >
          </el-popover>
        </el-form-item>
        <el-form-item label="">
          <div :class="changeHeight ? 'ach' : 'clh'">
            <div
              v-for="(item, index) in newSujectApis"
              :key="index"
              class="listBoxStys"
            >
              {{
                item.educationName +
                " - " +
                item.projectName +
                " - " +
                item.businessName +
                " - " +
                item.subjectName
              }}
              <i class="el-icon-error closeIcons" @click="closeType(index)"></i>
            </div>
          </div>
          <el-popover
            placement="bottom-start"
            trigger="hover"
            :close-delay="50"
          >
            <ul style="margin: 0; max-width: 600px">
              <li
                class="copyDataLi"
                :class="changeSty(itemT)"
                v-for="(itemT, indexT) in localData"
                :key="indexT"
                @click="unTime(itemT)"
              >
                {{
                  `${itemT.educationName}-${itemT.projectName}-${itemT.businessName}-${itemT.subjectName}`
                }}
              </li>
            </ul>
            <el-button
              v-show="localData.length"
              type="danger"
              slot="reference"
              size="mini"
              style="margin-right: 10px"
              >最近选择</el-button
            >
          </el-popover>
          <el-button
            size="mini"
            v-if="newSujectApis.length > 1"
            @click="changeType"
            >{{ changeHeight ? "展开" : "关闭" }}</el-button
          ><el-button
            size="mini"
            v-if="newSujectApis.length > 0"
            @click="sujectApis = []"
            >清空</el-button
          >
          <!-- <span v-if="newSujectApis.length === 0">未选项目类型</span> -->
        </el-form-item>
        <el-form-item label="讲义标题" prop="handoutsName">
          <el-input v-model="listData.handoutsName"></el-input>
        </el-form-item>
        <el-form-item label="是否可下载" prop="canDownload">
          <el-radio-group v-model="listData.canDownload">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否发布" prop="status">
          <el-radio-group v-model="listData.status">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="讲义文件">
          <div class="handoutList">
            <label for="uplose"><span class="primary_btn">添加pdf</span></label>
            <input
              ref="file"
              type="file"
              style="display: none"
              id="uplose"
              @change="getImgFile"
              multiple
            />
            <span style="margin-left: 10px"
              >注：只能上传PDF文件，且不超过100MB</span
            >
            <ul>
              <li v-for="(item, index) in fileList" :key="index">
                <el-input-number
                  style="width: 60px; margin-right: 10px"
                  size="mini"
                  :precision="0"
                  v-model="item.sort"
                  :min="1"
                  :max="127"
                  label="排序"
                  :controls="false"
                  @blur="sortList"
                ></el-input-number>
                <a :href="item.blob" target="_blank">
                  <img src="@/assets/images/pdf@3x.png" alt="" />
                </a>
                <input class="input_text" v-model="item.urlName" />
                <el-button
                  type="danger"
                  size="mini"
                  style="margin-left: 10px"
                  @click="fileList.splice(index, 1)"
                  >删除</el-button
                >
              </li>
            </ul>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button @click="backPage" size="mini">取消</el-button>
          <el-button
            size="mini"
            type="primary"
            @click="submit('listData')"
            :loading="disabledBtn"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "HandoutListAdd",
  data() {
    return {
      fileList: [],
      // --------------------------------------------
      disabledBtn: false,
      isIndeterminate: false,
      checkAll: false,
      //   弹窗数据
      changeHeight: true,
      listData: {
        handoutsUrl: undefined,
        urlName: undefined,
      },
      eduTypeOptions: [], //教育类型数据
      projectTypeOptions: [], //项目类型数据
      courTypeOptions: [], //业务层次数据
      newCourTypeOptions: [], //当前业务层次数据
      sujectOption: [], //科目数据
      newSujectOption: [], //当前科目数据数据
      eduType: "", //当前选中教育类型
      courType: "", //当前选中业务层次
      sujectApis: [], //当前存在的科目
      newSujectApis: [],
      sujectArray: [], //选中的科目
      localData: [],
      //表单验证
      rules: {
        handoutsName: [
          { required: true, message: "请输入讲义标题", trigger: "blur" },
        ],
        canDownload: [
          { required: true, message: "请选择是否可下载", trigger: "change" },
        ],
        status: [
          { required: true, message: "请选择是否发布", trigger: "change" },
        ],
      },
    };
  },
  watch: {
    sujectApis: {
      immediate: true,
      handler(newName, oldName) {
        this.changeTypes();
      },
    },
  },
  mounted() {
    this.localData = this.$methodsTools.getBusinessList();
    this.getDict();
  },
  methods: {
    unTime(val) {
      let a = `${val.businessId}-${val.subjectId}`;
      if (this.sujectApis.includes(a)) {
        this.sujectApis.splice(this.sujectApis.indexOf(a), 1);
      } else {
        this.sujectApis.push(a);
      }
    },
    changeSty(val) {
      var arr = "";
      this.sujectApis.forEach((item) => {
        let arr1 = item.split("-").map(Number);
        if (val.businessId == arr1[0] && val.subjectId == arr1[1]) {
          arr = "activeStyIcons";
        }
      });
      return arr;
    },
    handleCheckedCitiesChange() {
      let nid = this.newSujectOption.map((item) => {
        return item.newId;
      });
      this.checkAll = this.sujectArray.length === nid.length;
      this.isIndeterminate =
        this.sujectArray.length > 0 && this.sujectArray.length < nid.length;
    },
    setFunc(arr) {
      var arrays = [];
      for (let i = 0; i < arr.length; i++) {
        if (!arrays.includes(arr[i])) {
          arrays.push(arr[i]);
        }
      }
      return arrays;
    },
    handleCheckAllChange(val) {
      if (val) {
        let nid = this.newSujectOption.map((item) => {
          return item.newId;
        });
        let arrays = this.sujectArray.concat(nid);
        this.sujectArray = this.setFunc(arrays);
        this.isIndeterminate = false;
      } else {
        let nid = this.newSujectOption.map((item) => {
          return item.newId;
        });
        let newArr = [];
        this.sujectArray.forEach((item) => {
          if (!nid.includes(item)) {
            newArr.push(item);
          }
        });
        this.sujectArray = newArr;
        this.isIndeterminate = false;
      }
    },
    changeTypes() {
      var self = this;
      var arrays = [];
      this.sujectApis.map((item, index) => {
        this.courTypeOptions.map((items) => {
          if (items.id === item.split("-").map(Number)[0]) {
            var obj = {
              educationId: items.educationId,
              educationName: items.educationName,
              projectId: items.projectId,
              projectName: items.projectName,
              businessId: items.id,
              businessName: items.businessName,
            };
            self.sujectOption.map((i) => {
              if (
                i.id === item.split("-").map(Number)[1] &&
                i.courseArrays.indexOf(items.projectId) !== -1
              ) {
                obj.subjectName = i.subjectName;
                obj.subjectId = i.id;
              }
            });
            arrays.push(obj);
          }
        });
      });
      this.newSujectApis = arrays;
    },
    changeType() {
      this.changeHeight = !this.changeHeight;
    },
    submitSujectArray() {
      var self = this;
      this.sujectApis = this.sujectApis.filter((item, index) => {
        return item.split("-").map(Number)[0] !== Number(self.courType);
      });
      for (let i = 0; i < this.sujectArray.length; i++) {
        this.sujectApis.push(this.sujectArray[i]);
      }
      this.$refs.popovers.doClose();
    },
    showHandle() {
      var array = [];
      for (let i = 0; i < this.sujectApis.length; i++) {
        if (
          this.sujectApis[i].split("-").map(Number)[0] === Number(this.courType)
        ) {
          array.push(this.sujectApis[i]);
        }
      }
      this.sujectArray = array;
      if (!this.newSujectOption.length) {
        this.$message.warning("该业务层次暂无关联科目");
        this.$refs.popovers.doClose();
        return;
      }
      this.newSujectOption.map((item) => {
        item.newId = this.courType + "-" + item.id;
      });
      this.handleCheckedCitiesChange();
    },
    hideHandle() {},
    getDict() {
      this.$api.inquireCourseEducationType({ status: 1 }).then((res) => {
        this.eduTypeOptions = res.rows;
      });
      this.$api.inquireCourseProjectType({ status: 1 }).then((res) => {
        this.projectTypeOptions = res.rows;
      });
      this.$api.inquirebusinessList({ status: 1 }).then((res) => {
        this.courTypeOptions = res.rows;
        this.newCourTypeOptions = res.rows;
      });
      this.$api.inquireCourseSubject({ status: 1 }).then((res) => {
        res.rows.map((item, index) => {
          var array = [];
          item.courseProjectTypes.map((items, indexs) => {
            array.push(items.id);
          });
          item.courseArrays = array;
        });
        this.sujectOption = res.rows;
      });
    },
    changeEduType() {
      if (!(this.courType === undefined || this.courType === "")) {
        this.courType = "";
      }
      var arrays = [];
      this.courTypeOptions.map((item) => {
        if (item.educationId === this.eduType) {
          arrays.push(item);
        }
      });
      this.newCourTypeOptions = arrays;
    },
    changecourseType() {
      this.newCourTypeOptions.map((item, index) => {
        if (item.id === this.courType) {
          this.eduType = item.educationId;
          var array = [];
          this.sujectOption.map((items, indexs) => {
            if (items.courseArrays.indexOf(item.projectId) !== -1) {
              array.push(items);
            }
          });
          this.newSujectOption = array;
        }
      });
      var arrays = [];
      this.courTypeOptions.map((item) => {
        if (item.educationId === this.eduType) {
          arrays.push(item);
        }
      });
      this.newCourTypeOptions = arrays;
      this.$refs.popovers.doClose();
    },
    clearImgs() {
      this.listData.handoutsUrl = undefined;
      this.listData.urlName = undefined;
    },
    async submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.rulesTableSumbit();
        } else {
          return false;
        }
      });
    },
    async rulesTableSumbit() {
      var dataInfos = {
        handoutsName: this.listData.handoutsName,
        courseHandoutsBusinessAddBos: this.newSujectApis,
        status: this.listData.status,
        canDownload: this.listData.canDownload,
        coverUrl: this.listData.coverUrl,
      };
      if (this.fileList.length) {
        const hasSort = this.fileList.every((item) => {
          return item.sort >= 0 && item.urlName.length > 0;
        });
        if (hasSort) {
          let array = [];
          let stop = false; //控制上下文执行
          for (let i = 0; i < this.fileList.length; i++) {
            array.push(
              new Promise((resolve, reject) => {
                this.$upload
                  .upload(this.fileList[i].file, 6)
                  .then((res) => {
                    this.$set(this.fileList[i], "url", res);
                    resolve();
                  })
                  .catch((err) => {
                    this.$message.error(`第${i}个文件上传失败`);
                    reject();
                  });
              })
            );
          }
          await Promise.all(array)
            .then(() => {
              stop = false;
              console.log("成功");
            })
            .catch(() => {
              stop = true;
              console.log("失败");
            });
          if (stop) {
            return;
          }
        } else {
          this.$message.warning("排序与文件名不允许为空");
          return;
        }
      }
      dataInfos["fileList"] = this.fileList;
      this.disabledBtn = true;
      this.$api
        .addCourseHandouts(dataInfos)
        .then((res) => {
          this.$methodsTools.cacheBusinessList(this.newSujectApis);
          this.$message.success("新增成功");
          setTimeout(() => {
            this.$store
              .dispatch("tagsView/exitView", this.$route)
              .then((res) => {
                this.$router.push({
                  path: "handoutList",
                });
              });
          }, 500);
        })
        .catch(() => {
          this.disabledBtn = false;
        });
    },
    backPage() {
      this.$store.dispatch("tagsView/delView", this.$route).then((res) => {
        this.$router.push({
          path: "handoutList",
        });
      });
    },
    closeType(index) {
      this.sujectApis.splice(index, 1);
    },
    getImgFile(e) {
      var fileArry = [];
      for (let i = 0; i < e.target.files.length; i++) {
        fileArry.push(e.target.files[i]);
      }
      console.log(fileArry);
      var self = this;
      for(let i = 0; i < fileArry.length;i++){
      var file = fileArry[i]
      if (file === undefined) {
        // self.$set(self.listData, "handoutsUrl", "");
        return;
      }
      if (file.size > 100 * 1024 * 1024) {
        self.$message.error("pdf文件不得大于100MB");
        return;
      }
      var type = file.name.toLowerCase().split(".").splice(-1);
      if (type[0] != "pdf") {
        self.$message.error("上传格式需为：.pdf");
        // self.$refs.file.value = "";
        return;
      }
      const imgURL = window.URL.createObjectURL(file);
      self.fileList.push({
        blob: imgURL,
        url: "",
        file: file,
        status: 1,
        urlName: file.name,
        sort: self.backNowMathMax(),
      });
      }
      e.target.value = "";
    },
    //返回当前数组sort最大值+1,用于自动sort排序
    backNowMathMax() {
      if (this.fileList.length) {
        let list = this.fileList.map((item) => {
          if (item.sort >= 0) {
            return Number(item.sort);
          } else {
            return 0;
          }
        });
        return Math.max(...list) + 1;
      } else {
        return 1;
      }
    },

    //排序
    sortList() {
      this.fileList = this.fileList.sort((a, b) => {
        if (a.sort >= 0 && b.sort >= 0) {
          return a.sort - b.sort;
        } else {
          this.$message.warning("请完善排序号码");
        }
      }); //升序
    },
  },
};
</script>

<style lang="less" scoped>
.boxWidth {
  width: 700px;
}
.numInputs {
  width: 150px;
}
.checkboxSty {
  max-height: 210px;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.listBoxStys {
  flex-shrink: 0;
  padding: 0px 10px;
  border-radius: 8px;
  border: 1px solid #eee;
  margin-right: 10px;
  margin-bottom: 6px;
}
.closeIcons {
  color: red;
  cursor: pointer;
  margin-left: 6px;
}
.ach {
  display: flex;
  align-items: center;
  overflow: hidden;
}
.clh {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.handoutList {
  & > ul {
    max-height: 500px;
    overflow: auto;
    & > li {
      display: flex;
      align-items: center;
      margin-bottom: 6px;
      a {
        display: inherit;
      }
      img {
        height: 28px;
        width: 20px;
        cursor: pointer;
        transition: all 0.3s;
        margin-right: 10px;
        &:hover {
          transform: scale(1.05);
        }
      }
      .input_text{
        height: 28px;
      }
    }
  }
}

.primary_btn {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-color: #dcdfe6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  font-weight: 400;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
  padding: 7px 15px;
  font-size: 12px;
  border-radius: 3px;
  color: #ffffff;
  background-color: #1890ff;
  border-color: #1890ff;
}
</style>
