<template>
  <div class="ztreebox">
    <div v-if="editEnable" class="searchContainer">
      <el-input
        v-model="searchtext"
        class="searchinput"
        type="text"
        size="small"
        @focus="showMenu"
      />
      <el-button
        size="small"
 

        type="primary"
        style="width: 25%;"
        @click="searchFun"
        >搜尋</el-button
      >
    </div>

    <ul id="treeDemo" class="ztree" />
    <el-row>
      <el-col :span="12">
        <el-button
          icon="el-icon-plus"
          size="mini"
 

          type="text"
          @click="addRoot"
          v-if="editEnable"
          >新增根節點</el-button
        >
      </el-col>
    </el-row>
    <div v-show="isShow">沒有找到哦~</div>
  </div>
</template>
<script>
import $ from "jquery";
window.$ = $;
window.jQuery 
 
= $;
import "../plugin/ztreeJS/js/jquery.ztree.core";
import "../plugin/ztreeJS/js/jquery.ztree.excheck";
import "../plugin/ztreeJS/js/jquery.ztree.exedit";
import "../plugin/ztreeJS/js/jquery.ztree.exhide.js";
export default {
  $,
  props: {
    zNodes: {
      type: Array,
      default: () => [],
    },
    editEnable: {
      type: Boolean,
      default: false,
    },
    disabledId: {
      type: String,
      default: "",
    },
    status: Boolean,
    // selectedNodeId: ''
  },
  data() {
    return {
      selectedNode: {},
      setting: {
        treeId: "id", // 節點id
        view: {
          showIcon: false,
          addDiyDom: this.addDiyDom,
          addHoverDom: this.editEnable ? this.addHoverDom : "",
          removeHoverDom: this.editEnable ? this.removeHoverDom : "",
          selectedMulti: false,
        },
        edit: {
          enable: this.editEnable, // 根據條件判斷是否顯示編輯刪除按鈕
          editNameSelectAll: true, // 編輯名稱 input 初次顯示時,設定 txt 內容是否為全選狀態
          removeTitle: "刪除",
          renameTitle: "重新命名",
        },
        data: {
          key: {
            name: "name", //
            children: "children", //zTree 節點資料中儲存子節點資料的屬性名稱。
            isParent: "isParent", //zTree 節點資料儲存節點是否為父節點的屬性名稱。
          },
          keep: {
            parent: true,
            leaf: true,
          },
          simpleData: {
            enable: true, // 顯示層級
            idKey: "id", // 唯一標識的屬性名稱
            parentIdKey: "parentId", // 父節點唯一標識的屬性名稱
            // idPKey: "parentId",
            rootparentId: 0, // 修正根節點父節點資料
          },
        },
        callback: {
          onClick: this.zTreeOnClick,
          onRename: this.zTreeOnRename,
          beforeRemove: this.zTreeBeforeRemove, // 刪除之前的確定操作
          // onRemove: this.zTreeOnRemove,
          beforeClick: this.zTreeBeforeClick,
        },
      },
      searchtext: "",
      isShow: false,
      treeObj: "",
      nodes: [],
      allNodes: [],
      nodesShow: [],
    };
  },
  watch: {
    // 監聽樹節點的變化更新樹
    zNodes: function () {
      this.init();
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    // 初始化ztree
    init() {
      this.treeObj = $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
      // console.log(this.treeObj)
      var nodes = this.treeObj.getNodes();
      // this.treeObj.expandNode(nodes[0]); // 預設展開第一個節點
      this.treeObj.expandAll(true); // 設定全部展開
      this.allNodes = this.queryFun(nodes);
    },
    // 樹節點點選事件
    zTreeOnClick: function (event, treeId, treeNode) {
      this.selectedNode = treeNode;
      this.$emit("treeClick", treeNode);
    },
    // 樹節點編輯名稱回撥 新增節點也會呼叫
    zTreeOnRename(event, treeId, treeNode) {
      // console.log(treeNode);
      this.$emit("editNode", treeNode);
    },
    // 刪除之前
    zTreeBeforeRemove(treeId, treeNode) {
      console.log(treeNode);
      console.log("刪除之前");
      if (treeNode.children.length !== 0) {
        this.$message.warning("該節點存在子節點不能刪除");
        return false;
      } else {
        console.log("queding");
        this.$confirm("此操作將永久刪除該節點, 是否繼續?", "提示", {
          confirmButtonText: "確定",
          cancelButtonText: "取消",
          type: "warning",
        });
        console.log("....");
        this.$emit("removeNode", treeNode); // 真正的刪除
      }
      return false; // 返回false不會自動刪除
    },
    // 新增根節點 -------------------->如果增加根節點，請設定 parentNode 為 null 即可。
    addRoot() {
      let newCount = 1;
      let zTree = $.fn.zTree.getZTreeObj("treeDemo"); //獲取操作 zTree 的各種方法
      let newNode = {
        isParent: true,
        parentNode: null,
        pid: "0",
        name: "new node" + newCount++,
      };
      newNode = zTree.addNodes(null, newNode);
      this.$emit("addRootNode", newNode);
      // zTree.editName(treeNode[0]);
    },
    // 新增子節點
    add(treeId, treeNode) {
      let newCount = 1;
      const zTree = $.fn.zTree.getZTreeObj("treeDemo");
      // 新建的根節點就不能新增子節點，需要先儲存該節點的資訊才能新建子節點。
      if (treeNode.parentNode === null) {
        this.$message.error("請先儲存父節點資訊！");
        return false;
      }
      let PtreeNodeName = treeNode.name;
      if (treeNode) {
        // 之前存在，判斷是否有孩子，有孩子就說明是父節點，沒有孩子就是子節點
        if (treeNode.level === 3) {
          this.$message("分類不能超過四級");
          return;
        } else if (treeNode.level === 2) {
          treeNode = zTree.addNodes(treeNode, {
            parentId: treeNode.id,
            parentName: PtreeNodeName,
            name: "new node" + newCount++,
            newid: "00", // 標識新建的子節點
          });
          // console.log("新增節點：", treeNode);
        } else {
          treeNode = zTree.addNodes(treeNode, {
            isParent: true,
            parentId: treeNode.id,
            parentName: PtreeNodeName,
            name: "new node" + newCount++,
            newid: "00",
          });
          // console.log("新增節點：", treeNode);
        }
      } else {
        // 之前不存在，新生成一個樹節點
        treeNode = zTree.addNodes(null, {
          // id: 100 + newCount,
          isParent: true,
          parentId: 0,
          name: "new node" + newCount++,
          newid: "00",
        });
      }
      // zTree.editName(treeNode[0]);
      this.$emit("addTreeNode", PtreeNodeName, treeNode);
    },
    // 禁用
    disabled(treeNode) {
      console.log("禁用：", treeNode);
      // const zTree = $.fn.zTree.getZTreeObj("treeDemo");
      // 調後端介面
      // zTree.setChkDisabled(treeNode, true); // 設定禁用，僅當setting.check.enable = true 時有效
      this.$emit("disabledNode", treeNode);
    },
    //啟用
    run(treeNode) {
      console.log("啟用", treeNode);
      // const zTree = $.fn.zTree.getZTreeObj("treeDemo");
      // 調後端介面
      // zTree.setChkDisabled(treeNode, true); // 設定禁用，僅當setting.check.enable = true 時有效
      this.$emit("runNode", treeNode);
    },
    // 搜尋
    queryFun(node) {
      for (var i in node) {
        this.nodes.push(node[i]);
        if (node[i].children) {
          this.queryFun(node[i].children);
        }
      }
      return this.nodes;
    },
    filterzTree(key, nodes, isExpand, isHighLight) {
      var metaChar = "[\\[\\]\\\\^\\$\\.\\|\\?\\*\\+\\(\\)]";
      var rexMeta = new RegExp(metaChar, "gi");
      var nameKey = this.treeObj.setting.data.key.name;
      for (var i = 0; i < nodes.length; i++) {
        if (nodes[i] && nodes[i].oldname && nodes[i].oldname.length > 0) {
          nodes[i][nameKey] = nodes[i].oldname;
        }
        this.treeObj.updateNode(nodes[i]);
        if (key === "") {
          this.initzTree();
          break;
        } else {
          if (
            nodes[i][nameKey] &&
            nodes[i][nameKey].toLowerCase().indexOf(key.toLowerCase()) !== -1
          ) {
            if (isHighLight) {
              var newKeywords = key.replace(rexMeta, (matchStr) => {
                return "//" + matchStr;
              });
              nodes[i].oldname = nodes[i][nameKey];
              var rexGlobal = new RegExp(newKeywords, "gi");
              nodes[i][nameKey] = nodes[i].oldname.replace(
                rexGlobal,
                (originalText) => {
                  // var highLightText =
                  // '<span style="color: whitesmoke;background-color: darkred;">'
                  // + originalText
                  // +'</span>'
                  return originalText;
                }
              );
              this.treeObj.updateNode(nodes[i]);
            }
            this.treeObj.showNode(nodes[i]);
            this.nodesShow.push(nodes[i]);
          } else {
            this.treeObj.hideNode(nodes[i]);
          }
        }
      }
    },
    showNodesFun(nodesShow, key) {
      if (key.length > 0) {
        nodesShow.forEach((node) => {
          var pathOfOne = node.getPath();
          if (pathOfOne && pathOfOne.length > 0) {
            for (var i = 0; i < pathOfOne.length - 1; i++) {
              this.treeObj.showNode(pathOfOne[i]);
              this.treeObj.expandNode(pathOfOne[i], true);
            }
          }
        });
      } else {
        var rootNodes = this.treeObj.getNodesByParam("level", "0");
        rootNodes.forEach((node) => {
          this.treeObj.expandNode(node, true);
        });
      }
    },
    searchFun(val, isHighLight, isExpand) {
      var key = this.searchtext.replace(/(^\s*)|(\s*$)/g, "");
      this.nodesShow = [];
      isHighLight = isHighLight !== false;
      isExpand = !!isExpand;
      this.filterzTree(key, this.allNodes, isExpand, isHighLight);
      if (this.keyValue === "") {
        this.noData = false;
      } else {
        if (this.nodesShow.length === 0) {
          this.noData = true;
        } else {
          this.noData = false;
        }
      }
      this.showNodesFun(this.nodesShow, key);
    },

    // 滑鼠移入顯示新增按鈕
    addHoverDom(treeId, treeNode) {
      const _this = this;
      var sObj = $("#" + treeNode.tId + "_span");
      if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0)
        return;
      // 增加按鈕
      var addStr =
        "<span class='button add' id='addBtn_" +
        treeNode.tId +
        "' title='新增子節點' onfocus='this.blur();'></span>";
      sObj.after(addStr);
      let removeObj = $("#" + treeNode.tId + "_remove");
      // 動態決定顯示禁用還是啟用按鈕
      if (this.status === true && this.disabledId === treeNode.id) {
        var disableStr =
          "<span class=' disabled' id='disabledBtn_" +
          treeNode.tId +
          "' title='啟用' onfocus='this.blur();'><i class='el-icon-lock'/></span>";
        removeObj.after(disableStr);
      } else {
        // 禁用
        var runStr =
          "<span class='run' id='runBtn_" +
          treeNode.tId +
          "' title='禁用' onfocus='this.blur();'><i class='el-icon-unlock'/></span>";
        removeObj.after(runStr);
      }

      let btn = $("#addBtn_" + treeNode.tId);
      let disabledBtn = $("#runBtn_" + treeNode.tId);
      let runBtn = $("#disabledBtn_" + treeNode.tId);
      // 點選事件
      if (btn) {
        btn.bind("click", function () {
          _this.add(treeId, treeNode);
          return false;
        });
      }
      if (disabledBtn) {
        disabledBtn.bind("click", function () {
          _this.disabled(treeNode);
          return false;
        });
      }
      if (runBtn) {
        runBtn.bind("click", function () {
          _this.run(treeNode);
          return false;
        });
      }
    },
    // 滑鼠移除隱藏按鈕
    removeHoverDom(treeId, treeNode) {
      $("#addBtn_" + treeNode.tId)
        .unbind()
        .remove();
      $("#disabledBtn_" + treeNode.tId)
        .unbind()
        .remove();
      $("#runBtn_" + treeNode.tId)
        .unbind()
        .remove();
    },

    showMenu() {
      this.searchtext = "";
      this.isShow = false;
      this.init();
    },
    // 點選之前
    zTreeBeforeClick(treeId, treeNode) {
      console.log("BeforeClick:", treeNode);
    },
  },
};
</script>
<style lang="scss" scoped>
.searchContainer {
  margin: 10px;
}
.searchinput {
  width: 75%;
  height: 26px;
}
.button {
  width: 20%;
  height: 29px;
}
.ztree * {
  font-size: 30px;
}
.ztree li {
  margin: 20px 0;
}
.ztree li a {
  margin: 20px 0;
  font-size: 30px !important;
}
</style>