<!--
 * @Author: wjc
 * @Date: 2024-04-29 17:56:36
 * @LastEditors: wjc
 * @LastEditTime: 2025-12-12 15:22:31
 * @Description: 数字时钟组件（Vue2 纯 JS 版本）
-->
<template>
  <div class="digital-clock">
    <span class="date">{{ date }}</span>
    <span class="digit">{{ hours }}</span>
    <span class="colon">:</span>
    <span class="digit">{{ minutes }}</span>
    <span class="colon">:</span>
    <span class="digit">{{ seconds }}</span>
  </div>
</template>

<script>
  import dayjs from "dayjs"

  export default {
    name: "Clock",
    data() {
      return {
        hours: "", // 小时（响应式）
        minutes: "", // 分钟（响应式）
        seconds: "", // 秒数（响应式）
        prevTime: 0, // 上一次更新的时间戳
        myReq: null, // requestAnimationFrame 标识
      }
    },
    computed: {
      date() {
        return dayjs().format("YYYY-MM-DD")
      },
    },
    methods: {
      // 补零方法（数字小于10时前面加0）
      padZero(value) {
        return value < 10 ? `0${value}` : value.toString()
      },
      // 更新时间核心逻辑
      updateTime() {
        const date = new Date()
        this.hours = this.padZero(date.getHours())
        this.minutes = this.padZero(date.getMinutes())
        this.seconds = this.padZero(date.getSeconds())
      },
      // 高性能时钟刷新（基于requestAnimationFrame，替代setInterval）
      updateClock() {
        const currentTime = performance.now()
        const deltaTime = currentTime - this.prevTime

        // 每1000ms（1秒）仅更新一次，避免高频无效渲染
        if (deltaTime >= 1000) {
          this.updateTime()
          this.prevTime = currentTime
        }

        // 循环调用requestAnimationFrame（跟随浏览器帧率）
        this.myReq = requestAnimationFrame(this.updateClock)
      },
    },
    // Vue2 生命周期钩子
    beforeMount() {
      // 初始化时间（组件挂载前先渲染一次）
      this.updateTime()
    },
    mounted() {
      // 初始化时间戳，启动时钟刷新循环
      this.prevTime = performance.now()
      this.updateClock()
    },
    beforeDestroy() {
      // 组件销毁时取消动画帧，避免内存泄漏
      if (this.myReq) {
        cancelAnimationFrame(this.myReq)
      }
    },
  }
</script>

<style scoped lang="scss">
  @import "@/assets/css/theme.scss";

  .digital-clock {
    font-weight: 500;
    color: #818181;
    font-size: halfW(18);
    width: max-content;
    text-align: center;
    padding: 0 halfW(8);
    .date {
      margin-right: halfW(10);
    }
    .digit {
      display: inline-block;
      width: 1.6em;
    }

    .colon {
      display: inline-block;
      width: 4px;
    }
  }
</style>
