import React from 'react';
import { Form, Switch, InputNumber, Select } from 'antd';
export default function render(props) {
    const { wpProduct, applications, oakFullpath, systemId } = props.data;
    const { t, update } = props.methods;
    if (wpProduct) {
        return (<Form labelCol={{ span: 8 }} wrapperCol={{ span: 12 }} layout="horizontal" style={{ minWidth: 560 }}>
                <Form.Item label={t('wpProduct:attr.type')}>
                    <Select value={wpProduct.type} options={['native', 'mp', 'jsapi', 'h5', 'app'].map(
            // @oak-ignore
            ele => ({
                label: t(`wpProduct:v.type.${ele}`),
                value: ele,
            }))} onSelect={(type) => {
                if (type === 'mp') {
                    update({ type, needReceiving: true });
                }
                else {
                    update({ type, needReceiving: false });
                }
            }}/>
                </Form.Item>
                {wpProduct.type && applications && (<Form.Item label={t('wpProduct:attr.application')}>
                        <Select value={wpProduct.applicationId} options={applications.map(ele => ({
                    label: ele.name,
                    value: ele.id,
                }))} onSelect={(value) => update({ applicationId: value })}/>
                    </Form.Item>)}
                <Form.Item label={t('wpAccount:attr.enabled')} required>
                    <Switch value={wpProduct.enabled} onChange={(enabled) => {
                update({ enabled });
            }}/>
                </Form.Item>
                <Form.Item label={t('wpAccount:attr.taxLossRatio')} help={t(`placeholder.taxLossRatio.${wpProduct.taxLossRatio ? 'notNull' : 'null'}`)}>
                    <InputNumber value={wpProduct.taxLossRatio} max={5} min={0.01} addonAfter={"%"} step={0.01} precision={2} onChange={(value) => {
                const taxLossRatio = value;
                update({ taxLossRatio });
            }}/>
                </Form.Item>
                <Form.Item label={t('wpAccount:attr.refundCompensateRatio')} help={t(`placeholder.refundCompensateRatio.${wpProduct.refundCompensateRatio ? 'notNull' : 'null'}`)}>
                    <InputNumber value={wpProduct.refundCompensateRatio} max={5} min={0.01} addonAfter={"%"} step={0.01} precision={2} onChange={(value) => {
                const refundCompensateRatio = value;
                update({ refundCompensateRatio });
            }}/>
                </Form.Item>
                <Form.Item label={t('wpAccount:attr.refundGapDays')} help={t(`placeholder.refundGapDays.${wpProduct.refundGapDays ? 'notNull' : 'null'}`)}>
                    <InputNumber value={wpProduct.refundGapDays} max={300} min={0} step={1} onChange={(value) => {
                const refundGapDays = value;
                update({ refundGapDays });
            }}/>
                </Form.Item>
                {wpProduct.type === 'mp' && <Form.Item label={t('wpAccount:attr.needReceiving')} help={t('placeholder.needReceiving')} required>
                    <Switch value={!!wpProduct.needReceiving} onChange={(needReceiving) => {
                    update({ needReceiving });
                }}/>
                </Form.Item>}
            </Form>);
    }
    return null;
}