import React, { useState } from 'react';
import { Input, Form, Tag, Modal, Divider } from 'antd';
import Styles from './web.pc.module.less';
import ListPro from 'oak-frontend-base/es/components/listPro';
import { FilterPanel } from '../../../components/AbstractComponents';
import { ToYuan, ThousandCont } from 'oak-domain/lib/utils/money';
import assert from 'assert';
export default function Render(props) {
    const { refunds, oakFullpath, oakExecutable, amIRoot } = props.data;
    const { t, updateItem, execute, clean, setMessage } = props.methods;
    const [upsertId, setUpsertId] = useState('');
    const [updateAction, setUpdateAction] = useState('');
    if (refunds) {
        const upsertRow = upsertId && refunds.find(ele => ele.id === upsertId);
        return (<div>
                <FilterPanel oakPath={oakFullpath} entity="refund" columns={[
                {
                    attr: 'iState',
                },
                {
                    attr: 'externalId',
                }
            ]}/>
                <ListPro entity="refund" data={refunds} attributes={[
                {
                    path: 'price',
                    label: t('refund:attr.price'),
                    width: 100,
                    render: (row) => {
                        return `${t('common::pay.symbol')} ${ThousandCont(ToYuan(row.price), 2)}`;
                    }
                },
                {
                    path: 'loss',
                    label: t('refund:attr.loss'),
                    width: 100,
                    render: (row) => {
                        return `${t('common::pay.symbol')} ${ThousandCont(ToYuan(row.loss), 2)}`;
                    }
                },
                {
                    path: 'iState',
                    width: 80,
                    label: t('refund:attr.iState'),
                },
                {
                    path: '$$createAt$$',
                    label: t('common::$$createAt$$'),
                    width: 120,
                },
                {
                    path: 'creatorName',
                    label: t('label.cn'),
                    width: 140,
                    render: (row) => {
                        const { creatorName, creatorMobile } = row;
                        return (<div>
                                        <div>{creatorName}</div>
                                        <div>{creatorMobile}</div>
                                    </div>);
                    }
                },
                {
                    path: 'channel',
                    width: 100,
                    label: t('pay:attr.entity'),
                    render: (row) => {
                        const { entity, offlineAccount, wpProduct } = row.pay;
                        const colorDict = {
                            'account': 'blue',
                            'offlineAccount': 'red',
                            'wpProduct': 'green',
                        };
                        return (<div>
                                        <Tag color={colorDict[entity] || 'gray'}>{t(`payChannel::${entity}`)}</Tag>
                                        <div className={Styles.entityDetail}>{row.payChannel}</div>
                                    </div>);
                    }
                },
                {
                    path: 'isWithdraw',
                    label: t('label.isWithdraw'),
                    type: 'boolean',
                    width: 90,
                    render: (row) => {
                        const { isWithdraw } = row;
                        return isWithdraw ? t('common::true') : t('common::false');
                    }
                },
                {
                    path: 'externalId',
                    label: t('refund:attr.externalId'),
                    width: 120,
                },
                {
                    path: 'reason',
                    label: t('refund:attr.reason'),
                    width: 200,
                }
            ]} onAction={(row, action) => {
                const { entity } = row.pay;
                assert(entity !== 'account');
                if (entity !== 'offlineAccount' && !amIRoot) {
                    setMessage({
                        type: 'error',
                        title: t('cantOperateOnline'),
                        content: t('chargePlz'),
                    });
                }
                else {
                    if (action === 'succeed') {
                        updateItem({}, row.id, 'succeed');
                    }
                    else if (action === 'fail') {
                        updateItem({}, row.id, 'fail');
                    }
                    updateItem({}, row.id);
                    setUpsertId(row.id);
                    setUpdateAction(action);
                }
            }} oakPath={oakFullpath}/>
                {upsertRow && <Modal open={!!upsertId} onCancel={() => {
                    clean();
                    setUpsertId('');
                    setUpdateAction('');
                }} onOk={async () => {
                    await execute();
                    clean();
                    setUpsertId('');
                    setUpdateAction('');
                }} destroyOnClose closeIcon={null} okText={t('common::confirm')} cancelText={t('common::action.cancel')} okButtonProps={{
                    disabled: oakExecutable !== true,
                }}>
                    <div className={Styles.title}>
                        {t('pay:name') + t('info')}
                    </div>
                    <Form labelCol={{ span: 8 }} wrapperCol={{ span: 12 }} layout="horizontal" style={{ width: '100%', marginTop: 12 }}>
                        <Form.Item label={t('pay:attr.entity')}>
                            <Input value={upsertRow.payChannel} disabled/>
                        </Form.Item>
                        {upsertRow.pay.offlineAccount?.channel && (<Form.Item label={t(`offlineAccount::label.channel.${upsertRow.pay.offlineAccount?.type}`)}>
                                    <Input value={upsertRow.pay.offlineAccount.channel} disabled/>
                                </Form.Item>)}
                        {upsertRow.pay.offlineAccount?.name && (<Form.Item label={t(`offlineAccount::label.name.${upsertRow.pay.offlineAccount?.type}`)}>
                                    <Input value={upsertRow.pay.offlineAccount.name} disabled/>
                                </Form.Item>)}
                        <Form.Item label={t('label.payPaid')}>
                            <Input addonBefore={t('common::pay.symbol')} value={ThousandCont(ToYuan(upsertRow.pay.paid), 2)} disabled/>
                        </Form.Item>
                        <Form.Item label={t('pay:attr.externalId')}>
                            <Input value={upsertRow.pay.externalId} disabled/>
                        </Form.Item>
                    </Form>
                    <Divider />
                    <div className={Styles.title}>
                        {t('refund:name') + t('info')}
                    </div>
                    <Form labelCol={{ span: 8 }} wrapperCol={{ span: 12 }} layout="horizontal" style={{ width: '100%', marginTop: 12 }}>
                        <Form.Item label={t('label.refundActualPrice')}>
                            <Input addonBefore={t('common::pay.symbol')} value={ThousandCont(ToYuan(upsertRow.price - upsertRow.loss), 2)} disabled/>
                        </Form.Item>
                        {updateAction === 'succeed' && (<Form.Item label={t('refund:attr.externalId')}>
                                    <Input value={upsertRow.externalId} onChange={({ currentTarget }) => {
                        const { value } = currentTarget;
                        updateItem({
                            externalId: value,
                        }, upsertId);
                    }}/>
                                </Form.Item>)}
                        {updateAction === 'fail' && (<Form.Item label={t('refund:attr.reason')}>
                                    <Input value={upsertRow.reason} onChange={({ currentTarget }) => {
                        const { value } = currentTarget;
                        updateItem({
                            reason: value,
                        }, upsertId);
                    }}/>
                                </Form.Item>)}
                    </Form>
                </Modal>}
            </div>);
    }
    return null;
}