import React from 'react';
import { Modal, Table, Tag, Typography, Button } from 'antd';

const { Link } = Typography;

const dataSource = [
  {
    key: '1',
    item: '供应商信息登记表',
    companyA_zhangsan: '合格',
    companyA_lisi: '合格',
    companyB_zhangsan: '合格',
    companyB_lisi: '合格',
  },
  {
    key: '2',
    item: '供应商反商业贿赂承诺书',
    companyA_zhangsan: '合格',
    companyA_lisi: '合格',
    companyB_zhangsan: '合格',
    companyB_lisi: '合格',
  },
  {
    key: '3',
    item: '供应商社会准则符合性自审问卷',
    companyA_zhangsan: '合格',
    companyA_lisi: '合格',
    companyB_zhangsan: '合格',
    companyB_lisi: '合格',
  },
  {
    key: '4',
    item: '是否为禁止使用供应商',
    companyA_zhangsan: '合格',
    companyA_lisi: '合格',
    companyB_zhangsan: '合格',
    companyB_lisi: '合格',
  },
  {
    key: '5',
    item: '3年内经营活动中没有重大违法记录的书面声明',
    companyA_zhangsan: '合格',
    companyA_lisi: '合格',
    companyB_zhangsan: '合格',
    companyB_lisi: '合格',
  },
  {
    key: '6',
    item: '企业存续状态审核(营业执照等)',
    companyA_zhangsan: '合格',
    companyA_lisi: '合格',
    companyB_zhangsan: '合格',
    companyB_lisi: '不合格',
    companyB_lisiRemark: '查看备注',
  },
  {
    key: '7',
    item: '行业资质、认证情况(按需)',
    companyA_zhangsan: '合格',
    companyA_lisi: '合格',
    companyB_zhangsan: '合格',
    companyB_lisi: '合格',
  },
  {
    key: '8',
    item: '现场考察、产品试用情况(按需)',
    companyA_zhangsan: '合格',
    companyA_zhangsanRemark: '查看备注',
    companyA_lisi: '合格',
    companyA_lisiRemark: '查看备注',
    companyB_zhangsan: '合格',
    companyB_zhangsanRemark: '查看备注',
    companyB_lisi: '合格',
    companyB_lisiRemark: '查看备注',
  },
];

const columns = [
  {
    title: '序号',
    dataIndex: 'key',
    width: 60,
  },
  {
    title: '评审项',
    dataIndex: 'item',
    width: 260,
  },
  {
    title: (
      <div>
        <div>中山市合创展包装材料有限公司</div>
      </div>
    ),
    children: [
      {
        title: '张三',
        dataIndex: 'companyA_zhangsan',
        width: 100,
        render: (text: string, record: any) => renderStatus(text, record.companyA_zhangsanRemark),
      },
      {
        title: '李四',
        dataIndex: 'companyA_lisi',
        width: 100,
        render: (text: string, record: any) => renderStatus(text, record.companyA_lisiRemark),
      },
    ],
  },
  {
    title: (
      <div>
        <div>广东振兴塑胶机械有限公司</div>
      </div>
    ),
    children: [
      {
        title: '张三',
        dataIndex: 'companyB_zhangsan',
        width: 100,
        render: (text: string, record: any) => renderStatus(text, record.companyB_zhangsanRemark),
      },
      {
        title: '李四',
        dataIndex: 'companyB_lisi',
        width: 100,
        render: (text: string, record: any) => renderStatus(text, record.companyB_lisiRemark),
      },
    ],
  },
];

function renderStatus(text: string, remark?: string) {
  const color = text === '合格' ? 'green' : text === '不合格' ? 'red' : undefined;
  return (
    <div>
      <Tag color={color} style={{ marginRight: 6 }}>
        {text}
      </Tag>
      {remark && (
        <Link style={{ fontSize: 12 }} onClick={() => alert('备注内容')}>
          {remark}
        </Link>
      )}
    </div>
  );
}

const ResultModal: React.FC<{
  visible: boolean;
  record?: any;
  onCancel: () => void;
}> = ({ visible, onCancel }) => {
  return (
    <Modal
      title="评审结果"
      visible={visible}
      onCancel={onCancel}
      footer={null}
      width={1000}
      bodyStyle={{ maxHeight: '60vh', overflowY: 'auto' }}
      centered
    >
      <Table
        dataSource={dataSource}
        columns={columns}
        pagination={false}
        bordered
        scroll={{ x: 900 }}
        summary={() => {
          // 汇总结果示例，模拟图片底部汇总
          return (
            <Table.Summary.Row>
              <Table.Summary.Cell index={0} colSpan={2} align="right">
                结果汇总
              </Table.Summary.Cell>
              <Table.Summary.Cell index={2} align="center" colSpan={2}>
                <Tag color="green">合格</Tag>
              </Table.Summary.Cell>
              <Table.Summary.Cell index={4} align="center" colSpan={2}>
                <Tag color="red">不合格</Tag>
              </Table.Summary.Cell>
            </Table.Summary.Row>
          );
        }}
      />
      <div style={{ textAlign: 'right' }}>
        
        <Button type="primary" >
          发起结果审批
        </Button>
        <Button type="primary" >
          结束流程
        </Button>
        <Button onClick={onCancel} style={{ marginRight: 8 }}>
          返回
        </Button>
      </div>
    </Modal>
  );
};

export default ResultModal;