<template>
	<el-row :gutter="24" class="analysis-container">
		<el-col :span="24" class="chart-col">
			<div ref="salaryChart" class="chart-card chart-line"></div>
		</el-col>
	</el-row>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted, ref, onBeforeUnmount } from 'vue'

const salaryChart = ref(null)
let chartInstance = null

const resizeChart = () => {
	chartInstance?.resize()
}

onMounted(() => {
	adminRequest.post("/api/mysql", { sql: "select * from dim_jie_count" }).then(res => {

		chartInstance = echarts.init(salaryChart.value)
		chartInstance.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: '{b}<br/>还款：{c}' },
			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: res,
				itemStyle: {
					borderRadius: 10,
					borderColor: '#fff',
					borderWidth: 2,
					shadowBlur: 15,
					shadowOffsetX: 0,
					shadowColor: 'rgba(30,58,138,0.1)'
				},
				label: {
					show: true,
					formatter: '{b|{b}}\n{c|{c}%}',
					rich: {
						b: {fontSize: 14, color: '#1e3a8a', fontWeight: 'bold'},
						c: {fontSize: 12, color: '#2563eb'}
					}
				},
				labelLine: { length: 15, length2: 20, lineStyle: { color: '#2563eb', width: 1 } },
				emphasis: {
					scale: true,
					itemStyle: {
						shadowBlur: 30,
						shadowColor: 'rgba(30,58,138,0.2)'
					},
					label: { fontSize: 16, fontWeight: 'bold' }
				}
			}]
		})
		window.addEventListener('resize', resizeChart)
	})
})
onBeforeUnmount(() => {
	window.removeEventListener('resize', resizeChart)
	chartInstance?.dispose()
})
</script>
<style scoped>
.analysis-container {
	padding: 0 10px;
}

.chart-col {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.chart-card {
	flex: 1;
	min-height: 500px;
	background: white;
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
	padding: 20px;
	transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
	position: relative;
	overflow: hidden;
}

.chart-line::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #ff7b7b 0%, #ffb8b8 100%);
}

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

@media (max-width: 992px) {
	.chart-col {
		width: 100%;
		margin-bottom: 24px;
	}

	.chart-card {
		min-height: 450px;
	}
}

@media (max-width: 768px) {
	.chart-card {
		min-height: 400px;
	}
}
</style>
