import React from 'react';
import { Form, Switch, InputNumber, Input, Radio, Divider } from 'antd';
import Styles from './web.pc.module.less';
import AliPayUpsert from '../../aliPay/upsert';
export default function render(props) {
    const { apAccount, aliPay, oakFullpath, systemId } = props.data;
    const { t, update } = props.methods;
    if (apAccount) {
        // @oak-ignore
        return (<Form labelCol={{ span: 6 }} wrapperCol={{ span: 16 }} layout="horizontal" style={{ minWidth: 860 }}>
                {(!aliPay || aliPay.$$createAt$$ === 1) && <AliPayUpsert oakPath={`${oakFullpath}.aliPay`} systemId={systemId} key="apCreate"/>}
                {(apAccount.aliPayId && apAccount?.$$createAt$$ !== 1) && <AliPayUpsert oakPath={`${oakFullpath}.aliPay`} systemId={systemId} key="apUpdate" oakId={apAccount.aliPayId}/>}
                <Form.Item label="说明">
                    <div className={Styles.tips}>
                        {t('aliPayIsShared')}
                    </div>
                </Form.Item>
                <Divider />
                <Form.Item label={t('apAccount:attr.appId')} required>
                    <Input maxLength={32} value={apAccount.appId} onChange={({ currentTarget }) => {
                const appId = currentTarget.value;
                update({ appId });
            }}/>
                </Form.Item>
                <Form.Item label={t('apAccount:attr.mchId')}>
                    <Input maxLength={32} value={apAccount.mchId} onChange={({ currentTarget }) => {
                const mchId = currentTarget.value;
                update({ mchId });
            }}/>
                </Form.Item>
                <Form.Item label={t('apAccount:attr.privateKeyPath')} required>
                    <Input value={apAccount.privateKeyPath || ''} placeholder={t('placeholder.privateKeyPath')} onChange={({ currentTarget }) => {
                const privateKeyPath = currentTarget.value;
                update({ privateKeyPath });
            }}/>
                </Form.Item>
                <Form.Item label={t('apAccount:attr.keyType')} tooltip={t('keyTypeTip')}>
                      <Radio.Group value={apAccount.keyType} options={[
                { value: 'PKCS1', label: t('apAccount:v.keyType.PKCS1') },
                { value: 'PKCS8', label: t('apAccount:v.keyType.PKCS8') },
            ]} onChange={(e) => {
                const keyType = e.target.value;
                update({ keyType });
            }}/>
                </Form.Item>
                <Form.Item label={t('apAccount:attr.mode')} tooltip={t('modeTip')}>
                      <Radio.Group value={apAccount.mode} options={[
                { value: 'publicKey', label: t('apAccount:v.mode.publicKey') },
                { value: 'certificate', label: t('apAccount:v.mode.certificate') },
            ]} onChange={(e) => {
                const mode = e.target.value;
                update({ mode });
            }}/>
                </Form.Item>

                {apAccount.mode === 'publicKey' && (<>
                         <Form.Item label={t('apAccount:attr.publicKeyPath')} required>
                             <Input value={apAccount.publicKeyPath || ''} placeholder={t('placeholder.publicKeyPath')} onChange={({ currentTarget }) => {
                    const publicKeyPath = currentTarget.value;
                    update({ publicKeyPath });
                }}/>
                         </Form.Item>
                        </>)}
                {apAccount.mode === 'certificate' && (<>
                         <Form.Item label={t('apAccount:attr.alipayRootCertPath')} required>
                             <Input value={apAccount.alipayRootCertPath || ''} placeholder={t('placeholder.alipayRootCertPath')} onChange={({ currentTarget }) => {
                    const alipayRootCertPath = currentTarget.value;
                    update({ alipayRootCertPath });
                }}/>
                         </Form.Item>
                        <Form.Item label={t('apAccount:attr.alipayPublicCertPath')} required>
                             <Input value={apAccount.alipayPublicCertPath || ''} placeholder={t('placeholder.alipayPublicCertPath')} onChange={({ currentTarget }) => {
                    const alipayPublicCertPath = currentTarget.value;
                    update({ alipayPublicCertPath });
                }}/>
                         </Form.Item>
                          <Form.Item label={t('apAccount:attr.appCertPath')} required>
                             <Input value={apAccount.appCertPath || ''} placeholder={t('placeholder.appCertPath')} onChange={({ currentTarget }) => {
                    const appCertPath = currentTarget.value;
                    update({ appCertPath });
                }}/>
                         </Form.Item>
                        </>)}
                <Form.Item label={t('apAccount:attr.gateway')} tooltip={t('gatewayTip')}>
                       <Input value={apAccount.gateway || ''} placeholder={t('placeholder.gateway')} onChange={({ currentTarget }) => {
                const gateway = currentTarget.value;
                update({ gateway });
            }}/>
                </Form.Item>

                <Form.Item label={t('apAccount:attr.setting')} tooltip={t('settingTip')}>
                      <Radio.Group value={apAccount.setting} options={[
                { value: 'userId', label: t('apAccount:v.setting.userId') },
                { value: 'openId', label: t('apAccount:v.setting.openId') },
            ]} onChange={(e) => {
                const setting = e.target.value;
                update({ setting });
            }}/>
                </Form.Item>
            
            
                <Form.Item label={t('apAccount:attr.needEncrypt')} tooltip={t('needEncryptTip')}>
                    <Switch value={apAccount.needEncrypt} onChange={(enabled) => {
                update({ needEncrypt: enabled });
            }}/>
                </Form.Item>
                {apAccount.needEncrypt && (<Form.Item label={t('apAccount:attr.encryptKey')} required>
                            <Input value={apAccount.encryptKey || ''} placeholder={t('placeholder.encryptKey')} onChange={({ currentTarget }) => {
                    const encryptKey = currentTarget.value;
                    update({ encryptKey });
                }}/>
                        </Form.Item>)}

                <Form.Item label={t('apAccount:attr.taxLossRatio')} help={t('placeholder.taxLossRatio')}>
                    <InputNumber value={apAccount.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('apAccount:attr.refundCompensateRatio')} help={t('placeholder.refundCompensateRatio')}>
                    <InputNumber value={apAccount.refundCompensateRatio} max={100} min={1} addonAfter={"%"} step={1} onChange={(value) => {
                const refundCompensateRatio = value;
                update({ refundCompensateRatio });
            }}/>
                </Form.Item>
                <Form.Item label={t('apAccount:attr.refundGapDays')} help={t('placeholder.refundGapDays')}>
                    <InputNumber value={apAccount.refundGapDays} max={365} min={7} addonAfter={"天"} step={1} onChange={(value) => {
                const refundGapDays = value;
                update({ refundGapDays });
            }}/>
                </Form.Item>
                <Form.Item label={t('apAccount:attr.enabled')} required>
                    <Switch value={apAccount.enabled} onChange={(enabled) => {
                update({ enabled });
            }}/>
                </Form.Item>
            </Form>);
    }
    return null;
}