<template>
	<div class="dashboard-container">
		<!-- 顶部可视化区块 -->
		<el-row :gutter="20" class="mb-20">
			<el-col :span="24">
				<div ref="loanAmountChart" class="chart-card"></div>
			</el-col>
		</el-row>
		<!-- 数据表格区块 -->
		<el-row :gutter="20">
			<el-col :span="12">
				<el-card class="custom-card">
					<template #header>
						<div class="card-header">
							<span class="card-title">🏅 企业信用等级分布</span>
						</div>
					</template>
					<div ref="creditLevelChart" style="width: 100%;height: 350px"></div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card class="custom-card">
					<template #header>
						<div class="card-header">
							<span class="card-title">💹 行业还款率分布</span>
						</div>
					</template>
					<div ref="repaymentRateChart" style="width: 100%;height: 350px"></div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>
<script setup>
import {ref, onMounted} from 'vue'
import * as echarts from 'echarts'

const loanAmountChart = ref(null)
const creditLevelChart = ref(null)
const repaymentRateChart = ref(null)

function initCharts() {
	// 贷款金额变化趋势
	adminRequest.post("/api/mysql", {sql: "SELECT * FROM dim_loan_amount"}).then(res => {
		const chart = echarts.init(loanAmountChart.value)
		chart.setOption({
			title: {
				text: '贷款金额变化趋势',
				left: 'center',
				textStyle: {
					fontSize: 20,
					fontWeight: 'bold',
					color: '#1e3a8a'
				}
			},
			tooltip: {
				trigger: 'axis',
				backgroundColor: 'rgba(30,58,138,0.8)',
				borderColor: '#2563eb',
				textStyle: { color: '#fff' },
				axisPointer: {
					type: 'shadow'
				}
			},
			grid: { left: '5%', right: '5%', bottom: '15%', containLabel: true },
			xAxis: {
				type: 'category',
				data: res.map(e => e.date),
				axisLabel: {

					rotate: 35,
					fontSize: 12,
					color: '#1e3a8a',

				},
				axisLine: { lineStyle: { color: '#2563eb' } }
			},
			yAxis: {
				type: 'value',
				name: '金额（万元）',
				axisLabel: { color: '#1e3a8a' },
				splitLine: { lineStyle: { type: 'dashed', color: '#c7d2fe' } }
			},
			dataZoom: [{
				type: 'slider',
				show: true,
				xAxisIndex: [0],
				start: 0,
				end: 30,
				height: 20,
				bottom: 0
			}],
			series: [{
				name: '贷款金额',
				type: 'line',
				smooth: true,
				data: res.map(e => e.amount),
				symbol: 'circle',
				symbolSize: 6,
				lineStyle: { color: '#2563eb', width: 3 },
				itemStyle: { color: '#2563eb', borderColor: '#fff', borderWidth: 2 },
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{offset: 0, color: 'rgba(37,99,235,0.3)'},
						{offset: 1, color: 'rgba(37,99,235,0.05)'}
					])
				}
			}]
		});
	})
	// 2.企业信用等级分布
	adminRequest.post("/api/mysql", {sql: "SELECT * FROM dim_bank_grade"}).then(res => {
		// 排序，最大项高亮
		const sorted = [...res].sort((a, b) => b.value - a.value)
		const mainColor = '#2563eb'
		const colors = [mainColor, '#1e40af', '#60a5fa', '#a5b4fc', '#818cf8', '#fbbf24', '#f87171']
		const chart = echarts.init(creditLevelChart.value)
		chart.setOption({
			title: {
				text: '企业信用等级分布',
				left: 'center',
				textStyle: { fontSize: 18, fontWeight: 'bold', color: '#1e3a8a' }
			},
			tooltip: {
				trigger: 'item',
				backgroundColor: 'rgba(30,58,138,0.9)',
				textStyle: { color: '#fff' },
				formatter: p => `${p.name}：${p.value}家（${p.percent}%）`
			},
			legend: {
				orient: 'vertical',
				left: 'left',
				top: 'middle',
				textStyle: { fontSize: 12, color: '#1e3a8a' }
			},
			series: [{
				name: '信用等级',
				type: 'pie',
				radius: ['40%', '70%'],
				center: ['55%', '50%'],
				roseType: 'radius',
				data: sorted.map((item, i) => ({
					...item,
					itemStyle: {
						color: i === 0 ? mainColor : colors[i % colors.length],
						borderRadius: 8,
						borderColor: '#fff',
						borderWidth: 2,
						shadowBlur: i === 0 ? 20 : 10,
						shadowColor: i === 0 ? 'rgba(37,99,235,0.3)' : 'rgba(30,58,138,0.1)'
					}
				})),
				label: {
					show: true,
					formatter: p => `${p.name} ${p.value}家（${p.percent}%）`,
					color: '#1e3a8a',
					fontWeight: 'bold',
					fontSize: 14
				},
				emphasis: {
					scale: true,
					itemStyle: {
						shadowBlur: 30,
						shadowColor: 'rgba(37,99,235,0.4)'
					}
				}
			}]
		})
	})
	// 3.还款状态分析
	adminRequest.post("/api/mysql", {sql: "SELECT * FROM dim_loan_status"}).then(res => {
		const sorted = [...res].sort((a, b) => b.value - a.value)
		const mainColor = '#10b981'
		const colors = [mainColor, '#3b82f6', '#f59e42', '#f87171', '#818cf8', '#a5b4fc']
		const chart = echarts.init(repaymentRateChart.value)
		chart.setOption({
			title: {
				text: '还款状态分析',
				left: 'center',
				textStyle: { fontSize: 18, fontWeight: 'bold', color: '#1e3a8a' }
			},
			tooltip: {
				trigger: 'item',
				backgroundColor: 'rgba(30,58,138,0.9)',
				textStyle: { color: '#fff' },
				formatter: p => `${p.name}：${p.value}笔（${p.percent}%）`
			},
			legend: {
				orient: 'vertical',
				left: 10,
				top: 'center',
				textStyle: { fontSize: 12, color: '#1e3a8a' }
			},
			series: [{
				name: '还款状态',
				type: 'pie',
				radius: ['40%', '70%'],
				center: ['60%', '50%'],
				roseType: 'radius',
				data: sorted.map((item, i) => ({
					...item,
					itemStyle: {
						color: i === 0 ? mainColor : colors[i % colors.length],
						borderRadius: 10,
						borderColor: '#fff',
						borderWidth: 2,
						shadowBlur: i === 0 ? 20 : 10,
						shadowColor: i === 0 ? 'rgba(16,185,129,0.3)' : 'rgba(30,58,138,0.1)'
					}
				})),
				label: {
					show: true,
					formatter: p => `${p.name} ${p.value}笔（${p.percent}%）`,
					color: '#1e3a8a',
					fontWeight: 'bold',
					fontSize: 14
				},
				emphasis: {
					scale: true,
					itemStyle: {
						shadowBlur: 30,
						shadowColor: 'rgba(16,185,129,0.4)'
					}
				}
			}]
		})
	})
}

onMounted(() => {
	initCharts()
})
</script>

<style scoped>
.dashboard-container {
	padding: 20px;
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	min-height: 100vh;
}

.chart-card {
	background: white;
	border-radius: 12px;
	height: 300px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	padding: 15px;
}

.custom-card {
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	border: none;
	transition: transform 0.3s;
}

.custom-card:hover {
	transform: translateY(-5px);
}

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

.card-title {
	font-size: 18px;
	font-weight: 600;
	color: #1e3a8a;
}

.mb-20 {
	margin-bottom: 20px;
}
</style>
