<template>
	<div class="dashboard-container">
		<!-- 统计卡片 -->
		<a-row :gutter="16" class="stats-cards">
			<a-col :xs="24" :sm="12" :lg="6">
				<a-card :loading="loading" hoverable>
					<a-statistic
						title="用户总数"
						:value="stats.userCount"
						:prefix="UserOutlined"
						:value-style="{ color: '#1890ff' }"
					>
						<template #suffix>
							<a-tag color="blue">活跃</a-tag>
						</template>
					</a-statistic>
				</a-card>
			</a-col>
			<a-col :xs="24" :sm="12" :lg="6">
				<a-card :loading="loading" hoverable>
					<a-statistic
						title="角色数量"
						:value="stats.roleCount"
						:prefix="TeamOutlined"
						:value-style="{ color: '#52c41a' }"
					>
						<template #suffix>
							<a-tag color="green">配置</a-tag>
						</template>
					</a-statistic>
				</a-card>
			</a-col>
			<a-col :xs="24" :sm="12" :lg="6">
				<a-card :loading="loading" hoverable>
					<a-statistic
						title="权限节点"
						:value="stats.permissionCount"
						:prefix="KeyOutlined"
						:value-style="{ color: '#722ed1' }"
					>
						<template #suffix>
							<a-tag color="purple">权限</a-tag>
						</template>
					</a-statistic>
				</a-card>
			</a-col>
			<a-col :xs="24" :sm="12" :lg="6">
				<a-card :loading="loading" hoverable>
					<a-statistic
						title="在线用户"
						:value="stats.onlineUserCount"
						:prefix="ClockCircleOutlined"
						:value-style="{ color: '#fa8c16' }"
					>
						<template #suffix>
							<a-tag color="orange">在线</a-tag>
						</template>
					</a-statistic>
				</a-card>
			</a-col>
		</a-row>

		<!-- 图表区域 -->
		<a-row :gutter="16" class="chart-row">
			<a-col :xs="24" :lg="12">
				<a-card title="用户分布" :loading="loading">
					<div class="chart-container">
						<div class="pie-chart">
							<div class="chart-item" v-for="(item, index) in userDistribution" :key="index">
								<div class="chart-bar" :style="{ width: item.percent + '%' }"></div>
								<div class="chart-label">{{ item.label }}: {{ item.value }}</div>
							</div>
						</div>
					</div>
				</a-card>
			</a-col>
			<a-col :xs="24" :lg="12">
				<a-card title="系统状态" :loading="loading">
					<a-descriptions :column="1" bordered>
						<a-descriptions-item label="系统版本">{{ systemInfo.version }}</a-descriptions-item>
						<a-descriptions-item label="PHP 版本">{{ systemInfo.phpVersion }}</a-descriptions-item>
						<a-descriptions-item label="Laravel 版本">{{ systemInfo.laravelVersion }}</a-descriptions-item>
						<a-descriptions-item label="服务器时间">{{ systemInfo.serverTime }}</a-descriptions-item>
						<a-descriptions-item label="运行环境">{{ systemInfo.environment }}</a-descriptions-item>
					</a-descriptions>
				</a-card>
			</a-col>
		</a-row>

		<!-- 快速操作和最近操作 -->
		<a-row :gutter="16" class="action-row">
			<a-col :xs="24" :lg="12">
				<a-card title="快速操作">
					<a-row :gutter="[8, 8]">
						<a-col :xs="12" :sm="8">
							<a-button type="primary" block @click="goToUser">
								<UserOutlined />
								用户管理
							</a-button>
						</a-col>
						<a-col :xs="12" :sm="8">
							<a-button type="primary" block @click="goToRole">
								<TeamOutlined />
								角色管理
							</a-button>
						</a-col>
						<a-col :xs="12" :sm="8">
							<a-button type="primary" block @click="goToPermission">
								<KeyOutlined />
								权限管理
							</a-button>
						</a-col>
						<a-col :xs="12" :sm="8">
							<a-button type="primary" block @click="goToDepartment">
								<ApartmentOutlined />
								部门管理
							</a-button>
						</a-col>
						<a-col :xs="12" :sm="8">
							<a-button type="primary" block @click="goToOnlineUsers">
								<WifiOutlined />
								在线用户
							</a-button>
						</a-col>
						<a-col :xs="12" :sm="8">
							<a-button type="primary" block @click="goToConfig">
								<SettingOutlined />
								系统配置
							</a-button>
						</a-col>
					</a-row>
				</a-card>
			</a-col>
			<a-col :xs="24" :lg="12">
				<a-card title="最近日志" :loading="loading">
					<a-list :data-source="recentLogs" size="small">
						<template #renderItem="{ item }">
							<a-list-item>
								<a-list-item-meta>
									<template #title>
										<a-tag :color="getLogColor(item.level)">{{ item.level }}</a-tag>
										{{ item.message }}
									</template>
									<template #description>
										{{ item.created_at }}
									</template>
								</a-list-item-meta>
							</a-list-item>
						</template>
					</a-list>
				</a-card>
			</a-col>
		</a-row>
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/modules/user'
import authApi from '@/api/auth'
import { message } from 'ant-design-vue'

