import * as echarts from 'echarts';

    interface ChartData {
        xData: string[]; // X轴分类数据（如['周一', '周二', '周三']）
        yData: number[]; // 单一折线数据（数值数组）
        seriesName?: string; // 系列名称（默认'数据趋势'）
        color?: string; // 折线颜色（默认主题蓝色）
    }

    export class LineChart {
        private chart: echarts.ECharts | null = null;
        private dom: HTMLElement;
        private xData: string[];
        private yData: number[];
        private seriesName: string = '数据趋势';
        private currentColor: string = '#1890ff'; // 默认颜色（ECharts主题蓝）

        constructor(containerId: string, chartData: ChartData) {
            this.dom = document.getElementById(containerId)!;
            this.xData = chartData.xData;
            this.yData = chartData.yData;
            this.seriesName = chartData.seriesName || this.seriesName;
            this.currentColor = chartData.color || this.currentColor;
            this.initChart();
        }

        private initChart(): void {
            this.chart = echarts.init(this.dom);
            this.setChartOptions();
            window.addEventListener('resize', () => this.chart?.resize());
        }

        private setChartOptions(): void {
            const option= {
                // tooltip: {
                //     trigger: 'axis',
                //     formatter: (params) => `
                //         <div style="font-size: 14px; font-weight: 500">${params[0].name}</div>
                //         <div style="display: flex; align-items: center; gap: 4px; margin: 4px 0">
                //             <span style="width: 8px; height: 8px; border-radius: 50%; background: ${this.currentColor}"></span>
                //             <span>${this.seriesName}: ${params[0].value}</span>
                //         </div>
                //     `
                // },
                // legend: {
                //     data: [this.seriesName],
                //     top: '16px',
                //     left: 'center',
                //     textStyle: { color: '#666', fontSize: 14 }
                // },
                grid: {
                    top:'5%',
                    left: '0%',
                    right: '0%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: this.xData,
                    axisTick: { alignWithLabel: true, color: '#e0e0e0' },
                    axisLine: { lineStyle: { color: '#C3CAD9', width: 1 } },
                    axisLabel:{
                        color: '#C3CAD9',
                        fontSize: 12,
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '',
                    splitLine: { lineStyle: { type: 'dashed', color: '#f0f0f0' } },
                    axisLabel:{
                        color: '#C3CAD9',
                        fontSize: 12,
                    }
                },
                series: [{
                    name: this.seriesName,
                    type: 'line',
                    data: this.yData,
                    color: this.currentColor,
                    smooth: true, // 曲线平滑
                    symbol: 'circle', // 标记样式
                    symbolSize: 8, // 标记大小
                    itemStyle: {
                        emphasis: { scale: 1.2 } // 悬停时标记放大
                    },
                    lineStyle: { width: 2 }, // 线宽
                    label: {
                        show: true,
                        position: 'top',
                        color: '#fff',
                        fontSize: 12,
                        formatter: '{c}' // 显示数值
                    }
                }]
            };

            this.chart?.setOption(option);
        }

        /**
         * 更换折线颜色
         * @param newColor 新颜色值（十六进制/RGB/HSL等合法颜色字符串）
         */
        changeColorStyle(index: number): void {

            if (!this.chart) {
                console.warn('未读取到元素！')
                return
              }
              if (index === 0) {
                this.currentColor = '#3071EC'
              } else if (index === 1) {
                this.currentColor = '#6790EA'
              } else if (index === 2) {
                this.currentColor = '#0A50FF'
              }
            this.chart.setOption({
                series: [{
                    color: this.currentColor,
                    itemStyle: { color: this.currentColor },
                    lineStyle: { color: this.currentColor }
                }]
            });
        }

        /**
         * 动态更新数据
         * @param newData 新数据对象
         */
        updateData(newData: ChartData): void {
            if (!this.chart) return;
            this.xData = newData.xData;
            this.yData = newData.yData;
            this.seriesName = newData.seriesName || this.seriesName;
            this.currentColor = newData.color || this.currentColor;
            this.setChartOptions();
        }

        dispose(): void {
            if (this.chart) {
                this.chart.dispose();
                this.chart = null;
            }
            window.removeEventListener('resize', () => this.chart?.resize());
        }
    }
    