<template>
  <!-- 海绵综合一张图 项目建设 -->
  <div class="publicContainer">
    <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
      <!-- 建设状态 -->
      <ConstructionStatus ></ConstructionStatus>
      <!--  项目展示-->
      <ProjectDisplay  @qipaoDateMeth="qipaoDateMeth"></ProjectDisplay>
    </div>
    <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
      <!-- 项目类型 -->
      <ProjectYype></ProjectYype>
      <!--项目评估  -->
      <ProjectEvaluation></ProjectEvaluation>
    </div>
  </div>
    <qipao v-if="visibleqipao" @closed="closed" :allDateList="allDate"></qipao>
</template>
<script setup>
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,
  () => {
    console.log('val---', props.showPanel);
    showPanel.value = props.showPanel;
  },
  { immediate: true }
);
function qipaoDateMeth(v, isShow) {
  visibleqipao.value = false;
  allDate.value = v;
  setTimeout(() => {
    if (isShow) {
      debugger
      visibleqipao.value = true;
    }
  }, 10);
}
function closed(v) {
  visibleqipao.value = v;
}
onMounted(() => {});
</script>

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