<!-- 工具栏：日期时间 -->
<template>
    <span title="当前时间" class="tool-fox curr-datetime-box">
        <span style="font-size: 0.90em;">{{ state.nowTime }}</span>
    </span>
</template>

<script setup name="nav-tool-datetime">
import {reactive} from "vue";

const state = reactive({
    nowTime: '加载中...',    // 当前时间字段
    currInterval: null,    // 定时器
})


// 刷新时间
const initInterval = function() {
    if(state.currInterval) {
        clearInterval(state.currInterval);
    }
    // 一直更新时间
    state.currInterval = setInterval(function() {
        const da = new Date();
        const Y = da.getFullYear(); //年
        const M = da.getMonth() + 1; //月
        const D = da.getDate(); //日
        let h = da.getHours(); //小时
        let sx = "凌晨";
        if (h >= 6) {
            sx = "上午"
        }
        if (h >= 12) {
            sx = "下午";
            if (h >= 18) {
                sx = "晚上";
            }
            h -= 12;
        }
        const m = da.getMinutes(); //分
        const s = da.getSeconds(); //秒
        const z = ['日', '一', '二', '三', '四', '五', '六'][da.getDay()] ; //周几
        // z = z == 0 ? '日' : z;
        state.nowTime = Y + "-" + M + "-" + D + " " + sx + " " + h + ":" + m + ":" + s + " 周" + z;
    }, 1000);
}
initInterval();


</script>

<style scoped lang="scss">
    .curr-datetime-box{
        vertical-align: middle;
    }
</style>
