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 { getMockDailyPatientData } from '../../utils/mockData';

const PatientChart: React.FC = () => {
  const [chartData, setChartData] = useState(getMockDailyPatientData());
  
  useEffect(() => {
    const timer = setInterval(() => {
      setChartData(getMockDailyPatientData());
    }, 30000);
    
    return () => clearInterval(timer);
  }, []);
  
  const getOption = () => {
    return {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['预约挂号人数', '实际就诊人数'],
        textStyle: {
          color: '#7e9bcc'
        },
        right: 10,
        top: 0
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '15%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: chartData.days,
        axisLine: {
          lineStyle: {
            color: '#1a3979'
          }
        },
        axisLabel: {
          color: '#7e9bcc'
        }
      },
      yAxis: {
        type: 'value',
        name: '',
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          lineStyle: {
            color: '#1a3979',
            type: 'dashed'
          }
        },
        axisLabel: {
          color: '#7e9bcc'
        }
      },
      series: [
        {
          name: '预约挂号人数',
          type: 'bar',
          barWidth: 15,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#5a8ff3' },
              { offset: 1, color: '#2a54c7' }
            ])
          },
          data: chartData.registered
        },
        {
          name: '实际就诊人数',
          type: 'bar',
          barWidth: 15,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#ff8c37' },
              { offset: 1, color: '#eb5230' }
            ])
          },
          data: chartData.actual
        },
        {
          name: '趋势',
          type: 'line',
          smooth: true,
          symbol: 'none',
          lineStyle: {
            color: '#ffffff',
            width: 2
          },
          data: chartData.registered.map(v => v * 1.1)
        }
      ]
    };
  };
  
  return (
    <PanelContainer>
      <PanelTitle>就诊情况</PanelTitle>
      <ChartContainer>
        <ReactECharts 
          option={getOption()} 
          style={{ height: '100%', width: '100%' }} 
          opts={{ renderer: 'canvas' }}
        />
      </ChartContainer>
    </PanelContainer>
  );
};

export default PatientChart; 