<template>
  <!-- 防汛排涝  监测预警  左侧 -->
  <div class="MonitoringWarningLeft">
    <div class="moduleBox moduleBoxLeft">
      <EachModuleTitle title="监测预警" :isTab="false"></EachModuleTitle>
      <div class="typeList flex">
        <div
          class="flex-1 tab"
          :class="tabActive == i.value ? 'active' : ''"
          v-for="i in tabData"
          :key="i.value"
          @click="tabClickFun(i)"
        >
          {{ i.label }}
        </div>
      </div>
      <div class="h100">
        <!-- 渍水风险 -->
        <Zsfx class="" v-if="tabActive == 'Zsfx'"></Zsfx>
        <!-- 河湖水情 -->
        <Hhsq v-if="tabActive == 'Hhsq'"></Hhsq>
        <!-- 水库水情 -->
        <Sksq v-if="tabActive == 'Sksq'"></Sksq>
        <!-- 泵站工情 -->
        <Bzgq v-if="tabActive == 'Bzgq'"></Bzgq>
        <!-- 水闸工况 -->
        <Szgk v-if="tabActive == 'Szgk'"></Szgk>
        <!-- 管网风险 -->
        <Gwfx v-if="tabActive == 'Gwfx'"></Gwfx>
      </div>
    </div>
  </div>
</template>
<script setup name="MonitoringWarningLeft">
import bus from '@/bus';
import { ref, reactive, onMounted } from 'vue';
const { proxy } = getCurrentInstance();
import EachModuleTitle from '@/views/pictureOnMap/page/components/EachModuleTitle.vue';
import Zsfx from './component/Zsfx.vue';
import Hhsq from './component/Hhsq.vue';
import Sksq from './component/Sksq.vue';
import Bzgq from './component/Bzgq.vue';
import Szgk from './component/Szgk.vue';
import Gwfx from './component/Gwfx.vue';

const tabData = ref([
  {
    label: '渍水风险',
    value: 'Zsfx',
    keys: 'waterlogging',
    sum: {},
  },
  {
    label: '河湖水情',
    value: 'Hhsq',
    keys: 'lake_water_level',
    sum: {},
  },
  {
    label: '水库水情',
    value: 'Sksq',
    keys: 'lake_water_level',
    sum: {},
  },
  {
    label: '泵站工情',
    value: 'Bzgq',
    keys: 'rainPumpStation,dirtyPumpStation',
    sum: {},
  },
  {
    label: '水闸工况',
    value: 'Szgk',
    keys: 'rainPumpStation,dirtyPumpStation',
    sum: {},
  },
  {
    label: '管网风险',
    value: 'Gwfx',
    keys: 'rainwater_pipeline_quality',
    sum: {},
  },
]);
const tabActive = ref('Zsfx');
const atSum = ref({});
const events_params = {
  setHighlight: { key: 'setHighlight' },
  setLayerVisible: { key: 'setLayerVisible' },
};

const tabClickFun = item => {
  const { setLayerVisible } = events_params;
  console.log('item', item);
  atSum.value = item.sum;
  tabActive.value = item.value;
  closeAllLayer();
  item.keys && item.keys.split(',').forEach(i => bus.emit(setLayerVisible.key, { layername: i, isCheck: true }));
};

const closeAllLayer = () => {
  const { setLayerVisible, setHighlight } = events_params;
  tabData.value
    .map(i => i.keys.split(','))
    .flat()
    .filter(Boolean)
    .flat()
    .forEach(i => bus.emit(setLayerVisible.key, { layername: i, isCheck: false }));
  bus.emit(setHighlight.key, []);
};

onMounted(() => {});
</script>
<style lang="scss" scoped>
.MonitoringWarningLeft {
}
</style>