<template>
  <div class="menu-tree">
    <el-row :gutter="10">
      <el-col :span="16">
          <el-select v-model="classvalue" placeholder="请选择分类方式">
            <el-option
            v-for="item in classificationData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            @change="changeclasss">
            </el-option>
          </el-select>
      </el-col>
       <el-col :span="8">
         <el-button class="el-icon-download" type="primary" @click="exportCsv" style="float:right">导出csv</el-button>
      </el-col>
    </el-row>
    <el-input placeholder="输入关键字检索" v-model="filterText" style="margin-top:10px" >
      <i slot="prefix" class="el-input__icon el-icon-search"></i>
    </el-input>
    <el-tree
        class="ele-tree-menu"
        :data="treeMenuData"
        :show-checkbox="false"
        node-key="id"
        :filter-node-method="filterNode"
        :current-node-key="currentNode"
        :default-expanded-keys="expandedKeys"
        :default-checked-keys="checkedKeys"
        :props="defaultProps"
         ref="menuTree"
         default-expand-all
        :expand-on-click-node="false"
        :render-content="renderContent"
      >
      <span class="custom-tree-node"  slot-scope="{ node, data }">
        <span>
          <i :class="data.icon"></i>{{ node.label }}
        </span>
      </span>
 </el-tree>
  
  </div>
</template>
<script>
export default {
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "label",
      },
      classvalue:undefined,
      menudata: {},
      isact: '',
      filterText: "",
      currentNode: 0,
      classificationData:[
        {
          value: 0,
          label: '电网拓扑'
        }, {
          value: 1,
          label: '终端厂家'
        },{
          value: 2,
          label: '电压等级'
        },{
          value: 3,
          label: '干扰源类型'
        },{
          value: 4,
          label: '灿能上报'
        },
      ],
        dataTree: [{
        id: 1,
        label: '电网ee拓扑',
        children: [{
          icon: 'el-icon-s-data',
          id: 4,
          label: '江苏省',
          children: [{
            id: 9,
            label: '常熟市',
            children: [{
              id: 10,
              label: '测试变电站',
              children: [{
                id: 11,
                label: '测试监测点'
              }]
            }]
          }, {
            id: 2,
            label: '南京市',
            children: [{
              id: 10,
              label: '测试变电站',
              children: [{
                id: 11,
                label: '测试监测点'
              }]
            }]
          }]
        }]
      }],
    };
  },
  props: {
    type: Array,
    treeMenuData:undefined,
  },
  methods: {
    handleNodeClick(data, node, nodeCom) {
     this.menudata = data;
     this.$emit("eleMenuData", this.menudata, node, nodeCom);
    },
    add(){
     //this.$emit("addData", this.menudata, node, nodeCom);
    },
    getNode(nodeId) {
      return this.$refs.menuTree.getNode(nodeId);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    changeclasss(){
      this.$emit("changeclasssdata",this.classvalue);
    },
    exportCsv(){
      
    },
    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  class="span-ellipsis">
              <span class="title">{node.label}</span>
            </span>
            {this.isact == data?
              <span>
              <el-button type="text" icon="el-icon-s-order" on-click={ () => this.quetymonitor(data)}>详情</el-button>
            </span>
            :
            <span>
            </span>
            }  
          </span>
          );
      },
      mouseenteract(da){
       this.isact = da
    },
      mouseleaveact(da){
        this.isact = ''
   },
   quetymonitor(data){
   // alert(data)
   }
  
  },
  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: 0px;
   border-radius: 5px;
   box-shadow: 0px 0px 0px 0px #cad1d4;
 }
 .el-tree {
   width: 100%;
   height: 100%;
   padding-top: 10px;
}
.span-ellipsis {
  width: 100%;
  /* overflow: hidden; */
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;

  /* overflow: auto;
  overflow-x: auto; */
}
</style>
