<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 { onBeforeUnmount } from 'vue';

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

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

onMounted(() => {});
onBeforeUnmount(() => {
  if (newfiberMapbox.map.getLayer('waterLine')) {
    newfiberMapbox.map.removeLayer('waterLine');
    newfiberMapbox.map.removeLayer('waterLabel');
    newfiberMapbox.map.removeSource('waterLine');
    newfiberMapbox.map.removeSource('waterLabel');
  }
  bus.emit('setIniteLayer', [
    {
      layername: 'sewageFactory',
      show: true,
    },
    {
      layername: 'waterLoging',
      show: true,
    },
    {
      layername: 'cesiumPaishuiArea2',
      show: true,
    },
  ]);
  newfiberMapbox.map.easeTo({
    center: [114.315, 34.852],
    zoom: 10.4,
  });
});
</script>

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