<template>
  <div id="poppleSet">
    <el-dialog
      :visible.sync="dialogVisible"
      width="60%"
      @open="openExpand"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">试做设置</div>
        <div class="rightBoxs">
          <img
            src="@/assets/images/Close@2x.png"
            alt=""
            @click="dialogVisible = false"
          />
        </div>
      </div>
      <div style="text-align: end">
        <el-button type="text" @click="inits">重置</el-button>
      </div>
      <el-tree
        ref="trees"
        :data="datas"
        :props="layoutTreeProps"
        :load="loadNode"
        lazy
        :default-checked-keys="audition"
        :show-checkbox="true"
        :check-strictly="true"
        @check-change="getCheckedKeys"
        node-key="TypeId"
      >
        <span class="custom-tree-node" slot-scope="{ node }">
          <span>{{ node.label }}</span>
          <span v-if="node.checked"
            >试做前
            <el-input-number
              v-model="node.data.num"
              controls-position="right"
              :min="0"
              :precision="0"
              :controls="false"
              size="mini"
              style="width: 80px"
              :max="node.data.questionNum"
              @blur="changeNum(node.data)"
            ></el-input-number
            >道题</span
          >
        </span>
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitTable">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["tableData", "examConfigList"],
  data() {
    return {
      copyData: [],
      datas: [],
      audition: [],
      examConfigListCope: [],
      dialogVisible: false,
      layoutTreeProps: {
        label(data, node) {
          return data.name || data.menuName;
        },
        isLeaf(data, node) {
          return !data.hasChildren;
        },
      },
    };
  },
  methods: {
    changeNum(v) {
      if (v.num === 0) {
        this.$message.warning("当前试卷总题数为0");
      }
    },
    inits() {
      this.datas = JSON.parse(JSON.stringify(this.copyData));
    },
    openExpand() {
      if (this.examConfigList) {
        this.examConfigListCope = JSON.parse(
          JSON.stringify(this.examConfigList)
        );
        var arrays = [];
        this.examConfigList.map((item) => {
          arrays.push(item.TypeId);
        });
        this.$nextTick(() => {
          this.audition = arrays;
        });
      }
      this.$nextTick(() => {
        this.inits();
      });
    },
    getCheckedKeys(item, node) {
      if (item.TypeId.split("-")[0] != "3") {
        return;
      }
      if (node && this.audition.indexOf(item.TypeId) == -1) {
        this.audition.push(item.TypeId);
      }
      if (!node && this.audition.indexOf(item.TypeId) !== -1) {
        this.audition.splice(this.audition.indexOf(item.TypeId), 1);
      }
      if (node) {
        var sta = this.examConfigListCope.some((items) => {
          return items.TypeId == item.TypeId;
        });
        if (!sta) {
          this.examConfigListCope.push({
            TypeId: item.TypeId,
            num: item.num,
            chapterExamId: item.chapterExamId || undefined,
            moduleExamId: item.moduleExamId || undefined,
            examId: item.examId,
          });
        }
      } else {
        this.examConfigListCope.map((items, indexs) => {
          if (items.TypeId == item.TypeId) {
            this.examConfigListCope.splice(indexs, 1);
          }
        });
      }
    },
    submitTable() {
      // if (!this.examConfigListCope.length) {
      //   this.$message.warning("请勾选至少一张试卷的试做内容");
      //   return;
      // }
      var arrays = this.$refs.trees.getCheckedNodes();
      for (let i = 0; i < arrays.length; i++) {
        for (let j = 0; j < this.examConfigListCope.length; j++) {
          if (arrays[i].TypeId === this.examConfigListCope[j].TypeId) {
            this.examConfigListCope[j].num = arrays[i].num;
          }
          if (this.examConfigListCope[j].num === 0) {
            this.$message.warning("不允许设置试做数为0，请重新输入");
            return;
          }
        }
      }
      // var list = this.$refs.trees.getCheckedNodes();
      // this.examConfigListCope.map((item) => {
      //   if (!item.num) {
      //     list.map((items) => {
      //       if (items.TypeId == item.TypeId) {
      //         item.num = items.num;
      //       }
      //     });
      //   }
      // });
      this.$emit("uploadArrays", this.examConfigListCope);
      this.dialogVisible = false;
    },
    loadNode(node, resolve) {
      var self = this;
      if (node.level === 0) {
        this.tableData.map((item) => {
          if (item.type === 1) {
            item.TypeId = item.type + "-" + item.moduleExamId;
          }
          if (item.type === 2) {
            item.TypeId = item.type + "-" + item.chapterExamId;
          }
          if (item.type === 3) {
            item.TypeId = item.type + "-" + item.examId;
            item.num = item.questionNum;
            if (self.examConfigList) {
              self.examConfigList.map((items) => {
                if (items.TypeId === item.TypeId) {
                  item.num = items.num;
                }
              });
            }
          }
          if (item.type === 3) {
            item.disabled = false;
            item.hasChildren = false;
          } else {
            item.disabled = true;
            item.hasChildren = true;
          }
        });
        this.copyData = JSON.parse(JSON.stringify(this.tableData));
        return resolve(this.tableData);
      } else {
        if (node.data.type === 1) {
          this.$api
            .inquireBankchapterModule({ moduleExamId: node.data.moduleExamId })
            .then((res) => {
              res.data.map((item) => {
                item.TypeId =
                  "2" + "-" + node.data.moduleExamId + "-" + item.chapterExamId;
                item.moduleExamId = node.data.moduleExamId;
                item.hasChildren = true;
                item.disabled = true;
                item.type = 2;
              });
              return resolve(res.data);
            });
        } else if (node.data.type === 2) {
          this.$api
            .inquirebankchapterexamList({
              chapterExamId: node.data.chapterExamId,
            })
            .then((res) => {
              res.data.map((item) => {
                if (node.data.moduleExamId) {
                  item.TypeId =
                    "3" +
                    "-" +
                    node.data.moduleExamId +
                    "-" +
                    node.data.chapterExamId +
                    "-" +
                    item.examId;
                } else {
                  item.TypeId =
                    "3" + "-" + node.data.chapterExamId + "-" + item.examId;
                }
                item.name = item.examName;
                item.num = item.questionNum;
                item.moduleExamId = node.data.moduleExamId;
                item.chapterExamId = node.data.chapterExamId;
                if (self.examConfigList) {
                  self.examConfigList.map((items) => {
                    if (items.TypeId === item.TypeId) {
                      item.num = items.num;
                    }
                  });
                }
                item.hasChildren = false;
              });
              return resolve(res.data);
            });
        } else if (node.data.type === 3) {
          return resolve([]);
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-tree-node__content {
  height: 35px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
