<template>
  <!-- 海绵综合一张图 排水防涝 -->
  <div class="oneMapPSFL">
    <!-- 左侧 -->
    <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
      <!-- 排水设施统计 -->
      <PsssCount></PsssCount>

      <!-- 降雨报告 -->
      <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', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
      <!-- 泵站运行监控 -->
      <!-- <MonitorBZ></MonitorBZ> -->

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

    <!-- 泵站运行工况图 -->
    <el-dialog v-model="dialogShow" title="泵站工况图" width="1500px" append-to-body>
      <PumpProcess v-if="dialogShow"></PumpProcess>
    </el-dialog>
  </div>
</template>

<script setup>
import PumpProcess from '@/views/sponeScreen/waterFlood/pumpProcess.vue'; //泵站运行工况图
import PsssCount from '@/views/sponeScreen/waterFlood/psssCount.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 dialogShow = 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>