<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 yanAnYiLao from '@/assets/yanAnYiLao.json';
import yanAnFengXian from '@/assets/yanAnFengXian.json';
import yanAnPipeSupervise from '@/assets/yanAnPipeSupervise.json';
import yanAnPKSupervise from '@/assets/yanAnPKSupervise.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: 'yiLaoPoint',
          layerIcon: null,
          layerVisible: false,
          data: yanAnYiLao,
        },
        {
          layerName: '内涝风险点',
          layerKey: 'fengXianPoint',
          layerIcon: null,
          layerVisible: false,
          data: yanAnFengXian,
        },
        {
          layerName: '排水管网监测',
          layerKey: 'pipeSupervise',
          layerIcon: null,
          layerVisible: false,
          data: yanAnPipeSupervise,
        },
        {
          layerName: '排水排口监测',
          layerKey: 'PKsupervise',
          layerIcon: null,
          layerVisible: false,
          data: yanAnPKSupervise,
        },
      ],
    },
  ],
});
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>