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

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

      <!-- 防汛物资 -->
      <FloodWZ class="mt-5"></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" :pumpObj="pumpObj"></PumpProcess>
    </el-dialog>

    <!-- 污水处理厂工艺图 -->

    <!-- 管网监测点详情 -->
    <el-dialog v-model="showPipe" title="管网监测详情" width="900px" append-to-body>
      <PipeDetail v-if="showPipe"></PipeDetail>
    </el-dialog>
  </div>
</template>

<script setup>
import PipeDetail from '@/views/sponeScreen/waterFlood/pipeDetail.vue'; //管网监测点详情
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';
import bus from '@/bus/index';

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

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

onMounted(() => {
  // 泵站工况图
  bus.on('checkBZGYT', params => {
    console.log('checkBZGYT--', params);
    pumpObj.value = params;
    dialogShow.value = true;
  });
  setTimeout(() => {
    newfiberMap.setView({
      lng: 114.342,
      lat: 34.702,
      heading: 2.281299097855777,
      zoom: 6358.12942752382,
      pitch: -25.2508969308367,
      roll: 0.005453465256790101,
    });

    bus.emit('setIniteLayer', [
      {
        layername: 'YSBZ',
        show: false,
      },
      {
        layername: 'sewageFactory',
        show: false,
      },
      {
        layername: 'henan_kaifeng_ysline',
        show: false,
      },
      {
        layername: 'henan_kaifeng_hsline',
        show: false,
      },
      {
        layername: 'pipeLineFlow',
        show: false,
      },
      {
        layername: 'pipeMonitor',
        show: false,
      },
    ]);
  }, 1000);
});
onBeforeUnmount(() => {
  bus.off('checkBZGYT');
});
</script>

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