import React, { useMemo } from 'react';
import echarts from 'echarts/lib/echarts';
import ReactEcharts from 'echarts-for-react';


const pallete = [
  ['#177ab3', '#51c3e7'],
  ['#9976dc', '#c792ee'],
  ['#94a1eb', '#a7caf8'],
  ['#7ae5c3', '#c9f4ea'],
  ['#c7dca5', '#f5fcd5'],
  ['#7988d9', '#9dc6f1'],
  ['#d9ed8f', '#d3f89b'],
];

const palleteLen = pallete.length;

 



const AreaDrpChart = ({tab}) => {
  const x = [
    "2025-06-02 15:00:00",
    "2025-06-02 16:00:00",
    "2025-06-02 17:00:00",
    "2025-06-02 18:00:00",
    "2025-06-02 19:00:00",
    "2025-06-02 20:00:00",
    "2025-06-02 21:00:00",
    "2025-06-03 01:00:00",
    "2025-06-03 02:00:00",
    "2025-06-03 04:00:00",
    "2025-06-03 06:00:00",
    "2025-06-03 08:00:00",
    "2025-06-03 10:00:00",
    "2025-06-03 12:00:00",
    "2025-06-03 13:00:00",
    "2025-06-03 14:00:00"
  ]

  let y = []

  const y1 = [
    134.15,
    134.14,
    134.23,
    134.23,
    134.22,
    134.32,
    134.32,
    134,
    133.99,
    133.79,
    133.77,
    133.77,
    133.67,
    133.78,
    133.67,
    133.67
  ]

  const y2 = [
    134.23,
    134.23,
    134.22,
    134.32,
    134.32,
    134,
    133.99,
    133.79,
    134.15,
    134.14,
    133.77,
    133.77,
    133.67,
    133.78,
    133.67,
    133.67
  ]

  const y3 = [

    133.77,
    133.67,
    133.78,
    133.67,
    133.67,
    134.15,
    134.14,
    134.23,
    134.23,
    134.22,
    134.32,
    134.32,
    134,
    133.99,
    133.79,
    133.77,
  ]

  const y4 = [
    134.15,
    134.14,
    134.23,
    133.67,
    133.67,
    134.23,
    134.22,
    134.32,
    134.32,
    134,
    133.99,
    133.79,
    133.77,
    133.77,
    133.67,
    133.78,
  ]

  if(tab==='生态'){
    y = y1
  }else if(tab==='灌溉'){
    y = y2
  }else if(tab==='发电'){
    y = y3
  }else{
    y = y4
  }


  var option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        label: {
          show: false
        }
      },
      // valueFormatter: (value) => value + ' 万m³'
    },
    grid: {
      top: 42,
      left: 50,
      right: 20,
      bottom: 27,
    },
    legend: {
      data: ['流量'],
      top: '8',
      icon:'circle',
      left: 'center',
      itemWidth: 11,//11,
      itemHeight: 11,//11,
      textStyle: {
        color: '#B9BFC9',
        fontSize: 12,//12
      }
    },
    xAxis: [
      {
        type: 'category',
        data: x,
        splitLine: {
          show: true, //隐藏X轴轴线
          lineStyle: {
            color: 'rgba(255,255,255,0.2)',
            width: 0
          }
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#B9BFC9' //X轴文字颜色
          },
          formatter: val => val.substr('2020-10-14 '.length, 5),
          // rotate: 20, // 角度值：Number
          fontSize: 10,//10
        },
        axisLine: {
          show: true, //隐藏X轴轴线
          lineStyle: {
            color: 'rgba(255,255,255,0.2)',
            width: 0
          }
        },
        axisTick: {
          show: true,
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        position: 'left',
        name: '流量m³/s',
        nameTextStyle: {
          color: '#B9BFC9',
          fontSize: 10,//10,
          padding: [0, 0, 0, -40],//[0, 0, 0, -30]//控制y轴标题位置
        },
        nameGap: 17,

        splitLine: {
          show: true,
          lineStyle: {
            width: 1,
            color: 'rgba(255,255,255,0.2)'
          }
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#B9BFC9',
            fontSize: 11,//11
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false,
        },
        min: 133,
        max: 135,
      },
      // {
      //   type: 'value',
      //   position: 'right',
      //   name: '流量m³/s',
      //   nameTextStyle: {
      //     color: '#B9BFC9',
      //     fontSize: 10,//10,
      //     padding: [0, 0, 0, -40],//[0, 0, 0, -30]//控制y轴标题位置
      //   },
      //   nameGap: 17,

      //   splitLine: {
      //     show: true,
      //     lineStyle: {
      //       width: 1,
      //       color: 'rgba(255,255,255,0.2)'
      //     }
      //   },
      //   axisLabel: {
      //     show: true,
      //     textStyle: {
      //       color: '#B9BFC9',
      //       fontSize: 11,//11
      //     }
      //   },
      //   axisLine: {
      //     show: false
      //   },
      //   axisTick: {
      //     show: false,
      //   },
      //   min: 0,
      //   max: 30,
      // }
    ],
    series: [
      {
        name: '流量',
        type: 'line',
        barWidth: 10,
        data: y,
        showSymbol: false,
        itemStyle: {
          normal: {
            color: '#32e1b5'
          },
        },
        // label: {
        //   show: true,
        //   position: 'top',
        //   color: '#bbb',
        //   fontSize: 12,
        //   textShadowBlur: 4,
        //   textShadowColor: '#6ab',
        // },
      },
      // {
      //   yAxisIndex: 1,
      //   name: '入库流量',
      //   type: 'line',
      //   barWidth: 10,
      //   showSymbol: false,
      //   data: y1,
      //   itemStyle: {
      //     normal: {
      //       color: '#f19932'
      //     },
      //   },
      //   // label: {
      //   //   show: true,
      //   //   position: 'top',
      //   //   color: '#bbb',
      //   //   fontSize: 12,
      //   //   textShadowBlur: 4,
      //   //   textShadowColor: '#6ab',
      //   // },
      // },
      // {
      //   yAxisIndex: 1,
      //   name: '出库流量',
      //   type: 'line',
      //   barWidth: 10,
      //   showSymbol: false,
      //   data: y2,
      //   itemStyle: {
      //     normal: {
      //       color: '#e1554e'
      //     },
      //   },
      //   // label: {
      //   //   show: true,
      //   //   position: 'top',
      //   //   color: '#bbb',
      //   //   fontSize: 12,
      //   //   textShadowBlur: 4,
      //   //   textShadowColor: '#6ab',
      //   // },
      // }
    ]
  };

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

export default React.memo(AreaDrpChart);