<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 class="yearBox">
      <el-button :type="currentYear == 2022 ? 'warning' : 'primary'" @click="changeYear(2022)">2022</el-button>
      <el-button :type="currentYear == 2023 ? 'warning' : 'primary'" @click="changeYear(2023)">2023</el-button>
      <el-button :type="currentYear == 2024 ? 'warning' : 'primary'" @click="changeYear(2024)" disabled>2024</el-button>
      <el-button type="primary" @click="dialogResult = true">考核结果</el-button>
    </div>

    <!-- 佐证材料 -->
    <el-dialog v-model="dialogVisible" :title="'佐证材料' + currentYear" width="600px" append-to-body>
      <zzclDialog v-if="dialogVisible" :pageParams="pageParams"></zzclDialog>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 考核结果 -->
    <el-dialog v-model="dialogResult" title="绩效考核结果" width="1800px" append-to-body>
      <ExamineKH></ExamineKH>
    </el-dialog>
  </div>
</template>

<script setup>
import zzclDialog from './zzclDialog.vue'; //佐证材料公共弹窗
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 ExamineKH from '@/views/spongePerformance/mainIndex/index.vue';
import bus from '@/bus';
import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';

const { proxy } = getCurrentInstance();
const showPanel = ref(true); //面板展开收起
const currentYear = ref(2023);
const dialogVisible = ref(false);
const pageParams = ref({});
const dialogResult = ref(false);

// 年份切换
function changeYear(year) {
  currentYear.value = year;
  bus.emit('changeYearKH', year);
}

// 面板内容展开收起控制
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();
  });
  changeYear(2023); //默认显示2023年数据
  // 佐证材料
  bus.on('getZzclData', e => {
    pageParams.value.type = e;
    pageParams.value.year = currentYear.value;
    dialogVisible.value = true;
  });
});
onBeforeUnmount(() => {
  removeSelectedLayer(['kaifengFangHong', 'kaifengRainUse']);
  bus.off('removeKHLayer');
});
</script>

<style lang="scss" scoped>
.oneMapKHPG {
  width: 100%;
  height: 100%;
  .headHMA {
    border-radius: 8px;
    top: 0px;
    height: auto;
    display: flex;
    background: none;
    padding: 10px;
  }
  .yearBox {
    position: fixed;
    left: 490px;
    bottom: 40px;
    z-index: 99;
    width: 80px;
    display: flex;
    flex-wrap: wrap;
    justify-content: right;
    .el-button {
      margin-bottom: 10px;
    }
  }
}
</style>