<template>
  <!-- 防汛排涝 -->
  <div class="FloodControlAndDrainage">
    <Jianceyujin v-if="activeSublevel == 'Jianceyujin'"></Jianceyujin>
    <Fuzhujuece v-if="activeSublevel == 'Fuzhujuece'"></Fuzhujuece>
    <Pailaodiaodu v-if="activeSublevel == 'Pailaodiaodu'"></Pailaodiaodu>
    <Pailaohuigu v-if="activeSublevel == 'Pailaohuigu'"></Pailaohuigu>
    <div class="middleTab">
      <div
        class="eachSublevel"
        :class="activeSublevel == item.value ? 'activeSublevel' : ''"
        v-for="item in tabArr"
        :key="item.value"
        @click="TabClick(item)"
      >
        {{ item.label }}
      </div>
    </div>
  </div>
</template>
<script setup name="FloodControlAndDrainage">
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
import Jianceyujin from "./Jianceyujin/index.vue";
import Fuzhujuece from "./Fuzhujuece/index.vue";
import Pailaodiaodu from "./Pailaodiaodu/index.vue";
import bus from "@/bus";
import Pailaohuigu from "./Pailaohuigu/index.vue";

const { proxy } = getCurrentInstance();
const activeSublevel = ref("Jianceyujin");
const tabArr = ref([
  {
    label: "监测预警",
    value: "Jianceyujin",
    keys: [
      { key: "waterlogging", visible: true },
      { key: "lake_water_level", visible: false },
      { key: "rainPumpStation", visible: false },
      { key: "dirtyPumpStation", visible: false },
      { key: "rainwater_pipeline_quality", visible: false },
    ],
  },
  {
    label: "辅助决策",
    value: "Fuzhujuece",
    keys: [
      { key: "雨水系统流向", visible: true },
      { key: "雨水系统流向1", visible: true },
      { key: "waterlog_community", visible: false },
      { key: "rain_water_pump_station_info", visible: true },
      { key: "storehouse", visible: true },
    ],
  },
  {
    label: "排涝调度",
    value: "Pailaodiaodu",
    keys: [
      { key: "waterlogging", visible: false },
      { key: "泵车离线", visible: true },
      { key: "泵车在线", visible: true },
      { key: "waterlog_point", visible: false },
    ],
  },
  {
    label: "排涝回顾",
    value: "Pailaohuigu",
    keys: [
      { key: "雨水系统流向", visible: true },
      { key: "雨水系统流向1", visible: true },
      { key: "waterlogging", visible: true },
      { key: "storehouse", visible: true },
    ],
  },
  {
    label: "排涝总结",
    value: "Paolaozongjie",
  },
]);

const events_params = {
  setHighlight: { key: "setHighlight" },
  setLayerVisible: { key: "setLayerVisible" },
};
const TabClick = (item) => {
  const { setLayerVisible } = events_params;
  activeSublevel.value = item.value;
  closeAllLayer();
  item.keys &&
    item.keys
      .filter((i) => i.visible)
      .forEach((i) => bus.emit(setLayerVisible.key, { layername: i.key, isCheck: true }));
};

const closeAllLayer = () => {
  const { setLayerVisible, setHighlight } = events_params;
  tabArr.value
    .map((i) => i.keys)
    .filter(Boolean)
    .flat()
    .forEach((i) => bus.emit(setLayerVisible.key, { layername: i.key, isCheck: false }));
  bus.emit(setHighlight.key, []);
};
onMounted(() => {
  bus.on(mapInitBusName,()=> TabClick(tabArr.value.filter(i => i.value == activeSublevel.value)[0]));
});
onBeforeUnmount(() => {
  closeAllLayer();
  bus.off(mapInitBusName);
});
</script>
<style lang="scss" scoped>
.FloodControlAndDrainage {
  position: relative;
  .middleTab {
    position: fixed;
    left: 50%;
    top: 130px;
    transform:translateX(-50%);
    display: flex;
    z-index: 10;
    .eachSublevel {
      width: 138px;
      height: 39px;
      background: url("@/assets/images/pictureOnMap/middleTabBgc.png") no-repeat center;
      background-size: 100% 100%;
      margin-right: 19px;
      text-align: center;
      line-height: 39px;
      font-weight: bold;
font-size: 16px;
color: #FFFFFF;
text-shadow: 0px 2px 8px rgba(5,28,55,0.42);

      // background: linear-gradient(0deg, rgba(49,190,255,0.36) 0%, rgba(20,158,255,0.36) 0%, rgba(239,252,254,0.36) 58.7646484375%);

      // -webkit-background-clip: text;
      // -webkit-text-fill-color: transparent;

      cursor: pointer;
    }
    .activeSublevel {
      background: url("@/assets/images/pictureOnMap/middleTabActive.png") no-repeat center;
      background-size: 100% 100%;
    }
  }
}
</style>