<template>
  <div class="countdown-container">
    <div class="countdown-content">
      <div class="timer-left">
        <span class="countdown-text">问诊进行中，本次问诊剩余时间：</span>
        <span class="countdown-time">{{ formattedTime }}</span>
      </div>
      <div v-if="prescriptionStartTime" class="timer-right">
        <span class="prescription-text">开方时长：</span>
        <span class="prescription-time">{{ formattedPrescriptionTime }}</span>
      </div>
    </div>
  </div>
</template>
  
  <script setup>
import { ref, onMounted, onUnmounted, computed, watch } from "vue";

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

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

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

function calculateTimeLeft() {
  const now = Date.now();
  const timeDifference = props.expireTime - now;
  return timeDifference > 0 ? Math.floor(timeDifference / 1000) : 0;
}

function calculatePrescriptionElapsed() {
  if (!props.prescriptionStartTime) return 0;
  
  const endTime = props.prescriptionEndTime || Date.now();
  const elapsed = endTime - props.prescriptionStartTime;
  return elapsed > 0 ? Math.floor(elapsed / 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 formattedPrescriptionTime = computed(() => {
  const hours = Math.floor(prescriptionElapsed.value / 3600);
  const minutes = Math.floor((prescriptionElapsed.value % 3600) / 60);
  const seconds = prescriptionElapsed.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");
    return;
  }
  
  // 更新开方时长（只在未结束时）
  if (props.prescriptionStartTime && !props.prescriptionEndTime) {
    prescriptionElapsed.value = calculatePrescriptionElapsed();
  }
};

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

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

watch(
  () => [props.expireTime, props.prescriptionStartTime, props.prescriptionEndTime],
  () => {
    timeLeft.value = calculateTimeLeft();
    prescriptionElapsed.value = calculatePrescriptionElapsed();
    
    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-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.timer-left {
  display: flex;
  align-items: center;
}

.timer-right {
  display: flex;
  align-items: center;
}

.countdown-text,
.prescription-text {
  color: #ff6b00; /* 使用与截图一致的橙色 */
  font-size: 16px;
}

.countdown-time {
  color: #ff6b00; /* 与开方时间一致的橙色 */
  font-size: 16px;
  font-weight: bold;
  margin-left: 8px;
}

.prescription-time {
  color: #ff6b00; /* 与倒计时统一橙色 */
  font-size: 16px;
  font-weight: bold;
  margin-left: 8px;
}
</style>