<template>
  <div class="lengendPage">
    <!-- 展开收起 -->
    <div :class="['zksqImg', 'animate__animated', ifExpand ? 'animate__fadeInLeft' : 'goLeft']" title="展开收起" @click="changeZhan"></div>
    <!-- 图例框 -->
    <div :class="['publicLegend', 'animate__animated', ifExpand ? 'animate__fadeInLeft' : 'animate__fadeOutLeft']">
      <div v-for="item in legendList" :key="item.layername">
        <div class="titleB" @click="changeAllLegend(item)">
          {{ item.title }}
          <div class="iconImg">
            <el-icon v-if="item.isCheck" size="22">
              <Check />
            </el-icon>
          </div>
        </div>
        <div class="part" v-for="item2 in item.children" @click="changeLegend(item2)" :key="item2.layername">
          <img :src="getImageUrl(item2.url, 'newImgs/layerIcon')" class="img" />
          <p class="title">{{ item2.name }}</p>
          <div class="iconImg">
            <el-icon v-if="item2.isCheck" size="22">
              <Check />
            </el-icon>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 天地图、影像图切换 -->
  <!-- <div class="isOpenBuildingTL">
    <el-popover placement="right-start" :width="80" trigger="hover">
      <template #reference><img src="@/assets/images/gisMap/earthIcon.png" alt="" class="earthIcon" /></template>
      <template #default>
        <div class="typeMap">
          <img src="@/assets/images/gisMap/defMap.png" alt="" :class="mapActive == 1 ? 'activeImg' : ''" @click="changeMapType(1)" />
          <img src="@/assets/images/gisMap/ysMap.png" alt="" :class="mapActive == 2 ? 'activeImg' : ''" @click="changeMapType(2)" />
        </div>
      </template>
    </el-popover>
  </div> -->
</template>
<script>
import { getImageUrl } from '@/utils/ruoyi';
import bus from '@/bus';
import mapCommonLegend from './commonLegend.js';
import YSFQ1 from '@/assets/geojson/YSFQ1.json';
import YSFQ2 from '@/assets/geojson/YSFQ2.json';
import YSFQLable1 from '@/assets/geojson/YSFQLable1.json';

