import ReactEcharts from 'echarts-for-react';
import { useMemo } from 'react';

const LineCharts = ({ dataSource }: { dataSource: any[] }) => {
  const option = useMemo(() => {
    const dates = dataSource?.map((item) => item.times) || [];
    const values = dataSource?.map((item) => item.num) || [];
    // console.log(dates)

    const sampledDates = (() => {
      const numSamples = 5;
      const limitedDates = dates.slice(0, -1);
      const total = limitedDates.length;
      if (total <= numSamples) {
        return limitedDates.map((date) => date.substring(5));
      }
      const step = (total - 1) / (numSamples - 1);
      const ret = Array.from({ length: numSamples }, (_, i) =>
        limitedDates[Math.round(i * step)].substring(5),
      );
      // console.log(ret)
      return ret;
      // return Array.from({ length: numSamples }, (_, i) => limitedDates[Math.round(i * step)].substring(5));
    })();
    // const sampledDates = (() => {
    //     const numSamples = 5;
    //     const total = dates.length;
    //     if (total <= numSamples) {
    //       return dates.map(date => date.substring(5));
    //     }
    //     const step = (total - 1) / (numSamples - 1);
    //     return Array.from({ length: numSamples }, (_, i) => dates[Math.round(i * step)].substring(5));
    //   })();

    return {
      color: ['#3CE88F'],
      tooltip: {
        trigger: 'axis',
        borderWidth: '0',
        backgroundColor: 'rgba(73,81,92,.95)',
        textStyle: {
          color: '#fff',
        },
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999',
          },
        },
      },
      grid: {
        left: '0',
        right: '2.9%',
        bottom: '4%',
        top: '25%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            interval: 0,
            textStyle: {
              padding: [2, 0, 0, 0],
              color: '#CBEDFF',
            },
            formatter: (value: string, index: number, values: string[]) => {
              if (index === values?.length - 1) {
                return `{a|${value}}`;
              }
              return value;
            },
            rich: {
              a: {
                padding: [0, 0, 0, -20],
              },
            },
          },
          axisTick: {
            show: false,
          },
          data: sampledDates,
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: '件',
          min: 0,
          max: 'dataMax',
          interval: 50,
          axisLabel: {
            textStyle: {
              color: '#CBEDFF',
              fontSize: 16,
            },
          },
          nameTextStyle: {
            align: 'left',
            color: '#CBEDFF',
            padding: [0, 0, 20, -20],
            fontSize: 16,
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: '投诉量',
          type: 'line',
          smooth: true, // 使用平滑曲线
          showSymbol: false, // 不显示数据点
          lineStyle: {
            width: 4,
          },
          areaStyle: {
            // 添加渐变填充
            opacity: 0.3,
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#3CE88F',
                },
                {
                  offset: 1,
                  color: 'rgba(60,232,143,0)',
                },
              ],
            },
          },
          data: values,
        },
      ],
    };
  }, [dataSource]);

  //   console.log(dataSource)

  return (
    <ReactEcharts option={option} style={{ width: '100%', height: '100%' }} />
  );
};

export default LineCharts;
