<template>
  <div class="siderBar">
    <div class="searchBar">
      <el-input
        placeholder="输入关键字进行过滤"
        v-model="filterText"
        prefix-icon="el-icon-search"
        clearable
      >
      </el-input>
    </div>
    <div class="radioFilter">
      <el-radio-group v-model="zzradio" @input="getRadio">
        <el-radio :label="-1">全部</el-radio>
        <el-radio :label="1">在线</el-radio>
        <el-radio :label="0">离线</el-radio>
      </el-radio-group>
      <el-button
        class="refresh"
        @click="getLineTreeStatus"
        type="text"
        icon="el-icon-refresh-right"
        >刷新</el-button
      >
    </div>
    <el-tree
      ref="tree"
      :data="treeData"
      :props="defaultProps"
      default-expand-all
      node-key="id"
      highlight-current
      :filter-node-method="filterNode"
      :current-node-key="currentNodekey"
      @node-click="handleNodeClick"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>
          <span
            v-if="node.level === 1 && node.label !== '收藏夹'"
            class="iconfont icon-dianli"
            style="margin-right: 6px"
          ></span>
          <span
            v-if="node.level === 2 && data.bsManufacturer"
            class="iconfont icon-dianlihangye"
            style="margin-right: 6px"
          >
          </span>
          <span v-if="!data.bsManufacturer && !data.dyValue">
            <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>
          <span :class="data.onlinestatus == 0 ? 'disconnect' : ''"
            >{{ node.label }}
          </span></span
        >
      </span>
    </el-tree>
  </div>
</template>
<script>
import { getdyTreeListJoggle } from "@/utils/api/index";
export default {
  name: "report",
  components: {},
  data() {
    return {
      filterText: "", //查询字段过滤
      zzradio: 1, //装置是否在线选择
      treeData: [],
      defaultProps: {
        //指定参数格式回显数据
        children: "list",
        label: "name",
      },
      currentData: "",
      currentNodekey: null, //选钟的节点
    };
  },
  computed: {},
  watch: {
    filterText(newVal) {
      this.handleFilter(); // 当 filterText 发生变化时执行过滤操作
    },
  },
  created() {},
  mounted() {
    this.getLineTreeList();
  },

  methods: {
    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;
      }
      let nowval = data[this.defaultProps.label].toUpperCase();
      return nowval.indexOf(value.toUpperCase()) !== -1;
    },
    getRadio() {
      console.log(this.zzradio);
      this.filterText = "";
      this.getLineTreeStatus();
    },
    getLineTreeList() {
      getdyTreeListJoggle({ type: this.zzradio })
        .then((res) => {
          this.treeData = res.data.list;
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //刷新tree列表
    getLineTreeStatus() {
      console.log("点击了刷新");
      if (this.filterText !== "") {
        this.$refs.tree.filter(this.filterText);
      } else {
        getdyTreeListJoggle({ type: this.zzradio })
          .then((res) => {
            console.log(res);
            this.treeData = res.data.list;
          })
          .catch((err) => {
            console.log(err); //代码错误、请求失败捕获
          });
      }
    },
    //点击当前选中的treenode
    handleNodeClick(data) {},
  },
  beforeDestroy() {},
};
</script>
<style lang="less">
.siderBar {
  width: 312px;
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  border: 1px solid #dddddd;
  .searchBar {
    width: 94%;
    margin: 0 auto;
    margin-bottom: 8px;
  }
  .radioFilter {
    width: 94%;
    margin: 0 auto;
    margin-bottom: 8px;
    font-size: 12px;
    display: flex;
    justify-content: space-around;
    .refresh {
    }
    .el-radio-group {
      display: flex;
      align-items: center;
      justify-content: center;
      .el-radio {
        margin-right: 16px;
      }
    }
  }
  .el-tree {
    height: 100%;
    overflow-y: auto;
    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: #169e8c;
      }
    }
  }

  .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    // 设置颜色
    color: #fff;
    background: #169e8c;
    .custom-tree-node {
      color: #fff;
      //overflow: hidden;
      span {
        display: flex;
        //overflow: hidden;
        align-items: center;
        .num {
          color: #fff;
        }
        .iconfont {
          //width: 30px;
          display: inline-table;
        }
      }
    }
  }

  .disconnect {
    color: #d3d3d3;
  }
}
</style>
