import React, { useEffect, useState } from 'react';
import { Modal, Table, Spin } from 'antd';
import { getSupplierChangeDetail } from '../services';

interface Qualification {
  type: string;
  name: string;
  level: string;
  number: string;
  org: string;
  issueDate: string;
  validDate: string;
  file?: string;
}
interface InfoItem {
  label: string;
  value: string;
}
interface DetailData {
  baseInfo: InfoItem[];
  changeInfo: InfoItem[];
  qualifications: Qualification[];
}
interface DetailViewProps {
  visible: boolean;
  onClose: () => void;
  detailId?: string | number;
}

const DetailView: React.FC<DetailViewProps> = ({ visible, onClose, detailId }) => {
  
  const [loading, setLoading] = useState(false);
  const [detailData, setDetailData] = useState<DetailData | null>(null);

  useEffect(() => {
    if (visible && detailId) {
      setLoading(true);
      getSupplierChangeDetail(detailId)
        .then(res => {
          if (res.code === 200) {
            setDetailData(res.data);
          }
        })
        .finally(() => setLoading(false));
    }
    if (!visible) setDetailData(null);
  }, [visible, detailId]);

  const columns = [
    { title: '资质证书类型', dataIndex: 'type', width: 120 },
    { title: '资质名称', dataIndex: 'name', width: 120 },
    { title: '资质类别和等级', dataIndex: 'level', width: 120 },
    { title: '资质证书编号', dataIndex: 'number', width: 120 },
    { title: '发证机构', dataIndex: 'org', width: 120 },
    { title: '发证日期', dataIndex: 'issueDate', width: 120 },
    { title: '资质有效期至', dataIndex: 'validDate', width: 120 },
    {
      title: '附件',
      dataIndex: 'file',
      width: 120,
      render: (file: string) =>
        file ? (
          <span>
            <img src={file} alt="附件" style={{ width: 30, verticalAlign: 'middle', marginRight: 8 }} />
            <a>更多</a>
          </span>
        ) : (
          '-'
        ),
    },
  ];

  // 把info数组两两合并成一行显示
  function renderInfoTable(infoArr: InfoItem[]) {
    const rows = [];
    for (let i = 0; i < infoArr.length; i += 2) {
      const left = infoArr[i];
      const right = infoArr[i + 1] || { label: '', value: '' };
      rows.push(
        <tr key={i}>
          <td style={tdStyleTitle}>{left.label}</td>
          <td style={tdStyle}>{left.value}</td>
          <td style={tdStyleTitle}>{right.label}</td>
          <td style={tdStyle}>{right.value}</td>
        </tr>
      );
    }
    return (
      <table style={{ width: '100%', borderCollapse: 'collapse', background: '#fff', marginBottom: 8 }}>
        <tbody>{rows}</tbody>
      </table>
    );
  }

  return (
    <Modal
      title="供应商信息变更审批"
      visible={visible}
      onCancel={onClose}
      footer={null}
      width={1000}
      bodyStyle={{ padding: 24 }}
      destroyOnClose
    >
      <Spin spinning={loading}>
        {detailData && (
          <div>
            {/* 基本信息 */}
            {renderInfoTable(detailData.baseInfo)}
            {/* 变更内容 */}
            <div style={{ padding: '16px 0 0 2px', fontWeight: 700 }}>变更内容：</div>
            {renderInfoTable(detailData.changeInfo)}
            {/* 新增资质 */}
            <div style={{ padding: '0 0 6px 2px', fontWeight: 700 }}>新增资质1</div>
            <Table
              columns={columns}
              dataSource={detailData.qualifications}
              rowKey="number"
              size="small"
              pagination={false}
              bordered
              style={{ margin: '0 0 16px 0' }}
            />
          </div>
        )}
      </Spin>
    </Modal>
  );
};

const tdStyleTitle: React.CSSProperties = {
  background: '#fafafa',
  fontWeight: 700,
  width: 130,
  padding: 8,
  border: '1px solid #f0f0f0',
};
const tdStyle: React.CSSProperties = {
  background: '#fff',
  padding: 8,
  border: '1px solid #f0f0f0',
};

export default DetailView;