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


interface InfoItem {
  fieldAnnotation?: string;
  newValue?: string;
  oldValue?: string;
  title?: string;
  changeDesc?: string;
  supplierName?: string;
  approveStatusText?: string;
  coscoSupplierChangeHistoryList?: [];
}
interface DetailData {
  fieldAnnotation?: string;
  newValue?: string;
  oldValue?: string;
  title?: string;
  changeDesc?: string;
  supplierName?: string;
  approveStatusText?: string;
  coscoSupplierChangeHistoryList: InfoItem[];
}
interface DetailViewProps {
  visible: boolean;
  onClose: () => void;
  detailId?: string;
}

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);
      supplierChangeApplyById(detailId)
        .then(res => {
          if (res.code === 200) {
            setDetailData(res.data);
          }
        })
        .finally(() => setLoading(false));
    }
    if (!visible) setDetailData(null);
  }, [visible, detailId]);

  

  // 把info数组两两合并成一行显示
  function renderInfoTable(infoArr: InfoItem[]) {
    const rows = [];
    for (let i = 0; i < infoArr.length; i++) {
      rows.push(
        <>
          <Descriptions.Item label={`变更前-${infoArr[i].fieldAnnotation}` }>{infoArr[i].oldValue}</Descriptions.Item>
          <Descriptions.Item label={`变更后-${infoArr[i].fieldAnnotation}` }>{infoArr[i].newValue}</Descriptions.Item>
        </>
      );
    }
    return (
       <Descriptions bordered column={2}>
          {rows}
       </Descriptions>
    );
  }

  return (
    <Modal
      title="供应商信息变更"
      visible={visible}
      onCancel={onClose}
      footer={null}
      width={1000}
      bodyStyle={{ padding: 24 }}
      destroyOnClose
    >
      <Spin spinning={loading}>
        {detailData && (
          <div>
            {/* 基本信息 */}
            <Descriptions bordered column={1}>
                <Descriptions.Item label="变更标题" labelStyle={{width: '140px'}}>{detailData?.title}</Descriptions.Item>
                <Descriptions.Item label="变更说明">{detailData?.changeDesc}</Descriptions.Item>
                {/* {detailData?.coscoSupplierChangeHistoryList  && (
                 <Descriptions.Item label="附件">{detailData?.changeDesc}</Descriptions.Item>
                  ) } */}
            </Descriptions>
            {/* 变更内容 */}
            <div style={{ padding: '16px 0 10px 2px', color: '#333', fontSize: '14px' }}>变更内容：</div>
            {renderInfoTable(detailData.coscoSupplierChangeHistoryList)}
          </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;