<template>
  <!-- 头部预警 -->
  <div class="warningPrompt flex flex-align-center" v-if="showTips">
    &nbsp;&nbsp; 已启动
    <span>
      {{
        AllData.showTipsData.warningLevel == "1"
          ? "Ⅰ级"
          : AllData.showTipsData.warningLevel == "2"
          ? "Ⅱ级"
          : AllData.showTipsData.warningLevel == "3"
          ? "Ⅲ级"
          : AllData.showTipsData.warningLevel == "4"
          ? "Ⅳ级"
          : AllData.showTipsData.warningLevel == "5"
          ? "预警"
          : null
      }}</span
    >
    级响应，从:&nbsp;
    <span class="colorR">{{
      moment(AllData.showTipsData.warnStartTime).format("YYYY-MM-DD HH:mm")
    }}</span>
    起，&nbsp;预计到:<span class="colorR"
      >{{ moment(AllData.showTipsData.warnEndTime).format("YYYY-MM-DD HH:mm") }}
    </span>
    <div>&nbsp;&nbsp;&nbsp; 准备时间:</div>
    <div class="flex flex-align-center">
      <span class="radBg">{{ countdown.daysQ }}</span
      >天 <span class="radBg">{{ countdown.hoursQ }}</span
      >时 <span class="radBg">{{ countdown.minutesQ }}</span
      >分 <span class="radBg">{{ countdown.secondsQ }}</span
      >秒
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted, onBeforeUnmount, nextTick } from "vue";
import bus from "@/bus";
let countdown = ref({
  daysQ: "",
  hoursQ: "",
  minutesQ: "",
  secondsQ: "",
});
const AllData = reactive({
  showTipsData: {},
});
const showTips = ref(false);

// 获取要显示倒计时的HTML元素
const intervalId = ref(null);
// const currentTime = ref(null);
const futureTime2 = ref(null);
const futureTime = ref(null);
const timeDifference = ref(null);
function runTime() {
  if (futureTime2.value == null) {
    futureTime2.value = new Date(AllData.showTipsData.warnStartTime).getTime(); //开始时间
  }
  // currentTime.value = new Date().getTime();
  futureTime.value = new Date().getTime(); // 当前时间
  // console.log(futureTime, '当前时间');
  timeDifference.value = futureTime2.value - futureTime.value;
  let days = Math.floor(timeDifference.value / (1000 * 60 * 60 * 24));
  let hours = Math.floor(
    (timeDifference.value % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
  );
  let minutes = Math.floor((timeDifference.value % (1000 * 60 * 60)) / (1000 * 60));
  let seconds = Math.floor((timeDifference.value % (1000 * 60)) / 1000);
  // console.log(`剩余时间: ${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`);
  // 每秒更新一次倒计时
  intervalId.value = setInterval(runTime, 1000);
  // 检查倒计时是否结束
  if (timeDifference.value <= 0) {
    clearInterval(intervalId.value); // 清除定时器
    showTips.value = false;
  } else {
    // 更新HTML元素的内容  hoursQ
    countdown.value.daysQ = days;
    countdown.value.hoursQ = hours;
    countdown.value.minutesQ = minutes;
    countdown.value.secondsQ = seconds;
    // console.log(`倒计时: ${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`, '111111111');
  }
}

onMounted(() => {
  bus.on("Rq_head", (val) => {
    if (val == false) {
      showTips.value = false;
    } else {
      showTips.value = true;
      AllData.showTipsData = val;
      futureTime2.value = null;
      runTime();
    }
  });
});
onBeforeUnmount(() => {
  clearInterval(intervalId.value); // 清除定时器
  bus.off("Rq_head");
});
</script>