import React, { useMemo } from 'react';
import ReactEcharts from 'echarts-for-react';
import styles from './index.less';

interface SmoothLineChartProps {
  data: { time: string; value: number }[];
  style?: React.CSSProperties;
  unitText?: string;
  lineColor?: string;
  lineColorStop1?: string;
  lineColorStop2?: string;
  timeTextColor?: string;
  showUnitText?: boolean;
}

const SmoothLineChart: React.FC<SmoothLineChartProps> = ({
  data,
  style,
  unitText = '单位：件',
  lineColor = 'rgb(255, 188, 39)',
  lineColorStop1 = 'rgba(255, 188, 39, 0)',
  lineColorStop2 = 'rgba(255, 188, 39, 0.36)',
  // lineColor = 'linear-gradient(180.00deg, rgb(255, 188, 39),rgba(255, 188, 39, 0) 100%)',
  
  // background: linear-gradient(180.00deg, rgb(255, 188, 39),rgba(255, 188, 39, 0) 100%);
  // opacity:0.36;
  
  timeTextColor = 'rgb(203, 237, 255)',
  showUnitText = true,
}) => {
  const option = useMemo(() => {
    return {
      grid: {
        left: '1%',
        right: '1%',
        top: '15%',
        bottom: '15%',
        containLabel: true
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: data.map(item => item.time),
        // axisLine: {
        //   lineStyle: {
        //     color: 'rgba(255, 255, 255, 0.3)'
        //   }
        // },
        axisLine: {
          show: false,
        },
        axisLabel: {
          color: timeTextColor,
          fontFamily: '思源黑体',
          fontSize: 16,
          fontWeight: 400,
          lineHeight: 23,
          interval: (index: number) => {
            // 只在第一个和最后一个显示
            return index === 0 || index === data.length - 1;
          },
          // padding: [0, 130], // 增加标签的内边距
          // align: 'center' // 确保标签居中显示
          // margin: 20, // 使用margin替代padding，增加标签与图表边缘的距离
          // align: 'center', // 确保标签居中显示
          formatter: (value: string) => {
            // 如果标签过长，可以适当截断
            // 特殊化处理标签，使得其可以显示完整
            let fixedDayStr = '                ';
            let fixedMonthStr = '             ';
            let fixedYearStr = '         ';
            if (value === data[0].time) {
              return value.length === 8 ? fixedDayStr + value : value.endsWith('日') ? fixedMonthStr + value : fixedYearStr + value;
            }else{
              if (value === data[data.length - 1].time && value === '23:00:00') {
                return '23:59:59' + fixedDayStr;
              }
              return value.length === 8 ? value + fixedDayStr : value.endsWith('日') ? value + fixedMonthStr : value + fixedYearStr;
            }
            // return value.length > 8 ? value.substring(0, 8) + '...' : value;
          }
        },
        splitLine: {
          show: false
        }
      },
      yAxis: {
        type: 'value',
        splitLine: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          show: false
        }
      },
      series: [
        {
          name: '数量',
          type: 'line',
          smooth: true,
          symbol: 'none',
          sampling: 'average',
          itemStyle: {
            color: lineColor
          },
          lineStyle: {
            width: 3,
            color: lineColor
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: lineColorStop1 // 线条颜色 + 透明度
                  // color: lineColor + 'BB' // 线条颜色 + 透明度
                },
                {
                  offset: 1,
                  color: lineColorStop2  // 完全透明
                  // color: lineColor + '00' // 完全透明
                }
              ],
              global: false
            }
          },
          data: data.map(item => item.value)
        }
      ]
    };
  }, [data, lineColor, timeTextColor]);

  return (
    <div className={styles.container} >
      {showUnitText && <div className={styles.unitText}>{unitText}</div>}
      <ReactEcharts
        option={option}
        style={style}
        // style={{ height: '150px', width: '100%' }}
        opts={{ renderer: 'canvas' }}
      />
    </div>
  );
};

export default SmoothLineChart; 