<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('house')">
						<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('transactions')">-->
<!--						<div class="quick-content">-->
<!--							<el-icon :size="30" color="#67C23A"><Money /></el-icon>-->
<!--							<span>交易记录</span>-->
<!--						</div>-->
<!--					</el-card>-->
<!--				</el-col>-->
				<el-col :span="6">
					<el-card shadow="hover" class="quick-card" @click="navigateTo('house')">
						<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="12">
				<el-card shadow="hover">
					<template #header>
						<div class="card-header">
							<span>系统数据概览</span>
						</div>
					</template>
					<div class="data-overview">
						<el-row :gutter="20">
							<el-col :span="8">
								<div class="data-item">
									<div class="data-value">{{ overviewData.totalProperties }}</div>
									<div class="data-label">总房源</div>
								</div>
							</el-col>
							<el-col :span="8">
								<div class="data-item">
									<div class="data-value">{{ overviewData.activeUsers }}</div>
									<div class="data-label">活跃用户</div>
								</div>
							</el-col>
							<el-col :span="8">
								<div class="data-item">
									<div class="data-value">{{ overviewData.totalTransactions }}</div>
									<div class="data-label">总交易</div>
								</div>
							</el-col>
						</el-row>
						<el-row :gutter="20" class="mt-20">
							<el-col :span="8">
								<div class="data-item">
									<div class="data-value">{{ overviewData.pendingCertifications }}</div>
									<div class="data-label">待认证</div>
								</div>
							</el-col>
							<el-col :span="8">
								<div class="data-item">
									<div class="data-value">{{ overviewData.availableProperties }}</div>
									<div class="data-label">可换住房源</div>
								</div>
							</el-col>
							<el-col :span="8">
								<div class="data-item">
									<div class="data-value">{{ overviewData.blockHeight }}</div>
									<div class="data-label">区块链高度</div>
								</div>
							</el-col>
						</el-row>
					</div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<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>

		<!-- 最近交易和待认证 -->
		<el-row :gutter="20" class="mt-20">
			<el-col :span="12">
				<el-card shadow="hover">
					<template #header>
						<div class="card-header">
							<span>最近交易记录</span>
							<el-button type="text" @click="navigateTo('house')">查看全部</el-button>
						</div>
					</template>
					<el-table :data="recentTransactions" style="width: 100%" height="300">
						<el-table-column prop="txHash" label="交易哈希" width="180">
							<template #default="{row}">
								<el-tooltip :content="row.txHash" placement="top">
									<span class="text-ellipsis">{{ shortenHash(row.txHash) }}</span>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column prop="property" label="房源" width="120" />
						<el-table-column prop="fromUser" label="换出方" width="120" />
						<el-table-column prop="toUser" label="换入方" width="120" />

						<el-table-column prop="status" label="状态" width="100">
							<template #default="{row}">
								<el-tag :type="getStatusTagType(row.status)">
									{{ row.status }}
								</el-tag>
							</template>
						</el-table-column>
					</el-table>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card shadow="hover">
					<template #header>
						<div class="card-header">
							<span>待认证申请</span>
							<el-button type="text" @click="navigateTo('house')">查看全部</el-button>
						</div>
					</template>
					<el-table :data="pendingCertifications" style="width: 100%" height="300">
						<el-table-column prop="id" label="ID" width="80" />
						<el-table-column prop="user" label="用户" width="120" />
						<el-table-column prop="type" label="认证类型" width="120">
							<template #default="{row}">
								<el-tag :type="row.type === '身份认证' ? 'success' : 'warning'">
									{{ row.type }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="submitTime" label="提交时间" width="160" />
						<el-table-column label="操作" width="120">
							<template #default="{row}">
								<el-button size="small" @click="handleCertify(row.id, 'approve')">通过</el-button>
								<el-button size="small" type="danger" @click="handleCertify(row.id, 'reject')">拒绝</el-button>
							</template>
						</el-table-column>
					</el-table>
				</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 overviewData = ref({
	totalProperties: 1245,
	activeUsers: 876,
	totalTransactions: 3421,
	pendingCertifications: 23,
	availableProperties: 567,
	blockHeight: 124567
})

// 最近交易
const recentTransactions = ref([
	{
		txHash: '0x4a3b2c1d0e9f8a7b6c5d4e3f2a1b0c9d8e7f6',
		property: '阳光公寓-302',
		fromUser: '用户A',
		toUser: '用户B',
		date: '2023-05-15',
		status: '已完成'
	},
	{
		txHash: '0x5b4c3d2e1f0a9b8c7d6e5f4a3b2c1d0e9f8a7',
		property: '绿洲小区-1201',
		fromUser: '用户C',
		toUser: '用户D',
		date: '2023-05-14',
		status: '进行中'
	},
	{
		txHash: '0x6c5d4e3f2a1b0c9d8e7f6a5b4c3d2e1f0a9b8',
		property: '湖畔别墅-8',
		fromUser: '用户E',
		toUser: '用户F',
		date: '2023-05-13',
		status: '已完成'
	},
	{
		txHash: '0x7d6e5f4a3b2c1d0e9f8a7b6c5d4e3f2a1b0c9',
		property: '城市花园-502',
		fromUser: '用户G',
		toUser: '用户H',
		date: '2023-05-12',
		status: '已取消'
	},
	{
		txHash: '0x8e7f6a5b4c3d2e1f0a9b8c7d6e5f4a3b2c1d0',
		property: '星空大厦-2103',
		fromUser: '用户I',
		toUser: '用户J',
		date: '2023-05-11',
		status: '已完成'
	}
])

// 待认证申请
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 blockchainInfo = ref({
	height: 124567,
	nodes: 12,
	pendingTxs: 8,
	status: '运行正常'
})

// 图表引用
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>
