<template>
  <!-- 防汛排涝  监测预警  左侧 -->
  <div class="MonitoringWarningLeft">
    <div class="moduleBox moduleBoxLeft" v-loading="loading" element-loading-background="rgba(11, 18, 52, 0.3)">
      <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" v-if="isPort">
        <!-- 渍水风险 -->
        <Zsfx class="" v-if="tabActive == 'Zsfx'" :atSum="atSum"></Zsfx>
        <!-- 河湖水情 -->
        <Hhsq v-if="tabActive == 'Hhsq'" :atSum="atSum"></Hhsq>
        <!-- 泵站工情 -->
        <Bzgq v-if="tabActive == 'Bzgq'" :atSum="atSum"></Bzgq>
        <!-- 管网风险 -->
        <Gwfx v-if="tabActive == 'Gwfx'" :atSum="atSum"></Gwfx>
      </div>
    </div>
  </div>
</template>
<script setup name="MonitoringWarningLeft">
import bus from '@/bus';
import { ref, reactive, onMounted } from 'vue';
import { drainageDispatchmonitorCount } from '@/api/FloodControlAndDrainage.js';
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 Bzgq from './component/Bzgq.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: 'Bzgq',
    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, []);
};
const isPort = ref(false);
const loading = ref(false);

// 获取tab数据
function gitDataList() {
  loading.value = true;
  drainageDispatchmonitorCount().then(res => {
    console.log('获取监测预警tab数据', res);
    loading.value = false;
    isPort.value = true;
    if (res && res.code == 200) {
      tabData.value[0].sum = res.data.zsfx;
      atSum.value = res.data.zsfx;
      tabData.value[1].sum = res.data.hhsq;
      tabData.value[2].sum = res.data.bzgq;
      tabData.value[3].sum = res.data.gwfx;
    }
  });
}
onMounted(() => {
  gitDataList();
});
</script>
<style lang="scss" scoped>
.MonitoringWarningLeft {
}
</style>