<template>
	<div class="dashboard">
		<el-row gutter="20">
			<!-- 总览统计 -->
			<el-col :span="8" >
				<el-card class="dashboard-card">
					<div class="card-header">
						<h3>总览统计</h3>
					</div>
					<div class="card-body" >
						<div class="stat-item">
							<div class="stat-title">总交易数</div>
							<div class="stat-value">{{ totalTransactions }}</div>
						</div>
						<div class="stat-item" >
							<div class="stat-title">欺诈交易</div>
							<div class="stat-value">{{ fraudTransactions }}</div>
						</div>
						<div class="stat-item">
							<div class="stat-title">欺诈率</div>
							<div class="stat-value">{{ fraudRate }}%</div>
						</div>
					</div>
				</el-card>
			</el-col>

			<!-- 实时监控 -->
			<el-col :span="8">
				<el-card class="dashboard-card" style="height: 240px">
					<div class="card-header" >
						<h3>实时监控</h3>
					</div>
					<div class="card-body">
						<div class="stat-item">
							<div class="stat-title">实时交易数</div>
							<div class="stat-value">{{ realTimeTransactions }}</div>
						</div>
						<div class="stat-item">
							<div class="stat-title">检测到的欺诈交易</div>
							<div class="stat-value">{{ realTimeFraud }}</div>
						</div>
					</div>
				</el-card>
			</el-col>

			<!-- 系统健康 -->
			<el-col :span="8" >
				<el-card class="dashboard-card" style="height: 240px">
					<div class="card-header">
						<h3>系统健康</h3>
					</div>
					<div class="card-body">
						<div class="health-status">
							<div class="status-item">
								<div class="status-title">模型状态</div>
								<div class="status-value">{{ modelStatus }}</div>
							</div>
							<div class="status-item">
								<div class="status-title">系统运行</div>
								<div class="status-value">{{ systemStatus }}</div>
							</div>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>

		<!-- 实时交易图表 -->
		<el-row class="chart-row">
			<el-col :span="24">
				<el-card class="chart-card">

					<!-- 使用 ECharts 或其他图表库来展示实时交易趋势 -->
					<div  ref="chart" class="chart-placeholder">图表在此展示</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import * as echarts from "echarts";

// 静态数据
const totalTransactions = ref(21500);
const fraudTransactions = ref(1560);
const fraudRate = ref(((fraudTransactions.value / totalTransactions.value) * 100).toFixed(2));
const realTimeTransactions = ref(256);
const realTimeFraud = ref(12);
const modelStatus = ref("正常");
const systemStatus = ref("正常");

// ECharts 配置
const chart = ref(null);
const chartInstance = ref<echarts.ECharts | null>(null);

const chartData = ref({
	xData: ['10:00', '11:00', '12:00', '13:00', '14:00', '15:00'],
	yData: [45, 70, 80, 90, 60, 50],
});

// 初始化 ECharts
const initChart = () => {
	if (chart.value) {
		chartInstance.value = echarts.init(chart.value);

		const option = {
			title: {
				text: '实时交易趋势',
				left: 'center',
			},
			tooltip: {
				trigger: 'axis',
			},
			xAxis: {
				type: 'category',
				data: chartData.value.xData,
			},
			yAxis: {
				type: 'value',
			},
			series: [
				{
					data: chartData.value.yData,
					type: 'line',
					smooth: true,
					itemStyle: {
						color: '#409EFF',
					},
				},
			],
		};

		chartInstance.value.setOption(option);
	}
};
// 页面加载时初始化图表
onMounted(() => {
	initChart();
});

// 页面卸载时销毁图表实例
onBeforeUnmount(() => {
	chartInstance.value?.dispose();
});

</script>

<style scoped lang="scss">
.dashboard {
	padding: 20px;
}

.dashboard-card {
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	padding: 20px;
	background-color: #ffffff;
	transition: box-shadow 0.3s ease;
	cursor: pointer;
}

.dashboard-card:hover {
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.card-header h3 {
	margin-bottom: 15px;
	font-size: 20px;
	font-weight: bold;
	color: #333;
}

.card-body {
	font-size: 16px;
}

.stat-item {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}

.stat-title {
	color: #666;
}

.stat-value {
	font-weight: bold;
	font-size: 18px;
	color: #409EFF;
}

.health-status {
	display: flex;
	justify-content: space-between;
}

.status-item {
	width: 45%;
}

.status-title {
	color: #666;
}

.status-value {
	font-weight: bold;
	font-size: 18px;
}

.chart-row {
	margin-top: 30px;
}

.chart-card {
	background-color: #f9f9f9;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.chart-placeholder {
	height: 300px;
	background-color: #e8e8e8;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 18px;
	color: #888;
	border-radius: 8px;
}
</style>
