import React, { useState } from 'react';
import { Tag, Modal, Alert, Divider, Button } from 'antd';
import Styles from './web.pc.module.less';
import ListPro from 'oak-frontend-base/es/components/listPro';
import { RenderOffline } from '../detail/web.pc';
import { generateNewId, generateNewIdAsync } from 'oak-domain/lib/utils/uuid';
export default function Render(props) {
    const { pays, offlines } = props.data;
    const { t, execute, updateItem, setMessage, clean } = props.methods;
    const [spId, setSpId] = useState('');
    if (pays) {
        const spRow = (spId && pays.find(ele => ele.id === spId));
        return (<>
                <ListPro data={pays} entity="pay" attributes={[
                {
                    path: 'price',
                    label: t('pay:attr.price'),
                    span: 1,
                },
                'iState',
                {
                    path: '$$createAt$$',
                    label: t('common::$$createAt$$'),
                    span: 2,
                },
                {
                    path: 'orderId',
                    label: t('label.source'),
                    span: 1,
                    render(row) {
                        const { orderId } = row;
                        return (<Tag bordered={false} color={orderId ? 'processing' : 'success'}>
                                        {orderId ? t('source.order') : t('source.deposit')}
                                    </Tag>);
                    }
                },
                {
                    path: 'creatorName',
                    label: t('label.cn'),
                    span: 1,
                    render: (row) => {
                        const { creatorName, creatorMobile } = row;
                        return (<div>
                                        <div>{creatorName}</div>
                                        <div>{creatorMobile}</div>
                                    </div>);
                    }
                },
                {
                    path: 'phantom3',
                    span: 1,
                    label: t('label.code'),
                },
                {
                    path: 'channel',
                    span: 1,
                    label: t('pay:attr.entity'),
                    render: (row) => {
                        const { entity } = row;
                        const colorDict = {
                            'account': 'blue',
                            'offlineAccount': 'red',
                            'wpProduct': 'green',
                        };
                        return (<div>
                                        <Tag color={colorDict[entity] || 'gray'}>{t(`payChannel::${row.entity}`)}</Tag>
                                        {entity === 'offlineAccount' && (<div className={Styles.entityDetail}>
                                                    {t(`offlineAccount:v.type.${row.offlineAccount.type}`)}
                                                </div>)}
                                        {entity === 'wpProduct' && <div className={Styles.entityDetail}>
                                                {t(`wpProduct:v.type.${row.wpProduct.type}`)}
                                            </div>}
                                    </div>);
                    }
                }
            ]} onAction={(row, action) => {
                if (action === 'close') {
                    Modal.confirm({
                        title: t('cc.title'),
                        content: t('cc.content'),
                        onOk() {
                            return execute(undefined, undefined, undefined, [
                                {
                                    entity: 'pay',
                                    operation: {
                                        id: generateNewId(),
                                        action: 'close',
                                        data: {},
                                        filter: {
                                            id: row.id,
                                        },
                                    },
                                }
                            ]);
                        },
                        okText: t('common::confirm'),
                        cancelText: t('common::action.cancel')
                    });
                }
                else if (action === 'succeedPaying') {
                    const { entity } = row;
                    if (entity !== 'offlineAccount') {
                        // 以后可能也有手动成功offline以外的pay的情况，先封掉
                        setMessage({
                            title: t('spFail.title'),
                            content: t('spFail.content'),
                            type: 'error',
                        });
                    }
                    else {
                        setSpId(row.id);
                    }
                }
            }}/>
                <Modal title={t('csp.title')} width={600} open={!!spId} footer={null} onCancel={() => {
                clean();
                setSpId('');
            }}>
                    <div className={Styles.spCon}>
                        <Alert type="warning" message={t('csp.tips')}/>
                        <Divider style={{ width: '80%', alignSelf: 'flex-end' }}/>
                        <RenderOffline pay={spRow} t={t} offlines={offlines} offline={offlines.find(ele => ele.id === spRow.entityId)} updateOfflineId={(entityId) => updateItem({
                entity: 'offlineAccount',
                entityId
            }, spId)}/>
                        <div className={Styles.btn}>
                            <Button type="primary" onClick={async () => {
                const spRow = pays.find(ele => ele.id === spId);
                await execute(undefined, undefined, undefined, [
                    {
                        entity: 'pay',
                        operation: {
                            id: await generateNewIdAsync(),
                            action: 'succeedPaying',
                            data: {
                                paid: spRow.price,
                            },
                            filter: {
                                id: spId,
                            },
                        },
                    }
                ]);
                setSpId('');
            }}>
                                {t('common::confirm')}
                            </Button>
                        </div>
                    </div>
                </Modal>
            </>);
    }
    return null;
}