import { useCallback } from 'react';
import { Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { healthDataApi } from '../../../api/health/healthData';
import type { LabReport } from '../../../api/health/healthData';
import { usePaginatedData } from '../../../hooks/usePaginatedData';

interface Props {
  patientId: string;
}

const columns: ColumnsType<LabReport> = [
  {
    title: '报告日期',
    dataIndex: 'report_date',
    key: 'report_date',
    width: 120,
  },
  {
    title: '报告类型',
    dataIndex: 'report_type',
    key: 'report_type',
    width: 120,
    render: (v: string) => <Tag>{v}</Tag>,
  },
  {
    title: '医生解读',
    dataIndex: 'doctor_interpretation',
    key: 'doctor_interpretation',
    ellipsis: true,
  },
  {
    title: '创建时间',
    dataIndex: 'created_at',
    key: 'created_at',
    width: 170,
    render: (v: string) => new Date(v).toLocaleString('zh-CN'),
  },
];

/**
 * 化验报告标签页 — 分页表格
 */
export function LabReportsTab({ patientId }: Props) {
  const fetcher = useCallback(
    async (page: number, pageSize: number) => {
      return healthDataApi.listLabReports(patientId, {
        page,
        page_size: pageSize,
      });
    },
    [patientId],
  );

  const { data, total, page, loading, refresh } = usePaginatedData<LabReport>(
    fetcher,
    10,
  );

  return (
    <Table
      columns={columns}
      dataSource={data}
      rowKey="id"
      loading={loading}
      size="small"
      pagination={{
        current: page,
        total,
        pageSize: 10,
        onChange: (p) => refresh(p),
        showTotal: (t) => `共 ${t} 条`,
        style: { margin: 0 },
      }}
    />
  );
}