<template>
  <div class="moduleBox moduleBoxLeft flex flex-v">
    <EachModuleTitle title="防汛调度" />
    <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="tabContent flex flex-v">
      <fxjc v-if="tabActive==1" />
      <clgz v-if="tabActive==2" />
      <bzdd v-if="tabActive==3" />
      <pzdd v-if="tabActive==4" />
    </div>
  </div>
</template>

<script setup name="PailaodiaoduLeft">
  import bus from '@/bus';
import EachModuleTitle from '@/views/pictureOnMap/page/components/EachModuleTitle.vue'
import fxjc from './components/fxjc.vue'
import clgz from './components/clgz.vue'
import bzdd from './components/bzdd.vue'
import pzdd from './components/pzdd.vue'
const emit = defineEmits(['changeType'])
const events_params = {
  setHighlight: { key: "setHighlight" },
  setLayerVisible: { key: "setLayerVisible" },
};
const tabData=[
  {label:'防汛检查',value:'1'},
  {label:'车辆跟踪',value:'2',keys:'泵车离线,泵车在线'},
  {label:'泵站调度',value:'3',   keys:"rainPumpStation"},
  {label:'排渍调度',value:'4',keys:"waterlogging"},
]
const tabActive=ref(1)
const tabClickFun=(item)=>{
  const { setLayerVisible } = events_params;
  tabActive.value=item.value
  emit('changeType',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.map((i) => (i.keys || '').split(',')).flat().filter(Boolean).flat().forEach((i) => bus.emit(setLayerVisible.key, { layername: i, isCheck: false }));
  bus.emit(setHighlight.key, []);
};
</script>

<style lang="scss" scoped>
.tabContent{
  height: calc(100% - 60px);
  overflow: hidden;
}
</style>