import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import { apiGet } from '../../utils/request';
import { useDefaultDate, getSelectedMonthRange } from '../../App';
import useGlobalRefresh from '../../hooks/useGlobalRefresh';

// 组件容器样式 - 确保完全填充Grid单元格
const ChartWrapper = styled.div`
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
`;

// 组件标题 - 使用与其他模块相同的样式
const PanelHeader = styled.div`
  position: relative;
  width: 95%;
  height: 1.6vw;
  min-height: 1.6vw;
  max-height: 1.6vw;
  padding-left: 5.5%;
  text-align: left;
  line-height: 1.6vw;
  font-size: 0.8vw;
  color: #E6F2FF;
  font-family: 'DingTalk JinBuTi', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  background: url('/component_header_bg.png') no-repeat;
  background-size: 100% 100%;
  flex-shrink: 0;
`;

// 表格容器 - 占据剩余空间
const TableContainer = styled.div`
  width: 100%;
  flex: 1;
  overflow: hidden;
`;

// 表格样式
const Table = styled.table`
  width: 100%;
  border-collapse: collapse;
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif !important;
`;

// 表头样式
const TableHeader = styled.thead`
  tr {
    background:#051833;
  }
  
  th {
    padding: 0.3vw 1.2vw;
    font-size: 0.7vw;
    font-weight: normal;
    color: #CCE6FF;
    text-align: right;
    font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif !important;
    
    &:first-child {
      text-align: left; /* 员工编号表头左对齐 */
      border-left: none;
    }
    
    &:last-child {
      border-right: none;
    }
  }
`;

// 表体样式
const TableBody = styled.tbody`
  tr {
    &:nth-child(odd) {
      background: #162840;
    }
    
    &:nth-child(even) {
      background: #051833;
    }
    
    &:hover {
      background: rgba(6, 30, 93, 0.6);
    }
  }
  
  td {
    padding: 0.2vw 1.2vw;
    font-size: 0.65vw;
    text-align: right;
    color: #FFFFFF;
    font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif !important;
    
    &:first-child {
      text-align: left; /* 员工编号左对齐 */
      color: #FFFFFF; /* 员工编号用白色 */
    }
    
    &:last-child {
      color: #FEE980; /* 工作总量用金色突出显示 */
      font-weight: bold;
    }
  }
`;

// 数据接口类型 - 根据新接口字段定义
interface PharmaWorkloadStatsData {
  employeeId: string;         // 员工编号
  prepareWorkload: number;    // 调配处方量
  dispenseWorkload: number;   // 发药处方量
  totalWorkload: number;      // 总工作量
}

// 获取月份的开始和结束时间，优先使用默认时间
const getMonthRange = (defaultDateTime: string) => {
  // 如果有默认时间，优先使用默认时间；否则使用当前时间
  const baseDate = defaultDateTime ? new Date(defaultDateTime) : new Date();
  const year = baseDate.getFullYear();
  const month = baseDate.getMonth(); // 0-11
  
  // 当月第一天
  const startDate = new Date(year, month, 1);
  // 当月最后一天
  const endDate = new Date(year, month + 1, 0);
  
  // 格式化为 YYYY-MM-DD
  const formatDate = (date: Date) => {
    const y = date.getFullYear();
    const m = String(date.getMonth() + 1).padStart(2, '0');
    const d = String(date.getDate()).padStart(2, '0');
    return `${y}-${m}-${d}`;
  };
  
  return {
    startTime: formatDate(startDate),
    endTime: formatDate(endDate)
  };
};

const PharmacistWorkloadChart: React.FC = () => {
  const [data, setData] = useState<PharmaWorkloadStatsData[]>([]);
  const [loading, setLoading] = useState(true);
  const { defaultDateTime, selectedMonth } = useDefaultDate();

  // 获取数据
  const fetchData = async () => {
    try {
      setLoading(true);
      
      // 使用选中月份获取时间范围，支持月份选择功能
      const { startTime, endTime } = getSelectedMonthRange(defaultDateTime, selectedMonth);
      
      const response = await apiGet('/stageStats/pharmaWorkloadStats', {
        params: {
          startTime,
          endTime
        }
      });
      
      if (response.data && response.data.data && Array.isArray(response.data.data)) {
        // 最多只取前8条数据
        const limitedData = response.data.data.slice(0, 8);
        setData(limitedData);
      } else {
        console.warn('药师工作量统计 - 接口返回格式不符合预期:', response.data);
        // 设置为空数组，不使用模拟数据
        setData([]);
      }
    } catch (error) {
      console.error('获取药师工作量统计数据失败:', error);
      // 设置为空数组，不使用模拟数据
      setData([]);
    } finally {
      setLoading(false);
    }
  };

  // 组件挂载时和依赖变化时获取数据
  useEffect(() => {
    fetchData();
  }, [defaultDateTime, selectedMonth]);

  // 使用刷新Hook，配置对应的模块代码
  useGlobalRefresh(fetchData, '42');

  return (
    <ChartWrapper>
      <PanelHeader>药师工作量统计</PanelHeader>
      <TableContainer>
        {loading ? (
          <div style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '100%',
            color: '#CCE6FF',
            fontSize: '0.8vw'
          }}>
            数据加载中...
          </div>
        ) : (
          <Table>
            <TableHeader>
              <tr>
                <th>药师工号</th>
                <th>调配处方量</th>
                <th>发药处方量</th>
                <th>总工作量</th>
              </tr>
            </TableHeader>
            <TableBody>
              {data.map((item, index) => (
                <tr key={index}>
                  <td>{item.employeeId}</td>
                  <td>{item.prepareWorkload}</td>
                  <td>{item.dispenseWorkload}</td>
                  <td>{item.totalWorkload}</td>
                </tr>
              ))}
            </TableBody>
          </Table>
        )}
      </TableContainer>
    </ChartWrapper>
  );
};

export default PharmacistWorkloadChart; 