import * as echarts from 'echarts';
import { MUTICHARTCOLORS } from "@/common/constant.js";

/**
 * @param {{ title: unknown[], data: Array<{ name: string, value: unknown[], color?: string }> }} data
 */
const getMultiLineChart = (data) => {
  // 提取标题和系列数据
  const title = data.title
  const series = data.data

  const allNames = series.map((item) => item.name)

  const parseHexToRgb = (hex) => {
    const h = String(hex || '').replace('#', '').trim()
    if (h.length !== 6) return { r: 0, g: 0, b: 0 }
    return {
      r: parseInt(h.slice(0, 2), 16),
      g: parseInt(h.slice(2, 4), 16),
      b: parseInt(h.slice(4, 6), 16),
    }
  }

  // 动态生成 series 配置
  const echartsSeries = series.map((item, index) => {
    const baseColor = item.color || MUTICHARTCOLORS[index % MUTICHARTCOLORS.length] || '#055FC2'
    const { r, g, b } = parseHexToRgb(baseColor)

    return ({
      name: item.name,
      type: 'line',
      smooth: true,
      lineStyle: {
        color: baseColor
      },
      itemStyle: {
        color: baseColor
      },
      // 新增/优化：面积填充渐变效果
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,        // 顶部
            color: `rgba(${r}, ${g}, ${b}, 0.1)`
          },
          {
            offset: 1,        // 底部
            color: `rgba(${r}, ${g}, ${b}, 0)`
          }
        ])
      },
       
      symbolSize: 8,  
      emphasis: {
        focus: 'series'
      },
      data: item.value
    });
  });

  return {
    tooltip: {
      trigger: 'item',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    /* 顶部预留足够空间：多行图例 + Y 轴标题「数量」在纵轴顶端，避免与图例重合 */
    grid: {
      top: 68,
      right: '3%',
      bottom: '5%',
      left: '2%',
      containLabel: true
    },
    legend: {
      show: true,
      type: 'plain',
      orient: 'horizontal',
      left: 'center',
      top: 8,
      width: '90%',
      height: 24,
      icon: 'circle',
      itemWidth: 12,
      itemHeight: 12,
      data: allNames,
      textStyle: {
        fontFamily: 'Source Han Sans CN',
        fontWeight: 400,
        fontSize: 14,
        lineHeight: 24,
        letterSpacing: 0,
        align: 'left'
      }
    },
    // 不使用全局 color，改为每条 series 自己定色（与 AreaTag 一致）
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: title,
        axisLabel: {
          // 同时设置 color 与 textStyle，避免 ECharts/主题在 axisLine/axisTick 展示时覆盖
          color: 'rgba(132, 136, 142, 1)',
          textStyle: {
            color: 'rgba(132, 136, 142, 1)',
            fontSize: 14,
            fontFamily: 'Source Han Sans CN',
            fontWeight: 400
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(231, 241, 255, 1)'  // 你要的红色
          }
        },
       axisTick: {
				show: true,
				// 让刻度和 label 对齐，显示短直线
				alignWithLabel: true,
				length: 6,
				length2: 0,
				lineStyle: {
					color: "rgba(231, 241, 255, 1)",
					type: "solid"
				}
			},
        
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '数量',
        /* 纵轴：end = 坐标轴最大值一端，即竖轴上方 */
        nameLocation: 'end',
        /* 在默认基础上再向左约 20px：nameGap 为轴标题与轴线间距（左侧 Y 轴顶端时增大则标题更靠左） */
        nameGap: 20,
        nameRotate: 0,
        nameTextStyle: {
          color: 'rgba(170, 173, 177, 1)',
          fontFamily: 'Source Han Sans CN',
          fontWeight: 400,
          fontSize: 14,
          lineHeight: 22,
          letterSpacing: 0,
          align: 'right',
          verticalAlign: 'bottom'
        },
        splitLine: {
          show: true, // 显示网格线
          lineStyle: {
            color: 'rgba(231, 241, 255, 1)',
            type: 'dashed',
            width: 1 
          }
        }
      }
    ],
    series: echartsSeries
  };
};

export default getMultiLineChart;