<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() {
  futureTime2.value = new Date(AllData.showTipsData.warnStartTime).getTime(); //开始时间
  currentTime.value = new Date().getTime();
  futureTime.value = new Date(currentTime.value).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;
      runTime();
    }
  });
});
onBeforeUnmount(() => {
  bus.off('Rq_head');
});
</script>