import React, { useEffect, useState } from 'react';
import { Table, Button, message } from 'antd';
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
import { qualificationsGetPage } from '../services';
import { useIntl } from 'umi';
import QualificationFormModal from './QualificationFormModal';

interface Qualification {
  id: string;
  certificateType: string;
  name: string;
  code: string;
  typeLevel: string;
  authority: string;
  dateTime: string;
  termOfValidity: string;
  updateTime: string;
}

interface QualificationTabProps {
  viewType?: boolean;
  record?: string;
}

const QualificationTab: React.FC<QualificationTabProps> = (props) => {
  const { viewType = false, record = '' } = props;
  const intl = useIntl();
  const [data, setData] = useState<Qualification[]>([]);
  const [loading, setLoading] = useState(false);
  const [pagination, setPagination] = useState<TablePaginationConfig>({ current: 1, pageSize: 10, total: 0 });
  //增改查
  const [formVisible, setFormVisible] = useState(false);
  const [editingRecord, setEditingRecord] = useState<Qualification | null>(null);
  const [isViewMode, setIsViewMode] = useState(false);

  const getList = async (pageNo = 1, pageSize = 10) => {
    setLoading(true);
    try {
      const { code, data } = await qualificationsGetPage({ pageNo, pageSize, supplierId: record });
      if (code === 200) {
        setData(data.records);
        setPagination({ current: pageNo, pageSize, total: data.total });
      }
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    getList();
  }, []);

  const handleAdd = () => {
    setEditingRecord(null);
    setIsViewMode(false);
    setFormVisible(true);
  };

  const handleEdit = (record: Qualification) => {
    setEditingRecord(record);
    setIsViewMode(false);
    setFormVisible(true);
  };

  const handleView = (record: Qualification) => {
    setEditingRecord(record);
    setIsViewMode(true);
    setFormVisible(true);
  };

  const handleFormSubmit = () => {
    setFormVisible(false);
    getList();
  };

  const columns: ColumnsType<Qualification> = [
    { title: 'page.workbench.certificateType', dataIndex: 'certificateType', ellipsis: true },
    { title: 'page.workbench.certificateName', dataIndex: 'name', ellipsis: true },
    { title: 'page.workbench.certificateCode', dataIndex: 'code', ellipsis: true },
    { title: 'page.workbench.typeLevel', dataIndex: 'typeLevel' },
    { title: 'page.workbench.authority', dataIndex: 'authority', ellipsis: true },
    { title: 'page.workbench.dateTime', dataIndex: 'dateTime', ellipsis: true },
    { title: 'page.workbench.termOfValidity', dataIndex: 'termOfValidity', ellipsis: true },
    { title: 'page.workbench.updateTime', dataIndex: 'updateTime', ellipsis: true },
     
    ...(viewType ? [] : [
      {
        title: 'page.workbench.attachments.action',
        dataIndex: 'option',
        width: 120,
        render: (_: any, record: Qualification) => (
          <>
            <a style={{ marginRight: 8 }} onClick={() => handleView(record)}>查看</a>
            <a onClick={() => handleEdit(record)}>修改</a>
          </>
        ),
      }
    ]),
  ];

  return (
    <div style={{ padding: '0 30px 0 0' }}>
      <div style={{ marginBottom: 16 }}>
        {!viewType && (
          <Button type="primary" onClick={handleAdd}>新增资质</Button>
        )}
      </div>
      <Table
        rowKey="id"
        className="custom-table"
        columns={columns.map(column => ({
          ...column,
          title: typeof column.title === 'string' ? intl.formatMessage({ id: column.title }) : column.title,
        }))}
        dataSource={data}
        pagination={pagination}
        loading={loading}
        scroll={{ y: 400 }}
        onChange={(pagination) => getList(pagination.current!, pagination.pageSize!)}
      />
      <QualificationFormModal
        visible={formVisible}
        onOk={handleFormSubmit}
        onCancel={() => setFormVisible(false)}
        initialValues={editingRecord || undefined}
        readOnly={isViewMode}
      />
    </div>
  );
};

export default QualificationTab;