// 定义组件名称
defineOptions({
	name: 'HomePage',
})

const router = useRouter()
const userStore = useUserStore()

const loading = ref(false)
const stats = ref({
	userCount: 0,
	roleCount: 0,
	permissionCount: 0,
	onlineUserCount: 0
})

const userDistribution = ref([
	{ label: '已激活', value: 0, percent: 0 },
	{ label: '未激活', value: 0, percent: 0 },
	{ label: '已禁用', value: 0, percent: 0 }
])

const systemInfo = ref({
	version: '1.0.0',
	phpVersion: '8.1.0',
	laravelVersion: '10.0.0',
	serverTime: '',
	environment: 'production'
})

const recentLogs = ref([])

// 获取统计数据
const fetchStats = async () => {
	try {
		loading.value = true

		// 获取用户列表统计
		const userRes = await authApi.users.list.get({ page_size: 1 })
		if (userRes.code === 200) {
			stats.value.userCount = userRes.data.total || 0
		}

		// 获取角色列表统计
		const roleRes = await authApi.roles.list.get({ page_size: 1 })
		if (roleRes.code === 200) {
			stats.value.roleCount = roleRes.data.total || 0
		}

		// 获取权限列表统计
		const permRes = await authApi.permissions.list.get({ page_size: 1 })
		if (permRes.code === 200) {
			stats.value.permissionCount = permRes.data.total || 0
		}

		// 获取在线用户统计
		const onlineRes = await authApi.onlineUsers.count.get()
		if (onlineRes.code === 200) {
			stats.value.onlineUserCount = onlineRes.data.count || 0
		}

		// 获取用户分布数据（这里使用模拟数据，实际项目中应从后端获取）
		const activeCount = Math.floor(stats.value.userCount * 0.7)
		const inactiveCount = Math.floor(stats.value.userCount * 0.2)
		const disabledCount = stats.value.userCount - activeCount - inactiveCount

		userDistribution.value = [
			{ label: '已激活', value: activeCount, percent: stats.value.userCount > 0 ? Math.round((activeCount / stats.value.userCount) * 100) : 0 },
			{ label: '未激活', value: inactiveCount, percent: stats.value.userCount > 0 ? Math.round((inactiveCount / stats.value.userCount) * 100) : 0 },
			{ label: '已禁用', value: disabledCount, percent: stats.value.userCount > 0 ? Math.round((disabledCount / stats.value.userCount) * 100) : 0 }
		]

		// 更新系统信息
		systemInfo.value.serverTime = new Date().toLocaleString('zh-CN')
		systemInfo.value.environment = import.meta.env.VITE_APP_ENV || 'production'

		// 模拟最近日志数据（实际项目中应从后端获取）
		recentLogs.value = [
			{ level: 'info', message: '用户登录成功', created_at: formatTime(new Date()) },
			{ level: 'info', message: '系统配置更新', created_at: formatTime(new Date(Date.now() - 300000)) },
			{ level: 'warning', message: '检测到异常访问', created_at: formatTime(new Date(Date.now() - 600000)) },
			{ level: 'error', message: '数据库连接失败', created_at: formatTime(new Date(Date.now() - 900000)) },
			{ level: 'info', message: '定时任务执行完成', created_at: formatTime(new Date(Date.now() - 1200000)) }
		]
	} catch (error) {
		message.error('获取统计数据失败')
		console.error(error)
	} finally {
		loading.value = false
	}
}

