<template>
	<div class="admin-container">

		<!-- 主要内容区 -->
		<main class="admin-main">
			<!-- 统计卡片 -->
			<div class="stats-cards">
				<el-card v-for="stat in stats" :key="stat.title" shadow="hover">
					<div class="stat-card">
						<div class="stat-icon" :style="{backgroundColor: stat.color}">
							<el-icon :size="24">
								<component :is="stat.icon" />
							</el-icon>
						</div>
						<div class="stat-content">
							<h3>{{ stat.title }}</h3>
							<p class="value">{{ stat.value }}</p>
							<p class="trend" :class="{up: stat.trend > 0, down: stat.trend < 0}">
								<span>{{ stat.trend > 0 ? '+' : '' }}{{ stat.trend }}%</span>
								<el-icon>
									<CaretTop v-if="stat.trend > 0" />
									<CaretBottom v-else />
								</el-icon>
							</p>
						</div>
					</div>
				</el-card>
			</div>


			<!-- 最近活动 -->
			<div class="recent-activities">
				<el-card shadow="hover">
					<template #header>
						<h3>最近认证活动</h3>
					</template>
					<el-table :data="recentActivities" style="width: 100%">
						<el-table-column prop="id" label="ID" />
						<el-table-column prop="hex" label="身份信息哈希值" width="180" show-overflow-tooltip align="center" />
						<el-table-column prop="user.password" label="用户公钥" show-overflow-tooltip align="center" />
						<el-table-column
							prop="issueDate"
							label="证书生效时间"
							width="180"
							align="center"
						>
							<template #default="{ row }">
								{{ formatDateSimple(row.issueDate) }}
							</template>
						</el-table-column>

						<el-table-column
							prop="expireDate"
							label="证书过期时间"
							width="180"
							align="center"
						>
							<template #default="{ row }">
								{{ formatDateSimple(row.expireDate) }}
							</template>
						</el-table-column>
						<el-table-column prop="status" label="证书状态">
							<template #default="{row}">
								<el-tag
									:type="{
        '0': 'warning',
        '1': 'success',
        '2': 'primary'
      }[row.auditStatus]"
									effect="light"
								>
									{{
										{
											'0': '待验证',
											'1': '已通过',
											'2': '已更新'
										}[row.auditStatus]
									}}
								</el-tag>
							</template>
						</el-table-column>
					</el-table>
				</el-card>
			</div>
		</main>
	</div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import {
	User,  Notification, List,
 CaretTop, CaretBottom,
	Coin
} from '@element-plus/icons-vue'


// 统计卡片数据
const stats = ref([
	{ title: '总认证数', value: '2,845', trend: 12.5, icon: User, color: '#409EFF' },
	{ title: '今日认证', value: '156', trend: 8.2, icon: Notification, color: '#67C23A' },
	{ title: '认证通过率', value: '92%', trend: 1.3, icon: List, color: '#E6A23C' },
	{ title: '区块链节点', value: '24', trend: -2.1, icon: Coin, color: '#F56C6C' }
])

// 最近活动数据
const recentActivities = ref([
])

function formatDateSimple(val) {
	if (!val) return ''
	const d = new Date(val)
	const yyyy = d.getFullYear()
	const mm = String(d.getMonth() + 1).padStart(2, '0')
	const dd = String(d.getDate()).padStart(2, '0')
	return `${yyyy}-${mm}-${dd}`
}
onMounted(()=>{
	adminRequest.get('/sys/certificate/page', {
		params:{limit:999}
	}).then(res =>{
		recentActivities.value = res.data.list
	})
})


const statusTagType = (status: string) => {
	switch(status) {
		case '已通过': return 'success'
		case '待验证': return 'warning'
		case '已拒绝': return 'danger'
		default: return 'info'
	}
}
</script>

<style scoped lang="scss">
.admin-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f5f7fa;
}

.admin-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 24px;
	height: 64px;
	background-color: #fff;
	box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

	.logo {
		display: flex;
		align-items: center;

		img {
			height: 36px;
			margin-right: 12px;
		}

		h1 {
			margin: 0;
			font-size: 20px;
			color: #333;
		}
	}

	.quick-nav {
		ul {
			display: flex;
			list-style: none;
			margin: 0;
			padding: 0;

			li {
				margin: 0 8px;

				a {
					display: flex;
					align-items: center;
					padding: 8px 16px;
					color: #666;
					text-decoration: none;
					border-radius: 4px;
					cursor: pointer;
					transition: all 0.3s;

					span {
						margin-left: 8px;
					}

					&:hover {
						background-color: #f5f7fa;
						color: #409EFF;
					}
				}

				&.active a {
					background-color: #ecf5ff;
					color: #409EFF;
				}
			}
		}
	}

	.user-info {
		.el-dropdown-link {
			display: flex;
			align-items: center;
			cursor: pointer;

			.username {
				margin: 0 8px;
				font-size: 14px;
			}
		}
	}
}

.admin-main {
	flex: 1;
	padding: 20px;
	overflow-y: auto;

	.stats-cards {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 16px;
		margin-bottom: 20px;

		.stat-card {
			display: flex;

			.stat-icon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 48px;
				height: 48px;
				border-radius: 8px;
				color: white;
				margin-right: 16px;
			}

			.stat-content {
				h3 {
					margin: 0 0 4px;
					font-size: 14px;
					color: #909399;
				}

				.value {
					margin: 0 0 4px;
					font-size: 24px;
					font-weight: bold;
					color: #303133;
				}

				.trend {
					display: flex;
					align-items: center;
					margin: 0;
					font-size: 12px;

					&.up {
						color: #67C23A;
					}

					&.down {
						color: #F56C6C;
					}

					.el-icon {
						margin-left: 4px;
					}
				}
			}
		}
	}

	.charts-section {
		display: grid;
		grid-template-columns: 2fr 1fr;
		gap: 16px;
		margin-bottom: 20px;

		.chart-header {
			display: flex;
			align-items: center;
			justify-content: space-between;

			h3 {
				margin: 0;
			}
		}

		.chart-container {
			height: 300px;
		}
	}

	.recent-activities {
		.el-table {
			:deep(.el-table__cell) {
				padding: 12px 0;
			}
		}
	}
}

</style>
