<template>
  <div class="menu-tree" style="height: 100%">

    <el-row :gutter="10" style="height: 100%">
      <el-col :span="16">
        <el-input size="mini" placeholder="输入关键字检索" v-model="filterText">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </el-col>
      <el-col :span="8">
        <el-button size="mini" class="el-icon-setting" type="primary" @click="exportCsv" style="float:right">重置
        </el-button>
      </el-col>
    </el-row>

    <el-col style="margin-top: 5px">

      <el-tree
        :style="{height: 'calc(100vh - 176px)',overflow:'auto'}"
        class="ele-tree-menu"
        :data="dataTree"
        :show-checkbox="showCheckbox"
        :default-checked-keys="defaultCheckedKeys"
        node-key="id"
        :highlight-current="highlightCurrent"
        :filter-node-method="filterNode"
        @check-change="handleCheckChange"
        @node-click="handleNodeClick"
        :props="defaultProps"
        ref="menuTree"
        accordion
        default-expand-all
        :expand-on-click-node="false">
  <span class="custom-tree-node" slot-scope="{ node, data }">
    <span style="display: flex;align-items: center" :class="{'check-node':node.level === eventLevel}">
        <i v-if="data.icon" class="custom-tree-node-color" :class="data.icon" :style="{color:data.color}"></i>
      <i v-else-if="node.level === 1" class="el-icon-upload" style="color: royalblue"></i>
      <i v-else-if="node.level === 2" class="el-icon-s-platform" style="color: royalblue"></i>
      <i v-else-if="node.level === 3" class="el-icon-s-help" style="color: #27c404"></i>
     <span style="margin-left: 4px;" >{{ data.name}}</span>
    </span>
  </span>
      </el-tree>
    </el-col>



  </div>
</template>
<script>
export default {
  
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "name",
      },
      filterText:'',
      scrollerHeight:null

    };
  },
  props: {
    type: Array,
    dataTree: undefined,
    eventLevel:{
      type: Number,
      default: 3
    },
    showCheckbox: {
      type: Boolean,
      default: false
    },
    defaultCheckedKeys: {
      type: Array,
      default: () => []
    },
    highlightCurrent: {
      type: Boolean,
      default: true
    },
  },
  mounted() {


  },
  computed: {
        vth() {
      return window.sessionStorage.getItem("appheight") -45;
    },
     
    },
  methods: {
    handleCheckChange(data, checked, indeterminate) {
      this.$emit("check-change", data, checked, indeterminate);
    },
    handleClose() {
      this.dialogVisible = false
    },
    //树节点点击事件
    handleNodeClick(data, node, nodeCom) {
      if (node.level == this.eventLevel) {
        this.$emit("eleMenuData", data, node.level);
      }

    },
    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.name.indexOf(value) !== -1;
    },
    changeclasss() {
      this.$emit("changeclasssdata", this.classvalue);
    },
    exportCsv() {

      this.filterText = ""
    },
    addDev() {
      let flag = true;
      this.$emit('openDevice', flag);

    },


    mouseleaveact(da) {
      this.isact = ''
      this.level = undefined
    },
    quetymonitor(data, event) {
      //console.log(data)
      event.stopPropagation()
      this.dialogVisible = true
    }

  },


  watch: {

    filterText(val) {
      this.$refs.menuTree.filter(val);
    }

  }
};
</script>
<style lang="scss">
.custom-tree-node-color{
    color: $themeColor !important;
    font-size: 16px;
}
.device-tree{
    .el-tree-node__content{
        cursor: default;
    }
    .check-node {
        cursor: pointer;
    }
}



.span-ellipsis {
  width: 100%;
  /* overflow: hidden; */
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;

  /* overflow: auto;
  overflow-x: auto; */
}

.title {
  /* color: #08fcfc;  */
  font-size: 16px;
}


</style>
