<template>
  <!-- 海绵综合一张图 项目建设 -->
  <div class="publicContainer">
    <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
      <!-- 建设状态 -->
      <ConstructionStatus></ConstructionStatus>
      <!-- 降雨日历 -->
      <CaldarRain class="mt-5"></CaldarRain>
      <!--  项目展示-->
      <ProjectDisplay @qipaoDateMeth="qipaoDateMeth" class="mt-5"></ProjectDisplay>
    </div>
    <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
      <!--项目评估  -->
      <ProjectEvaluation></ProjectEvaluation>
    </div>
  </div>

  <!-- 项目详情 -->
  <qipao v-if="visibleqipao" @closed="closed" :allDateList="allDate"></qipao>
</template>
<script setup>
import CaldarRain from '@/views/sponeScreen/waterFlood/rainCaldar.vue'; //降雨日历
import ConstructionStatus from '@/views/sponeScreen/projectHM/ConstructionStatus.vue'; //建设状态
import ProjectYype from '@/views/sponeScreen/projectHM/ProjectYype.vue'; //建设状态
import ProjectDisplay from '@/views/sponeScreen/projectHM/ProjectDisplay.vue'; //项目展示
import ProjectEvaluation from '@/views/sponeScreen/projectHM/ProjectEvaluation.vue'; //项目评估
import qipao from '@/views/sponeScreen/projectHM/gongchenkanbani_comp/qipao.vue';
const { proxy } = getCurrentInstance();
const showPanel = ref(true); //面板展开收起
const visibleqipao = ref(false);
const allDate = ref({});

// 面板内容展开收起控制
const props = defineProps({
  showPanel: {
    type: Boolean,
  },
});
watch(
  () => props.showPanel,
  () => {
    showPanel.value = props.showPanel;
  },
  { immediate: true }
);
function qipaoDateMeth(v, isShow) {
  visibleqipao.value = false;
  allDate.value = v;
  setTimeout(() => {
    if (isShow) {
      visibleqipao.value = true;
    }
  }, 10);
}
function closed(v) {
  visibleqipao.value = v;
  newfiberMapbox.map.easeTo({
    center: [114.345, 34.801],
    zoom: 13.8,
    pitch: 55,
  });
}
onMounted(() => {});
</script>

<style lang="scss" scoped>
.publicContainer {
  position: relative;
}
</style>