<template>
<!-- 防汛排涝  辅助决策 -->
  <div class="Fuzhujuece">
        <!-- 左侧辅助决策 -->
        <Transition name="fade_left">
        <AuxiliaryResearchAndJudgmentLeft v-show="!showPanel"></AuxiliaryResearchAndJudgmentLeft>
        </Transition>
        <!-- 右侧调度辅助决策 -->
        <Transition name="fade_right">
        <SchedulingAidedDecisionRight v-show="!showPanel"></SchedulingAidedDecisionRight>
        </Transition>
        <!-- 预警提示 -->
            <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>
        <PanelDisplayHidden @showPanelChange="PanelChange"></PanelDisplayHidden>
  </div>
</template>
<script setup name="Fuzhujuece">
import moment from "moment";
import bus from "@/bus";

import {ref,reactive,onMounted} from "vue"
import AuxiliaryResearchAndJudgmentLeft from './AuxiliaryResearchAndJudgmentLeft/index.vue'
import SchedulingAidedDecisionRight from './SchedulingAidedDecisionRight/index.vue'
import {
  getRecommendLevel
} from '@/api/FloodControlAndDrainage.js';
// 面板控制组件
import PanelDisplayHidden from "@/views/pictureOnMap/page/components/PanelDisplayHidden.vue";
const showPanel = ref(false); //面板展开收起
const PanelChange = (val) => {
  showPanel.value = val;
};
const { proxy } = getCurrentInstance();
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();
  });
});
onBeforeUnmount(() => {
  bus.off("warningRelease");
});
onUnmounted(() => {
  clearInterval(allData.setIntervalTime);
});
</script>
<style lang="scss" scoped>
.Fuzhujuece {
  .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;
  }
  .colorR {
  
}

.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>