<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>
</template>
<script>
import { getImageUrl } from '@/utils/ruoyi';
import bus from '@/bus';
import mapCommonLegend from './commonLegend.js';
import kaifengPSFQarea from './addPSFQarea.js';

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;
    };

    // 图例点击
    const changeLegend = item => {
      item.isCheck = !item.isCheck;
      if (item.layername == 'imageTiler') {
        if (item.isCheck) {
          newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'visible');
          newfiberMapbox.map.moveLayer('newfiber-XYZLayer', 'buildingModel');
          newfiberMapbox.map.setMaxZoom(17.5);
        } else {
          newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'none');
          newfiberMapbox.map.setMaxZoom(24);
        }
      }
      if (item.layername == 'kaifengBuilding') {
        if (item.isCheck) {
          newfiberMapbox.map.setLayoutProperty('buildingModel', 'visibility', 'visible');
        } else {
          newfiberMapbox.map.setLayoutProperty('buildingModel', 'visibility', 'none');
        }
      }
      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: [] });
          }
        }
      }
      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('YSFQlabel1', 'visibility', visibility);
        newfiberMapbox.map.setLayoutProperty('YSFQline1', 'visibility', visibility);

        newfiberMapbox.map.setLayoutProperty('YSFQ2', 'visibility', visibility);
        newfiberMapbox.map.setLayoutProperty('YSFQlabel2', 'visibility', visibility);
        newfiberMapbox.map.setLayoutProperty('YSFQline2', 'visibility', visibility);

        newfiberMapbox.map.setLayoutProperty('YSFQ3', 'visibility', visibility);
        newfiberMapbox.map.setLayoutProperty('YSFQlabel3', 'visibility', visibility);
        newfiberMapbox.map.setLayoutProperty('YSFQline3', 'visibility', visibility);
      } else {
        if (item.data) {
          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();

      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 {
              kaifengPSFQarea.addPSFQ1(newfiberMapbox.map, 0, 10, 'none');
              kaifengPSFQarea.addPSFQ2(newfiberMapbox.map, 10.01, 12, 'none');
              kaifengPSFQarea.addPSFQ3(newfiberMapbox.map, 12.01, 'none');
              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,
    };
  },
};
</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>