import React, { useState } from 'react';
import { Input, DatePicker, Form, Tag, Modal, Alert, Divider, Button } from 'antd';
import Styles from './web.pc.module.less';
import ListPro from 'oak-frontend-base/es/components/listPro';
import { FilterPanel } from '../../../components/AbstractComponents';
import { RenderOffline } from '../detail/web.pc';
import { generateNewId } from 'oak-domain/lib/utils/uuid';
import { ToYuan } from 'oak-domain/lib/utils/money';
import dayJs from 'dayjs';
export default function Render(props) {
    const { pays, offlines, oakExecutable, oakFullpath } = 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 (<>
                <FilterPanel oakPath={oakFullpath} entity="pay" columns={[
                {
                    attr: 'iState',
                },
                {
                    attr: 'externalId',
                    op: '$startsWith'
                }
            ]}/>
                <ListPro data={pays} entity="pay" attributes={[
                {
                    path: 'price',
                    label: t('pay:attr.price'),
                    width: 100,
                },
                {
                    path: 'iState',
                    width: 80,
                    label: t('pay:attr.iState'),
                },
                {
                    path: '$$createAt$$',
                    label: t('common::$$createAt$$'),
                    width: 100,
                },
                {
                    path: 'orderId',
                    label: t('label.source'),
                    width: 70,
                    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'),
                    width: 140,
                    render: (row) => {
                        const { creatorName, creatorMobile } = row;
                        return (<div>
                                        <div>{creatorName}</div>
                                        <div>{creatorMobile}</div>
                                    </div>);
                    }
                },
                {
                    path: 'phantom3',
                    width: 100,
                    label: t('label.code'),
                },
                {
                    path: 'channel',
                    width: 100,
                    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>);
                    }
                },
                {
                    path: 'externalId',
                    width: 100,
                    label: t('pay:attr.externalId'),
                }
            ]} 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 {
                        updateItem({
                            paid: row.price,
                        }, row.id, 'succeedPaying');
                        setSpId(row.id);
                    }
                }
            }} oakPath={oakFullpath}/>
                <Modal title={t('csp.title')} width={600} destroyOnClose 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' }}/>
                        {offlines && <RenderOffline pay={spRow} t={t} offlines={offlines} mode="backend" offline={offlines.find(ele => ele.id === spRow.entityId)} updateOfflineId={(entityId) => updateItem({
                    entity: 'offlineAccount',
                    entityId
                }, spId)} updateExternalId={(externalId) => updateItem({
                    externalId,
                }, spId)}/>}
                        <Divider style={{ width: '80%', alignSelf: 'flex-end' }}/>
                        <Form labelCol={{ span: 8 }} wrapperCol={{ span: 12 }} layout="horizontal" style={{ width: '100%', marginTop: 12 }}>
                            <Form.Item label={t('pay:attr.price')}>
                                <Input value={ToYuan(spRow.price)} addonBefore={t('common::pay.symbol')} disabled={true}/>
                            </Form.Item>
                            <Form.Item label={t('pay:attr.externalId')} help={t("placeholder.externalId")}>
                                <Input maxLength={128} value={spRow.externalId || undefined} onChange={({ currentTarget }) => {
                const { value } = currentTarget;
                updateItem({
                    externalId: value,
                }, spId);
            }}/>
                            </Form.Item>
                            <Form.Item label={t('pay:attr.successAt')}>
                                <DatePicker showTime onChange={(value, dateString) => {
                updateItem({
                    successAt: value?.valueOf(),
                }, spId);
            }} maxDate={dayJs()}/>
                            </Form.Item>
                        </Form>
                        <div className={Styles.btn}>
                            <Button disabled={oakExecutable !== true} type="primary" onClick={async () => {
                const spRow = pays.find(ele => ele.id === spId);
                await execute();
                setSpId('');
            }}>
                                {t('common::confirm')}
                            </Button>
                        </div>
                    </div>
                </Modal>
            </>);
    }
    return null;
}