export default {
  components: {},
  props: {},
  setup(props) {
    const allData = reactive({
      dataList: {},
      legendList: [],
      ifExpand: true,
      mapPopupShow: false,
      pipeData: {},
      pipePopupShow: false,
      pointData: {},
      pointPopupShow: false,
      allMapList: [],
      isOpenBuilding: false,
      buildingModels: null,
      mapActive: 1,
    });
    const timer = ref(null);
    const filterMapList = ref([]);
    // 展开收起
    const changeZhan = () => {
      allData.ifExpand = !allData.ifExpand;
    };
    // 天地、影像图切换
    function changeMapType(val) {
      allData.mapActive = val;
      if (val == 2) {
        bus.emit('setLayerVisible', { layername: 'newfiber-XYZLayer', isCheck: true });
        newfiberMapbox.map.setMaxZoom(17.4);
      } else {
        bus.emit('setLayerVisible', { layername: 'newfiber-XYZLayer', isCheck: false });
        newfiberMapbox.map.setMaxZoom(24);
      }
    }
    // 图例点击
    const changeLegend = item => {
      item.isCheck = !item.isCheck;
      if (item.layername == 'imageTiler') {
        if (item.isCheck) {
          let wmtsLayer = new mapboxgl1.WMTSLayer({
            url: 'https://100.92.3.235:8081/shugjModalUrl/agserver/gwc/service/wmts?layer=dom_2402&style=default&tilematrixset=EPSG:4490_dom_2402&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:4490_dom_2402:{z}&TileCol={x}&TileRow={y}',
          });
          wmtsLayer.addTo(newfiberMapbox.map, 'imageTiler');
          newfiberMapbox.map.moveLayer('imageTiler', 'hubei_xiaogan_hm_psfq');
        } else {
          newfiberMapbox.map.removeLayer('imageTiler');
          //newfiberMapbox.map.removeSource('imageTiler');
        }
      }
      if (item.layername == 'roadServer') {
        if (item.isCheck) {
          newfiberMapbox.map.addSource('roadServer', {
            type: 'raster',
            tiles: [
              'https://100.92.3.235:8081/shugjModalUrl/agserver/topp/ows?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.3.0&request=GetMap&crs=EPSG:3857&transparent=true&width=256&height=256&layers=城市道路-线（主城区）',
            ],
            tileSize: 256,
          });
          newfiberMapbox.map.addLayer({
            id: 'roadServer',
            type: 'raster',
            minzoom: 0,
            maxzoom: 20,
            source: 'roadServer',
          });
        } else {
          newfiberMapbox.map.removeLayer('roadServer');
          newfiberMapbox.map.removeSource('roadServer');
        }
      }
      if (!item.isCheck) {
        if (item.layername == 'ysLine1' || item.layername == 'wsLine1') {
          bus.emit('closePipeInfo');
          let clearSelectedFeature = [];
          newfiberMapbox.getLayers().forEach(feature => {
            if (feature.newfiberId == 'highlight_linestring') {
              clearSelectedFeature.push(feature);
            }
          });

          if (!!clearSelectedFeature.length) {
            clearSelectedFeature[0].setData({ type: 'FeatureCollection', features: [] });
          }
        } else if (item.layername == 'YSFQ1') {
          !!newfiberMapbox.map.getLayer('areaLabel') && newfiberMapbox.map.removeLayer('areaLabel');
          !!newfiberMapbox.map.getSource('areaLabel') && newfiberMapbox.map.getSource('areaLabel');
          let clearSelectedFeature = [];
          newfiberMapbox.getLayers().forEach(feature => {
            if (feature.newfiberId == 'highlight_polygon') {
              clearSelectedFeature.push(feature);
            }
          });

          if (!!clearSelectedFeature.length) {
            clearSelectedFeature[0].setData({ type: 'FeatureCollection', features: [] });
          }
        }
      }
      if (item.layername == 'imageTiler') {
        if (item.isCheck) {
          newfiberMapbox.map.setMaxZoom(20);
        } else {
          newfiberMapbox.map.setMaxZoom(24);
        }
      }
      if (item.layername == 'YSFQ1') {
        let visibility;
        item.isCheck == true ? (visibility = 'visible') : (visibility = 'none');
        //bus.emit('setLayerVisible', item);
        newfiberMapbox.map.setLayoutProperty('YSFQ1', 'visibility', visibility);
        newfiberMapbox.map.setLayoutProperty('YSFQLable1', 'visibility', visibility);
        newfiberMapbox.map.setLayoutProperty('YSFQ2', 'visibility', visibility);
        newfiberMapbox.map.setLayoutProperty('YSFQLable2', 'visibility', visibility);
      } else {
        if (item.data) {
          item.data.features.forEach(feature => {
            if (feature.properties.type.includes('_1')) {
              feature.properties.type = feature.properties.type.split('_')[0];
            }
          });
          bus.emit('setGeoJSON', { json: item.data, key: item.layername });
        }
        bus.emit('setLayerVisible', item);
      }
    };
    //图例一级标题勾选
    const changeAllLegend = item => {
      if (item.noAllCheck) {
        return;
      }
      item.isCheck = !item.isCheck;
      item.children.forEach(element => {
        element.isCheck = !item.isCheck;
        changeLegend(element);
      });
    };
    //关闭弹窗
    const closePopup = () => {
      if (window.PopupInfo) {
        window.PopupInfo.hide();
        allData.mapPopupShow = false;
      }
      allData.pipePopupShow = false;
    };
    const closePointPopup = () => {
      allData.pointPopupShow = false;
    };

    //控制默认图层开启图层
    watch(filterMapList, (newVal, oldVal) => {
      if (!!oldVal) {
        oldVal.map(item => {
          item.isCheck = true;
          changeLegend(item);
        });
      }
      newVal.map(item => {
        item.isCheck = false;
        changeLegend(item);
      });
    });
    onMounted(() => {
      mapCommonLegend.getStationData();
      let YSFQLable2;
      let YSFQLableFeature2 = [];
      YSFQ2.features.forEach(feature => {
        let labelCenter = turf.center(turf.featureCollection([feature]));
        labelCenter.properties = feature.properties;
        YSFQLableFeature2.push(labelCenter);
      });
      YSFQLable2 = turf.featureCollection(YSFQLableFeature2);
      nextTick(() => {
        bus.on('legendDataList', legendDataList => {
          allData.legendList = legendDataList;
          allData.allMapList = allData.legendList[1].children
            .concat(allData.legendList[2].children)
            .concat(allData.legendList[3].children)
            .concat(allData.legendList[0].children);
          bus.emit('setLegendData', allData.allMapList);

          timer.value = setInterval(() => {
            if (!!!newfiberMapbox.map.getLayer('point')) {
              return;
            } else {
              !!!newfiberMapbox.map.getSource('YSFQ1') && newfiberMapbox.map.addSource('YSFQ1', { type: 'geojson', data: YSFQ1 });
              !!!newfiberMapbox.map.getLayer('YSFQ1') &&
                newfiberMapbox.map.addLayer({
                  id: 'YSFQ1',
                  type: 'fill',
                  source: 'YSFQ1',
                  minzoom: 0,
                  maxzoom: 12,
                  paint: {
                    'fill-color': ['get', 'fill_color'],
                    'fill-opacity': 0.4,
                  },
                  layout: {
                    visibility: 'none',
                  },
                });
              !!!newfiberMapbox.map.getSource('YSFQLable1') &&
                newfiberMapbox.map.addSource('YSFQLable1', { type: 'geojson', data: YSFQLable1 });
              !!!newfiberMapbox.map.getLayer('YSFQLable1') &&
                newfiberMapbox.map.addLayer({
                  id: 'YSFQLable1',
                  type: 'symbol',
                  source: 'YSFQLable1',
                  minzoom: 0,
                  maxzoom: 12,
                  layout: {
                    visibility: 'none',
                    'text-field': ['get', 'name'],
                    'text-font': ['KlokanTech Noto Sans Regular'],
                    'text-size': 16,
                    'text-line-height': 3,
                    'text-anchor': 'bottom',
                  },
                  paint: {
                    'text-color': '#ffffff',
                  },
                });
              newfiberMapbox.map.moveLayer('YSFQ1', 'pipeline_info');
              !!!newfiberMapbox.map.getSource('YSFQ2') && newfiberMapbox.map.addSource('YSFQ2', { type: 'geojson', data: YSFQ2 });
              !!!newfiberMapbox.map.getLayer('YSFQ2') &&
                newfiberMapbox.map.addLayer({
                  id: 'YSFQ2',
                  type: 'fill',
                  source: 'YSFQ2',
                  minzoom: 12,

                  paint: {
                    'fill-color': ['get', 'fill_color'],
                    'fill-opacity': 0.4,
                  },
                  layout: {
                    visibility: 'none',
                  },
                });
              !!!newfiberMapbox.map.getSource('YSFQLable2') &&
                newfiberMapbox.map.addSource('YSFQLable2', { type: 'geojson', data: YSFQLable2 });
              !!!newfiberMapbox.map.getLayer('YSFQLable2') &&
                newfiberMapbox.map.addLayer({
                  id: 'YSFQLable2',
                  type: 'symbol',
                  source: 'YSFQLable2',
                  minzoom: 12,
                  layout: {
                    visibility: 'none',
                    'text-field': ['get', 'NAME'],
                    'text-font': ['KlokanTech Noto Sans Regular'],
                    'text-size': 16,
                    'text-line-height': 3,
                    'text-anchor': 'bottom',
                  },
                  paint: {
                    'text-color': '#ffffff',
                  },
                });
              newfiberMapbox.map.moveLayer('YSFQ2', 'pipeline_info');
              newfiberMapbox.map.on('click', ['YSFQ1', 'YSFQ2'], e => {
                const clickfeature = newfiberMapbox.map
                  .queryRenderedFeatures([
                    [e.point.x - 10 / 2, e.point.y - 10 / 2],
                    [e.point.x + 10 / 2, e.point.y + 10 / 2],
                  ])
                  .filter(i => i.layer.id == 'YSFQ1' || i.layer.id == 'YSFQ2')[0];
                if (!clickfeature) return;
                let filterFeature;
                let findFeature = YSFQ1.features.concat(YSFQ2.features);
                findFeature.forEach(feature => {
                  if (feature.properties['NAME'] == clickfeature.properties['NAME']) {
                    filterFeature = feature;
                  }
                });
                //添加面积标注
                let clickLine = turf.featureCollection([turf.polygonToLine(filterFeature)]);
                let centerPoint = turf.center(turf.featureCollection([filterFeature]));
                centerPoint.properties = filterFeature.properties;
                console.log('centerPoint', centerPoint);
                if (!newfiberMapbox.map.getLayer('areaLabel')) {
                  newfiberMapbox.map.addSource('areaLabel', { type: 'geojson', data: turf.featureCollection([centerPoint]) });
                  newfiberMapbox.map.addLayer({
                    id: 'areaLabel',
                    type: 'symbol',
                    source: 'areaLabel',
                    layout: {
                      'text-field': ['get', 'Area'],
                      'text-font': ['KlokanTech Noto Sans Regular'],
                      'text-size': 14,
                      'text-offset': [0, 1.5],
                    },
                    paint: {
                      'text-color': '#d1dbe5',
                    },
                  });
                } else {
                  newfiberMapbox.map.getSource('areaLabel').setData(turf.featureCollection([centerPoint]));
                }
                //点击高亮
                let clearSelectedFeature = [];
                newfiberMapbox.getLayers().forEach(featureItem => {
                  if (featureItem.newfiberId == 'highlight_polygon') {
                    clearSelectedFeature.push(featureItem);
                  }
                });
                if (!!clearSelectedFeature.length) {
                  clearSelectedFeature[0].setData(clickLine);
                }
              });
              bus.emit('initeLayer', ['YSBZ', 'PLBZ', 'WSBZ', 'WSCLC', 'wsLine1', 'ysLine1']);
              clearInterval(timer.value);
            }
          }, 1000);
        });

        //右侧面板地图联动，开启默认图层
        bus.on('initeLayer', e => {
          filterMapList.value = [];
          if (!!e) {
            e.forEach(layername => {
              allData.allMapList.forEach(item => {
                if (item.layername == layername) {
                  filterMapList.value.push(item);
                }
              });
            });
          } else {
            allData.allMapList.forEach(item => {
              item.isCheck = false;
              changeLegend(item);
            });
          }
        });
        //老澴河排口弹窗
        bus.on('supervisePopupPK3', e => {
          allData.ifExpand = false;
        });
        //关闭老澴河排口弹窗
        bus.on('clonesupervisePopupPK3', e => {
          allData.ifExpand = true;
        });
      });
    });
    onBeforeUnmount(() => {
      bus.off('legendDataList');
      bus.off('initeLayer');
      bus.off('supervisePopupPK3');
      bus.off('clonesupervisePopupPK3');
      if (timer.value) {
        clearInterval(timer.value);
      }
    });
    return {
      ...toRefs(allData),
      changeZhan,
      changeLegend,
      changeAllLegend,
      closePointPopup,
      closePopup,
      changeMapType,
    };
  },
};
</script>
<style lang="scss">
.el-popper {
  .typeMap {
    img {
      width: 100%;
      cursor: pointer;
    }
    .activeImg {
      border: 1px solid #00d1ff;
    }
  }
}
.isOpenBuildingTL {
  width: 240px;
  position: absolute;
  top: 6%;
  left: 5px;
  z-index: 100;
  display: flex;
  justify-content: flex-end;
  .earthIcon {
    cursor: pointer;
    width: 35px;
    height: 35px;
  }
}
.lengendPage {
  .zksqImg {
    width: 13px;
    height: 130px;
    background: url('@/assets/newImgs/down.png');
    background-size: 100% 100%;
    border-radius: 10px 10px 0px 0px;
    position: absolute;
    top: 40%;
    left: 243px;
    z-index: 115;
    cursor: pointer;
  }
  .goLeft {
    left: 2px;
  }
  .publicLegend {
    background: #00314e;
    border: 1px solid #094065;
    box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.68);
    opacity: 0.7;
    border-radius: 10px;
    position: absolute;
    top: 10%;
    left: 5px;
    z-index: 110;
    height: 750px;
    width: 240px;
    overflow: auto;
    .titleB {
      display: flex;
      height: 35px;
      line-height: 35px;
      background: #094065;
      font-size: 16px;
      padding-left: 10px;
      .iconImg {
        margin-left: 125px;
        margin-top: 5px;
        height: 20px;
        .el-icon {
          font-weight: bold;
          &.active {
            color: #00ee6f;
          }
        }
      }
    }
    .part {
      display: flex;
      height: 40px;
      align-items: center;
      cursor: pointer;
      &:hover {
        background: #08596a;
      }
      .img {
        width: 12px;
        height: 12px;
        margin-left: 15px;
        margin-right: 5px;
      }
      .title {
        margin-left: 5px;
        font-size: 14px;
        height: 30px;
        line-height: 30px;
        width: 155px;
      }
      .iconImg {
        width: 20px;
        height: 20px;
        .el-icon {
          font-weight: bold;
          &.active {
            color: #00ee6f;
          }
        }
      }
    }
  }
}
#mapPopup {
  width: 300px;
  height: 200px;
  background: #00314e;
  border: 1px solid #094065;
  z-index: 115;
  .title {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .titleName {
      display: flex;
      align-items: center;
      height: 22px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ccf1ff;
      line-height: 22px;
      &:before {
        display: block;
        content: '';
        width: 3px;
        height: 16px;
        background: #00d1ff;
        margin-right: 10px;
      }
    }
    .closePopup {
      margin-right: 20px;
      height: 22px;
      cursor: pointer;
    }
  }
  .basicContent {
    display: flex;
    align-items: center;
    margin: 20px 80px;
    .contentKey {
      width: 80px;
      margin: 3px;
      height: 20px;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: #00d1ff;
    }
    .contentValue {
      margin: 3px 3px 3px 15px;
      width: 200px;
      height: 20px;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: #00d1ff;
    }
  }
}
#pipeInfo {
  width: 350px;
  padding: 10px;
  background: rgba(0, 49, 78, 0.5);
  border: 1px solid #094065;
  z-index: 111;
}
#pointInfo {
  width: 350px;
  padding: 10px;
  background: rgba(0, 49, 78, 0.5);
  border: 1px solid #094065;
  z-index: 111;
}
.title {
  display: flex;
  .infoTitle {
    display: flex;
    align-items: center;
    height: 22px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ccf1ff;
    line-height: 22px;
    margin: 5px;
    width: 330px;
    &:before {
      display: block;
      content: '';
      width: 3px;
      height: 16px;
      background: #00d1ff;
      margin-right: 10px;
    }
  }
  .closePopup {
    margin: 5px;
    height: 22px;
    cursor: pointer;
  }
}

.dividerLine {
  height: 2px;
  border: 1px;
  margin: 0px 0 10px 0px;
  background: linear-gradient(90deg, rgba(0, 115, 165, 0) 0.79%, #0073a5 20.43%, #0073a5 82.43%, rgba(0, 115, 165, 0) 100%);
}
</style>