<template>
<div class="menu-tree">
    <el-input placeholder="输入关键字" v-model="filterText" size="medium">
      <i slot="prefix" class="el-input__icon el-icon-search"></i>
    </el-input>
    <el-tree
      class="ele-tree-menu"
      node-key="id"
      :data="treeMenuData"
      :props="defaultProps"
      default-expand-all
      @node-click="handleNodeClick"
      ref="menuTree"
      :filter-node-method="filterNode"
      :current-node-key="currentNode"
    >
     <span class="custom-tree-node" :class="data.class" slot-scope="{ node, data }">
        <span>
          <i :class="data.icon"></i>{{ node.label }}
        </span>
          <!-- <span style="margin-left:30%;z-index:1000">
          <el-button
            type="primary"
            size="mini"
            @click="() => query(data)">
            监测点
          </el-button>
        </span> -->
      </span>
    </el-tree>
  </div>
  
</template>
<script>
export default {
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "label",
      },
      menudata: {},
      filterText: "",
      currentNode: 0,
    };
  },
  methods: {
    handleNodeClick(data, node, nodeCom) {
     this.menudata = data;
     this.$emit("eleMenuData", this.menudata, node, nodeCom);
    },
    getNode(nodeId) {
      return this.$refs.menuTree.getNode(nodeId);
    },
    query(data){
     alert(123)
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
     /**
     * 缩放条拖动进而改变左侧div宽度方法
     */
    bindResize() {
      /**开始坐标 */
      let startX;
      /**开始宽度 */
      let startWidth = getScalableDivWidth();

      document.querySelector("#drag-dept").addEventListener("mousedown", startDrag);

      function startDrag(e) {
        startX = e.clientX;
        startWidth = getScalableDivWidth();

        document.documentElement.addEventListener("mousemove", onDrag);
        document.documentElement.addEventListener("mouseup", stopDrag);
      }

      function onDrag(e) {
        let newWidth = startWidth + e.clientX - startX;
        document.querySelector("#drag-dept-left").style.width = newWidth + "px";
      }

      function stopDrag() {
        document.documentElement.removeEventListener("mousemove", onDrag);
        document.documentElement.removeEventListener("mouseup", stopDrag);
      }

      /**获取宽度 */
      function getScalableDivWidth() {
        return parseInt(
            window.getComputedStyle(document.querySelector("#drag-dept-left")).width, 10);
      }
    },
  },
  props: {
    treeMenuData: Array,
  },
  watch: {
    treeMenuData(newValue) {
     this.treeMenuData = newValue;
    },
    filterText(val) {
      this.$refs.menuTree.filter(val);
    }
  }
};
</script>
<style scoped>
 .ele-tree-menu {
  width: 100%;
  background: rgba(204, 200, 200, 0.164);
  color: #424141 !important;
}
 .el-tree ::v-deep .el-tree-node:focus > .el-tree-node__content {
   background: rgba(0, 0, 0, 0.2) !important;
 }
 .el-tree ::v-deep .el-tree-node__content:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
 .menu-tree {
   background: rgba(238, 240, 241, 0.192);
   padding: 10px;
   margin-right: 10px;
   border-radius: 5px;
   box-shadow: 1px 1px 1px 1px #cad1d4;
 }
 .el-tree {
   width: 100%;
   height: 81vh;
   padding-top: 10px;
}

</style>
