import React from 'react';
import { Descriptions, Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { useIntl } from 'umi';
interface qualifications {
  id: string; // 主键ID（如后续用于 rowKey）
  certificateType: string; // 资质证书类型
  name: string; // 资质名称
  code: string; // 资质证书编号
  typeLevel: string; // 资质类别和等级
  authority: string; // 发证机构
  dateTime: string; // 发证日期（如用 Date 类型可改成 Date）
  termOfValidity: string; // 资质有效期至
  accessory?: string; // 附件文件url，可能为空
}
interface BankInfo {
  interbankNumber: string;
  bank: string;
  accountName: string;
  account: string;
  currency: string;
  nation: string;
  province: string;
  city: string;
}
const SupplierRegisterInfo = ({ registerInfo }: { registerInfo: any }) => {
const intl = useIntl();
const qualificationsColumns:ColumnsType<qualifications> = [
  { title: intl.formatMessage({id: 'component.globalModal.serialNumber'}), dataIndex: 'index', key: 'index', width: 60, align: 'center', render: (_: any, __: any, index: number) => index + 1 },
  { title: intl.formatMessage({id: 'component.globalModal.certificateType'}), dataIndex: 'certificateType', key: 'certificateType' },
  { title: intl.formatMessage({id: 'component.globalModal.certificateName'}), dataIndex: 'name', key: 'name' },
  { title: intl.formatMessage({id: 'component.globalModal.certificateNumber'}), dataIndex: 'code', key: 'code' },
  { title: intl.formatMessage({id: 'component.globalModal.certificateCategoryLevel'}), dataIndex: 'typeLevel', key: 'typeLevel' },
  { title: intl.formatMessage({id: 'component.globalModal.issuingAuthority'}), dataIndex: 'authority', key: 'authority' },
  { title: intl.formatMessage({id: 'component.globalModal.issueDate'}), dataIndex: 'dateTime', key: 'dateTime' },
  { title: intl.formatMessage({id: 'component.globalModal.validUntil'}), dataIndex: 'termOfValidity', key: 'termOfValidity' },
  { title: intl.formatMessage({id: 'component.globalModal.attachment'}), dataIndex: 'accessory', key: 'accessory', render: (text: any) => text ? <a href={text} target="_blank" rel="noreferrer">查看附件</a> : '-' },
];
const bankColumns:ColumnsType<BankInfo> = [
  { title: intl.formatMessage({id: 'component.globalModal.serialNumber'}), dataIndex: 'index', key: 'index', width: 60, align: 'center', render: (_: any, __: any, index: number) => index + 1 },
  { title: intl.formatMessage({id: 'component.globalModal.bankCode'}), dataIndex: 'interbankNumber', key: 'interbankNumber' },
  { title: intl.formatMessage({id: 'component.globalModal.openingBank'}), dataIndex: 'bank', key: 'bank' },
  { title: intl.formatMessage({id: 'component.globalModal.accountName'}), dataIndex: 'accountName', key: 'accountName' },
  { title: intl.formatMessage({id: 'component.globalModal.accountNumber'}), dataIndex: 'account', key: 'account' },
  { title: intl.formatMessage({id: 'component.globalModal.currency'}), dataIndex: 'currency', key: 'currency' },
  { title: intl.formatMessage({id: 'component.globalModal.country'}), dataIndex: 'nation', key: 'nation' },
  { title: intl.formatMessage({id: 'component.globalModal.province'}), dataIndex: 'province', key: 'province' },
  { title: intl.formatMessage({id: 'component.globalModal.city'}), dataIndex: 'city', key: 'city' },
];
  if (!registerInfo) return <div>{intl.formatMessage({id: 'component.globalModal.loading'})}...</div>;

  return (
    <>
      <Descriptions
        title={intl.formatMessage({ id: 'component.globalModal.supplierRegisterInfo' })}
        bordered
        column={3}
        size="middle"
        style={{ background: '#fff', padding: '16px 0 0' }}
      >
        {registerInfo.base.supplierType === 'dvs' && (
          <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.supplierIdentityType' })}>
            {intl.formatMessage({ id: 'component.globalModal.domesticEnterprise' })}
          </Descriptions.Item>
        )}
        <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.enterpriseName' })}>
          {registerInfo.base.name}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.enterpriseEnglishName' })}>
          {registerInfo.base.nameEn}
        </Descriptions.Item>
        {registerInfo.base.supplierType !== 'dvs' && (
          <>
            <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.foreignCountryRegion' })}>
              {registerInfo.base.nation}
            </Descriptions.Item>
            <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.foreignVAT' })}>
              {registerInfo.base.vat}
            </Descriptions.Item>
            <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.foreignTaxpayerId' })}>
              {registerInfo.base.taxpayerId}
            </Descriptions.Item>
            <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.foreignCurrency' })}>
              {registerInfo.base.currency}
            </Descriptions.Item>
          </>
        )}
        <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.creditCode' })}>
          {registerInfo.base.socialCreditCode}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.businessScope' })}>
          {registerInfo.base.range}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.registerAddress' })}>
          {registerInfo.base.regAddress}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.officeAddress' })}>
          {registerInfo.base.workAddress}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.parentCompanyInfo' })}>
          {registerInfo.base.parentCompanyInvestor}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.legalPerson' })}>
          {registerInfo.base.legalPerson}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.idCardNumber' })}>
          {registerInfo.base.idCard}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.registeredCapital' })}>
          {registerInfo.base.capital}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.supplierType' })}>
          {registerInfo.base.enterpriseType}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.contactName' })}>
          {registerInfo.base.contactsName}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.contactMobile' })}>
          {registerInfo.base.contactsPhone}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.contactIdType' })}>
          {registerInfo.base.contactsType}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.contactEmail' })}>
          {registerInfo.base.contactsEmail}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.contactPhone' })}>
          {registerInfo.base.telephone}
        </Descriptions.Item>
      </Descriptions>

      <Table
        dataSource={registerInfo.qualifications}
        columns={qualificationsColumns}
        pagination={false}
        title={() => <div style={{ fontWeight: 'bold', fontSize: 16, textIndent: '-16px' }}>{intl.formatMessage({id: 'component.globalModal.qualificationInfo'})}</div>}
      />

      {registerInfo.base.supplierType === 'dvs' && (
        <Descriptions
          title={intl.formatMessage({ id: 'component.globalModal.invoiceInfo' })}
          bordered
          column={3}
          size="middle"
          style={{ background: '#fff', padding: '16px 0 0' }}
        >
          <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.taxpayerType' })}>
            {registerInfo.invoice.taxpayerType}
          </Descriptions.Item>
          <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.invoiceTitle' })}>
            {registerInfo.invoice.head}
          </Descriptions.Item>
          <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.taxpayerCode' })}>
            {registerInfo.invoice.taxpayerCode}
          </Descriptions.Item>
          <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.invoiceAddress' })}>
            {registerInfo.invoice.address}
          </Descriptions.Item>
          <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.invoicePhone' })}>
            {registerInfo.invoice.phone}
          </Descriptions.Item>
          <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.invoiceBank' })}>
            {registerInfo.invoice.bank}
          </Descriptions.Item>
          <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.invoiceAccount' })}>
            {registerInfo.invoice.account}
          </Descriptions.Item>
          <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.qualificationCertificate' })}>
            <a
              href={registerInfo.invoice.qualificationCertificate}
              target="_blank"
              rel="noreferrer"
            >
              {intl.formatMessage({ id: 'component.globalModal.viewAttachment' })}
            </a>
          </Descriptions.Item>
        </Descriptions>
      )}

      <Table
        dataSource={registerInfo.bank}
        columns={bankColumns}
        pagination={false}
        title={() => <div style={{ fontWeight: 'bold', fontSize: 16, textIndent: '-16px' }}>{intl.formatMessage({id: 'component.globalModal.bankAccount'})}</div>}
      />

      <div style={{ fontWeight: 'bold', fontSize: 16, textIndent: '-16px', padding: '16px 0 0', color: '#014f8f' }}>{intl.formatMessage({id: 'component.globalModal.ethicsQuestionnaireTitle'})}</div>

      <Descriptions
        title={intl.formatMessage({ id: 'component.globalModal.fillerInfo' })}
        bordered
        column={3}
        size="middle"
        style={{ background: '#fff', padding: '16px 16px 0' }}
      >
        <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.supplierName' })}>
          {registerInfo.survey.supplierName}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.fillerName' })}>
          {registerInfo.survey.name}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.fillerPosition' })}>
          {registerInfo.survey.position}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.fillerPhone' })}>
          {registerInfo.survey.phone}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.fillerEmail' })}>
          {registerInfo.survey.email}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'component.globalModal.fillerDate' })}>
          {registerInfo.survey.dateTime}
        </Descriptions.Item>
      </Descriptions>

      <div style={{ padding: '16px' }}>
        <Table
          dataSource={registerInfo.questionReply}
          columns={[
            { title: intl.formatMessage({id: 'component.globalModal.index'}), dataIndex: 'index', key: 'index', width: 60, align: 'center', render: (_: any, __: any, index: number) => index + 1 },
            { title: intl.formatMessage({id: 'component.globalModal.question'}), dataIndex: 'surveyQuestion', key: 'surveyQuestion' },
            { title: intl.formatMessage({id: 'component.globalModal.answer'}), dataIndex: 'replyValue', key: 'replyValue', width: 120 },
          ]}
          pagination={false}
          title={() => <div style={{ fontWeight: 'bold', fontSize: 16, textIndent: '-16px' }}>{intl.formatMessage({id: 'component.globalModal.questionnaire'})}</div>}
        />
      </div>

      <Descriptions
        title={intl.formatMessage({ id: 'component.globalModal.antiBriberyTitle' })}
        bordered
        column={1}
        size="middle"
        style={{ background: '#fff', padding: '16px 16px 0' }}
      >
        <Descriptions.Item
          label={intl.formatMessage({ id: 'component.globalModal.antiBriberyLabel' })}
          labelStyle={{ width: '200px' }}
        >
          <a href={registerInfo.attachments.fileUrl} target="_blank" rel="noreferrer">{intl.formatMessage({id: 'component.globalModal.viewAttachment'})}</a>
        </Descriptions.Item>
      </Descriptions>

      <Descriptions
        title={intl.formatMessage({ id: 'component.globalModal.otherAttachmentTitle' })}
        bordered
        column={1}
        size="middle"
        style={{ background: '#fff', padding: '16px 16px 0' }}
      >
        <Descriptions.Item
          label={intl.formatMessage({ id: 'component.globalModal.otherAttachmentLabel' })}
          labelStyle={{ width: '200px' }}
        >
          <a href={registerInfo.attachments.fileUrl} target="_blank" rel="noreferrer">{intl.formatMessage({id: 'component.globalModal.viewAttachment'})}</a>
        </Descriptions.Item>
      </Descriptions>
    </>
  );
};

export default SupplierRegisterInfo;
