import type { EChartsOption } from 'echarts';
// import type { CallbackDataParams } from 'echarts/types/src/util/types';
import { CHART_COLORS } from '../constants/colors';

export class ChartBaseConfig {
  static createBaseOption(categoryData: string[]): EChartsOption {
    return {
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'cross' },
        formatter: (params) => {
          // 确保 params 是数组
          const paramArray = Array.isArray(params) ? params : [params];
          const param = paramArray[0];
          
          if (param.seriesName === 'Values') {
            const value = param.value as number[];
            return `${param.name}<br/>
              <!-- 序号: ${value[0]}<br/> -->
              开: ${value[1]}<br/>
              收: ${value[2]}<br/>
              低: ${value[3]}<br/>
              高: ${value[4]}<br/>
              涨幅: ${value[5]}<br/>`;
          } else if (param.seriesName === 'Volumes') {
            const value = param.value as number[];
            return `${param.name}<br/>成交量: ${value[1]}`;
          }
          return '';
        }
      },
      dataZoom: [
        {
          type: 'inside',
          xAxisIndex: [0, 1],
          startValue: categoryData.length - 30,
          endValue: categoryData.length - 1,
          minValueSpan: 10,
          maxValueSpan: 120
        },
        {
          show: true,
          xAxisIndex: [0, 1],
          type: 'slider',
          top: '85%',
          startValue: categoryData.length - 30,
          endValue: categoryData.length - 1,
          minValueSpan: 10,
          maxValueSpan: 120
        }
      ],
      grid: [
        {
          left: '10%',
          right: '8%',
          height: '50%',
          backgroundColor: 'rgba(0, 0, 0, 0.1)'
        },
        {
          left: '10%',
          right: '8%',
          top: '63%',
          height: '16%',
          backgroundColor: 'rgba(0, 0, 0, 0.1)'
        }
      ],
      xAxis: this.createXAxisConfig(categoryData),
      yAxis: this.createYAxisConfig(),
      axisPointer: {
        link: [{ xAxisIndex: 'all' }],
        label: { backgroundColor: '#777' }
      },
      series: [] as any[]
    };
  }

  static getUpColor(): string {
    return CHART_COLORS.UP;
  }

  static getDownColor(): string {
    return CHART_COLORS.DOWN;
  }

  static getOperateColor(): string {
    return CHART_COLORS.OPERATE;
  }

  static getLimitUpColor(): string {
    return CHART_COLORS.LIMIT_UP;
  }

  static getLimitDownColor(): string {
    return CHART_COLORS.LIMIT_DOWN;
  }

  static getMiddleLineColor(): string {
    return CHART_COLORS.MIDDLE_LINE;
  }

  static getVolumeBarStyle() {
    return {
      itemStyle: {
        color: (params: any) => {
          return params.value[2] > 0 ? CHART_COLORS.UP : CHART_COLORS.DOWN;
        }
      }
    };
  }

  private static createXAxisConfig(categoryData: string[]) {
    return [
      {
        type: 'category' as const,
        data: categoryData,
        boundaryGap: false,
        axisLine: { onZero: false },
        splitLine: { show: false },
        min: 'dataMin',
        max: 'dataMax',
        axisPointer: { z: 100 }
      },
      {
        type: 'category' as const,
        gridIndex: 1,
        data: categoryData,
        boundaryGap: false,
        axisLine: { onZero: false },
        axisTick: { show: false },
        splitLine: { show: false },
        axisLabel: { show: false },
        min: 'dataMin',
        max: 'dataMax'
      }
    ];
  }

  private static createYAxisConfig() {
    return [
      {
        scale: true,
        splitArea: { show: true },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: 'rgba(255, 255, 255, 0.6)', // 白色虚线，透明度60%
            width: 1
          }
        }
      },
      {
        scale: true,
        gridIndex: 1,
        splitNumber: 2,
        axisLabel: { show: false },
        axisLine: { show: false },
        axisTick: { show: false },
        splitLine: { show: false }
      }
    ];
  }
} 