<template>
    <div style="height: 200px; width: 350px">
      <el-tree
        ref="eltree"
        :data="treeData"
        :props="defaultProps"
        node-key="id"
        default-expand-all
        @node-click="handleNodeClick"
        :current-node-key="currentLivingId"
        :render-content="isUpdateGroup ? updateRenderContent : renderContent"
      >
      </el-tree>
    </div>
</template>

data() {
    return {
      currentLivingId: "",
      treeData: [
        {
          createTime: null,
          flag: "1",
          id: "49d117e56c5d4df0be61451dbccb27d8",
          isGrade: null,
          level: "0",
          month: null,
          name: "父節(jié)點(diǎn)",
          parentId: "-1",
          partId: null,
          sort: 3,
          subList: [
            {
              createTime: null,
              flag: "1",
              id: "b19747602f9b47d7b0f4a90528d3674c",
              isGrade: null,
              level: "1",
              month: null,
              name: "子節(jié)點(diǎn)1",
              parentId: "49d117e56c5d4df0be61451dbccb27d8",
              partId: null,
              sort: 1,
              subList: [
                {
                  createTime: null,
                  flag: "1",
                  id: "b19747602f9b47d7b0f4a90528d3624c",
                  isGrade: null,
                  level: "2",
                  month: null,
                  name: "子節(jié)點(diǎn)1-1",
                  parentId: "b19747602f9b47d7b0f4a90528d3674c",
                  partId: null,
                  sort: 1,
                  subList: [],
                  year: null,
                },
              ],
              year: null,
            },
            {
              createTime: null,
              flag: "1",
              id: "9da8ccb4513f4cd383c8185b052937d3",
              isGrade: null,
              level: "1",
              month: null,
              name: "子節(jié)點(diǎn)2",
              parentId: "49d117e56c5d4df0be61451dbccb27d8",
              partId: null,
              sort: 2,
              subList: [],
              year: null,
            },
            {
              createTime: null,
              flag: "1",
              id: "a4c8bbf1be434ea6aca1eb51ef55c69a",
              isGrade: null,
              level: "1",
              month: null,
              name: "子節(jié)點(diǎn)3",
              parentId: "49d117e56c5d4df0be61451dbccb27d8",
              partId: null,
              sort: 3,
              subList: [],
              year: null,
            },
          ],
          year: null,
        },
      ], //樹返回的數(shù)據(jù)
      defaultProps: { children: "subList", label: "name" }, //接受的格式
      isUpdateGroup: false, //是否新增
      isact: "", //當(dāng)前hover的節(jié)點(diǎn)
      isBreak: false, //是否結(jié)束循環(huán)
      curNode: undefined, //當(dāng)前選中節(jié)點(diǎn)
      indexRecord: [], //記錄節(jié)點(diǎn)軌跡
      isactTitle: "", //記錄修改節(jié)點(diǎn)名稱
    };
  },
  methods: {
    //獲取鼠標(biāo)進(jìn)入節(jié)點(diǎn)的數(shù)據(jù)
    mouseenteract(data) {
      this.isact = data;
    },
    mouseleaveact(da) {
      this.isact = "";
    },
    // 樹節(jié)點(diǎn)點(diǎn)擊
    handleNodeClick(data, e) {
      // 臨時(shí)添加數(shù)據(jù) temporaryData 是1 return 防止觸發(fā)其他事件
      if (data.temporaryData == 1) {
        return;
      }
      this.node = data;
      this.curNode = data; //當(dāng)前選中節(jié)點(diǎn)
    },
    //修改組名時(shí)獲取title
    handleChangeTitle(e) {
      let value = e.target.value;
      this.isactTitle = value;
    },
    updateRenderContent(h, { node, data, store }) {
      return (
        <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; padding-right: 8px;">
          <span>
            {this.isact == data ? (
              <input
                placeholder="請輸入"
                onChange={this.handleChangeTitle.bind(this)}
                value={node.label}
                id="userInfo"
              />
            ) : (
              <span>{node.label}</span>
            )}
          </span>
          {this.isact == data ? (
            <span>
              <el-button
                class="m-r-10"
                type="text"
                icon="el-icon-check"
                on-click={() => this.updateGroup(node, data)}
              ></el-button>
              <el-button
                class="m-r-10"
                type="text"
                icon="el-icon-close"
                on-click={(e) => this.cancelUpdate(node, data, e)}
              ></el-button>
            </span>
          ) : (
            <span></span>
          )}
        </span>
      );
    },
    // 新增樹子節(jié)點(diǎn)
    updateGroup(node, data) {
      if (this.isactTitle.trim() == "") {
        this.$message.warning("名稱不能為空");
        return;
      }
      var params = {
        id: data.id,
        flag: "1",
        name: this.isactTitle,
        level: "2",
        parentId: data.parentId || "-1",
        sort: data.sort,
        partId: data.partId,
      };
      var newNode = {
        id: data.id,
        flag: "1",
        name: this.isactTitle,
        level: "2",
        parentId: data.parentId || "-1",
        sort: data.sort,
      };
      console.log(params);
      // 這塊調(diào)用新增樹子組件的接口
      addUnitPerformanceCustom(params).then((res) => {
        if (res) {
          if (res.data.code == 0) {
            this.node = newNode;
            this.curNode = newNode; //當(dāng)前選中節(jié)點(diǎn)
            // 更新樹組件接口
            this.$emit("getTreeListData", newNode);
            this.isUpdateGroup = false;
            this.$notify.success({ title: "成功", message: res.data.data });
          } else {
            this.$notify.error({
              title: "失敗",
              message: "增加失敗",
            });
          }
        } else {
          this.$notify.error({ title: "失敗", message: "系統(tǒng)異常" });
        }
      });
    },
    //取消添加
    cancelUpdate(node, data, e) {
      this.isUpdateGroup = false;
      //如果是插入操作 需要移除數(shù)據(jù)
      if (this.isact.temporaryData) {
        // //存在則添加到子級
        const parent = node.parent;
        const children = parent.data.subList || parent.data;
        //若parent.data是對象，操作的是子級；如果是數(shù)組，操作的是最外層
        if (Array.isArray(parent.data)) {
          const parentIndex = parent.data.findIndex((d) => d.id === data.id);
          parent.data.splice(parentIndex, 1);
        } else {
          const childIndex = children.findIndex((d) => d.id === data.id);
          children.splice(childIndex, 1);
        }
        this.curNode = undefined;
      }
      //更新樹節(jié)點(diǎn)數(shù)據(jù)
      this.$emit("getTreeListData");
    },
    // 刪除子節(jié)點(diǎn)
    handleDelete(node, data, e) {
      e.stopPropagation();
      var params = {
        id: data.id,
      };
      // 刪除子節(jié)點(diǎn)接口
      deleteUnitPerformanceCustom(params).then((res) => {
        if (res) {
          if (res.data.code == 0) {
            // 更新樹組件
            this.$emit("getTreeListData");
            this.isUpdateGroup = false;
            this.curNode = undefined;
            this.$notify.success({ title: "成功", message: res.data.data });
          } else {
            this.$notify.error({
              title: "失敗",
              message: "刪除失敗",
            });
          }
        } else {
          this.$notify.error({ title: "失敗", message: "系統(tǒng)異常" });
        }
      });
    },
    //遞歸遍歷獲得選中node
    getTemplateTreeNode(target, list, level) {
      //空數(shù)組直接返回
      if (list.length == 0) return;
      let dataLen = list.length;
      for (let i = 0; i < dataLen; i++) {
        //如果不匹配
        if (target != list[i].id) {
          //存在subList 遍歷subList里的節(jié)點(diǎn)
          if (list[i].subList) {
            this.indexRecord[level] = i;
            let recordDept = level + 1;
            this.getTemplateTreeNode(target, list[i].subList, recordDept);
          }
        } else {
          //匹配，則修改下標(biāo)數(shù)組
          this.indexRecord[level] = i;
          this.isBreak = true;
          break;
        }
        //刪除不匹配的軌跡 如果已經(jīng)break了說明已經(jīng)找到正確的節(jié)點(diǎn)，就不用再刪了
        if (!this.isBreak) {
          this.indexRecord.pop();
        } else {
          break;
        }
      }
    },
    //插入節(jié)點(diǎn)
    insertNode(insertChild, tree, indexArr, len) {
      let index = indexArr.length - len;
      if (len == 0) {
        tree.push(insertChild);
      } else {
        this.insertNode(
          insertChild,
          tree[indexArr[index]].subList,
          indexArr,
          len - 1
        );
      }
    },
    //新增組
    handleAddGroup(node, data, e) {
      e.stopPropagation();
      this.curNode = data;
      //如果isUpdateGroup 已經(jīng)是true了 說明重復(fù)點(diǎn)擊了
      if (this.isUpdateGroup) {
        return;
      }
      let id = ([1e7] + 1e3 + 4e3 + 8e3 + 1e11).replace(/[018]/g, (c) =>
        (
          c ^
          (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
        ).toString(32)
      );
      var sort = 0;
      if (data.subList.length == 0) {
        sort = 1;
      } else {
        sort = data.subList[data.subList.length - 1].sort + 1;
      }
      let newChild = {
        parentId: data.id, //如果有這個(gè)id 是插入第二層 否則是第一層 可有可無
        label: "", //必須有 this.templateContent.tempName
        subList: [],
        id: id,
        level: 2,
        sort: sort,
        temporaryData: "1", //用來區(qū)分臨時(shí)數(shù)據(jù)
        flag: 1, //用來區(qū)分臨時(shí)數(shù)據(jù)
        partId: node.parent.data.id,
      };
      this.indexRecord = [];
      if (this.curNode) {
        if (!this.curNode.subList) {
          this.$message.warning("模板不可添加");
          return;
        }
        newChild.parentId = this.curNode.id;
        //找到tree中的index軌跡
        this.getTemplateTreeNode(data.id, this.treeData, 0);
        //按照index軌跡插入節(jié)點(diǎn)
        this.insertNode(
          newChild,
          this.treeData,
          this.indexRecord,
          this.indexRecord.length
        );
        this.isBreak = false;
      } else if (this.curNode == undefined) {
        //沒有選中的時(shí)候 添加到最外層
        newChild.level = 1;
        this.treeData.push(newChild);
      }
      //調(diào)用出updateRender的input
      this.isact = newChild;
      this.isUpdateGroup = true;
      this.$nextTick(() => {
        // 自動(dòng)獲取焦點(diǎn)
        document.getElementById("userInfo").focus();
      });
    },
    // 樹每條數(shù)據(jù)
    renderContent(h, { node, data, store }) {
      return (
        <span
          style="flex: 1; display: flex; align-items: center; justify-content: space-between; padding-right: 8px;"
          on-mouseenter={() => this.mouseenteract(data)}
          on-mouseleave={() => this.mouseleaveact(data)}
        >
          <span style="margin-bottom: 0;" class="pdata">
            {node.label}
          </span>
          {this.isact == data && this.isact.flag == 1 ? (
            <span>
              {this.isact.level == 1 && this.isact.flag == 1 ? (
                <el-button
                  class="m-r-10"
                  type="text"
                  icon="el-icon-plus"
                  on-click={(e) => this.handleAddGroup(node, data, e)}
                ></el-button>
              ) : (
                <span></span>
              )}
              {this.isact.level == 2 && this.isact.flag == 1 ? (
                <el-button
                  type="text"
                  icon="el-icon-delete"
                  on-click={(e) => this.handleDelete(node, data, e)}
                ></el-button>
              ) : (
                <span></span>
              )}
            </span>
          ) : (
            <span></span>
          )}
        </span>
      );
    },
  },