<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 class="warningPrompt flex flex-align-center flex-justcontent-spacebetween" :class="`leveClass${allData.showTipsData.warnGrade}`" v-if="showTips">
      已启动
      <span class="gradeText">{{
        allData.showTipsData.warnGrade == "1"
          ? "Ⅰ级"
          : allData.showTipsData.warnGrade == "2"
          ? "Ⅱ级"
          : allData.showTipsData.warnGrade == "3"
          ? "Ⅲ级"
          : allData.showTipsData.warnGrade == "4"
          ? "Ⅳ级"
          : allData.showTipsData.warnGrade == "5"
          ? "预警"
          : null
      }}</span>
      级响应，从:
      <span class="colorR gradeText">{{
        moment(allData.showTipsData.responseStartTime).format(
          "YYYY-MM-DD HH:mm"
        )
      }}</span>
      起，预计到:<span class="colorR gradeText">{{
        moment(allData.showTipsData.responseEndTime).format("YYYY-MM-DD HH:mm")
      }}</span>
      <div class="flex flex-align-center" v-if="allTime > 1000">
        <el-tooltip
          :content="
            `预计强降雨时间：` +
            moment(allData.showTipsData.expectRainStartTime).format(
              'YYYY-MM-DD HH:mm'
            )
          "
          placement="top-start"
        >
          <div>准备时间:</div>
        </el-tooltip>
        <div class="flex flex-align-center">
          <span class="radBg">{{ countdown.leftd }}</span
          >天 <span class="radBg">{{ countdown.lefth }}</span
          >时 <span class="radBg">{{ countdown.leftm }}</span
          >分 <span class="radBg">{{ countdown.lefts }}</span
          >秒
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="FloodControlAndDrainage">
import { ref, reactive, onMounted, onBeforeUnmount,onUnmounted } 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";
import {
  getRecommendLevel
} from '@/api/FloodControlAndDrainage.js';
const { proxy } = getCurrentInstance();
const activeSublevel = ref("Jianceyujin");
const tabArr = ref([
  {
    label: "监测预警",
    value: "Jianceyujin",
    keys: [
      { key: "waterlogging", visible: true },
      { key: "雨水分区", 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: "雨水分区", visible: true },
      // { key: "雨水系统流向1", visible: true },
      { key: "newfiber-XYZLayer", visible: true },
      { key: "高清地图", visible: true },
      { key: "rain_water_pump_station_info", visible: false },
      { key: "storehouse", visible: false },
      { key: "排口流向", visible: true,clear:true },
      { key: "排口流向1", visible: true,clear:true },
      { key: "waterlog_community", visible: true,clear:true },
      { key: "waterlog_community_text", visible: true,clear:true },
      { key: "waterloggingPointRelation", visible: true,clear:true},
    ],
  },
  {
    label: "排涝调度",
    value: "Pailaodiaodu",
    keys: [
      { key: "雨水分区", visible: true },
      { key: "waterlogging", visible: false },
      { key: "泵车离线", visible: true },
      { key: "泵车在线", visible: true },
      { key: "waterlog_point", visible: false },
    ],
  },
  {
    label: "排涝回顾",
    value: "Pailaohuigu",
    keys: [
      { key: "雨水分区", visible: true },
      { key: "雨水系统流向", visible: true },
      { key: "雨水系统流向1", visible: true },
      { key: "waterlogging", visible: true },
      { key: "storehouse", visible: true },
    ],
  },
  // {
  //   label: "排涝总结",
  //   value: "Paolaozongjie",
  // },
]);