// 格式化时间
const formatTime = (date) => {
	const now = new Date()
	const diff = now - date
	const minutes = Math.floor(diff / 60000)

	if (minutes < 1) {
		return '刚刚'
	} else if (minutes < 60) {
		return `${minutes}分钟前`
	} else if (minutes < 1440) {
		return `${Math.floor(minutes / 60)}小时前`
	} else {
		return `${Math.floor(minutes / 1440)}天前`
	}
}

// 获取日志颜色
const getLogColor = (level) => {
	const colors = {
		info: 'blue',
		warning: 'orange',
		error: 'red',
		success: 'green'
	}
	return colors[level] || 'default'
}

// 路由跳转方法
const goToUser = () => {
	router.push('/system/users')
}

const goToRole = () => {
	router.push('/system/roles')
}

const goToPermission = () => {
	router.push('/system/permissions')
}

const goToDepartment = () => {
	router.push('/system/departments')
}

const goToOnlineUsers = () => {
	router.push('/system/online-users')
}

const goToConfig = () => {
	router.push('/system/config')
}

// 生命周期
onMounted(() => {
	fetchStats()

	// 每分钟更新一次服务器时间
	setInterval(() => {
		systemInfo.value.serverTime = new Date().toLocaleString('zh-CN')
	}, 60000)
})
</script>

<style scoped lang="scss">
.dashboard-container {
	padding: 20px;
	background: #f0f2f5;
	min-height: calc(100vh - 64px);

	.stats-cards {
		margin-bottom: 16px;

		:deep(.ant-card) {
			border-radius: 8px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

			.ant-statistic-title {
				font-size: 14px;
				color: rgba(0, 0, 0, 0.65);
				margin-bottom: 8px;
			}

			.ant-statistic-content {
				font-size: 24px;
				font-weight: 600;
			}

			.ant-statistic-content-prefix {
				margin-right: 8px;
				font-size: 20px;
			}
		}
	}

	.chart-row,
	.action-row {
		margin-bottom: 16px;

		:deep(.ant-card) {
			border-radius: 8px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
			height: 100%;

			.ant-card-head {
				border-bottom: 1px solid #f0f0f0;
			}
		}
	}

	.chart-container {
		padding: 20px 0;

		.pie-chart {
			.chart-item {
				margin-bottom: 16px;
				position: relative;

				&:last-child {
					margin-bottom: 0;
				}

				.chart-bar {
					height: 8px;
					background: linear-gradient(90deg, #1890ff 0%, #36cfc9 100%);
					border-radius: 4px;
					margin-bottom: 8px;
					transition: width 0.3s ease;
				}

				.chart-label {
					display: flex;
					justify-content: space-between;
					font-size: 14px;
					color: rgba(0, 0, 0, 0.65);
				}
			}
		}
	}

	:deep(.ant-btn) {
		height: 80px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;

		.anticon {
			font-size: 24px;
		}
	}

	:deep(.ant-list-item) {
		padding: 12px 0;
	}

	:deep(.ant-descriptions-item-label) {
		width: 100px;
		font-weight: 500;
	}

	// 响应式调整
	@media (max-width: 768px) {
		padding: 10px;

		.stats-cards {
			margin-bottom: 10px;
		}

		.chart-row,
		.action-row {
			margin-bottom: 10px;

			.ant-col {
				margin-bottom: 10px;
			}
		}

		:deep(.ant-btn) {
			height: 60px;

			.anticon {
				font-size: 20px;
			}
		}
	}
}
</style>
