<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 tslyqk_constituent_3d from '@/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue'; //3d图例

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 { onBeforeUnmount } from 'vue';
const { proxy } = getCurrentInstance();
const showPanel = ref(true); //面板展开收起

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

onMounted(() => {
  setTimeout(() => {
    bus.emit('setIniteLayer', [
      {
        layername: 'topography',
        show: false,
      },
      {
        layername: 'builtCity',
        show: false,
      },
    ]);
  }, 5000);
});
onBeforeUnmount(() => {
  bus.emit('setIniteLayer', [
    {
      layername: 'topography',
      show: true,
    },
    {
      layername: 'builtCity',
      show: true,
    },
    {
      layername: 'centerCity',
      show: true,
    },
  ]);
});
</script>

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