import React from 'react';
import { Form, Switch, InputNumber, Input, Select } from 'antd';
export default function render(props) {
    const { offlineAccount } = props.data;
    const { t, update } = props.methods;
    if (offlineAccount) {
        return (<Form labelCol={{ span: 8 }} wrapperCol={{ span: 12 }} layout="horizontal" style={{ minWidth: 860, maxHeight: '55vh', overflowY: 'auto' }}>
                <Form.Item label={t('offlineAccount:attr.type')} required>
                    <Select value={offlineAccount.type} options={['bank', 'alipay', 'wechat', 'shouqianba', 'others'].map(ele => ({
                label: t(`offlineAccount:v.type.${ele}`),
                value: ele,
            }))} onSelect={(value) => update({ type: value })}/>
                </Form.Item>
                {['bank', 'others'].includes(offlineAccount.type) && <Form.Item label={t(`offlineAccount::label.channel.${offlineAccount.type}`)} required>
                    <Input value={offlineAccount.channel || ''} onChange={({ currentTarget }) => {
                    const { value } = currentTarget;
                    update({
                        channel: value,
                    });
                }} placeholder={t(`placeholder.channel.${offlineAccount.type}`)}/>
                </Form.Item>}
                {!!offlineAccount.type && <Form.Item label={t(`offlineAccount::label.name.${offlineAccount.type}`)} required={['bank'].includes(offlineAccount.type)}>
                    <Input value={offlineAccount.name || ''} onChange={({ currentTarget }) => {
                    const { value } = currentTarget;
                    update({
                        name: value,
                    });
                }} placeholder={t(`placeholder.name.${offlineAccount.type}`)}/>
                </Form.Item>}
                {!!offlineAccount.type && <Form.Item label={t(`offlineAccount::label.qrCode.${offlineAccount.type}`)} required={offlineAccount.type === 'bank'}>
                    {offlineAccount.type === 'bank' && <Input value={offlineAccount.qrCode || ''} onChange={({ currentTarget }) => {
                        const { value } = currentTarget;
                        update({
                            qrCode: value,
                        });
                    }} placeholder={t(`placeholder.qrCode.${offlineAccount.type}`)}/>}
                    {offlineAccount.type !== 'bank' && <Input.TextArea rows={8} value={offlineAccount.qrCode || ''} onChange={({ currentTarget }) => {
                        const { value } = currentTarget;
                        update({
                            qrCode: value,
                        });
                    }} placeholder={t(`placeholder.qrCode.${offlineAccount.type}`)}/>}
                </Form.Item>}
                <Form.Item label={t('offlineAccount:attr.taxLossRatio')} help={t('placeholder.taxLossRatio')} required>
                    <InputNumber value={offlineAccount.taxLossRatio} max={5} min={0} addonAfter={"%"} step={0} precision={2} onChange={(value) => {
                const taxLossRatio = value;
                update({ taxLossRatio });
            }}/>
                </Form.Item>
                <Form.Item label={t('offlineAccount:attr.refundGapDays')} help={t('placeholder.refundGapDays')} required>
                    <InputNumber value={offlineAccount.refundGapDays} max={365} min={0} addonAfter={"天"} step={1} onChange={(value) => {
                const refundGapDays = value;
                update({ refundGapDays });
            }}/>
                </Form.Item>
                <Form.Item label={t('offlineAccount:attr.refundCompensateRatio')} help={t('placeholder.refundCompensateRatio')} required>
                    <InputNumber value={offlineAccount.refundCompensateRatio} max={100} min={0} addonAfter={"%"} step={1} onChange={(value) => {
                const refundCompensateRatio = value;
                update({ refundCompensateRatio });
            }}/>
                </Form.Item>
                {!!offlineAccount.type && <Form.Item label={t('offlineAccount:attr.allowDeposit')} required help={t('help.allowDeposit')}>
                    <Switch value={offlineAccount.allowDeposit} onChange={(allowDeposit) => {
                    update({ allowDeposit });
                }}/>
                </Form.Item>}
                {!!offlineAccount.type && <Form.Item label={t('offlineAccount:attr.allowPay')} required help={t('help.allowPay')}>
                    <Switch value={offlineAccount.allowPay} onChange={(allowPay) => {
                    update({ allowPay });
                }}/>
                </Form.Item>}
                <Form.Item label={t('offlineAccount:attr.allowWithdrawTransfer')} help={t('placeholder.allowWithdrawTransfer')} required>
                    <Switch value={offlineAccount.allowWithdrawTransfer} onChange={(allowWithdrawTransfer) => {
                update({ allowWithdrawTransfer });
            }}/>
                </Form.Item>                
                <Form.Item label={t('offlineAccount:attr.withdrawTransferLossRatio')} help={t('placeholder.withdrawTransferLossRatio')} required>
                    <InputNumber value={offlineAccount.withdrawTransferLossRatio} max={5} min={0} addonAfter={"%"} step={0.01} precision={2} onChange={(value) => {
                const withdrawTransferLossRatio = value;
                update({ withdrawTransferLossRatio });
            }}/>
                </Form.Item>
                <Form.Item label={t('offlineAccount:attr.enabled')} required>
                    <Switch value={offlineAccount.enabled} onChange={(enabled) => {
                update({ enabled });
            }}/>
                </Form.Item>
            </Form>);
    }
}