<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'; //人工采样
import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
import track from '@/assets/geojson/kaifeng/track.json';
import car from '@/assets/newImgs/car.png';
import { onBeforeUnmount } from '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(() => {
  newfiberMapBoxVectorLayer.addDynamicRoute('dynamicRoute', track, car);
  newfiberMapbox.map.easeTo({
    center: [114.342, 34.795],
    zoom: 13,
  });
});
onBeforeUnmount(() => {
  newfiberMapBoxVectorLayer.removeByIds(['dynamicRoute', 'dynamicRoute_Symbol', 'dynamicRoute_Symbol_1']);
  clearInterval(window.routeTimer);
  clearInterval(window.routeTimer_1);
  window.routeTimer = null;
  window.routeTimer_1 = null;
});
</script>

<style lang="scss" scoped></style>