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

const LineCharts = ({ dataSource }: { dataSource: any[] }) => {

  const echartRef = useRef<any>(null);
  useLayoutEffect(() => {
    if (echartRef.current) {
      echartRef.current.resize();
    }
  }, [echartRef.current]);
  const option = useMemo(() => {
    const names = dataSource?.map(item => item.name)
    // 生成完整的0-23小时数据
    const fullTimeData = Array.from({ length: 24 }, (_, i) => ({
      time: i,
      label: `${String(i).padStart(2, '0')}:00`
    }));
    
    // 每4小时显示一个标签
    // const visibleLabels = fullTimeData.map(item => 
    //   item.time % 4 === 0 ? item.label : ''
    // );

    const series = dataSource?.map(item => {
      return {
        name: item?.name,
        type: 'line',
        // 使用完整的24小时数据
        data: item?.data?.map((v: any) => v.num),
        // data: item?.data,
        lineStyle: {
          width: 3,
        },
        smooth: true, // 使用平滑曲线
        showSymbol: false, // 不显示数据点
      }
    })

    return {
      color: ['#36BD3B', '#FF9743', '#FF67CB', '#9259FF', '#FFE543'],
      tooltip: {
        trigger: 'axis',
        borderWidth: '0',
        backgroundColor: 'rgba(73,81,92,.95)',
        textStyle: {
          color: '#fff',
          fontSize: 16,
        },
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999',
          },
        },
        // formatter: function(params: any) {
        //   const time = params[0].dataIndex;
        //   const timeStr = `${String(time).padStart(2, '0')}:00`;
        //   let result = `${timeStr}<br/>`;
        //   params.forEach((param: any) => {
        //     result += `${param.seriesName}: ${param.value.num}<br/>`;
        //   });
        //   return result;
        // }
      },
      grid: {
        left: '1%',
        right: '1%',
        bottom: '2%',
        top: '30%',
        containLabel: true,
      },
      legend: {
        data: names,
        top: 10,
        itemGap: 50,
        textStyle: {
          fontSize: '16px',
          color: '#E4EDFF',
        },
        type: 'scroll',
        pageIconColor: '#E4EDFF',           // 翻页按钮颜色
        pageIconInactiveColor: '#546AA2',   // 禁用按钮颜色
        pageIconSize: 14,                   // 按钮大小
        pageTextStyle: {                    // 页码文字样式
          color: '#E4EDFF'
        },
        icon: 'circle',
      },
      xAxis: [{
        type: 'category',
        boundaryGap: true,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false, //隐藏X轴刻度
        },
        axisPointer: {
          type: 'shadow',
        },
        // 使用所有时间点，但只显示4小时间隔的标签
        data: fullTimeData.map(item => item.label),
        axisLabel: {
          show: true,
          interval: (index: number) => index % 4 === 0 || index === 23,
          textStyle: {
            padding: [2, 0, 0, 0],
            color: '#CBEDFF',
            fontSize: 14,
          },
        },
      }],
      yAxis: [{
        type: 'value',
        // name: '件',
        min: 0,
        max: 'dataMax',
        axisLabel: {
          show: false,
          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: series
    }
  }, [dataSource])

  return (
    <ReactEcharts
      option={option} // option：图表配置项
      style={{ width: '100%', height: '100%', margin: '0 auto' }}
      ref={echartRef}
      // style={{ width: '880px', height: '353px', margin: '0 auto' }}
    />
  )
}

export default LineCharts
