<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

// 当前时间数据
const currentTime = ref('');
const currentDate = ref('');
const currentWeek = ref('');

// 星期几的中文映射
const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

// 格式化时间的函数
const formatTime = () => {
  const now = new Date();
  
  // 格式化时间：HH:MM:SS
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');
  currentTime.value = `${hours}:${minutes}:${seconds}`;
  
  // 格式化日期：YYYY年MM月DD日
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const date = String(now.getDate()).padStart(2, '0');
  currentDate.value = `${year}年${month}月${date}日`;
  
  // 获取星期几
  const day = now.getDay();
  currentWeek.value = weekDays[day];
};

// 定时器ID
let timerId = null;

// 组件挂载时启动定时器
onMounted(() => {
  // 立即执行一次获取初始时间
  formatTime();
  // 设置定时器，每秒更新一次时间
  timerId = setInterval(formatTime, 1000);
});

// 组件卸载时清除定时器
onUnmounted(() => {
  if (timerId) {
    clearInterval(timerId);
  }
});
</script>

<template>
  <div class="time-box">
    <!-- 时间显示区域 -->
    <div class="time-display">
      <span v-for="(digit, index) in currentTime.split('')" :key="index" class="time-digit">
        <span :class="{ 'time-separator': digit === ':' }">
          {{ digit }}
        </span>
      </span>
    </div>
    
    <!-- 日期和星期显示区域 -->
    <div class="date-info">
      <span class="date-text">{{ currentDate }}</span>
      <span class="week-text">{{ currentWeek }}</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.time-box {
  @apply absolute top-20px right-22px p-5px;
}

.time-display {
  @apply flex items-center justify-end gap-4px font-mono;
  
  .time-digit {
    @apply relative;
    
    span {
      @apply text-[#4299e1] text-2xl font-bold tracking-wide;
      // 数字发光效果
      text-shadow: 0 0 8px rgba(66,153,225,0.6), 0 0 16px rgba(66,153,225,0.3);
      // 数字跳动动画
      transition: transform 0.1s ease-in-out;
    }
    
    .time-separator {
      @apply animate-pulse; // 冒号闪烁动画
    }
  }
}

.date-info {
  @apply flex justify-center items-center gap-10px mt-5px text-sm tracking-2px;
  
  .date-text,
  .week-text {
    @apply text-[#a0cfff] font-medium;
    // 日期文字发光效果
    text-shadow: 0 0 4px rgba(160,207,255,0.5);
  }
}
</style>
