<template>
  <div class="iot-list-dialog">
    <div class="top-icon"></div>
    <div class="top-title">IOT列表</div>
    <div class="tree-box">
      <el-tree
        :data="treeDataTabSecond"
        ref="treeTabSecondRef"
        show-checkbox
        node-key="id"
        :default-expand-all="false"
        :renderContent="renderContent"
        :props="defaultPropsValue"
        @check="handleCheck"
      >
      </el-tree>
    </div>
    <div class="top-icon-bottom"></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import {
  QueryListEquipment,
  QueryIotListTree,
  QueryIotEquipment,
} from "../../../service/iotService";
import { addDataPoint } from "@/unit/map/addLayer";

const treeTabSecondRef = ref(null);
let treeDataTabSecond = ref([]);

//获取iot列表树
const getListTree = () => {
  QueryIotListTree().then((res) => {
    if (res.data.code == "200") {
      treeDataTabSecond.value = [res.data.data];
    }
  });
};

const defaultPropsValue = ref({
  children: "child",
  label: "name",
});
const checkNameData = ref([]);
//树表单选择
const handleCheck = (node, checkKeys) => {
  // if (checkNameData.value.includes(node.name)) {
  //   //取消选中操作
  //   //根据是否有child判断当前是否是叶子节点
  //   if(!node.child || node?.child.length == 0){
  //     //是子节点
  //   }else{

  //   }
  //   checkNameData.value = checkNameData.value.filter(
  //     (item) => item != node.name
  //   );
  // } else {
  //   //选中操作
  //   checkNameData.value.push(node.name);
  //   queryPointList(node.name);
  // }
  checkKeys.checkedNodes.forEach((node) => {
    if(node?.child?.length > 0) return
    queryPointList(node.name);
  });
};

//获取点位数据
const queryPointList = async (terminal) => {
  try {
    const equipmengRes = await QueryListEquipment({ terminal: terminal });
    if (equipmengRes?.data?.code == 200) {
      const list = equipmengRes?.data?.data?.list || [];
      const allPromise = [];
      list.forEach((item, index) => {
        if (item?.serialNumber) {
          let promiseItem = new Promise((resolve, reject) => {
            QueryIotEquipment(item?.serialNumber)
              .then((res) => {
                resolve({
                  ...res,
                  item,
                });
              })
              .catch((error) => {
                reject(error);
              });
          });
          allPromise.push(promiseItem);
        }
      });
      //处理异步调用
      Promise.allSettled(allPromise)
        .then((resArr) => {
          let data = [];
          let keyArr = [];
          resArr.forEach((result) => {
            if (result.status == "fulfilled") {
              const detailRes = result.value;
              if (detailRes?.data?.code == "200") {
                let obj = {
                  terminal: detailRes?.item?.terminal,
                  serialNumber: detailRes?.item?.serialNumber,
                };
                const resData = detailRes?.data?.data || [];
                resData.forEach((el) => {
                  if (el.latestValue) {
                    obj[el.name] = el.latestValue;
                    if (!keyArr.includes(el.name)) {
                      keyArr.push(el.name);
                    }
                  }
                });
                data.push({
                  x: detailRes?.item?.lng,
                  y: detailRes?.item?.lat,
                  attributes: obj,
                  
                });
              }
            }
          });
          let params = {
            id: terminal,
            title: terminal,
            data: data,
            showLableInfo: "{terminal}:{serialNumber}",
            fields: [
              {
                name: 'terminal',
                type: 'string'
              },
              {
                name: 'serialNumber',
                type: 'string'
              },
              ...keyArr.map((key) => {
                return {
                  name: key,
                  type: "string",
                };
              }),
            ]
            
          };
          console.log(params);
          addDataPoint(params);
        })
        .catch((error) => {
          console.log("allSettled:error", error);
        });
    }
  } catch (error) {
    console.log(error);
  }
};

onMounted(() => {
  getListTree();
});

