<template>
	<div class="admin-container">
		<!-- 顶部快捷导航 -->
		<div class="quick-access">
			<el-row :gutter="20">
				<el-col :span="6">
					<el-card shadow="hover" class="quick-card" @click="navigateTo('book')">
						<div class="quick-content">
							<el-icon :size="30" color="#409EFF"><House /></el-icon>
							<span>版权管理</span>
						</div>
					</el-card>
				</el-col>

				<el-col :span="6">
					<el-card shadow="hover" class="quick-card" @click="navigateTo('slides')">
						<div class="quick-content">
							<el-icon :size="30" color="#E6A23C"><DocumentChecked /></el-icon>
							<span>轮播</span>
						</div>
					</el-card>
				</el-col>
				<el-col :span="6">
					<el-card shadow="hover" class="quick-card" @click="navigateTo('user')">
						<div class="quick-content">
							<el-icon :size="30" color="#F56C6C"><User /></el-icon>
							<span>用户管理</span>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</div>

		<!-- 数据概览 -->
		<el-row :gutter="20" class="mt-20">

			<el-col :span="24">
				<el-card shadow="hover">
					<template #header>
						<div class="card-header">
							<span>发布趋势</span>
						</div>
					</template>
					<div ref="chart" style="height: 220px;"></div>
				</el-card>
			</el-col>
		</el-row>


	</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts'
import {
	House,
	Money,
	DocumentChecked,
	User
} from '@element-plus/icons-vue'

const router = useRouter()


// 待认证申请
const pendingCertifications = ref([
	{
		id: 1001,
		user: '用户K',
		type: '身份认证',
		submitTime: '2023-05-15 14:30'
	},
	{
		id: 1002,
		user: '用户L',
		type: '房源认证',
		submitTime: '2023-05-15 13:45'
	},
	{
		id: 1003,
		user: '用户M',
		type: '身份认证',
		submitTime: '2023-05-15 11:20'
	},
	{
		id: 1004,
		user: '用户N',
		type: '房源认证',
		submitTime: '2023-05-15 10:15'
	},
	{
		id: 1005,
		user: '用户O',
		type: '身份认证',
		submitTime: '2023-05-14 18:40'
	}
])


// 图表引用
const chart = ref(null)

// 初始化图表
onMounted(() => {
	if (chart.value) {
		const myChart = echarts.init(chart.value)
		const option = {
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},
			legend: {
				data: ['用户量', '发布量']
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: {
				type: 'category',
				data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
			},
			yAxis: {
				type: 'value'
			},
			series: [
				{
					name: '换住交易',
					type: 'bar',
					data: [120, 132, 101, 134, 290, 230, 210]
				},
				{
					name: '认证交易',
					type: 'bar',
					data: [220, 182, 191, 234, 290, 330, 310]
				}
			]
		}
		myChart.setOption(option)

		// 响应式调整
		window.addEventListener('resize', () => {
			myChart.resize()
		})
	}
})

// 工具方法
const shortenHash = (hash: string) => {
	return hash ? `${hash.substring(0, 6)}...${hash.substring(hash.length - 4)}` : ''
}

const getStatusTagType = (status: string) => {
	switch (status) {
		case '已完成':
			return 'success'
		case '进行中':
			return 'primary'
		case '已取消':
			return 'danger'
		default:
			return 'info'
	}
}

// 导航方法
const navigateTo = (path: string) => {
	router.push(`/admin/${path}`)
}

// 认证处理
const handleCertify = (id: number, action: string) => {
	console.log(`处理认证 ${id}，操作：${action}`)
	// 实际应用中这里会调用API
	ElMessage.success(`认证ID ${id} 已${action === 'approve' ? '通过' : '拒绝'}`)

	// 从待认证列表中移除
	pendingCertifications.value = pendingCertifications.value.filter(item => item.id !== id)
}
</script>

<style scoped>
.admin-container {
	padding: 20px;
}

.quick-access {
	margin-bottom: 20px;
}

.quick-card {
	cursor: pointer;
	transition: all 0.3s;
}

.quick-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.quick-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px 0;
}

.quick-content span {
	margin-top: 10px;
	font-size: 16px;
}

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

.data-overview {
	padding: 10px;
}

.data-item {
	text-align: center;
	padding: 15px 0;
}

.data-value {
	font-size: 24px;
	font-weight: bold;
	color: var(--el-color-primary);
}

.data-label {
	font-size: 14px;
	color: var(--el-text-color-secondary);
	margin-top: 5px;
}

.mt-20 {
	margin-top: 20px;
}

.text-ellipsis {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.blockchain-info {
	padding: 10px;
}
</style>

<route lang="json">
{
"meta": {
"layout": "admin",
"title": "区块链屋屋换住系统 - 后台首页"
}
}
</route>
