import React from 'react';
import { Modal, Descriptions, Table, Button } from 'antd';
import { startApprove } from '../services'

const ApproveModal: React.FC<{
  visible: boolean;
  record?: any;
  onCancel: () => void;
  onConfirm?: () => void;
  dispatch: any;
}> = ({ visible, record = {}, onCancel, onConfirm , dispatch }) => {
  
  const suppliers = record?.suppliers || [
    { key: 's1', name: '中山市合创展包装材料有限公司' },
    { key: 's2', name: '广东振兴塑胶机械有限公司' },
  ];

  const categories = record?.categories || [
    '炼焦产品>燃料>船用燃油>船用高硫燃油',
    '炼焦产品>燃料>船用燃油>船用低硫燃油',
  ];

  const evaluations = record?.evaluations || [
    { item: '供应商信息登记表', results: { s1: '合格', s2: '合格' }, remarks: {} },
    { item: '供应商反商业贿赂承诺书', results: { s1: '合格', s2: '合格' }, remarks: {} },
    { item: '供应商社会准则符合性自审问卷', results: { s1: '合格', s2: '合格' }, remarks: {} },
    { item: '是否为禁止使用供应商', results: { s1: '合格', s2: '合格' }, remarks: {} },
    { item: '3年内在经营活动中没有重大违法记录的书面声明', results: { s1: '合格', s2: '合格' }, remarks: {} },
    { item: '企业存续状态审核(营业执照等)', results: { s1: '合格', s2: '合格' }, remarks: {} },
    { item: '行业资质、认证情况(选填)', results: { s1: '合格', s2: '合格' }, remarks: {} },
    { item: '现场考察、产品试用情况(按需)', results: { s1: '合格', s2: '合格' }, remarks: {} },
    { item: '结果汇总', results: { s1: '合格', s2: '合格' }, remarks: {} },
  ];

  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      width: 60,
      render: (_: any, __: any, idx: number) => idx + 1,
    },
    {
      title: '评审项',
      dataIndex: 'item',
      width: 200,
    },
    ...suppliers.flatMap((supplier: any) => [
      {
        title: (
          <a
            onClick={() => {
              dispatch({
                type: 'globalModal/show',
                payload: {
                  title: '用户信息',
                  id: supplier.key,
                },
              });
            }}
          >
            {supplier.name}
          </a>
        ),
        dataIndex: supplier.key,
        width: 120,
        render: (_: any, row: any) => row.results?.[supplier.key] || '',
      },
      {
        title: '备注说明',
        dataIndex: `${supplier.key}_remark`,
        width: 120,
        render: (_: any, row: any) => row.remarks?.[supplier.key] || '',
      },
    ]),
  ];

  return (
    <Modal
      title="发起审批"
      visible={visible}
      onCancel={onCancel}
      footer={null}
      width="90%"
    >
      <Descriptions column={1} bordered style={{ marginBottom: 16 }}>
        <Descriptions.Item label="准入供应商">
          {suppliers.map((s: any) => s.name).join('、') || '-'}
        </Descriptions.Item>
        <Descriptions.Item label="申请准入品类">
          {categories.join('、') || '-'}
        </Descriptions.Item>
      </Descriptions>

      <Table
        columns={columns}
        dataSource={evaluations}
        pagination={false}
        rowKey={(r, i:any) => i?.toString()}
        scroll={{ x: true }}
        bordered
        style={{ marginBottom: 24 }}
      />

      <div style={{ textAlign: 'right' }}>
        <Button onClick={onCancel} style={{ marginRight: 8 }}>
          取消
        </Button>
        <Button type="primary" onClick={onConfirm}>
          确认
        </Button>
      </div>
    </Modal>
  );
};

export default ApproveModal;