<template>
  <div class="countdown-container">
    <p class="countdown-text">
      问诊进行中，本次问诊剩余时间： {{ formattedTime }}
    </p>
  </div>
</template>
    
    <script setup>
import { ref, onMounted, onUnmounted, computed, watch } from "vue";

const props = defineProps({
  expireTime: {
    type: Number,
    required: true,
  },
});

const emit = defineEmits(["countdown-finished"]);

const timeLeft = ref(calculateTimeLeft());
let intervalId = null;

function calculateTimeLeft() {
  const now = Date.now();
  const timeDifference = props.expireTime - now;
  return timeDifference > 0 ? Math.floor(timeDifference / 1000) : 0;
}
const formattedTime = computed(() => {
  const hours = Math.floor(timeLeft.value / 3600);
  const minutes = Math.floor((timeLeft.value % 3600) / 60);
  const seconds = timeLeft.value % 60;
  return `${hours}时${minutes < 10 ? "0" : ""}${minutes}分${
    seconds < 10 ? "0" : ""
  }${seconds}秒`;
});
const updateCountdown = () => {
  if (timeLeft.value > 0) {
    timeLeft.value -= 1;
  } else {
    clearInterval(intervalId);
    emit("countdown-finished");
  }
};

onMounted(() => {
  intervalId = setInterval(updateCountdown, 1000);
});

onUnmounted(() => {
  clearInterval(intervalId);
});

watch(
  () => props.expireTime,
  (newExpireTime) => {
    timeLeft.value = calculateTimeLeft();
    clearInterval(intervalId);
    intervalId = setInterval(updateCountdown, 1000);
  }
);
</script>
    
    <style scoped>
.countdown-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0; /* 灰色背景 */
  padding: 10px;
  border-radius: 5px;
}

.countdown-text {
  color: #ff0000; /* 红色文字 */
  font-size: 16px;
}
</style>