<template>
  <!-- 海绵综合一张图 项目建设 -->
  <div class="publicContainer">
    <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
      <!-- 建设状态 -->
      <ConstructionStatus></ConstructionStatus>
      <!--  项目展示-->
      <ProjectDisplay></ProjectDisplay>
    </div>
    <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
      <!-- 项目类型 -->
      <ProjectYype></ProjectYype>
      <!--项目评估  -->
      <ProjectEvaluation></ProjectEvaluation>
    </div>
  </div>
</template>

<script setup>
const showPanel = ref(true); //面板展开收起
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'; //项目展示
const { proxy } = getCurrentInstance();
// 面板内容展开收起控制
const props = defineProps({
  showPanel: {
    type: Boolean,
  },
});
watch(
  () => props.showPanel,
  () => {
    console.log('val---', props.showPanel);
    showPanel.value = props.showPanel;
  },
  { immediate: true }
);
onMounted(() => {});
</script>

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