<template>
  <div id="TuLiIndex">
    <div class="TuLiBox" v-for="(item, index) in AllData.TuLiData" :key="index">
      <div class="TuLiBoxTitle" v-show="item.showFlag">{{ item.title }}</div>
      <div
        class="TuLiList"
        v-for="(item2, index2) in item.children"
        :key="index2"
        @click="TuLiClick(item2)"
        v-show="item2.showFlag"
      >
        <img :src="item2.iconUrl" alt="" class="TuLiImg" />
        <p class="title">{{ item2.layerName }}</p>
        <div class="iconImg">
          <el-icon size="22" v-show="item2.check"><Check /></el-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="TuLiIndex">
import { screenMapLayerList } from "@/api/dataAnalysis/syntherticData";
import { Refresh } from "@element-plus/icons-vue";
import { ref, reactive, toRefs, onMounted, watch } from "vue";

// 父元素传值
// debugger;
const props = defineProps({
  Type: Number,
});

watch(
  () => props.Type,
  (value) => getTuLiData(value)
);
const AllData = reactive({
  TuLiData: [{}],
});
watch(
  () => AllData.TuLiData,
  (value) => {
    console.log("图层数据发生了变化", AllData.TuLiData);
    RefreshTuCeng();
  },
  {
    deep: true,
    immediate: true,
  }
);
// 获取图例数据
const getTuLiData = (value) => {
  let type = value == 1 ? "Project" : "SiteMonitor";
  screenMapLayerList(type).then((res) => {
    if (res.code == 200) {
      AllData.TuLiData = res.data;
      localStorage.setItem("TuLiData", JSON.stringify(AllData.TuLiData));
      console.log(AllData.TuLiData);
      // 拍平数据存储,为了节省渲染时获取icon的遍历
      let TuLiData_Array = [];
      AllData.TuLiData.forEach((element) => {
        TuLiData_Array.push(element.children);
      });
      localStorage.setItem(
        "TuLiData_Array",
        JSON.stringify(TuLiData_Array.flat(Infinity))
      );
    }
  });
};

// 图例点击事件
const TuLiClick = (item) => {
  // 对图例进行操作
  console.log(item);
  console.log(`**TuLi_0001**:点击的图层名称为:${item.layerName}`);
  console.log(`**TuLi_0002**:点击图层想要的显示状态为:${!item.check}`);
  item.check = !item.check;
  // newfiberMap.setFeaturesVisibleByIds([item.layerType], !item.check);
  // 点击的是点位图层
  // switch (item.gisType) {
  //   case "point":
  //     // 操控点
  //     if (item.check) {
  //       // 隐藏
  //       item.check = !item.check;
  //     } else {
  //       // 显示
  //       item.check = !item.check;
  //     }
  //     break;
  //   case "line":
  //     // 操控线
  //     if (item.check) {
  //       // 隐藏
  //       item.check = !item.check;
  //     } else {
  //       // 显示
  //       item.check = !item.check;
  //     }
  //     break;
  //   case "area":
  //     // 操控面
  //     if (item.check) {
  //       // 隐藏
  //       item.check = !item.check;
  //     } else {
  //       // 显示
  //       item.check = !item.check;
  //     }
  //     break;
  // }
};
// 刷新地图图层
const RefreshTuCeng = (item) => {
  AllData.TuLiData.forEach((element) => {
    //只遍历展示出来的图层
    if (element.showFlag) {
      element.children.forEach((element2) => {
        // debugger;
        newfiberMap.setFeaturesVisibleByIds([element2.layerType], element2.check);
      });
    }
  });
};
onMounted(() => {
  getTuLiData(props.Type);
});
</script>

<style lang="scss" scoped>
#TuLiIndex {
  width: 220px;
  height: auto;
  max-height: 600px;
  position: absolute;
  bottom: 0;
  left: 480px;
  background: linear-gradient(0deg, #011431 0%, rgba(1, 20, 49, 0.8) 100%);
  border-radius: 4px;
  box-sizing: border-box;
  padding: 10px;
  overflow: auto;
  z-index: 999;

  .TuLiBox {
    width: 100%;
    height: auto;

    .TuLiBoxTitle {
      height: 35px;
      line-height: 35px;
      background: #094065;
      font-size: 16px;
      padding-left: 10px;
    }
    .TuLiList {
      display: flex;
      height: 34px;
      line-height: 34px;
      align-items: center;
      cursor: pointer;
      flex-direction: row;
      flex-wrap: nowrap;
      align-content: center;
      position: relative;
      margin: 3px 0;
      &:hover {
        background: #08596a;
      }

      .TuLiImg {
        width: 20px;
        height: 20px;
        margin-left: 15px;
        margin-right: 5px;
        vertical-align: middle;
      }
      .title {
        color: white;
        font-size: 14px;
        height: 40px;
        line-height: 40px;
      }
      .iconImg {
        position: absolute;
        right: 10px;
        top: 8px;
      }
    }
  }
}
</style>