<template>
	<el-row :gutter="24" class="analysis-container">
		<el-col :span="24" class="chart-col">
			<div ref="repaymentChart" 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 repaymentChart = ref(null)
let chartInstance = null

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

onMounted(() => {

	adminRequest.post("/api/mysql", { sql: "SELECT * FROM dim_repayment_status ORDER BY repayment_date" }).then(res => {
		if (!res || res.length === 0) return
		// 处理日期格式
		const dateList = res.map(item => {
			const date = new Date(item.repayment_date)
			return `${date.getMonth()+1}/${date.getDate()}`
		})

		chartInstance = echarts.init(repaymentChart.value)
		chartInstance.setOption({
			backgroundColor: 'transparent',
			title: {
				text: '企业还款状态分析',
				left: 'center',
				textStyle: {
					fontSize: 18,
					fontWeight: 'bold',
					color: '#3a5169'
				},
				subtext: '按时还款与逾期还款金额对比',
				subtextStyle: {
					color: '#7f8c9a',
					fontSize: 12
				}
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				},
				formatter: params => {
					let html = `<div style="font-weight:bold;margin-bottom:5px">${params[0].axisValue}</div>`
					params.forEach(item => {
						html += `<div>${item.seriesName}: <span style="color:${item.color};font-weight:bold">${item.value}元</span></div>`
					})
					return html
				},
				backgroundColor: 'rgba(255,255,255,0.95)',
				borderColor: '#e4e7ed',
				borderWidth: 1,
				textStyle: {
					color: '#3a5169'
				},
				extraCssText: 'box-shadow: 0 4px 20px rgba(0,0,0,0.1); border-radius: 8px; padding: 10px;'
			},
			legend: {
				data: ['按时还款', '逾期还款', '总还款'],
				right: 20,
				top: 10,
				textStyle: {
					color: '#7f8c9a'
				}
			},
			grid: {
				left: '3%',
				right: '4%',
				top: '20%',
				bottom: '15%',
				containLabel: true
			},
			xAxis: {
				type: 'category',
				data: dateList,
				axisLine: {
					lineStyle: {
						color: '#e4e7ed'
					}
				},
				axisLabel: {
					color: '#7f8c9a',
					fontSize: 12
				},
				axisTick: {
					alignWithLabel: true
				}
			},
			yAxis: {
				type: 'value',
				name: '金额(元)',
				nameTextStyle: {
					color: '#7f8c9a',
					padding: [0, 0, 0, 40]
				},
				axisLine: {
					show: false
				},
				axisTick: {
					show: false
				},
				axisLabel: {
					color: '#7f8c9a',
					formatter: value => `${value}`
				},
				splitLine: {
					lineStyle: {
						color: '#f0f2f5',
						type: 'dashed'
					}
				}
			},
			series: [
				{
					name: '按时还款',
					type: 'bar',
					barWidth: '30%',
					data: res.map(item => item.on_time_amount),
					itemStyle: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{ offset: 0, color: '#83bff6' },
							{ offset: 1, color: '#188df0' }
						])
					},
					emphasis: {
						itemStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{ offset: 0, color: '#2378f7' },
								{ offset: 1, color: '#09307a' }
							])
						}
					}
				},
				{
					name: '逾期还款',
					type: 'bar',
					barWidth: '30%',
					data: res.map(item => item.overdue_amount),
					itemStyle: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{ offset: 0, color: '#ff9f7f' },
							{ offset: 1, color: '#ff6e76' }
						])
					},
					emphasis: {
						itemStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{ offset: 0, color: '#ff6e76' },
								{ offset: 1, color: '#c12e34' }
							])
						}
					}
				},
				{
					name: '总还款',
					type: 'line',
					smooth: true,
					data: res.map(item => item.total_amount),
					symbol: 'circle',
					symbolSize: 8,
					lineStyle: {
						width: 3,
						color: '#37a2ff'
					},
					itemStyle: {
						color: '#37a2ff',
						borderColor: '#fff',
						borderWidth: 2
					},
					label: {
						show: true,
						position: 'top',
						formatter: '{c}元'
					}
				}
			],
			dataZoom: [{
				type: 'slider',
				show: true,
				xAxisIndex: [0],
				height: 20,
				bottom: 10,
				start: 0,
				end: 100,
				handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z',
				handleSize: '80%',
				handleStyle: {
					color: '#fff',
					shadowBlur: 3,
					shadowColor: 'rgba(0, 0, 0, 0.6)',
					shadowOffsetX: 2,
					shadowOffsetY: 2
				},
				backgroundColor: '#f0f2f5',
				fillerColor: 'rgba(55, 162, 255, 0.2)',
				borderColor: '#e4e7ed'
			}]
		})

		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>
