<template>
  <div class="leftTreeBox">
    <div class="companyBox">
      <span class="spanLabel"
        ><i class="el-icon-office-building"></i>公司：</span
      >
      <el-select v-model="companyVal" placeholder="请选择公司">
        <!-- <el-option label="捕鱼达人" value="budr"></el-option> -->
        <el-option
          v-for="item in companyOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          @click.native="handleClick(item.value)"
        >
        </el-option>
      </el-select>
    </div>
    <el-divider></el-divider>
    <div class="searchBar">
      <el-input
        placeholder="输入关键字进行过滤"
        v-model="filterText"
        prefix-icon="el-icon-search"
      >
      </el-input>
    </div>
    <el-tree
      ref="tree"
      v-loading="treeLoading"
      :data="lineTreeData"
      :props="defaultProps"
      node-key="id"
      highlight-current
      :default-expanded-keys="[9]"
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
      :current-node-key="currentNodekey"
      @node-click="handleNodeClick"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span v-if="node.level === 1">
          <span class="iconfont icon-dianli" style="margin-right: 6px"></span>
          <!-- <span>{{ node.label }} </span> -->
          <span>捕鱼达人</span>
        </span>
        <span v-else-if="node.level === 2">
          <span class="iconfont icon-dianlihangye" style="margin-right: 6px">
          </span>
          <span
            >{{ node.label }}
            <span class="num">({{ data.list.length }}) </span></span
          >
        </span>
        <span v-else>
          <span
            class="iconfont icon-shexiangtoulixian"
            v-if="data.onlinestatus == 0"
            :class="data.onlinestatus == 0 ? 'disconnect' : ''"
            style="margin-right: 6px"
          ></span>
          <span
            class="iconfont icon-shexiangtou-lixian"
            v-else
            :class="data.onlinestatus == 0 ? 'disconnect' : ''"
            style="margin-right: 6px"
          ></span>
          <span
            :id="data.id"
            :class="data.onlinestatus == 0 ? 'disconnect' : ''"
            >{{ node.label }}</span
          >
        </span>
      </span>
    </el-tree>
  </div>
</template>
<script>
import { getdyTreeListJoggle } from "@/utils/api/index";
export default {
  data() {
    return {
      treeLoading: false,
      companyVal: "", //公司，
      companyOptions: [
        {
          value: "bydr",
          label: "捕鱼达人",
        },
      ],
      filterText: "", //查询字段过滤
      lineTreeData: [],
      defaultExpandedKeys: [], //默认展开
      collapsedKeys: [], // 收起节点的key数组
      defaultProps: {
        //指定参数格式回显数据
        children: "list",
        label: "name",
      },
      currentData: {}, //当前选中的数据
      currentNodekey: "", //默认选中的节点树,
    };
  },
  watch: {
    filterText(newVal) {
      this.handleFilter(); // 当 filterText 发生变化时执行过滤操作
    },
  },
  created() {
    this.getLineTreeList(); //获取树状图
    this.companyVal = this.companyOptions[0].value;
  },
  methods: {
    handleClick(val) {
      console.log(val);
    },
    handleFilter() {
      // 在输入框输入完成后的500毫秒执行过滤节点方法
      setTimeout(() => {
        this.$refs.tree.filter(this.filterText);
      }, 500);
    },
    //树状图搜索
    filterNode(value, data, node) {
      // 如果什么都没填全部匹配全部返回
      if (!value) return true;
      this.searchName = data.name + data.cmdid;
      //console.log(this.searchName);
      // 如果传入的value和data中的label相同，匹配成功
      if (this.searchName.indexOf(value) !== -1) {
        return true;
      }
    },
    //获取树状图列表
    getLineTreeList() {
      this.treeLoading = true;
      getdyTreeListJoggle({ type: -1 })
        .then((res) => {
          this.lineTreeData = res.data.list;
          this.treeLoading = false;
          this.currentData = JSON.parse(localStorage.getItem("currentData"));
          this.lineTreeData.forEach((node) => {
            if (node.list) {
              node.list.forEach((child) => {
                this.defaultExpandedKeys.push(child.id);
              });
            } else {
              this.defaultExpandedKeys.push(node.id);
            }
          });
          this.defaultExpandedKeys =
            JSON.parse(localStorage.getItem("defaultKey")) !== null
              ? JSON.parse(localStorage.getItem("defaultKey"))
              : this.defaultExpandedKeys; //获取保存的defaultKey ;

          //console.log(this.defaultExpandedKeys);
          if (this.lineTreeData[0].list[0].list.length > 0) {
          }
          if (
            this.currentData !== null &&
            Object.keys(this.currentData).length !== 0
          ) {
            this.currentNodekey = this.currentData.id;
            this.handleNodeClick(this.currentData);
          } else {
            this.currentData = this.lineTreeData[0]; //第一个选中的数据
            this.currentNodekey = this.lineTreeData[0].id; //第一个数据
            this.handleNodeClick(this.currentData);
          }
          this.$nextTick(() => {
            this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
          });
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //点击当前选中的treenode
    handleNodeClick(data) {
      this.currentData = data;
      this.$parent.getCurrentData(this.currentData);
    },
  },
};
</script>
<style lang="less">
.leftTreeBox {
  width: 200px;
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  .companyBox {
    display: flex;
    width: 94%;
    margin: 0 auto;
    margin-bottom: 8px;
    align-items: center;
    .spanLabel {
      font-size: 14px;
      width: 96px;
    }
  }
  .el-divider--horizontal {
    margin: 0px 0px 8px 0px;
  }
  .searchBar {
    width: 94%;
    margin: 0 auto;
    margin-bottom: 8px;
  }
  .el-tree {
    overflow-y: scroll;
    overflow-x: hidden;
    .el-tree-node__content {
      height: 32px;
      font-size: 12px;
    }
    .custom-tree-node {
      color: #333;
      overflow: hidden;
      span {
        display: flex;
        display: inline-table;
        overflow: hidden;
        align-items: center;
      }
      .num {
        color: #1c77ac;
      }
    }
  }
  .disconnect {
    color: #d3d3d3;
  }

  .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    // 设置颜色
    color: #fff;
    background: #1c77ac;
    .custom-tree-node {
      color: #fff;
      //overflow: hidden;
      span {
        display: flex;
        //overflow: hidden;
        align-items: center;
        .num {
          color: #fff;
        }
        .iconfont {
          //width: 30px;
          display: inline-table;
        }
      }
    }
  }
}
.el-table thead {
  color: #333;
  th {
    font-weight: 400;
  }
}
.el-table {
  color: #666;
}
</style>
