<template>
	<div class="login-head">
		<div class="head-title">
			<image class="head-icon" src="/static/head-icon.png" />
			<span>国家税务总局XX市XX税务局办税服务厅</span>
		</div>
		<div class="head-time">
			<text class="dt-text">{{ currentDate }}</text>
			<text class="dt-text">{{ currentDay }}</text>
			<text class="dt-text">{{ currentTime }}</text>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onUnmounted
	} from 'vue'

	const currentTime = ref('')
	const currentDate = ref('')
	const currentDay = ref('')

	const updateDateTime = () => {
		const now = new Date()

		// 格式化时间 (HH:MM:SS)
		const hours = String(now.getHours()).padStart(2, '0')
		const minutes = String(now.getMinutes()).padStart(2, '0')
		const seconds = String(now.getSeconds()).padStart(2, '0')
		currentTime.value = `${hours}:${minutes}:${seconds}`

		// 格式化日期 (YYYY-MM-DD)
		const year = now.getFullYear()
		const month = String(now.getMonth() + 1).padStart(2, '0')
		const day = String(now.getDate()).padStart(2, '0')
		currentDate.value = `${year}-${month}-${day}`

		// 新增：获取星期
		const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
		currentDay.value = weekDays[now.getDay()]
	};

	let timer

	onMounted(() => {
		updateDateTime() // 立即执行一次
		timer = setInterval(updateDateTime, 1000) // 每秒更新
	});

	onUnmounted(() => {
		if (timer) {
			clearInterval(timer)
		}
	})
</script>

<style lang="scss">
	.login-head {
		display: flex;
		justify-content: space-between;
		padding-top: $statusbar-height;

		.head-title {
			display: flex;
			align-items: center;
			height: 6vh;

			.head-icon {
				width: 40px;
				height: 40px;
				margin-left: 1vw;
			}

			span {
				color: #fff;
				font-size: 3vh;
				font-weight: 800;
				margin-left: 1vw;
			}
		}

		.head-time {
			display: flex;
			align-items: center;
			height: 6vh;

			.dt-text {
				color: #fff;
				font-size: 2vh;
				margin-right: 1vw;
			}
		}
	}
</style>