<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']">
      <FutureRain></FutureRain>
    </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.type == 'YSBZ' || pumpObj.type == 'WSBZ')" :pumpObj="pumpObj"></PumpProcess>
      <!-- 合流泵站 -->
      <PumpProcessHL v-if="dialogShow && pumpObj.type == 'combineBengZhan'" :pumpObj="pumpObj"></PumpProcessHL>
    </el-dialog>

    <!-- 污水处理厂工艺图 -->
    <el-dialog v-model="showWSC" :title="wscTitle + '实时数据'" width="1050px" append-to-body>
      <WscMonitor v-if="showWSC" :wscObj="wscObj"></WscMonitor>
    </el-dialog>

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

<script setup>
import WscMonitor from '@/views/sponeScreen/waterFlood/wscMonitor.vue'; //污水处理厂工艺图
import PipeDetail from '@/views/sponeScreen/waterFlood/pipeDetail.vue'; //管网监测点详情
import PumpProcess from '@/views/sponeScreen/waterFlood/pumpProcess.vue'; //雨污水泵站运行工况图
import PumpProcessHL from '@/views/sponeScreen/waterFlood/pumpProcessHL.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 FutureRain from '@/views/sponeScreen/waterFlood/futureRain.vue'; //降雨预报
import { nextTick, onBeforeUnmount } from 'vue';
import bus from '@/bus/index';
import riverFlow from '@/assets/geojson/kaifeng/riverFlow.json';
import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';

const { proxy } = getCurrentInstance();
const showPanel = ref(true); //面板展开收起
const dialogShow = ref(false);
const pumpObj = ref({});
const showPipe = ref(false);
const showWSC = ref(false);
const wscObj = ref({});
const wscTitle = ref('污水处理厂');

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

onMounted(() => {
  // 泵站工况图
  bus.on('checkBZGYT', params => {
    pumpObj.value = params;
    dialogShow.value = true;
  });
  // 污水厂工况图
  bus.on('checkWSCGYT', params => {
    wscTitle.value = params.sewageName || '污水处理厂';
    wscObj.value = params;
    showWSC.value = true;
  });
  // 管网监测点
  bus.on('pipeMonitorBus', params => {
    showPipe.value = true;
  });
  setTimeout(() => {
    // newfiberMap.setView({
    //   lng: 114.342,
    //   lat: 34.702,
    //   heading: 2.281299097855777,
    //   zoom: 6358.12942752382,
    //   pitch: -25.2508969308367,
    //   roll: 0.005453465256790101,
    // });
    //河流流向
    let layer = new mapboxL7.LineLayer({
      name: 'waterFlow',
    })
      .source(riverFlow)
      .size(6)
      .shape('line')
      .texture('arrow')
      .color('rgb(62, 255, 253)')
      .animate({
        interval: 1, // 间隔
        duration: 1.5, // 持续时间，延时
        trailLength: 2, // 流线长度
      })
      .style({
        opacity: 0.6,
        lineTexture: true, // 开启线的贴图功能
        iconStep: 200, // 设置贴图纹理的间距
        borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
        borderColor: '#fff', // 默认为 #ccc
      });
    newfiberMapbox.addLayer(layer);
    // 默认缩放比、中心点
    newfiberMapbox.map.easeTo({
      center: [114.344, 34.802],
      zoom: 13.6,
      pitch: 30,
    });
    bus.emit('setIniteLayer', [
      {
        layername: 'YSBZ', //雨水泵站
        show: false,
      },
      {
        layername: 'combineBengZhan', //合流泵站
        show: false,
      },
      {
        layername: 'sewageFactory', //污水处理厂
        show: false,
      },
      {
        layername: 'ysLine1', //雨水管网
        show: false,
      },
      {
        layername: 'hsLine1', //合流管网
        show: false,
      },
      {
        layername: 'pipeline_info_flow', //管网流向
        show: false,
      },
      {
        layername: 'pipeMonitor', //管网监测点，测试
        show: false,
      },
      {
        layername: 'waterCourse', //河道水位计
        show: false,
      },
    ]);
  }, 1000);
});
onBeforeUnmount(() => {
  bus.off('checkBZGYT');
  bus.off('checkWSCGYT');
  bus.off('pipeMonitorBus');
  if (!newfiberMapbox) return;
  newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('waterFlow'));
  newfiberMapBoxVectorLayer.removeByIds(['materialFeatures']);
  if (newfiberMapbox.map.hasImage('materialFeatures')) {
    newfiberMapbox.map.removeImage('materialFeatures');
  }
  bus.emit('setIniteLayer', [
    {
      layername: 'YSBZ', //雨水泵站
      show: true,
    },
    {
      layername: 'combineBengZhan', //合流泵站
      show: true,
    },
    {
      layername: 'sewageFactory', //污水处理厂
      show: true,
    },
    {
      layername: 'ysLine1', //雨水管网
      show: true,
    },
    {
      layername: 'hsLine1', //合流管网
      show: true,
    },
    {
      layername: 'pipeline_info_flow', //管网流向
      show: true,
    },
    {
      layername: 'pipeMonitor', //管网监测点，测试
      show: true,
    },
    {
      layername: 'waterCourse', //河道水位计
      show: true,
    },
  ]);
});
</script>

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