<template>
  <div class="activerealsideBar">
    <div class="searchBar">
      <el-input
        placeholder="输入关键字进行过滤"
        v-model="filterText"
        prefix-icon="el-icon-search"
        clearable
      >
      </el-input>
    </div>
    <!-- <div class="deviceNum">
      <el-statistic title="装置在线 / 总数">
        <template slot="formatter">
          （<span>{{ onlineNum ? onlineNum : 0 }}</span> /
          <span>{{ totalNum ? totalNum : 0 }}</span
          >）
        </template>
      </el-statistic>
    </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="lineTreeData"
      :props="defaultProps"
      node-key="compositeKey"
      :default-expanded-keys="defaultExpandIds"
      highlight-current
      :expand-on-click-node="true"
      :filter-node-method="filterNode"
      :current-node-key="currentNodekey"
      @node-click="handleNodeClick"
      accordion
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span
          :title="
            node.label + '(' + data.termCount + '/' + data.onlineNum + ')'
          "
        >
          <span
            v-if="data.title"
            class="iconfont icon-dianlihangye"
            style="margin-right: 6px"
          >
          </span>
          <span v-if="!data.title && data.cmdid">
            <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 class="num" v-if="data.title"
              >({{ data.termCount }} / {{ data.onlineNum }})
            </span>
          </span>
        </span>
        <!-- <span>
          {{ node.label }}
        </span> -->
      </span>
    </el-tree>
  </div>
</template>
<script>
import EventBus from "@/utils/event-bus";
import { getActivityApi } from "@/utils/api/reportApi";
export default {
  data() {
    return {
      filterText: "", //查询字段过滤

      lineTreeData: [],
      defaultExpandIds: [], //默认展开

      defaultProps: {
        //指定参数格式回显数据
        children: "terms",
        label: "name",
        key: "compositeKey", // 确保这里使用的是 uniqueKey
      },
      currentData: {}, //当前选中的数据
      currentNodekey: "", //默认选中的节点树,
    };
  },
  components: {},
  watch: {
    filterText(newVal) {
      this.handleFilter(); // 当 filterText 发生变化时执行过滤操作
    },
  },
  mounted() {},
  created() {
    this.getactiveList(); //获取树状图
  },
  methods: {
    transformData(data) {
      return data.map((item) => ({
        ...item, // 复制原始对象
        name: item.title, // 将 title 改为 name
        onlineNum: item.terms.reduce((count, term) => {
          // 如果 term.online 等于 1，则增加计数器
          return count + (term.onlinestatus === 1 ? 1 : 0);
        }, 0),
      }));
    },
    getactiveList() {
      getActivityApi()
        .then((res) => {
          console.log(res);
          console.log(res.data);
          const dataValue = this.transformData(res.data);
          this.lineTreeData = this.processData(dataValue);
          console.log(this.lineTreeData);
          this.currentData = JSON.parse(localStorage.getItem("currentData"));
          this.defaultExpandIds = [this.lineTreeData[0].terms[0].compositeKey];
          this.currentNodekey = this.lineTreeData[0].terms[0].compositeKey;
          console.log("我是选中的id", this.currentNodekey);
          this.currentNodeData = this.lineTreeData[0].terms[0];
          this.$nextTick(() => {
            this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
            this.handleNodeClick(this.currentNodeData);
          });
        })
        .catch((err) => {});
    },
    processData(data, level = 0) {
      return data.map((node) => {
        const compositeKey = `${level}-${node.id}`; // 创建复合标识符
        node.compositeKey = compositeKey; // 将复合标识符添加到节点属性中
        if (node.terms) {
          node.terms = this.processData(node.terms, level + 1); // 递归处理子节点
        }
        return node;
      });
    },
    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;
    },

    //点击当前选中的treenode
    handleNodeClick(data, node) {
      console.log(data, node);

      console.log(this.currentNodeKey);
      if (data.hasOwnProperty("terms")) {
        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(this.currentNodeKey);
        });
        return;
      }
      // if (data.name == "收藏夹") {
      //   return;
      // }
      // if (data.isfavor == 0 || data.isfavor == null) {
      //   this.collectFlag = false;
      // } else {
      //   this.collectFlag = true;
      // }
      this.currentNodeKey = data.compositeKey;
      this.currentData = data;
      //this.scrollView();
      this.$store.commit("currentData", this.currentData); //将currentData保存在vuex中
      this.$store.commit("termId", this.currentData.id); //将currentData保存在vuex中
      this.$store.commit("protocol", this.currentData.protocol); //将currentData保存在vuex中
      this.$store.commit("cmdId", this.currentData.cmdid); //将currentData保存在vuex中
      this.$parent.getCurrentData();
    },
  },
  beforeRouteLeave(to, from, next) {},
  deactivated() {},
  beforeDestroy() {},
};
</script>
<style lang="less">
.activerealsideBar {
  width: 312px;
  display: flex;
  flex-direction: column;
  padding: 16px 0px;
  height: calc(100% - 70px);

  .searchBar {
    width: 94%;
    margin: 0 auto;
    margin-bottom: 8px;
  }
  .deviceNum {
    width: 94%;
    margin: 0 auto;
    margin-bottom: 8px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    .el-statistic {
      display: flex;
      justify-content: center;
      align-items: center;
      .head {
      }
      .con {
        color: #169e8c;
      }
    }
  }
  .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 {
    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: #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>
