/** @format */

import * as React from 'react';
import {List, Row, Col, Spin, Card} from 'antd';
import Modal from '../../../../components/modalForm';
import {authStatus} from '../../../../const/status';
import {MerchantRecordState} from '../../../../service/merchant';
import Button from '../../../../components/button';

interface AuthProps {
    values: MerchantRecordState;
    visible?: boolean;
    loading?: boolean;
    onCancle?: () => void;
    handleSubmit?: (values: {state: 2 | 1}) => void;
}
const Auth: React.FC<AuthProps> = props => {
    const {values, onCancle, visible = false, loading = false, handleSubmit} = props;
    const {name, contact_number, contact_name, auth_status, social_code, address, merchant_license} = values;

    const dataSource = [
        {name: '商户', value: name},
        {name: '认证状态', value: authStatus[auth_status]},
        {name: '营业执照所在地/住所', value: address},
        {name: '统一社会信用代码', value: social_code},
        {
            name: '营业执照附件',
            value: merchant_license,
            render: (
                <Card hoverable style={{width: 240}}>
                    <img style={{width: '100%'}} alt={name} src={merchant_license} />
                </Card>
            ),
        },
        {name: '联系人姓名', value: contact_name},
        {name: '联系人电话', value: contact_number},
    ];
    return (
        <Modal
            destroyOnClose
            onCancel={onCancle}
            title={`商户认证(${name})`}
            visible={visible}
            footer={
                <>
                    <Button
                        onClick={() => {
                            if (handleSubmit) {
                                handleSubmit({state: 2});
                            }
                        }}
                        type='danger'
                        ghost
                    >
                        不通过
                    </Button>
                    <Button
                        type='primary'
                        onClick={() => {
                            if (handleSubmit) {
                                handleSubmit({state: 1});
                            }
                        }}
                    >
                        通过
                    </Button>
                </>
            }
        >
            <Spin spinning={loading}>
                <List
                    itemLayout='horizontal'
                    dataSource={dataSource}
                    renderItem={(item, index) => {
                        return (
                            <>
                                <Row gutter={24} key={index} style={{paddingBottom: 15}}>
                                    <Col span={10}>{item.name}</Col>
                                    <Col span={14}>{item.render || item.value || '--'}</Col>
                                </Row>
                            </>
                        );
                    }}
                />
            </Spin>
        </Modal>
    );
};
export default Auth;