const events_params = {
  removeMapDatas: { key: "removeMapDatas" },
  setHighlight: { key: "setHighlight" },
  setLayerVisible: { key: "setLayerVisible" },
};
const TabClick = (item) => {
  const { setLayerVisible } = events_params;
  newfiberMap.map.easeTo(newfiberMap.config_.params.init);
  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 = () => {
  let clearKeys = [];
  const { setLayerVisible, setHighlight,removeMapDatas } = events_params;
  tabArr.value.map((i) => i.keys).filter(Boolean).flat().forEach((i) => {
    bus.emit(setLayerVisible.key, { layername: i.key, isCheck: false });
    i.clear && clearKeys.push(i.key);
  });
  bus.emit(setHighlight.key, []);
  bus.emit(removeMapDatas.key, clearKeys);
};

let allData = reactive({
  tableData: {},
  isShow: true,
  showTipsData: {},
  setIntervalTime: null,
});
let allTime = ref(0);
let countdown = ref("");

const showTips = ref(false);

// 获取头部提示预警信息
function getPsLevel() {
  let data = {
    type: 7,
  };
  getRecommendLevel(data).then((res) => {
    if (res && res.code == 200) {
      allData.showTipsData = res.data;
      if (res.data.warnGrade) {
        showTips.value = true;
      } else {
        showTips.value = false;
      }
      allTime.value =
        moment(res.data.expectRainStartTime).diff(
          moment(new Date()),
          "seconds"
        ) * 1000;
      allData.setIntervalTime = setInterval(() => {
        if (allTime.value == 0) {
          clearInterval(allData.setIntervalTime);
        }
        allTime.value = allTime.value - 1000;
        countdown.value = runTime();
      }, 1000);
    }
  });
}
function runTime() {
  // console.log(allTime.value);
  let leftd = Math.floor(allTime.value / (1000 * 60 * 60 * 24)), //计算天数
    lefth = Math.floor((allTime.value / (1000 * 60 * 60)) % 24), //计算小时数
    leftm = Math.floor((allTime.value / (1000 * 60)) % 60), //计算分钟数
    lefts = Math.floor((allTime.value / 1000) % 60); //计算秒数
  let munberTimg = {
    leftd: leftd,
    lefth: lefth,
    leftm: leftm,
    lefts: lefts,
  };
  return munberTimg;
  // return leftd + "天" + lefth + "时" + leftm + "分" + lefts + "秒"; //返回倒计时的字符串
}

onMounted(() => {
  getPsLevel();
    bus.on("warningRelease", (e) => {
    getPsLevel();
  });

  const init = ()=> TabClick(tabArr.value.filter(i => i.value == activeSublevel.value)[0]);
  init();
  bus.on(mapInitBusName,init);
});
onBeforeUnmount(() => {
  bus.off("warningRelease");

  closeAllLayer();
  bus.off(mapInitBusName);
});
onUnmounted(() => {
  clearInterval(allData.setIntervalTime);
});
</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%;
    }
  }
  .warningPrompt {
  position: fixed;
  top: 175px;
  left: 50%;
  width: 763px;
  height: 36px;
  border-radius: 48px;
  transform: translateX(-50%);
  z-index: 20;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  span {
    margin: 0 2px;
  }


.radBg {
  display: block;
  line-height: 26px;
border-radius: 2px;

  padding: 0 3px;
}
}
// alertBoxRed
// alertBoxYellow
// alertBoxOrange
// alertBoxBlue
.leveClass1 {
  background: url('@/assets/images/pictureOnMap/alertBoxRed.png') no-repeat center;
  background-size: 100% 100%;
  .gradeText {
    color: #FF0000;
  }
  .radBg {
    background: linear-gradient(0deg, #F60100 0%, #660000 100%);
border: 1px solid #EF4054;

  }
}
.leveClass2 {
  background: url('@/assets/images/pictureOnMap/alertBoxOrange.png') no-repeat center;
  background-size: 100% 100%;
  .gradeText {
    color: #FFA800;
  }
   .radBg {
    background: linear-gradient(0deg, #F60100 0%, #660000 100%);
border: 1px solid #EF4054;
  }
}
.leveClass3 {
  background: url('@/assets/images/pictureOnMap/alertBoxYellow.png') no-repeat center;
  background-size: 100% 100%;
  .gradeText {
    color: #FFF600;
  }
   .radBg {
    background: linear-gradient(0deg, #F6ED03 0%, #676301 100%);
border: 1px solid #F2EC42;
  }
}
.leveClass4,.leveClass5 {
  background: url('@/assets/images/pictureOnMap/alertBoxBlue.png') no-repeat center;
  background-size: 100% 100%;
   .gradeText {
    color: #2CB7FF;
  }
   .radBg {
    background: linear-gradient(0deg, #02A3F7 0%, #014061 100%);
border: 1px solid #43BBF9;
  }
}
}
</style>