<template>
  <!-- 海绵综合一张图 长效运维 -->
  <div class="publicContainer">
    <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
      <!-- 巡查任务 -->
      <InspectionTasks></InspectionTasks>
      <!-- 污水厂进口BOD -->
      <SewageBOD></SewageBOD>
      <!-- 监测站点统计 -->
      <MonitoringStation></MonitoringStation>
    </div>

    <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
      <!-- 公众建议 -->
      <PublicAdvice></PublicAdvice>
      <!-- 宣传培训 -->
      <PromotionTraining></PromotionTraining>
      <!-- 人工采样 -->
      <ManualSampling></ManualSampling>
    </div>
  </div>
</template>

<script setup>
const showPanel = ref(true); //面板展开收起
import InspectionTasks from '@/views/sponeScreen/longYW/InspectionTasks.vue'; //建设状态
import SewageBOD from '@/views/sponeScreen/longYW/SewageBOD.vue'; //建设状态
import MonitoringStation from '@/views/sponeScreen/longYW/MonitoringStation.vue'; //监测站点统计
import PublicAdvice from '@/views/sponeScreen/longYW/PublicAdvice.vue'; //公众建议
import PromotionTraining from '@/views/sponeScreen/longYW/PromotionTraining.vue'; //宣传培训
import ManualSampling from '@/views/sponeScreen/longYW/ManualSampling.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>