const renderContent = (h, { node, data, store }) => {
  if (data.child == null || data.child.length === 0) {
    return h("div", { class: "custom-tree-node" }, [
      h("span", { class: "node-label ch-label", title: data.name }, data.name),
    ]);
  }

  return h("div", { class: "custom-tree-node" }, [
    h("span", { class: "node-label" }, [
      data.name,
      h(
        "svg",
        {
          class: "care-bottom",
          xmlns: "http://www.w3.org/2000/svg",
          viewBox: "0 0 1024 1024",
        },
        [h("path", { fill: "currentColor", d: "m192 384 320 384 320-384z" })]
      ),
      h(
        "svg",
        {
          class: "care-right",
          xmlns: "http://www.w3.org/2000/svg",
          viewBox: "0 0 1024 1024",
        },
        [h("path", { fill: "currentColor", d: "M384 192v640l384-320.064z" })]
      ),
    ]),
  ]);
};
</script>

<style scoped lang="scss">
.iot-list-dialog {
  position: fixed;
  width: 353px;
  height: 553px;
  top: 110px;
  left: 440px;
  background-image: url("@/assets/imgs/IOTImage/dialog-bg.png");
  background-size: 100% 100%;
  padding: 5px;
  padding-top: 38px;
  z-index: 29;
  .top-icon {
    position: absolute;
    top: 5px;
    left: 10px;
    right: 10px;
    height: 32px;
    background-image: url("@/assets/imgs/IOTImage/header-top.png");
    background-size: 100% 100%;
  }
  .top-title {
    width: 100%;
    text-align: left;
    color: #c8cef2;
    padding-left: 23px;
    font-size: 24px;
    font-family: "heitao";
  }
  .tree-box {
    box-sizing: border-box;
    width: 100%;
    height: calc(100% - 52px);
    overflow-y: auto;
    padding-left: 25px;
    padding-right: 5px;
    scrollbar-width: none;
    :deep(.el-tree) {
      background-color: rgba(0, 0, 0, 0);
      padding-left: 20px;
      .el-checkbox {
        position: absolute;
        right: 30px;
        .el-checkbox__inner {
          width: 16px;
          height: 16px;
          border: 1px solid #66b3ff;
          background-color: rgba(0, 0, 0, 0);
          border-radius: 0;
        }
      }
      .el-checkbox__input.is-checked .el-checkbox__inner {
        background-color: #409eff;
        &::after {
          left: 4px;
          width: 5px;
          height: 9px;
        }
      }
    }
    :deep(.el-tree-node__content > .el-tree-node__expand-icon) {
      display: none;
      font-size: 15px;
      color: #585858;
    }
    :deep(.el-tree) {
      & > .el-tree-node {
        margin-bottom: 20px;
        & > .el-tree-node__content {
          position: relative;
          &:before {
            content: "";
            position: absolute;
            left: -20px;
            top: 10px;
            width: 9px;
            height: 9px;
            background: rgba(20, 220, 232, 0.78);
            transform: rotate(45deg);
          }
        }
      }
    }
    :deep(.el-tree-node__content:hover) {
      background-color: rgba(0, 0, 0, 0);
    }
    :deep(.el-tree-node__content) {
      background-color: rgba(0, 0, 0, 0) !important;
      margin-bottom: 10px;
      font-size: 16px;
    }
    :deep(.care-bottom) {
      display: none;
      width: 13px;
      margin-left: 8px;
    }
    :deep(.care-right) {
      display: inline;
      width: 13px;
      margin-left: 8px;
    }
    :deep(.el-tree > .is-expanded > .el-tree-node__content) {
      .care-bottom {
        display: inline;
      }
      .care-right {
        display: none;
      }
    }
    :deep(
        .el-tree .el-tree-node__children > .is-expanded > .el-tree-node__content
      ) {
      .care-bottom {
        display: inline;
      }
      .care-right {
        display: none;
      }
    }
  }
  .top-icon-bottom {
    position: absolute;
    bottom: 5px;
    left: 10px;
    right: 10px;
    height: 32px;
    background-image: url("@/assets/imgs/IOTImage/header-bottom.png");
    background-size: 100% 100%;
  }
}
:deep(.custom-tree-node) {
  .node-label {
    width: 179px;
    display: inline-block;
    overflow-x: hidden;
  }
}
</style>
