<template>
  <!-- 海绵综合一张图 排水防涝 -->
  <div class="oneMapPSFL">
    <!-- 左侧 -->
    <div :class="['publicLeftHM', 'animate__animated animate__delay-1s', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
      <!-- 降雨日历 -->
      <CaldarRain></CaldarRain>

      <!-- 降雨报告 -->
      <ReportRain class="mt-10"></ReportRain>

      <!-- 防汛物资 -->
      <FloodWZ class="mt-10"></FloodWZ>
    </div>

    <!-- 头部 -->
    <div :class="['headHMA', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
      <HeadRain></HeadRain>
    </div>

    <!-- 右侧 -->
    <div :class="['publicRightHM', 'animate__animated animate__delay-2s', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
      <!-- 泵站运行监控 -->
      <MonitorBZ></MonitorBZ>

      <!-- 监测设备 -->
      <MonitorEquip class="mt-10"></MonitorEquip>
    </div>
  </div>
</template>

<script setup>
import CaldarRain from '@/views/sponeScreen/waterFlood/rainCaldar.vue'; //降雨日历
import ReportRain from '@/views/sponeScreen/waterFlood/rainReport.vue'; //降雨报告
import FloodWZ from '@/views/sponeScreen/waterFlood/floodWZ.vue'; //防汛物资
import MonitorBZ from '@/views/sponeScreen/waterFlood/pumpMonitor.vue'; //泵站运行监控
import MonitorEquip from '@/views/sponeScreen/waterFlood/equipMonitor.vue'; //监测设备
import HeadRain from '@/views/sponeScreen/waterFlood/futureRain.vue'; //降雨预报
import { onBeforeUnmount } from 'vue';

const { proxy } = getCurrentInstance();
const showPanel = ref(true); //面板展开收起

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

onMounted(() => {});
onBeforeUnmount(() => {});
</script>

<style lang="scss" scoped>
.oneMapPSFL {
  .headHMA {
    background: none;
    background: rgba(0, 59, 109, 0.8);
    border-radius: 8px;
    top: 10px;
    height: auto;
  }
}
</style>