import * as echarts from 'echarts';

const getSeriesOption = (name: string, color: string, data: number[]) => {
  return {
    name: name,
    type: 'line',
    smooth: true,
    yAxisIndex: 0,
    symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
    lineStyle: {
      width: 3,
      color: color, // 线条颜色
    },
    showSymbol: false,
    itemStyle: {
      // color: 'transparent', //拐点颜色
      color: color, //拐点颜色
      borderColor: color, //拐点边框颜色
      borderWidth: 0, //拐点边框大小
    },
    label: {
      show: false, //开启显示
      color: '#fff',
      position: 'top', //在上方显示
    },
    areaStyle: {
      //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
      color: new echarts.graphic.LinearGradient(
        0,
        0,
        0,
        1,
        [
          {
            offset: 0,
            color: `${color}50`,
          },
          {
            offset: 0.5,
            color: `${color}20`,
          },
          {
            offset: 0.8,
            color: `${color}00`,
          },
          {
            offset: 1,
            color: `${color}00`,
          },
        ],
        false
      ),
    },
    emphasis: {
      focus: 'series',
    },
    data: data,
  };
};

export const getOption = (
  fields: {
    name: string;
    color: string;
    data: number[];
  }[],
  labels: string[],
  pageWidth: number = 1920
) => {
  const scale = Number((pageWidth / 1920).toFixed(1));

  return {
    title: {
      text: '风险统计',
      left: '5%',
    },
    tooltip: {
      show: true,
      trigger: 'axis',
      axisPointer: {
        // type: 'shadow',
        type: 'cross',
        label: {
          backgroundColor: '#6a798580',
        },
      },
    },
    grid: {
      top: '48px',
      right: '12px',
      left: '5%',
      bottom: '24px',
      containLabel: true,
    },
    legend: {
      data: fields.map(field => ({
        name: field.name,
        textStyle: {
          color: field.color,
        },
      })),
      icon: 'circle',
      itemHeight: 12,
      itemGap: 30,
      textStyle: {
        padding: [0, 0, 0, -5],
        fontSize: 14,
        lineHeight: 28,
      },
    },
    colors: fields.map(field => field.color),
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisLabel: {
        color: '#A5B4CB',
        interval: 0,
        fontSize: 12,
        padding: [scale * 10, 0, 0, 0],
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#ffffff30',
        },
      },
      // axisTick: {
      //   show: false,
      // },
      // splitLine: {
      //   show: false,
      // },
      data: labels,
    },

    yAxis: [
      {
        type: 'value',
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(165,180,203,0.7)',
            width: 2,
            type: [4, 4],
            // offset: 2,
          },
        },
        axisLabel: {
          show: true,
          color: '#A5B4CB',
          align: 'right',
        },
      },
    ],
    series: [...fields.map(field => getSeriesOption(field.name, field.color, field.data))],
  };
};
