import React, { useMemo, useState } from 'react';
import echarts from 'echarts/lib/echarts';
import ReactEcharts from 'echarts-for-react';
import { hdyjColor } from '../../../../utils/renutils';

const Hd24H = ({ data, st}) => {
  const option = useMemo(() => {

    const serialData = [
      [
          "2025-05-21 15:00:00",
          133.58
      ],
      [
          "2025-05-21 17:00:00",
          133.58
      ],
      [
          "2025-05-21 18:00:00",
          133.58
      ],
      [
          "2025-05-21 19:00:00",
          133.56
      ],
      [
          "2025-05-21 20:00:00",
          133.6
      ],
      [
          "2025-05-21 21:00:00",
          133.59
      ],
      [
          "2025-05-21 22:00:00",
          133.6
      ],
      [
          "2025-05-22 02:00:00",
          133.63
      ],
      [
          "2025-05-22 03:00:00",
          133.64
      ],
      [
          "2025-05-22 04:00:00",
          133.65
      ],
      [
          "2025-05-22 05:00:00",
          133.65
      ],
      [
          "2025-05-22 06:00:00",
          133.66
      ],
      [
          "2025-05-22 07:00:00",
          133.66
      ],
      [
          "2025-05-22 09:00:00",
          133.67
      ],
      [
          "2025-05-22 11:00:00",
          133.68
      ],
      [
          "2025-05-22 12:00:00",
          133.68
      ]
  ];

    

    return {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            color: '#fff'
          }
        }
      },
      grid: {
        x: 24,
        y: 24,
        x2: 38,
        y2: 32,
        borderWidth: 0
      },
      calculable: true,
      xAxis: [
        {
          type: 'time',
          splitLine: {
            show: false
          },
          axisLabel: {
            color: '#bbb',
            fontSize: 9,
            textShadowBlur: 4,
            textShadowColor: '#6ab',
            // formatter: val => val.substr('2020-10-14 '.length, 2)
          },
          axisLine: {
            lineStyle: {
              color: '#07a6ff',
              width: 0.5,
            }
          },
          axisTick: {
            show: false,
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          position: 'right',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#07a6ff',
              width: 0.25,
              type: 'dashed'
            }
          },
          axisLabel: {
            color: '#bbb',
            fontSize: 10,
            textShadowBlur: 4,
            textShadowColor: '#6ab',
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false,
          },
          min: 133,
          max: 134,
        }
      ],
      series: [
        {
          name: '供水量',
          type: 'line',
          showSymbol: false,
          label: {
            show: false,
          },
          data: serialData, 
          lineStyle: {
            normal: {
              width: 1,
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(3, 194, 236, 0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(3, 194, 236, 0)'
              }
              ], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: '#03C2EC'
            }
          },
          markPoint: {
            data: [
              { type: 'max', name: '最大值', symbol: 'circle', symbolSize: 1, symbolOffset: [0, -12] },
              { type: 'min', name: '最小值', symbol: 'circle', symbolSize: 1, symbolOffset: [0, 12] }
            ]
          },
          // markLine: {
          //   silent: true,
          //   symbol: 'none',
          //   label: {
          //     position: 'start',
          //     formatter: (p) => p?.name + ' ' + p?.value,
          //   },
          //   data: markLine
          // }
        }
      ]
    };
  }, [data, st]);

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

export default React.memo(Hd24H);