import React, { useEffect, useState } from 'react';
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts';
import { PanelContainer, PanelTitle, ChartContainer } from '../styled/DashboardStyles';
import styled from 'styled-components';
import { getMockHourlyPatientData } from '../../utils/mockData';

// 图例样式
const Legend = styled.div`
  display: flex;
  justify-content: flex-start;
  margin-bottom: 10px;
  gap: 15px;
`;

const LegendItem = styled.div`
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #7e9bcc;
  
  .color-block {
    width: 10px;
    height: 10px;
    margin-right: 5px;
    border-radius: 2px;
  }
  
  &.blue .color-block {
    background: linear-gradient(to bottom, #5a8ff3, #2a54c7);
  }
  
  &.green .color-block {
    background: linear-gradient(to bottom, #60e0a0, #31b980);
  }
  
  &.light-green .color-block {
    background: linear-gradient(to bottom, #58ead3, #41b4c0);
  }
`;

const HourlyPatientChart: React.FC = () => {
  const [chartData, setChartData] = useState(getMockHourlyPatientData());
  
  useEffect(() => {
    const timer = setInterval(() => {
      setChartData(getMockHourlyPatientData());
    }, 30000);
    
    return () => clearInterval(timer);
  }, []);
  
  // 分时就诊图表配置
  const getOption = () => {
    return {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '15%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: chartData.hours,
        axisLine: {
          lineStyle: {
            color: '#1a3979'
          }
        },
        axisLabel: {
          color: '#7e9bcc',
          fontSize: 10,
          interval: 2
        }
      },
      yAxis: {
        type: 'value',
        name: '',
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          lineStyle: {
            color: '#1a3979',
            type: 'dashed'
          }
        },
        axisLabel: {
          color: '#7e9bcc',
          fontSize: 10
        }
      },
      series: [
        {
          name: '早诊就诊量',
          type: 'bar',
          barWidth: 8,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#5a8ff3' },
              { offset: 1, color: '#2a54c7' }
            ])
          },
          data: chartData.morningPatients
        },
        {
          name: '晚诊就诊量',
          type: 'bar',
          barWidth: 8,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#60e0a0' },
              { offset: 1, color: '#31b980' }
            ])
          },
          data: chartData.afternoonPatients
        },
        {
          name: '早诊就诊趋势',
          type: 'line',
          smooth: true,
          symbol: 'none',
          lineStyle: {
            color: '#00b4ff',
            width: 2
          },
          data: chartData.morningTrend
        },
        {
          name: '晚诊就诊趋势',
          type: 'line',
          smooth: true,
          symbol: 'none',
          lineStyle: {
            color: '#00ffcb',
            width: 2
          },
          data: chartData.afternoonTrend
        }
      ]
    };
  };
  
  return (
    <PanelContainer>
      <PanelTitle>分时趋势</PanelTitle>
      <ChartContainer>
        <Legend>
          <LegendItem className="blue"><div className="color-block"></div>早诊就诊量</LegendItem>
          <LegendItem className="green"><div className="color-block"></div>晚诊就诊量</LegendItem>
          <LegendItem><div className="color-block" style={{background: '#00b4ff'}}></div>早诊就诊趋势</LegendItem>
          <LegendItem><div className="color-block" style={{background: '#00ffcb'}}></div>晚诊就诊趋势</LegendItem>
        </Legend>
        <ReactECharts 
          option={getOption()} 
          style={{ height: 'calc(100% - 30px)', width: '100%' }} 
          opts={{ renderer: 'canvas' }}
        />
      </ChartContainer>
    </PanelContainer>
  );
};

export default HourlyPatientChart; 