<template>
  <div>
    <div class="tree-box">
      <a-spin :spinning="spinning">
        <a-tree
          v-if="treeData.length>0"
          @select="onSelect"
          :treeData="treeData"
          :load-data="onLoadData"
          :replace-fields="replaceFields"
          :selectedKeys="KnowledgePointIdList"
        >
          <template slot="custom" slot-scope="item">
            <div class="custom-box">
              <a-tooltip
                overlayClassName="custom-title"
                placement="top"
                :title="item.title"
                :get-popup-container="getPopupContainer"
              >
                <span>{{fontSplice(item.title)}}</span>
              </a-tooltip>
              <span class="toolbar">
                <a-popover placement="right">
                  <template slot="content">
                    <div
                      class="blue-hover"
                      style="margin-bottom: 8px;"
                      @click="showModal('add',item)"
                    >
                      <a-icon type="plus" style="margin-right: 8px;" />添加目录
                    </div>
                    <div
                      class="blue-hover"
                      style="margin-bottom: 8px;"
                      @click="showModal('edit',item)"
                    >
                      <a-icon type="form" style="margin-right: 8px;" />修改名称
                    </div>
                    <div class="blue-hover" @click="_KnowledgePointGetDelete(item)">
                      <a-icon type="close" style="margin-right: 8px;" />删除目录
                    </div>
                  </template>
                  <a-icon type="ellipsis" class="blue-hover tool-icon" />
                </a-popover>
              </span>
            </div>
          </template>
        </a-tree>
        <a-empty v-else />
      </a-spin>
    </div>
    <EditPointsMenus ref="EditPointsMenus" />
  </div>
</template>
<script>
import EditPointsMenus from "./EditPointsMenus.vue";
import { KnowledgePointGetList, KnowledgePointGetDelete } from "@/api/api";
import { searchOption } from "@/utils/tools";
export default {
  props: ["activeSubject"],
  components: {
    EditPointsMenus
  },
  data() {
    return {
      replaceFields: {
        key: "id",
        title: "name"
      },
      spinning: false,
      treeData: [],
      KnowledgePointIdList: []
    };
  },
  watch: {
    activeSubject(nval) {
      console.log(nval, "66666");
      this._KnowledgePointGetList();
    }
  },
  mounted() {},
  methods: {
    getPopupContainer(trigger) {
      return trigger.parentElement;
    },
    fontSplice(str) {
      if (str.length > 10) return str.slice(0, 10) + "...";
      else return str;
    },
    clearPoints() {
      if (this.KnowledgePointIdList.length == 0) {
        return;
      }
      console.log("知识点清了");
      this.KnowledgePointIdList = [];
    },
    //知识点删除
    _KnowledgePointGetDelete(record) {
      console.log(record, "record");
      let _this = this;
      this.$confirm({
        okText: '确认',
        cancelText: '取消',
        mask: false,
        title: `您确认要删除"${record.name}"知识点吗?`,
        onOk() {
          console.log(record.id, "record.id");
          console.log(_this.KnowledgePointIdList, "KnowledgePointIdList");
          _this.spinning = true;
          let data = {
            id: record.id
          };
          KnowledgePointGetDelete(data)
            .then(res => {
              console.log(record.dataRef, "record.dataRef");
              console.log(_this.treeData, "_this.treeData");
              searchOption(record.dataRef, _this.treeData);
              _this.treeData = [..._this.treeData];
              _this.$message.success("删除成功！");
              let num = _this.KnowledgePointIdList.indexOf(record.id);
              if (num > -1) {
                _this.KnowledgePointIdList.splice(num, 1);
                let data = {
                  KnowledgePointIdList: _this.KnowledgePointIdList
                };
                _this.$emit("getQuestion", data);
              }
              _this.spinning = false;
            })
            .catch(err => {
              _this.spinning = false;
            });
        }
      });
    },
    //增加，修改章节
    showModal(type, record = {}) {
      this.$refs.EditPointsMenus.showModal(type, record);
    },
    //知识点列表
    _KnowledgePointGetList() {
      this.spinning = true;
      let data = {
        ParentId: "",
        DisciplineId: this.activeSubject.id, //学科id
        KeyWord: "",
        SkipCount: 0,
        MaxResultCount: 99999
      };
      KnowledgePointGetList(data)
        .then(res => {
          console.log(res, "知识点章节树");
          this.treeData = res.items.map(item => {
            if (!item.hasChild) {
              item.isLeaf = true;
            }
            let obj = {
              key: item.id,
              title: item.name,
              scopedSlots: { title: "custom" },
              ...item
            };
            return obj;
          });
          this.spinning = false;
          console.log(this.treeData, "this.treeData ");
        })
        .catch(err => {
          this.spinning = false;
        });
    },
    onLoadData(treeNode) {
      console.log(treeNode, "treeNode");
      return new Promise(resolve => {
        if (treeNode.dataRef.children) {
          resolve();
          return;
        }
        this.spinning = true;
        let data = {
          ParentId: treeNode.dataRef.id,
          DisciplineId: this.activeSubject.id,
          KeyWord: "",
          SkipCount: 0,
          MaxResultCount: 99999
        };
        KnowledgePointGetList(data)
          .then(res => {
            treeNode.dataRef.children = res.items.map(item => {
              if (!item.hasChild) {
                item.isLeaf = true;
              }
              let obj = {
                key: item.id,
                title: item.name,
                scopedSlots: { title: "custom" },
                ...item
              };
              return obj;
            });
            this.treeData = [...this.treeData];
            this.spinning = false;
            resolve();
          })
          .catch(err => {
            this.spinning = false;
          });
      });
    },
    loadChild(record) {
      console.log(record, "record66666");
      this.spinning = true;
      let data = {
        ParentId: record.id || "", //父级知识点id
        DisciplineId: this.activeSubject.id,
        KeyWord: "",
        SkipCount: 0,
        MaxResultCount: 99999
      };
      KnowledgePointGetList(data)
        .then(res => {
          console.log(res, "子节点66");
          if (res.totalCount > 0) {
            record.dataRef.isLeaf = false;
          }
          record.dataRef.children = res.items.map(item => {
            if (!item.hasChild) {
              item.isLeaf = true;
            }
            let obj = {
              key: item.id,
              title: item.name,
              scopedSlots: { title: "custom" },
              ...item
            };
            return obj;
          });
          this.treeData = [...this.treeData];
          console.log(this.treeData, "treeData");
          this.spinning = false;
        })
        .catch(err => {
          this.spinning = false;
        });
    },
    onSelect(selectedKeys) {
      console.log(selectedKeys, "selectedKeys");
      // console.log(this.$parent.pagination, '$parent.pagination')
      let data = {
        KnowledgePointIdList: selectedKeys
      };
      this.KnowledgePointIdList = data.KnowledgePointIdList;
      this.$emit("getQuestion", data);
      this.$emit("clearChapter");
    }
  }
};
</script>
<style scoped>
.active-btn {
  color: #fff;
  background-color: #1980ff;
}

.tree-box {
  width: 100%;
  min-height: 200px;
  overflow-x: auto;
}

::v-deep .custom-title{
    /* background-color: red; */
    font-size: 1px;
}

.drop-down-item {
  padding: 0 6px;
  border-radius: 2px;
  margin-bottom: 6px;
  cursor: pointer;
}

.drop-down-item:hover:not(.active-btn) {
  color: rgb(24, 144, 255);
}

.toolbar {
  position: absolute;
  right: 10px;
  margin-top: 0px;
  border: none;
  font-size: 16px;
  font-weight: bold;
}

.tool-icon {
  font-size: 20px;
}
</style>