import React from 'react';
import ReactECharts from 'echarts-for-react';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  chart: {
    height: 100,
    backgroundColor: 'transparent'
  }
});

const WaterSupplyChart = ({type}) => {
  const classes = useStyles();

  // 生成近7天的日期
  const getDates = () => {
    const dates = [];
    for (let i = 6; i >= 0; i--) {
      const date = new Date();
      date.setDate(date.getDate() - i);
      dates.push(date.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' }));
    }
    return dates;
  };

  const option = {
    backgroundColor: 'transparent',
    grid: {
      left: '5%',
      right: '5%',
      top: '20%',
      bottom: '1%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: getDates(),
      axisLine: {
        lineStyle: { color: '#fff' }
      },
      axisLabel: {
        color: '#fff',
        fontSize: 12
      }
    },
    yAxis: {
      type: 'value',
      name: 'm³',
      nameTextStyle: {
        color: '#fff',
        fontSize: 12
      },
      axisLine: {
        show: true,
        lineStyle: { color: '#fff' }
      },
      axisLabel: {
        color: '#fff',
        fontSize: 12
      },
      splitLine: {
        lineStyle: { 
          color: 'rgba(255, 255, 255, 0.1)',
          type: 'dashed'
        }
      },
      min: 0,
      max: 3000,
      interval: 1000
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.7)',
      borderColor: '#4a90e2',
      textStyle: {
        color: '#fff'
      }
    },
    series: [{
      name:'供水量',
      data: type == 1 ? [1800, 1700, 1900, 1800, 1800, 2200, 2200]: [900, 1900, 1200, 2600, 1000, 2100, 2300],  // 示例数据
      type: 'bar',
      barWidth: '40%',
      itemStyle: {
        color: '#4a90e2'
      },
      label: {
        show: false,
        position: 'top',
        color: '#fff',
        formatter: '{c} m³'
      }
    }]
  };

  return (
    <ReactECharts
      option={option}
      style={{height:200}}
      className={classes.chart}
      // theme="dark"
    />
  );
};

export default WaterSupplyChart;