<template>
  <div id="TuLiIndex">
    <el-checkbox-group v-model="AllData.checkList">
      <el-checkbox
        v-for="item in AllData.TuLiData"
        :label="item.layerType"
        class="TuLiList"
      >
        <img :src="item.iconUrl" alt="" class="TuLiImg" />
        {{ item.layerName }}
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script setup name="TuLiIndex">
import { screenMapLayerList } from "@/api/dataAnalysis/syntherticData";
import { ref, reactive, toRefs, onMounted } from "vue";
const AllData = reactive({
  checkList: [],
  TuLiData: [{}],
});
// 获取图例数据
const getTuLiData = () => {
  screenMapLayerList().then((res) => {
    if (res.code == 200) {
      AllData.TuLiData = res.data;
      // 建立关系数组
      // let ArrayGX = [
      //   {
      //     key1: "Rtu-Rain",
      //     key2: "rain",
      //   },
      //   {
      //     key1: "Rtu-Flow",
      //     key2: "flow",
      //   },
      // ];
      AllData.TuLiData.forEach((element) => {
        if (element.layerType == "Rtu-Rain") {
          element.siteType = "rain";
        }
        if (element.layerType == "Rtu-Flow") {
          element.siteType = "flow";
        }
        if (element.layerType == "RtuSite-WaterLevel") {
          element.siteType = "water_level";
        }
      });
      localStorage.setItem("TuLiData", JSON.stringify(AllData.TuLiData));
    }
  });
};
onMounted(() => {
  getTuLiData();
});
</script>

<style lang="scss" scoped>
#TuLiIndex {
  width: 360px;
  height: auto;
  max-height: 200px;
  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;

  .TuLiList {
    color: white;
    font-size: 16px;

    .TuLiImg {
      width: 20px;
      height: 20px;
      vertical-align: middle;
    }
  }
}
</style>