import * as echarts from 'echarts';

    interface ChartData {
        xData: string[]; // X轴分类数据（如['一月', '二月', '三月']）
        yData: number[]; // 单一数值数组（对应X轴每个分类的值）
        seriesName?: string; // 系列名称（默认'数据系列'）
        color?: string; // 柱状图颜色（默认主题蓝色）
    }

    export class BarChart {
        private chart: echarts.ECharts | null = null;
        private dom: HTMLElement;
        private xData: string[];
        private yData: number[];
        private seriesName: string = '数据系列';
        private currentColor: string = '#1890ff'; // 默认颜色

        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: 2px; 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: {
                    left: '0%',
                    right: '0%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: this.xData,
                    axisTick: { alignWithLabel: true, length: 8, color: '#e0e0e0' },
                    axisLine: { lineStyle: { color: '#C3CAD9', width: 1 } },
                    textStyle: { color: '#C3CAD9', fontSize: 12 }
                },
                yAxis: {
                    type: 'value',
                    name: '',
                    // nameTextStyle: { color: 'red', fontSize: 14, margin: 20 },
                    splitLine: { lineStyle: { type: 'dashed', color: '#f0f0f0' } },
                    // textStyle: { color: '#666', fontSize: 14 }
                    axisLabel:{
                        color: '#C3CAD9',
                        fontSize: 12,
                    }
                },
                series: [{
                    name: this.seriesName,
                    type: 'bar',
                    data: this.yData,
                    barWidth: '25%', // 柱体宽度
                    barRadius: 4, // 柱体圆角
                    itemStyle: {
                        color: this.currentColor,
                        emphasis: {
                            shadowBlur: 8,
                            shadowColor: 'rgba(0, 0, 0, 0.2)'
                        }
                    },
                    label: {
                        show: true,
                        position: 'top',
                        color: '#fff',
                        fontSize: 12,
                        formatter: '{c}' // 显示数值
                    }
                }]
            };

            this.chart?.setOption(option);
        }

        /**
         * 更换柱状图颜色
         * @param index 新颜色值（十六进制/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: [
                    {
                        itemStyle: { 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());
        }
    }
    