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

const DoctorChart: React.FC = () => {
  const [chartData, setChartData] = useState(getMockDoctorData());
  
  useEffect(() => {
    const timer = setInterval(() => {
      setChartData(getMockDoctorData());
    }, 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: '#58ead3' },
              { offset: 1, color: '#41b4c0' }
            ])
          },
          data: chartData.planned
        },
        {
          name: '实际出诊人次',
          type: 'bar',
          barWidth: 15,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#60e0a0' },
              { offset: 1, color: '#31b980' }
            ])
          },
          data: chartData.actual
        },
        {
          name: '趋势',
          type: 'line',
          smooth: true,
          symbol: 'none',
          lineStyle: {
            color: '#ffffff',
            width: 2
          },
          data: chartData.planned.map(v => v * 1.05)
        }
      ]
    };
  };
  
  return (
    <PanelContainer>
      <PanelTitle>医师状态一览</PanelTitle>
      <ChartContainer>
        <ReactECharts 
          option={getOption()} 
          style={{ height: '100%', width: '100%' }} 
          opts={{ renderer: 'canvas' }}
        />
      </ChartContainer>
    </PanelContainer>
  );
};

export default DoctorChart; 