<template>
  <!-- 海绵综合一张图 城市概况 -->
  <div class="cityPage">
    <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
      <PhysicalGeography></PhysicalGeography>
    </div>

    <!-- 头部 -->
    <div :class="['headHMA', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
      <headHMAimg></headHMAimg>
    </div>

    <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
      <!-- 城市规划 -->
      <cityplanning></cityplanning>

      <!-- 现状问题 -->
      <CurrentIssues></CurrentIssues>
    </div>
  </div>
</template>

<script setup>
import cityplanning from '@/views/sponeScreen/cityGK/cityplanning.vue'; //城市规划页面
import CurrentIssues from '@/views/sponeScreen/cityGK/CurrentIssues.vue'; //现状问题
import headHMAimg from '@/views/sponeScreen/cityGK/headHMAimg.vue'; //头部
import PhysicalGeography from '@/views/sponeScreen/cityGK/PhysicalGeography.vue'; //头部
import bus from '@/bus/index';
import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
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(() => {
  // setTimeout(() => {
  //   newfiberMapBoxVectorLayer.addMapboxWeather();
  // }, 6000);
  // newfiberMap.setView({
  //   lng: 114.312,
  //   lat: 34.502,
  //   heading: 2.281299097855777,
  //   zoom: 16358.12942752382,
  //   pitch: -25.2508969308367,
  //   roll: 0.005453465256790101,
  // });
});
onBeforeUnmount(() => {
  if (!newfiberMapbox) return;
  newfiberMapBoxVectorLayer.removeByIds([
    'oneCenter',
    'oneCenter_label',
    'oneCenter1',
    'oneCenter1_label',
    'oneCenter2',
    'oneCenter2_label',
    'oneCenter3',
    'rainAreaLayer', //年经总量控制率
    'rainAreaLayer_label',
    'kaifengAllArea',
    'kaifengAllArea_label',
    'kaifengAllWater',
    'kaifengAllAreaLabel',
    'builtCity',
    'kaifengAllAreaBoundary',
  ]);
  newfiberMapbox.map.setMinZoom(0);
  //显示河湖标注
  newfiberMapbox.map.setLayoutProperty('kaifengWaterLabel1', 'visibility', 'visible');
  newfiberMapbox.map.setLayoutProperty('kaifengWaterLabel2', 'visibility', 'visible');
  newfiberMapbox.map.setLayoutProperty('hn_kf_hm_dltb', 'visibility', 'none');
  bus.emit('setIniteLayer', [
    { layername: 'buildingModel', show: true },
    { layername: 'topography', show: true },
    { layername: 'buildingModel', show: true },
  ]);
});
</script>

<style lang="scss" scoped></style>