<template>
	<div class="home-container">
		<el-row :gutter="20" v-loading="loading">
			<!-- 提交订单 -->
			<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
				<el-card shadow="hover" class="stat-card">
					<div class="stat-item">
						<div class="stat-icon" style="background: #409eff">
							<el-icon :size="28"><DocumentAdd /></el-icon>
						</div>
						<div class="stat-info">
							<div class="stat-title">提交订单</div>
							<div class="stat-number">{{ statistics.submitCreateNum || 0 }}</div>
							<div class="stat-desc">金额: {{ formatAmount(statistics.submitCreateAmount) }}</div>
						</div>
					</div>
				</el-card>
			</el-col>

			<!-- 支付订单 -->
			<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
				<el-card shadow="hover" class="stat-card">
					<div class="stat-item">
						<div class="stat-icon" style="background: #67c23a">
							<el-icon :size="28"><Wallet /></el-icon>
						</div>
						<div class="stat-info">
							<div class="stat-title">支付订单</div>
							<div class="stat-number">{{ statistics.payOrderNum || 0 }}</div>
							<div class="stat-desc">金额: {{ formatAmount(statistics.payOrderAmount) }}</div>
						</div>
					</div>
				</el-card>
			</el-col>

			<!-- 提现订单 -->
			<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
				<el-card shadow="hover" class="stat-card">
					<div class="stat-item">
						<div class="stat-icon" style="background: #e6a23c">
							<el-icon :size="28"><Money /></el-icon>
						</div>
						<div class="stat-info">
							<div class="stat-title">提现订单</div>
							<div class="stat-number">{{ statistics.withdrawOrderNum || 0 }}</div>
							<div class="stat-desc">金额: {{ formatAmount(statistics.withdrawOrderAmount) }}</div>
						</div>
					</div>
				</el-card>
			</el-col>

			<!-- 提现成功 -->
			<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
				<el-card shadow="hover" class="stat-card">
					<div class="stat-item">
						<div class="stat-icon" style="background: #f56c6c">
							<el-icon :size="28"><CircleCheck /></el-icon>
						</div>
						<div class="stat-info">
							<div class="stat-title">提现成功</div>
							<div class="stat-number">{{ statistics.withdrawOrderSuccessNum || 0 }}</div>
							<div class="stat-desc">金额: {{ formatAmount(statistics.withdrawOrderSuccessAmount) }}</div>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>

		<!-- 支付成功率 -->
		<el-row :gutter="20" style="margin-top: 20px">
			<el-col :span="24">
				<el-card shadow="hover" class="rate-card">
					<div class="rate-item">
						<div class="rate-icon">
							<el-icon :size="40"><TrendCharts /></el-icon>
						</div>
						<div class="rate-info">
							<div class="rate-title">支付成功率</div>
							<div class="rate-number">{{ formatRate(statistics.paySuccessRate) }}</div>
						</div>
						<div class="rate-progress">
							<el-progress :percentage="statistics.paySuccessRate || 0" :stroke-width="20" :text-inside="true" />
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts" name="dashboard">
import { ref, onMounted } from 'vue';
import { DocumentAdd, Wallet, Money, CircleCheck, TrendCharts } from '@element-plus/icons-vue';
import { getIndexStatistics } from '/@/api/statistics/index';
import { ElMessage } from 'element-plus';

// 统计数据
const statistics = ref({
	submitCreateNum: 0,
	payOrderNum: 0,
	submitCreateAmount: 0,
	payOrderAmount: 0,
	withdrawOrderNum: 0,
	withdrawOrderSuccessNum: 0,
	withdrawOrderAmount: 0,
	withdrawOrderSuccessAmount: 0,
	paySuccessRate: 0,
});

const loading = ref(false);

// 格式化金额
const formatAmount = (amount: number | undefined) => {
	if (!amount) return '¥0.00';
	return `¥${amount.toFixed(2)}`;
};

// 格式化百分比
const formatRate = (rate: number | undefined) => {
	if (!rate) return '0%';
	return `${rate.toFixed(2)}%`;
};

// 加载统计数据
const loadStatistics = async () => {
	loading.value = true;
	try {
		const res = await getIndexStatistics();
		if (res.code === 0) {
			statistics.value = res.data;
		} else {
			ElMessage.error(res.msg || '加载统计数据失败');
		}
	} catch (error) {
		ElMessage.error('加载统计数据失败');
	} finally {
		loading.value = false;
	}
};

onMounted(() => {
	loadStatistics();
});
</script>

<style scoped lang="scss">
.home-container {
	padding: 20px;

	.stat-card {
		margin-bottom: 20px;
		transition: all 0.3s;

		&:hover {
			transform: translateY(-2px);
		}

		.stat-item {
			display: flex;
			align-items: center;
			padding: 10px;

			.stat-icon {
				width: 60px;
				height: 60px;
				border-radius: 8px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				margin-right: 20px;
			}

			.stat-info {
				flex: 1;

				.stat-title {
					font-size: 14px;
					color: var(--el-text-color-secondary);
					margin-bottom: 8px;
				}

				.stat-number {
					font-size: 28px;
					font-weight: bold;
					color: var(--el-text-color-primary);
					margin-bottom: 5px;
				}

				.stat-desc {
					font-size: 13px;
					color: var(--el-text-color-regular);
				}
			}
		}
	}

	.rate-card {
		.rate-item {
			display: flex;
			align-items: center;
			padding: 20px 10px;

			.rate-icon {
				width: 80px;
				height: 80px;
				border-radius: 50%;
				background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				margin-right: 30px;
			}

			.rate-info {
				margin-right: 30px;

				.rate-title {
					font-size: 16px;
					color: var(--el-text-color-secondary);
					margin-bottom: 10px;
				}

				.rate-number {
					font-size: 36px;
					font-weight: bold;
					color: var(--el-text-color-primary);
				}
			}

			.rate-progress {
				flex: 1;
				min-width: 300px;
			}
		}
	}
}

@media (max-width: 768px) {
	.home-container {
		padding: 10px;

		.stat-card {
			margin-bottom: 10px;

			.stat-item {
				.stat-icon {
					width: 50px;
					height: 50px;
					margin-right: 15px;
				}

				.stat-info {
					.stat-number {
						font-size: 24px;
					}
				}
			}
		}

		.rate-card {
			.rate-item {
				flex-direction: column;
				align-items: flex-start;
				padding: 15px;

				.rate-icon {
					width: 60px;
					height: 60px;
					margin-right: 0;
					margin-bottom: 15px;
				}

				.rate-info {
					margin-right: 0;
					margin-bottom: 15px;

					.rate-number {
						font-size: 28px;
					}
				}

				.rate-progress {
					width: 100%;
					min-width: auto;
				}
			}
		}
	}
}
</style>
