<template>
    <div class="time-clock">
        {{ formattedTime }}
    </div>
</template>

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

    /**
     * 组件 props 定义
     * @param {string|Date} startTime - 开始时间（必填，格式：YYYY-MM-DD HH:mm:ss 或 Date 对象）
     * @param {string|Date} endTime - 结束时间（可选，格式同上，传则定格，不传则计时）
     */
    const props = defineProps({
        startTime: {
            type: [String, Date],
            required: true,
            validator: (value) => {
                const date = new Date(value);
                return !isNaN(date.getTime());
            }
        },
        endTime: {
            type: [String, Date],
            required: false,
            validator: (value) => {
                if (!value) return true;
                const date = new Date(value);
                return !isNaN(date.getTime());
            }
        },
        status: {
            //只有 status 1 才进行计时
            type: Number,
            default: 0
        }
    });

    // 累计秒数（核心：基于开始时间与当前时间的差值初始化，再每秒递增）
    const totalSeconds = ref(0);

    // 格式化时间：将累计秒数转为 00:00:00 格式
    const formattedTime = computed(() => {
        const hours = String(Math.floor(totalSeconds.value / 3600)).padStart(
            2,
            '0'
        );
        const minutes = String(
            Math.floor((totalSeconds.value % 3600) / 60)
        ).padStart(2, '0');
        const seconds = String(totalSeconds.value % 60).padStart(2, '0');
        return `${hours}:${minutes}:${seconds}`;
    });

    let timer = null;

    // 初始化时间逻辑（核心优化点）
    const initTime = () => {
        if (timer) clearInterval(timer);

        const startDate = new Date(props.startTime);
        const endDate = props.endTime ? new Date(props.endTime) : null;
        const now = new Date();

        // 基础校验
        if (endDate && endDate <= startDate) {
            // 结束时间早于开始时间：直接显示开始时间的时分秒
            totalSeconds.value = calculateSecondsFromDate(startDate);
            return;
        }

        // 有结束时间：计算开始到结束的总秒数，定格显示
        if (endDate || props.status !== 1) {
            const diffMs = endDate - startDate;
            totalSeconds.value = Math.max(0, Math.floor(diffMs / 1000)); // 避免负数
            return;
        }

        // 无结束时间：初始化时计算「当前时间 - 开始时间」的差值，作为初始秒数
        const diffMs = now - startDate;
        totalSeconds.value = Math.max(0, Math.floor(diffMs / 1000)); // 若开始时间在未来，初始为 0

        // 继续每秒递增计时
        timer = setInterval(() => {
            totalSeconds.value += 1;
        }, 1000);
    };

    // 辅助函数：将 Date 对象转为「当天0点到当前时间的总秒数」（用于定格场景）
    const calculateSecondsFromDate = (date) => {
        const hours = date.getHours();
        const minutes = date.getMinutes();
        const seconds = date.getSeconds();
        return hours * 3600 + minutes * 60 + seconds;
    };

    // 初始化
    initTime();

    // 监听 props 变化（支持动态修改开始/结束时间）
    watch([() => props.startTime, () => props.endTime], initTime, {
        deep: true
    });

    // 卸载清理
    onUnmounted(() => {
        if (timer) clearInterval(timer);
    });
</script>

<style scoped>
    .time-clock {
        font-size: 13px;
        color: #ff0000;
        letter-spacing: 2px;
        font-weight: 500;
    }
</style>
