<template>
  <div class="container-bg">
    <el-container class="main-layout">
      <el-container class="right-plate">
        <el-main class="main-cont">
          <div class="network-wrap">
            <!-- 父网络列表   上方的大类图标及小竖线 -->
            <section class="layout">
              <div class="mainNetwork">
                <div
                  class="networkItem"
                  v-for="(item, index) in nodeInfoData"
                  :key="index"
                  :class="{ active: current == index }"
                  @click="() => onChangeMain(index, item)"
                >
                  <!-- 图片及图片上的名字 -->
                  <div class="topCont">
                    <div class="title">{{ item.attr_desc }}</div>
                    <span class="subtitle">{{ item.attr_name }}</span>
                  </div>
                  <!-- 小竖线 -->
                  <div class="lineWrap" v-if="current == index">
                    <div
                      class="line"
                      v-for="(item, index) in lineList"
                      :style="{
                        background: item.bgcolor,
                        left: 45 + index * 13 + '%',
                        height: 17 * index + 35 + 'px',
                      }"
                      :key="index"
                    ></div>
                  </div>
                </div>
              </div>
            </section>
            <!-- 子网络列表 -->
            <section class="layout">
              <div class="subNetwork">
                <div
                  class="subNetworkItem"
                  v-for="(item, index) in handleAllAp"
                  :key="index"
                >
                  <span
                    class="subNetworkLine"
                    v-show="item.show"
                    :style="item.inlineStyle"
                  ></span>
                  <div class="subNetworkMask" v-show="!item.show"></div>
                  <div class="subNetworkInfo">
                    <div class="subNetworkImg">
                      <img :src="tupian" alt="" />
                    </div>
                    <div class="subNetworkName">{{ item.attr_ied_name }}</div>
                    <div
                      class="subNetworkID"
                      v-for="(value, key) in item"
                      :key="key"
                    >
                      <span v-if="key.startsWith('node_value')">{{
                        value
                      }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </section>

            <!-- 线条 -->
            <div class="networkLine">
              <div
                class="mainLine"
                v-for="(item, index) in lineList"
                :key="index"
              >
                <span
                  class="lineTag"
                  :style="{ background: item.bgcolor, color: item.txtcolor }"
                  @click="() => onChangeline(item.name)"
                  >{{ item.name }}</span
                >
                <p
                  class="line"
                  :style="{ background: item.bgcolor }"
                  @click="() => onChangeline(item.name)"
                ></p>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
    
  
  <script setup>
import { onMounted, reactive, ref } from "vue";
import { nodeList, iedNetaddr } from "@/api/iedNetwork";
import { useRoute } from "vue-router";
const route = useRoute();
const flog = ref(false);
const current = ref(0);
const currentCat = ref("");
const arr = ref([
  {
    attr_desc: "110KV过程层SMV子网",
    attr_name: "SMV",
    attr_type: "SMV",
    node_id: 84001387,
    node_name: "SubNetwork",
    node_value: "",
    parent_node_id: 84000135,
  },
  {
    attr_desc: "MMS网",
    attr_name: "MMS",
    attr_type: "8-MMS",
    node_id: 84001387,
    node_name: "SubNetwork",
    node_value: "",
    parent_node_id: 84000135,
  },
  {
    attr_desc: "110KV过程层GOOSE子网",
    attr_name: "GOOSE",
    attr_type: "IECGOOSE",
    node_id: 84003131,
    node_name: "SubNetwork",
    node_value: "",
    parent_node_id: 84000135,
  },
]); //父网络数据
const nodeInfoData = ref(null);
const arr2 = ref([
  {
    attr_ap_name: "S1",
    attr_desc: "",
    attr_ied_name: "IL1101",
    node_id: 84003204,
    node_name: "ConnectedAP",
    node_value: "",
    parent_node_id: 84003131,
  },
  {
    attr_ap_name: "S1",
    attr_desc: "",
    attr_ied_name: "IL1301",
    node_id: 8400204,
    node_name: "ConnectedAP",
    node_value: "",
    parent_node_id: 84003131,
  },
  {
    attr_ap_name: "S1",
    attr_desc: "",
    attr_ied_name: "IL4101",
    node_id: 84002204,
    node_name: "ConnectedAP",
    node_value: "",
    parent_node_id: 84003131,
  },
  {
    attr_ap_name: "S1",
    attr_desc: "",
    attr_ied_name: "PL1131",
    node_id: 84003264,
    node_name: "ConnectedAP",
    node_value: "",
    parent_node_id: 84003131,
  },
  {
    attr_ap_name: "G1",
    attr_desc: "",
    attr_ied_name: "IL11031",
    node_id: 84007214,
    node_name: "ConnectedAP",
    node_value: "",
    parent_node_id: 84003131,
  },
  {
    attr_ap_name: "S1",
    attr_desc: "",
    attr_ied_name: "IL11011",
    node_id: 84003304,
    node_name: "ConnectedAP",
    node_value: "",
    parent_node_id: 84003131,
  },
  {
    attr_ap_name: "S1",
    attr_desc: "",
    attr_ied_name: "IL13101",
    node_id: 84003205,
    node_name: "ConnectedAP",
    node_value: "",
    parent_node_id: 84003131,
  },
  {
    attr_ap_name: "G1",
    attr_desc: "",
    attr_ied_name: "CM13101",
    node_id: 84003295,
    node_name: "ConnectedAP",
    node_value: "",
    parent_node_id: 84003131,
  },
  {
    attr_ap_name: "K1",
    attr_desc: "",
    attr_ied_name: "CM13101",
    node_id: 84003295,
    node_name: "ConnectedAP",
    node_value: "",
    parent_node_id: 84001387,
  },
  {
    attr_ap_name: "G1",
    attr_desc: "",
    attr_ied_name: "CM13101",
    node_id: 84003295,
    node_name: "ConnectedAP",
    node_value: "",
    parent_node_id: 84001387,
  },
  {
    attr_ap_name: "G1",
    attr_desc: "",
    attr_ied_name: "CM13101",
    node_id: 84003295,
    node_name: "ConnectedAP",
    node_value: "",
    parent_node_id: 84001387,
  },
  {
    attr_ap_name: "G1",
    attr_desc: "",
    attr_ied_name: "CM13101",
    node_id: 84003295,
    node_name: "ConnectedAP",
    node_value: "",
    parent_node_id: 84001387,
  },
  {
    attr_ap_name: "K1",
    attr_desc: "",
    attr_ied_name: "CM13101",
    node_id: 84003295,
    node_name: "ConnectedAP",
    node_value: "",
    parent_node_id: 84001387,
  },
  {
    attr_ap_name: "G1",
    attr_desc: "",
    attr_ied_name: "CM13101",
    node_id: 84003295,
    node_name: "ConnectedAP",
    node_value: "",
    parent_node_id: 84001387,
  },
  {
    attr_ap_name: "G1",
    attr_desc: "",
    attr_ied_name: "CM13101",
    node_id: 84003295,
    node_name: "ConnectedAP",
    node_value: "",
    parent_node_id: 84001387,
  },
  {
    attr_ap_name: "G1",
    attr_desc: "",
    attr_ied_name: "CM13101",
    node_id: 84003295,
    node_name: "ConnectedAP",
    node_value: "",
    parent_node_id: 84001387,
  },
  {
    attr_ap_name: "G1",
    attr_desc: "",
    attr_ied_name: "CM13101",
    node_id: 84003295,
    node_name: "ConnectedAP",
    node_value: "",
    parent_node_id: 84001387,
  },
  {
    attr_ap_name: "G1",
    attr_desc: "",
    attr_ied_name: "CM13101",
    node_id: 84003295,
    node_name: "ConnectedAP",
    node_value: "",
    parent_node_id: 84001387,
  },
  {
    attr_ap_name: "G1",
    attr_desc: "",
    attr_ied_name: "CM13101",
    node_id: 84003295,
    node_name: "ConnectedAP",
    node_value: "",
    parent_node_id: 84001387,
  },
  {
    attr_ap_name: "G1",
    attr_desc: "",
    attr_ied_name: "CM13101",
    node_id: 84003295,
    node_name: "ConnectedAP",
    node_value: "",
    parent_node_id: 84001387,
  },
  {
    attr_ap_name: "G1",
    attr_desc: "",
    attr_ied_name: "CM13101",
    node_id: 84003295,
    node_name: "ConnectedAP",
    node_value: "",
    parent_node_id: 84001387,
  },
  {
    attr_ap_name: "G1",
    attr_desc: "",
    attr_ied_name: "CM13101",
    node_id: 84003295,
    node_name: "ConnectedAP",
    node_value: "",
    parent_node_id: 84001387,
  },
  {
    attr_ap_name: "G1",
    attr_desc: "",
    attr_ied_name: "CM13101",
    node_id: 84003295,
    node_name: "ConnectedAP",
    node_value: "",
    parent_node_id: 84001387,
  },
  {
    attr_ap_name: "G1",
    attr_desc: "",
    attr_ied_name: "CM13101",
    node_id: 84003295,
    node_name: "ConnectedAP",
    node_value: "",
    parent_node_id: 84001387,
  },
  {
    attr_ap_name: "G1",
    attr_desc: "",
    attr_ied_name: "CM13101",
    node_id: 84003295,
    node_name: "ConnectedAP",
    node_value: "",
    parent_node_id: 84001387,
  },
  {
    attr_ap_name: "K1",
    attr_desc: "",
    attr_ied_name: "CM13101",
    node_id: 84003295,
    node_name: "ConnectedAP",
    node_value: "",
    parent_node_id: 84001387,
  },
  {
    attr_ap_name: "G1",
    attr_desc: "",
    attr_ied_name: "CM13101",
    node_id: 84003295,
    node_name: "ConnectedAP",
    node_value: "",
    parent_node_id: 84001387,
  },
  {
    attr_ap_name: "G1",
    attr_desc: "",
    attr_ied_name: "CM13101",
    node_id: 84003295,
    node_name: "ConnectedAP",
    node_value: "",
    parent_node_id: 84001387,
  },
  {
    attr_ap_name: "G1",
    attr_desc: "",
    attr_ied_name: "CM13101",
    node_id: 84003295,
    node_name: "ConnectedAP",
    node_value: "",
    parent_node_id: 84001387,
  },
  {
    attr_ap_name: "G1",
    attr_desc: "",
    attr_ied_name: "CM13101",
    node_id: 84003295,
    node_name: "ConnectedAP",
    node_value: "",
    parent_node_id: 84001387,
  },
  {
    attr_ap_name: "G1",
    attr_desc: "",
    attr_ied_name: "CM13101",
    node_id: 84003295,
    node_name: "ConnectedAP",
    node_value: "",
    parent_node_id: 84001387,
  },
  {
    attr_ap_name: "K1",
    attr_desc: "",
    attr_ied_name: "CM13101",
    node_id: 84003295,
    node_name: "ConnectedAP",
    node_value: "",
    parent_node_id: 84001387,
  },
  {
    attr_ap_name: "G1",
    attr_desc: "",
    attr_ied_name: "CM13101",
    node_id: 84003295,
    node_name: "ConnectedAP",
    node_value: "",
    parent_node_id: 84001387,
  },
  {
    attr_ap_name: "G1",
    attr_desc: "",
    attr_ied_name: "CM13101",
    node_id: 84003295,
    node_name: "ConnectedAP",
    node_value: "",
    parent_node_id: 84001387,
  },
  {
    attr_ap_name: "K1",
    attr_desc: "",
    attr_ied_name: "CM13101",
    node_id: 84003295,
    node_name: "ConnectedAP",
    node_value: "",
    parent_node_id: 84001387,
  },
]);
const lineList = ref([]);
const listCat = ref([]);
const colorList2 = ref([
  {
    S1: "#3BE078",
    S2: "#3AAFF0",
    S3: "#FF8531",
    G1: "#3259E0",
    G2: "#38FFFF",
    G3: "#3FA3FF",
    G4: "#7368F1",
    G5: "#84D7FF",
    M1: "#FB3E3E",
    M2: "#FF039A",
    M3: "#FF1BE8",
    M4: "#FF929D",
    M5: "#FF9AF5",
  },
]);
const colorList = ["#3BE078", "#3AAFF0", "#4B6DE3", "#aa00ff"];
const tupian = require("@/assets/image/instruct/network_slices.png");
let nodeTreeInfo = null;
let loading = false;
//获取网络图的顶部列表
const getNetWork = async () => {
  loading = false;
  const infoRes = await nodeList({
    scd_id: 52000015,
    pagesize: 10000,
    name: "SubNetwork",
  });
  nodeInfoData.value = infoRes.data;
  loading = true;
};
//获取SCD中配置的所有设备网络地址ConnectedAP
const allNetaddrData = ref({});
const allApData = ref({});
const initLoad = async () => {
  allApData.value = {};
  getNetWork();
  const allAP = await nodeList({
    scd_id: 52000015,
    pagesize: 10000,
    name: "ConnectedAP",
  });
  if (allAP == null || allAP.data == null) {
    //
    return;
  }
  let tmp = {};
  for (let i = 0; i < allAP.data.length; i++) {
    let item = allAP.data[i];
    const key = item.parent_node_id + "." + item.attr_ap_name;
    if (allApData.value[key] == null) {
      allApData.value[key] = {
        node_type: "ap",
        name: key,
        list: [item],
      };
    } else {
      allApData.value[key].list.push(item);
    }
  }
  //   allNetaddrData.value = allAP.data;
  const allNetaddr2 = await iedNetaddr({ scd_id: 44000013 });
  //   processAllNetData(allNetaddr.data);
  //   allNetaddrData.value = allNetaddr.data;
  getlist();
};
const processAllNetData = (arr) => {
  const attrIedNamesMap = new Map();
  for (let i = 0; i < arr.length; i++) {
    const item = arr[i];
    const attrIedName = item.attr_ied_name;
    // 如果attr_ied_name已经存在于attrIedNamesMap中，则将node_value赋值给已存在的对象的新属性
    if (attrIedNamesMap.has(attrIedName)) {
      const existingItem = attrIedNamesMap.get(attrIedName);
      const newNodeValueKey = `node_value${existingItem.count + 2}`;
      // 设置新属性值
      existingItem.item[newNodeValueKey] = item.node_value;
      // 递增count，表示已处理的相同attr_ied_name的个数
      existingItem.count++;
      // 删除赋值的对象
      arr.splice(i, 1);
      // 因为删除了一个元素，所以需要更新索引
      i--;
    } else {
      // 如果attr_ied_name不存在于attrIedNamesMap中，则将当前item加入attrIedNamesMap
      attrIedNamesMap.set(attrIedName, {
        item,
        count: 0,
      });
    }
  }
};
const handleAllAp = ref([]); //处理后后的单个network的子数据
const clickAllAp = ref(null);
const lineNum = ref([]);
// const arrname = ref([]);
const onChangeMain = (index, clickItem) => {
  handleAllAp.value = [];
  //
  Object.keys(allApData.value).forEach((item) => {
    if (item.includes(clickItem.node_id)) {
      handleAllAp.value = [...handleAllAp.value, ...allApData.value[item].list];
    }
  });
 //  如果有重复的attr_ied_name删除
  lineNum.value = Array.from(
    new Set(handleAllAp.value.map((item) => item.attr_ap_name))
  );

  //去重
  handleAllAp.value =  handleAllAp.value.filter((item, index, self) => {
    return (
      index ===
      self.findIndex((obj) => obj.attr_ied_name === item.attr_ied_name && obj.attr_ap_name === item.attr_ap_name || obj.attr_ied_name === item.attr_ied_name)
    );
  });

  clickAllAp.value = clickItem;

  current.value = index;
  flog.value = true;
  currentCat.value = "";
  listCat.value = [];
  lineNum.value =[]
  lineList.value = [];
  onChangeline("");
  getlist();
};
const getClickList = (dataId) => {};
const getlist = () => {
  if (!clickAllAp.value) {
    handleAllAp.value = [];
    //匹配的所有数据的key值，进行筛选对应的数据
    Object.keys(allApData.value).forEach((item) => {
      if (item.includes(nodeInfoData.value[0].node_id)) {
        //默认展示第一个
        handleAllAp.value = [
          ...handleAllAp.value,
          ...allApData.value[item].list,
        ];
      }
    });
  }
  handleAllAp.value =  handleAllAp.value.filter((item, index, self) => {
    return (
      index ===
      self.findIndex((obj) => obj.attr_ied_name === item.attr_ied_name && obj.attr_ap_name === item.attr_ap_name || obj.attr_ied_name === item.attr_ied_name)
    );
  });
  var index = 0;
  handleAllAp.value.forEach((item, subindex) => {
    if (!listCat.value.includes(item.attr_ap_name)) {
      listCat.value.push(item.attr_ap_name);
      //   let colorObj = "";
      //   colorList2.value.find((color) => {
      //     colorObj = color[item.attr_ap_name];
      //   });
      lineList.value.push({
        name: item.attr_ap_name,
        bgcolor: colorList[index],
        txtcolor: "#fff",
        position: 70 + index * 10,
      });
      index++;
    }
  });
  setinlineStyle(handleAllAp.value, listCat.value);
};
onMounted(() => {
  initLoad();
});

const setinlineStyle = (data, dataCat) => {
  let adjustment = 0; // 初始化调整值为0
  const length = lineList.value.length; // 获取数组长度
  // 根据数组长度动态计算调整值
  if (length === 1) {
    adjustment = 32; // 数组长度为1，则加32
  } else if (length === 2) {
    adjustment = 16; // 数组长度为2，则加16
  } else if (length > 2) {
    // 数组长度大于2，开始递减
    adjustment = (length - 3) * 16; // 每增加一个元素，减16px
    if (length > 3) adjustment = 0; // 当长度大于3时，不再递减，保持0
  }
  //data全部数组
  // dataCat:{0: 'S1', 1: 'G1', 2: 'K1'}
  let newData = [];
  // 进行分组处理 都为浅拷贝 修改的源数据
  for (var i = 0; i < data.length; i += 9) {
    newData.push(data.slice(i, i + 9));
  }

  // 添加行类样式属性
  for (let i = 0; i < data.length; i++) {
    data[i]["inlineStyle"] = {};
    for (let j = 0; j < dataCat.length; j++) {
      if (data[i].attr_ap_name == dataCat[j]) {
        data[i]["inlineStyle"]["borderColor"] = colorList[j];
        data[i]["inlineStyle"]["left"] = j * 5 + "px";
        data[i]["inlineStyle"]["zIndex"] = j;
        data[i]["show"] = true;
      }
    }
  }
  // 根据行数计算高度
  newData.forEach((item, index) => {
    for (let i = 0; i < item.length; i++) {
      let num = listCat.value.indexOf(item[i].attr_ap_name) + 1;
      item[i]["inlineStyle"]["height"] =
        120 * index +
        54 +
        (listCat.value.length - num) * 17 +
        adjustment +
        "px";
    }
  });
};
//线条的点击事件
const onChangeline = (val) => {
  if (flog.value && val == currentCat.value) {
    handleAllAp.value.forEach((item) => (item.show = true));
    currentCat.value = "";
    flog.value = false;
  } else {
    handleAllAp.value.forEach((item) => {
      item.show = item.attr_ap_name == val ? true : false;
    });
    flog.value = true;
    currentCat.value = val;
  }
};
</script>
  
  <style scoped lang="scss">
@import "~@/styles/home.scss";
@import "~@/styles/struct.scss";
</style>