<template>
  <Transition name="slideTC">
    <div class="LayerControl" v-show="ShowTuCheng">
      <div class="GroupBox" v-for="item in AllData.LayerData" v-show="item.children">
        <div class="GroupName">{{ item.title }}</div>
        <div
          class="TCList"
          v-for="item2 in item.children"
          :class="item2.layerVisible ? 'TCList_Check' : ''"
          @click="layerClick(item2)"
        >
          <div class="TCList_Select">
            <el-icon v-show="item2.layerVisible"><Check /></el-icon>
          </div>
          <img class="TCList_Icon" :src="item2.layerIcon" v-if="item2.layerIcon" />
          <!-- 当有未配置图片的图层时,将使用备用图片 -->
          <img class="TCList_Icon" :src="requireTuChengImg('TuCheng')" v-else />

          <div class="TCList_Name">
            {{ item2.layerName }}
          </div>
        </div>
      </div>
    </div>
  </Transition>
</template>

<script setup name="LayerControl">
import { ref, reactive, toRefs, onMounted } from "vue";
// 图层控制icon引入
import { requireTuChengImg } from "@/utils/util";
import yanAnPaiShuiArea from "@/assets/yanAnPaiShuiArea.json";
import yanAnRoad from "@/assets/yanAnRoad.json";
import yanAnWater from "@/assets/yanAnWater.json";
import yanAnWSCLC from "@/assets/yanAnWSCLC.json";
import yanAnCenterCity from "@/assets/yanAnCenterCity.json";
import yanAnYSBZ from "@/assets/yanAnYSBZ.json";
import bus from "@/bus";
import mapBoxVectorLayer from "@/utils/GISdocument/mapboxVectorLayer.js";
const AllData = reactive({
  // 图层控制面板的渲染数据
  /**图层面板数据字段说明
   *@param title:渲染在图层控制中的图层分组名称
   *@param children:关联图层分组与图层的字段
   *@param layerName:渲染在图层控制中的图层名称
   *@param layerKey:gis使用的图层唯一id名称
   *@param layerIcon:渲染在图层控制中UI设计的图层示意图
   *@param layerVisible:代表当前图层是否勾选,true:勾选中且地图上图;false:不勾选且地图不上图
   */
  LayerData: [
    {
      title: "基本信息",
      children: [
        {
          layerName: "中心城区",
          layerKey: "centerCity",
          layerIcon: requireTuChengImg("zhongxinchengqu"),
          layerVisible: false,
          dynamicLineData: yanAnCenterCity,
        },
        {
          layerName: "路网",
          layerKey: "road",
          layerIcon: "",
          layerVisible: false,
          dynamicLineData: yanAnRoad,
        },
        {
          layerName: "河流水系",
          layerKey: "waterLake",
          layerIcon: "",
          layerVisible: false,
          dynamicLineData: yanAnWater,
        },
        // {
        //   layerName: '低山台塬',
        //   layerKey: '',
        //   layerIcon: '',
        //   layerVisible: false,
        // },
      ],
    },
    {
      title: "雨水系统",
      children: [
        {
          layerName: "排水分区",
          layerKey: "paishuiArea",
          layerIcon: null,
          layerVisible: false,
          areaData: yanAnPaiShuiArea,
        },
        {
          layerName: "雨水管网",
          layerKey: "ysLine1",
          layerIcon: null,
          layerVisible: false,
        },
        // {
        //   layerName: '雨水排口',
        //   layerKey: '',
        //   layerIcon: null,
        //   layerVisible: false,
        // },
        {
          layerName: "雨水泵站",
          layerKey: "YSBZ",
          layerIcon: null,
          layerVisible: false,
          data: yanAnYSBZ,
        },
      ],
    },
    {
      title: "污水系统",
      children: [
        {
          layerName: "污水分区",
          layerKey: "sewageArea",
          layerIcon: null,
          layerVisible: false,
        },
        {
          layerName: "污水管网",
          layerKey: "wsLine1",
          layerIcon: null,
          layerVisible: false,
        },
        // {
        //   layerName: '溢流口',
        //   layerKey: '',
        //   layerIcon: null,
        //   layerVisible: false,
        // },
        // {
        //   layerName: '污水泵站',
        //   layerKey: '',
        //   layerIcon: null,
        //   layerVisible: false,
        // },
        {
          layerName: "污水处理厂",
          layerKey: "WSCLC",
          layerIcon: null,
          layerVisible: false,
          data: yanAnWSCLC,
        },
      ],
    },
    {
      title: "感知设备",
      children: [
        // {
        //   layerName: '拦截闸',
        //   layerKey: '',
        //   layerIcon: null,
        //   layerVisible: false,
        // },
      ],
    },
  ],
});
onMounted(() => {
  let initeLegend = AllData.LayerData[0].children
    .concat(AllData.LayerData[1].children)
    .concat(AllData.LayerData[2].children)
    .concat(AllData.LayerData[3].children);
  initeLegend.forEach((element) => {
    element.layername = element.layerKey;
  });
  bus.emit("setLegendData", initeLegend);
});
const props = defineProps({
  ShowTuCheng: false,
});

