import { Modal, Row, Table, Tag, Col } from 'antd';
import { ICreateUserResult } from '.';

const UserModal = (props: {data?: ICreateUserResult,  isModalOpen:boolean, onClose: () => void }) => {
const { data, isModalOpen, onClose } = props;

const columns = [
    {
      title: '用户名',
      dataIndex: 'userName',
      key: 'userName',
    },
    {
      title: '手机号码',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '用户角色',
      dataIndex: 'role',
      key: 'role',
    },
    {
      title: '状态',
      dataIndex: 'state',
      key: 'state',
      render: (_, record: any) => {
        let color = record?.state === '失败' ? 'volcano' : 'green';
        return <Tag color={color}> {record?.state} </Tag>;
      }
    },
    {
      title: '原因',
      dataIndex: 'failureReason',
      key: 'failureReason',
    },
  ];

  return (
    <>
      {
        data && <Row>
        <Modal title="导入结果" width={'50vw'} open={isModalOpen} onCancel={onClose} onOk={onClose}>
            <Row>
                <Col span={24}>
                共导入用户&nbsp;<Tag style={{ margin:'0 4px' }}>{data.successNum + data.failNum}</Tag>个。 成功<Tag style={{ margin:'0 4px' }} color='green'>{data.successNum}</Tag>个&nbsp;，失败<Tag style={{ margin:'0 4px' }} color='volcano'>{data.failNum}</Tag>个。
                </Col>
            </Row>
            <br></br>
            <Table columns={columns} dataSource={data.results} pagination={false} />
        </Modal>
        </Row>
      }
    </>
  );
};

export default UserModal;