<template>
  <!-- 水务资产 -->
  <div class="WaterAssets">
    <!-- 左侧排水设施 -->
    <Transition name="fade_left">
      <DrainageFacilitiesLeft v-show="!showPanel"></DrainageFacilitiesLeft>
    </Transition>

    <!-- 右侧监测资产 -->
    <Transition name="fade_right">
      <MonitoringAssetsRight v-show="!showPanel"></MonitoringAssetsRight>
    </Transition>

    <!-- 下部分数字孪生 -->
    <shuziluanshengBottom></shuziluanshengBottom>

    <PanelDisplayHidden @showPanelChange="PanelChange"></PanelDisplayHidden>
  </div>
</template>
<script setup name="WaterAssets">
import bus from '@/bus';
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
const { proxy } = getCurrentInstance();
import DrainageFacilitiesLeft from './DrainageFacilitiesLeft/index.vue';
import MonitoringAssetsRight from './MonitoringAssetsRight/index.vue';
import shuziluanshengBottom from './shuziluanshengBottom/index.vue';

// 面板控制组件
import PanelDisplayHidden from '@/views/pictureOnMap/page/components/PanelDisplayHidden.vue';
const showPanel = ref(false); //面板展开收起
const PanelChange = val => {
  showPanel.value = val;
};

const mapInit = ()=>{
  setTimeout(() => bus.emit('setLayerVisible', { layername: 'newfiber-XYZLayer', isCheck: true }), 2000);
}

onMounted(() => {
  mapInit();
  bus.on(mapInitBusName,() => mapInit());
});
onBeforeUnmount(() => {
  bus.emit('setLayerVisible', { layername: 'newfiber-XYZLayer', isCheck: false });
  bus.off(mapInitBusName);
});
</script>
<style lang="scss" scoped></style>