<template>
  <div class="knowledge-points">
    <!-- <el-button type="primary" @click="showDialog = true" class="choose"
      >选择知识点</el-button
    > -->
    <div class="bind-knowledge" @click="showDialog = true">
      <i class="el-icon-link" style="font-size: 16px"></i>
      <span>绑定知识点</span>
    </div>

    <el-dialog
      :visible.sync="showDialog"
      title="绑定知识点"
      top="5vh"
      width="640px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      destroy-on-close
      @open="whenOpen"
      custom-class="knowledge-dialog"
    >
      <el-tree
        ref="tree"
        :data="treeData"
        node-key="id"
        :props="defaultProps"
        highlight-current
        show-checkbox
        check-strictly
        default-expand-all
        @check="check"
        ><span
          slot-scope="{ data }"
          :class="{ 'node-level-one': !data.parentId }"
        >
          <span>{{ data.name }}({{ data.code }})</span>
        </span></el-tree
      >

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm">确定</el-button>
        <el-button type="danger" plain @click="showDialog = false"
          >取消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { QUESTION_API } from "@/constants/constants";
import { cloneDeep } from "lodash";
export default {
  name: "KnowledgePoints",
  props: {
    courseId: { type: [String, Number] },
    checkedProperties: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      treeData: [],
      checkedIds: [],
      showDialog: false,
      defaultProps: {
        children: "propertyList",
      },
      quesProperties: [],
    };
  },
  methods: {
    getTreeData() {
      this.$http
        .post(
          QUESTION_API + "/property/all/by/course?courseId=" + this.courseId
        )
        .then((res) => {
          res.data.propertys.forEach((item) => {
            item.propertyList = item.propertyList.map((v) => {
              v.parentName = item.name;
              return v;
            });
            return item;
          });
          this.treeData = res.data.propertys;
        });
    },
    check(obj, { checkedNodes }) {
      let copyCheckedNodes = cloneDeep(checkedNodes);
      this.checkedIds = copyCheckedNodes.map((item) => item.id);
      // let usedIds = [];
      // let firstNodes = checkedNodes.filter((item) => item.parentId == 0);
      // let secondNodes = checkedNodes.filter((item) => item.parentId != 0);
      // this.quesProperties = [];
      // for (let i = 0; i < firstNodes.length; i++) {
      //   let fNode = firstNodes[i];
      //   let firstProperty = { id: fNode.id, name: fNode.name };
      //   let secondProperty = secondNodes.filter(
      //     (item) => item.parentId == fNode.id
      //   );
      //   let obj = { firstProperty };
      //   usedIds.push(firstProperty.id);
      //   if (secondProperty.length) {
      //     obj.secondProperty = secondProperty.map((item) => ({
      //       id: item.id,
      //       name: item.name,
      //     }));
      //     usedIds.push(...obj.secondProperty.map((item) => item.id));
      //   }
      //   this.quesProperties.push(obj);
      // }
      // let onlySecondNodes = copyCheckedNodes.filter(
      //   (item) => !usedIds.find((id) => id == item.id)
      // );
      // let map = {};
      // onlySecondNodes.forEach((item) => {
      //   if (!map[item.parentId]) {
      //     map[item.parentId] = [cloneDeep(item)];
      //   } else {
      //     map[item.parentId].push(cloneDeep(item));
      //   }
      // });
      // let groups = Object.values(map);
      // for (let j = 0; j < groups.length; j++) {
      //   let group = groups[j];
      //   this.quesProperties.push({
      //     secondProperty: group.map((v) => ({ id: v.id, name: v.name })),
      //   });
      // }

      this.quesProperties = copyCheckedNodes.map((item) => {
        if (item.parentId == 0) {
          return { firstProperty: { id: item.id, name: item.name } };
        } else {
          return {
            firstProperty: { id: item.parentId, name: item.parentName },
            secondProperty: { id: item.id, name: item.name },
          };
        }
      });
      console.log("this.quesProperties", this.quesProperties);
    },
    confirm() {
      this.$emit("change", cloneDeep(this.quesProperties));
      this.showDialog = false;
    },
    whenOpen() {
      this.getTreeData();
    },
  },
  watch: {
    // courseId(cId) {
    //   this.getTreeData(cId);
    // },
    treeData() {
      this.$nextTick(() => {
        // if (this.checkedIds.length) {
        //   this.$refs.tree.setCheckedKeys(this.checkedIds);
        // }
        if (this.checkedProperties.length) {
          console.log("this.checkedProperties", this.checkedProperties);
          let ids = [];
          for (let i = 0; i < this.checkedProperties.length; i++) {
            let obj = this.checkedProperties[i];
            if (obj.firstProperty && obj.secondProperty) {
              ids.push(obj.secondProperty.id);
            } else {
              ids.push(obj.firstProperty.id);
            }
          }
          console.log("ids", ids);
          this.$refs.tree.setCheckedKeys(Array.from(new Set(ids)));
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.knowledge-points {
  .bind-knowledge {
    color: #6d5ff6;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    span {
      font-size: 14px;
      margin-left: 3px;
    }
  }
  :deep(.choose) {
    span {
      display: inline !important;
    }
  }
}
:deep(.knowledge-dialog) {
  .el-dialog__body {
    max-height: calc(95vh - 125px);
    overflow: auto;
  }
}
</style>
