// 实时时间，包括年月日，时间以及星期
<template>
	<div :class="style['container']">
		<span :class="style['date']">{{ date }}</span>
		<span :class="style['time']">
			{{ hour }}
			<span :class="style[twinkle ? 'twinkle-show' : 'twinkle-hidden']"
				>:</span
			>
			{{ minute }}
		</span>
		<span :class="style['week']">{{ week }}</span>
	</div>
</template>
<script lang="ts">
import moment from 'moment'
import 'moment/dist/locale/zh-cn'
import style from './index.module.less'

import { DateFormatEnum } from '@/enums/dateFormatEnum'
import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue'

export default defineComponent({
	name: 'TheRealTime',
	setup() {
		const date = ref(moment().format(DateFormatEnum.DEFAULT))
		const hour = ref(moment().format('HH'))
		const minute = ref(moment().format('mm'))
		const week = ref(moment().format('dddd'))
		const twinkle = ref(true)
		let timer: NodeJS.Timeout
		const createTimer = () => {
			timer = setInterval(function () {
				date.value = moment().format(DateFormatEnum.DEFAULT)
				hour.value = moment().format('HH')
				minute.value = moment().format('mm')
				week.value = moment().format('dddd')
				twinkle.value = !twinkle.value
			}, 1000)
		}
		const destroyTimer = () => {
			clearInterval(timer)
		}
		onMounted(createTimer)
		onBeforeUnmount(destroyTimer)
		return {
			date,
			hour,
			minute,
			week,
			twinkle,
			style,
		}
	},
})
</script>