<template>
	<view class="timeText">
		<wd-text type="primary" :text="nowDateTime"></wd-text>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		computed,
		nextTick,
		watchEffect,
		onUnmounted,
	} from 'vue';
	import {
		onHide,
		onShow
	} from '@dcloudio/uni-app'
	import {
		formatDate
	} from '@/utils/dateTime.ts';
	const timer1 = ref(null);
	const nowDateTime = ref("")
	// 封装心跳函数
	const getDateTime = () => {
		// 先清除之前的定时器
		if (timer1.value) {
			clearInterval(timer1.value);
			timer1.value = null;
		}
		timer1.value = setInterval(() => {
			nowDateTime.value = formatDate(new Date(), "YYYY年MM月DD日 HH:mm:ss")
		}, 1000);
	};
	onMounted(() => {
		getDateTime()

	})

	onUnmounted(() => {
		clearInterval(timer1.value);
	})

	onHide(() => {
		clearInterval(timer1.value);
		timer1.value = null;
	})

	onShow(() => {
		getDateTime()
	})
</script>

<style scoped>
	.timeText {
		text-align: center;
		width: 100vw;
		font-size: 20px;
	}
</style>