watch(
  () => props.ShowTuCheng,
  (newValue, oldValue) => {
    console.log("ShowTuCheng变化了", newValue, oldValue);
  },
  { immediate: true, deep: true }
);

const layerClick = (item2) => {
  item2.layerVisible = !item2.layerVisible;
  item2.isCheck = item2.layerVisible;
  console.info(
    `点击了名称为${item2.layerName},图层ID为${item2.layerKey}的图层,点击后的图层展示情况为${item2.layerVisible}`
  );
  bus.emit("setLayerVisible", { layername: item2.layerKey, isCheck: item2.isCheck });
  if (item2.areaData) {
    if (item2.isCheck) {
      mapBoxVectorLayer.addGeojsonPolygonWithLabel(item2.layerKey, item2.areaData);
    } else {
      mapBoxVectorLayer.removeByIds([item2.layerKey, item2.layerKey + "_label"]);
    }
  }
  if (item2.layerKey == "road") {
    if (item2.isCheck) {
      if (newfiberMapbox.getLayerByName("dynamicRoad")) {
        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("dynamicRoad"));
      }
      let layer = new mapboxL7.LineLayer({
        name: "dynamicRoad",
      })
        .source(item2.dynamicLineData)
        .size(1.3)
        .shape("line")
        .color("rgb(184, 184, 184)")
        .animate({
          interval: 1, // 间隔
          duration: 1.5, // 持续时间，延时
          trailLength: 2, // 流线长度
        })
        .style({
          opacity: 0.6,
        });
      newfiberMapbox.addLayer(layer);
    } else {
      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("dynamicRoad"));
    }
  }
  if (item2.layerKey == "waterLake") {
    if (item2.isCheck) {
      if (newfiberMapbox.getLayerByName("waterLake")) {
        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("waterLake"));
      }
      let layer = new mapboxL7.LineLayer({
        name: "waterLake",
      })
        .source(item2.dynamicLineData)
        .size(4)
        .shape("line")
        .texture("arrow")
        .color("rgb(34, 149, 252)")
        .animate({
          interval: 2, // 间隔
          duration: 3, // 持续时间，延时
          trailLength: 3, // 流线长度
        })
        .style({
          opacity: 0.8,
          lineTexture: true, // 开启线的贴图功能
          iconStep: 200, // 设置贴图纹理的间距
          borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
          borderColor: "#fff", // 默认为 #ccc
        });
      newfiberMapbox.addLayer(layer);
    } else {
      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("waterLake"));
    }
  }
  if (item2.layerKey == "centerCity") {
    if (item2.isCheck) {
      const layer = new mapboxL7.LineLayer({
        name: "centerCity",
      })
        .source(item2.dynamicLineData)
        .size(30)
        .shape("wall")
        .style({
          opacity: 0.8,
          sourceColor: "#1cd779",
          targetColor: "rbga(255,255,255, 0)",
        });
      newfiberMapbox.addLayer(layer);
    } else {
      newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("centerCity"));
    }
  }
};
</script>

<style lang="scss" scoped>
.LayerControl {
  width: 190px;
  height: 688px;
  position: absolute;
  top: 150px;
  right: 476px;
  background: url("@/assets/images/Sponge_screen/TuChengBG.png") no-repeat center;
  background-size: contain;
  box-sizing: border-box;
  padding: 25px 0px;
  overflow: auto;
  z-index: 998;

  .GroupBox {
    width: 100%;
    height: auto;
    margin-bottom: 5px;

    .GroupName {
      width: 190px;
      height: 25px;
      line-height: 25px;
      background-image: url("@/assets/images/Sponge_screen/TuChengFenZuBG.png"),
        linear-gradient(to right, #1c899600, #1c8996, #1c899600);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 14px;
      color: #ffffff;
      text-align: center;
    }
    .TCList {
      width: 100%;
      height: 14px;
      margin-top: 10px;
      display: flex;
      color: #fff;
      cursor: pointer;
      flex-direction: row;
      flex-wrap: nowrap;
      align-content: center;
      justify-content: flex-start;
      align-items: center;
      box-sizing: border-box;
      padding-left: 20px;

      .TCList_Select {
        width: 14px;
        height: 14px;
        box-sizing: border-box;
        border: 1px solid #fff;
      }
      .TCList_Icon {
        width: 14px;
        height: 14px;
        margin: 0 10px;
      }
      .TCList_Name {
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 14px;
        height: 14px;
        line-height: 14px;
      }
    }
    .TCList_Check {
      color: #12f3ff;
      .TCList_Select {
        border: 1px solid #12f3ff;
      }
    }
  }
}
// 动画
/*
  进入和离开动画可以使用不同
  持续时间和速度曲线。
*/
.slideTC-enter-active,
.slideTC-leave-active {
  transition: all 0.2s ease-out;
}

.slideTC-enter-from,
.slideTC-leave-to {
  height: 0px;
  opacity: 0;
}
</style>