<template>
  <!-- 海绵综合一张图 考核评估 -->
  <div class="oneMapKHPG">
    <!-- 左侧 -->
    <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
      <chanChuJiXiao></chanChuJiXiao>
      <yuShuiZiYuanHua></yuShuiZiYuanHua>
      <keTouShuiMianJi></keTouShuiMianJi>
    </div>

    <!-- 中间 -->
    <div :class="['headHMA', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
      <jiZhiJianShe></jiZhiJianShe>
      <ganZhiRenKeDu></ganZhiRenKeDu>
    </div>

    <!-- 右侧 -->
    <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
      <heiChouShuiTi></heiChouShuiTi>
      <xiangMuJianShe></xiangMuJianShe>
      <ziJinJiXiao></ziJinJiXiao>
    </div>
  </div>
</template>

<script setup>
import jiZhiJianShe from './jiZhiJianShe'; //管理绩效评价
import ganZhiRenKeDu from './ganZhiRenKeDu'; //感知认可度考核评估
import chanChuJiXiao from './chanChuJiXiao'; //产出绩效
import yuShuiZiYuanHua from './yuShuiZiYuanHua'; //雨水资源化利用
import keTouShuiMianJi from './keTouShuiMianJi'; //可透水面积
import heiChouShuiTi from './heiChouShuiTi'; //黑臭水体
import xiangMuJianShe from './xiangMuJianShe'; //项目建设完成情况
import ziJinJiXiao from './ziJinJiXiao'; //资金绩效评价
import bus from '@/bus';
import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';

const { proxy } = getCurrentInstance();
const showPanel = ref(true); //面板展开收起

// 面板内容展开收起控制
const props = defineProps({
  showPanel: {
    type: Boolean,
  },
});
watch(
  () => props.showPanel,
  () => {
    showPanel.value = props.showPanel;
  },
  { immediate: true }
);

//删除图层
const removeSelectedLayer = () => {
  // json图层
  let layerList = ['kaifengFangHong', 'kaifengRainUse', 'kaifengTouShuiArea', 'kaifengNatureWater', 'kaifengShengHuoWS', 'kaifengBOD'];
  layerList.forEach(element => {
    if (newfiberMapbox.map.hasImage(element)) {
      newfiberMapbox.map.removeImage(element);
      newfiberMapBoxVectorLayer.removeByIds([element]);
    }
  });
  // 黑臭水体的图层
  if (newfiberMapbox.map.getLayer('waterLine')) {
    newfiberMapbox.map.removeLayer('waterLine');
    newfiberMapbox.map.removeLayer('waterLabel');
    newfiberMapbox.map.removeSource('waterLine');
    newfiberMapbox.map.removeSource('waterLabel');
  }
  // 内涝消除积水点图层清除
  if (newfiberMapbox.popupService.popups.length > 0) {
    newfiberMapbox.popupService.popups.forEach(popup => {
      nextTick(() => {
        newfiberMapbox.removePopup(popup);
      });
    });
  }
  if (newfiberMapbox.map.getLayer('waterLoging')) {
    newfiberMapbox.map.removeLayer('waterLoging');
    newfiberMapbox.map.removeSource('waterLoging');
  }

  // 内涝防治标准
  newfiberMapBoxVectorLayer.removeByIds(['builtCity', 'moduleFloodBoundary', 'moduleFloodlabel', 'moduleFlood']);
};

onMounted(() => {
  // 清除图层
  bus.on('removeKHLayer', () => {
    removeSelectedLayer();
  });
});
onBeforeUnmount(() => {
  removeSelectedLayer(['kaifengFangHong', 'kaifengRainUse']);
  bus.off('removeKHLayer');
});
</script>

<style lang="scss" scoped>
.oneMapKHPG {
  width: 100%;
  .headHMA {
    border-radius: 8px;
    top: 0px;
    height: auto;
    padding: 10px;
    display: flex;
    background: none;
  }
}
</style>