<template>
	<div class="welcome-component">
		<a-card>
			<div class="welcome-content">
				<div class="greeting">
					<h2 class="greeting-text">{{ greetingText }}</h2>
					<p class="welcome-subtitle">{{ userInfo?.username || '管理员' }}，欢迎回来！</p>
				</div>
				<div class="welcome-info">
					<a-space direction="vertical" :size="8">
						<div class="info-item">
							<CalendarOutlined class="info-icon" />
							<span>{{ currentDate }}</span>
						</div>
						<div class="info-item">
							<ClockCircleOutlined class="info-icon" />
							<span>{{ currentTime }}</span>
						</div>
						<div class="info-item">
							<EnvironmentOutlined class="info-icon" />
							<span>{{ weatherText }}</span>
						</div>
					</a-space>
				</div>
			</div>
		</a-card>
	</div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useUserStore } from '@/stores/modules/user'
import { CalendarOutlined, ClockCircleOutlined, EnvironmentOutlined } from '@ant-design/icons-vue'

defineOptions({
	name: 'Welcome',
})

const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)

const currentDate = ref('')
const currentTime = ref('')
const weatherText = ref('天气晴朗，适合工作')
let timer = null

// 根据时间段返回问候语
const greetingText = computed(() => {
	const hour = new Date().getHours()
	if (hour >= 5 && hour < 12) {
		return '早上好'
	} else if (hour >= 12 && hour < 14) {
		return '中午好'
	} else if (hour >= 14 && hour < 18) {
		return '下午好'
	} else if (hour >= 18 && hour < 23) {
		return '晚上好'
	} else {
		return '夜深了'
	}
})

// 更新日期和时间
const updateTime = () => {
	const now = new Date()
	currentDate.value = now.toLocaleDateString('zh-CN', {
		year: 'numeric',
		month: 'long',
		day: 'numeric',
		weekday: 'long',
	})
	currentTime.value = now.toLocaleTimeString('zh-CN', {
		hour: '2-digit',
		minute: '2-digit',
		second: '2-digit',
	})
}

onMounted(() => {
	updateTime()
	timer = setInterval(updateTime, 1000)
})

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

<style scoped lang="scss">
.welcome-component {
	:deep(.ant-card) {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border: none;
		border-radius: 12px;
		box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);

		.ant-card-body {
			padding: 24px;
		}
	}

	.welcome-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #fff;

		.greeting {
			flex: 1;

			.greeting-text {
				margin: 0 0 8px 0;
				font-size: 28px;
				font-weight: 600;
			}

			.welcome-subtitle {
				margin: 0;
				font-size: 16px;
				opacity: 0.9;
			}
		}

		.welcome-info {
			.info-item {
				display: flex;
				align-items: center;
				gap: 8px;
				font-size: 14px;
				opacity: 0.95;

				.info-icon {
					font-size: 16px;
				}
			}
		}
	}

	@media (max-width: 768px) {
		.welcome-content {
			flex-direction: column;
			align-items: flex-start;
			gap: 16px;

			.greeting-text {
				font-size: 24px;
			}

			.welcome-subtitle {
				font-size: 14px;
			}
		}
	}
}
</style>
