<template>
	<view>
		<l-echart ref="chart" @finished="drawChart" />
	</view>
</template>

<script setup>
	import * as echarts from 'echarts';
	import {
		ref,
		watch,
		onMounted,
		onUnmounted
	} from 'vue'; // 补充导入ref等API
	import {
		formatDate,
		getDateAfterDays,
		getDateAfterMonths
	} from '@/utils/dateTime';

	const props = defineProps({
		dataList: {
			type: Array,
			default: () => [],
			required: true
		},
		xField: {
			type: String,
			default: 'createTime' // 原xField默认值是'rqDate'，与数据中的createTime匹配，修正为createTime
		},
		yFields: {
			type: Object, // 注意：yFields应是数组（存储多条线配置），原代码写的是String，这里修正为Array
			default: () => [],
			required: true
		}
	});

	// 响应式数据定义
	const colorData = ref([{
			color: '#000000'
		},
		{
			color: '#00007f'
		},
		{
			color: '#ff0000'
		},
		{
			color: '#005500'
		},
		{
			color: '#55007f'
		},
		{
			color: '#ffff00'
		}
	]);
	const chart = ref(null);
	const chartOption = ref({}); // 初始化为空对象，避免undefined
	const chartTitle = ref('历史趋势'); // 直接初始化标题，无需在watch中重复赋值

	// 1. 修复：生成图表配置（返回配置对象，供赋值给chartOption.value）
	const generateOptions = () => {

		const serie = []; // 局部变量：存储系列配置
		const yData = []; // 局部变量：存储Y轴配置
		const xData = []; // 局部变量：存储X轴数据
		const legendData = []; // 局部变量：存储图例数据
		let positionIndex = 0;
		const yDataNum = props.yFields.length; // Y轴数量 = 线条数量

		// 初始化X轴（若需默认占位，可保留；建议后续用真实数据覆盖）
		for (let i = 0; i < yDataNum; i++) {
			xData.push('');
		}

		// 循环处理每条线的Y轴和系列配置
		for (let i = 0; i < props.yFields.length; i++) {
			const yFieldItem = props.yFields[i]; // 简化变量引用
			// Y轴配置模板
			const yaxisTemp = {
				type: 'value',
				nameRotate: 270,
				nameLocation: 'middle',
				nameGap: 20,
				name: '',
				position: 'left',
				axisLabel: {
					formatter: '{value}'
				},
				axisLine: {
					lineStyle: {
						color: '#61A0A8',
						width: 1
					}
				}
			};

			// 图例名称（拼接名称+单位）
			const legendName = `${yFieldItem.name}(${yFieldItem.unit})`;
			legendData.push(legendName);



			// 调整Y轴位置（ssll放左侧，其他放右侧）
			if (yFieldItem.field === 'ssll') {
				yaxisTemp.position = 'left';
				yaxisTemp.nameGap = -15;
			} else {
				yaxisTemp.position = 'right';
				yaxisTemp.offset = 30 * positionIndex;
				positionIndex++;
			}

			// 填充Y轴配置（修复v[i].max错误，改为yFieldItem.max）
			yaxisTemp.name = legendName;
			yaxisTemp.min = yFieldItem.min ?? 0; // 兜底：无min时设为0
			yaxisTemp.max = yFieldItem.max ?? 100; // 兜底：无max时设为100
			yaxisTemp.axisLine.lineStyle.color = colorData.value[i]?.color || '#61A0A8'; // 颜色兜底
			// yaxisTemp.show=false

			yData.push(yaxisTemp);

			// 系列配置模板
			const serieTemp = {
				field: yFieldItem.field,
				name: legendName,
				showSymbol: false,
				type: 'line',
				lineStyle: {
					width: 2
				},
				data: [],
				yAxisIndex: i // 对应第i个Y轴
			};

			// 修复this.serie.push错误：向局部变量seriepush
			serie.push(serieTemp);

		}

		// 修复：返回完整配置对象
		return {
			color: ['#000000', '#00007f', '#ff0000', '#005500', '#55007f', '#ffff00'],
			title: {
				textAlign: 'auto',
				text: chartTitle.value
			},
			tooltip: {
				trigger: 'axis',
				alwaysShowContent: true,
				axisPointer: {
					type: 'line',
					show: false
				}
			},
			toolbox: {
				showTitle: true,
				orient: 'horizontal',
				feature: {
					dataView: {
						show: true,
						readOnly: false
					},
					restore: {
						show: true
					},
					saveAsImage: {
						show: true
					}
				},
				right: '10%',
				top: '0'
			},
			legend: {
				data: legendData,
				itemGap: 5,
				padding: [35, 5, 25, 5],
				type: 'scroll',
				show: true
			},
			grid: {
				width: 'auto',
				top: '20%',
				left: '5px',
				right: '5px', // 动态调整右侧间距（避免Y轴标签被截断）
				bottom: 20,
				containLabel: true
			},
			xAxis: {
				type: 'category',
				axisTick: {
					alignWithLabel: true
				},
				show: true,
				data: xData
			},
			yAxis: yData,
			series: serie
		};
	};

	// 2. 修复：数据处理（正确访问响应式变量）
	const processSeriesData = () => {
		const ssData = props.dataList;

		// 修复：访问chartOption.value的属性
		const xData = [...chartOption.value.xAxis.data]; // 拷贝原X轴数据（避免直接修改）  series
		const serie = [...chartOption.value.series]; // 拷贝原系列数据
		const yData = [...chartOption.value.yAxis]; // 拷贝原Y轴数据

		// 清空历史数据（避免重复添加）
		xData.length = 0;
		serie.forEach(item => (item.data.length = 0));

		// 处理每条数据
		ssData.forEach(item => {
			// 格式化X轴时间（用props.xField获取字段名，避免硬编码createTime）
			const ctime = item[props.xField];
			xData.push(ctime);

			// 填充每条线的数值
			serie.forEach((serieItem, j) => {
				const field = props.yFields[j].field;
				const tempValue = item[field];
				// 兜底：空值设为0（避免图表断层）
				serieItem.data.push(tempValue ?? 0);
			});
		});

		// 动态调整Y轴最大值（修复this.serie和this.maxArrValue错误）
		serie.forEach((serieItem, mm) => {
			const maxValue = maxArrValue(serieItem.data);
			console.log(1, maxValue)
			yData[mm].max = Math.round(maxValue * 12) / 10 || 100; // 兜底：最大值为0时设为100
			console.log(2, yData[mm].max)
		});

		// 修复：更新响应式数据（必须通过.value）
		chartOption.value = {
			...chartOption.value, // 保留原有配置
			xAxis: {
				...chartOption.value.xAxis,
				data: xData
			},
			series: serie,
			yAxis: yData
		};

	};

	// 3. 修复：计算数组最大值（过滤NaN，避免排序错误）
	const maxArrValue = (data) => {
		// 过滤非数字项，转为Number后取最大值
		const validNumbers = data
			.map(item => Number(item))
			.filter(item => !isNaN(item));

		// 兜底：无有效数字时返回0
		return validNumbers.length > 0 ?
			Math.max(...validNumbers) :
			0;
	};

	// 4. 修复：监听数据变化（直接使用初始化后的标题）
	watch(
		() => props.dataList,
		(newVal) => {
			if (newVal.length === 0) return; // 空数据不处理 
			drawChart()

		}, {
			deep: true,
			immediate: true
		} // 立即执行：初始数据加载时触发
	);

	// 5. 修复：初始化图表（正确赋值chartOption.value）
	const drawChart = async () => {
		// 生成配置并赋值给响应式变量
		chartOption.value = generateOptions();
		processSeriesData()
		if (!chart.value) return;

		// 初始化ECharts实例（去掉setTimeout，用async/await更可靠）
		const myChart = await chart.value.init(echarts);
		myChart.setOption(chartOption.value);

	};



	// 生命周期：挂载时初始化
	onMounted(() => {
		setTimeout(() => {
			drawChart();
		}, 500)

	});

	// 生命周期：卸载时销毁图表（避免内存泄漏）
	onUnmounted(() => {
		if (chart.value) {
			const myChart = chart.value.getInstance();
			myChart.dispose();
			chart.value = null;
		}
		window.removeEventListener('resize', () => {}); // 移除监听
	});
</script>

<style scoped>

</style>