import React from 'react';
import { Button, Alert, InputNumber, Result } from 'antd';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import Styles from './web.pc.module.less';
import classNames from 'classnames';
import WithDrawAccountPicker from '../../withdrawAccount/list';
import WithdrawDisplay from '../display';
export default function render(props) {
    const { account, value, refundAmount, manualAmount, avail, availYuan, valueYuan, manualAmountYuan, refundAmountYuan, showMethodHelp, showLossHelp, executale, withdrawCreate, withdrawable, withdrawLossText, chooseWa, waFilter, userId, onGoToHistory, onGoToWaManage } = props.data;
    const { t, setValue, switchHelp, createWithdrawData, restartAll, createWithdraw, goBack, pickWithdrawChannel } = props.methods;
    if (!withdrawable) {
        return (<Result status="500" title="500" subTitle={t('notSetYet')} extra={<Button type="primary" onClick={() => goBack()}>
                        {t('common::back')}
                    </Button>}/>);
    }
    if (chooseWa && waFilter) {
        return (<WithDrawAccountPicker oakPath="$$opb-withdraw-create-wapicker" oakFilters={[waFilter]} onPick={(id) => pickWithdrawChannel(id)} onCancel={() => restartAll()} entity="user" entityId={userId}/>);
    }
    if (withdrawCreate) {
        return (<div className={Styles.container}>
                <WithdrawDisplay withdraw={withdrawCreate} create={true}/>
                <div style={{ flex: 1 }}/>
                <div className={Styles.btns}>
                    <Button className={Styles.btn} size="large" onClick={restartAll}>
                        {t('common::action.cancel')}
                    </Button>
                    <Button className={Styles.btn} size="large" type="primary" onClick={createWithdraw}>
                        {t('common::action.commit')}
                    </Button>
                </div>
            </div>);
    }
    if (account) {
        return (<div className={Styles.main}>
                <div className={Styles.label}>
                    {t('label')}
                </div>
                <InputNumber autoFocus addonBefore={t('common::pay.symbol')} className={Styles.input} size="large" value={valueYuan || null} onChange={(value) => setValue(value)} placeholder={t('placeholder')}/>
                <div className={Styles.tips}>
                    <div className={Styles.tipLine}>
                        <span>{t('tips.1-1')}</span>
                        {avail > 0 ? <span className={classNames(Styles.value, Styles.clickable)} onClick={() => setValue(availYuan)}>
                            <span className={Styles.value}>{availYuan}</span>
                        </span> : <span className={Styles.value}>{availYuan}</span>}
                        <span>{t('tips.1-2')}</span>
                    </div>
                    {refundAmount > 0 && <div className={Styles.tipLine}>
                        <span>{t('tips.2-1')}</span>
                        {refundAmountYuan}
                        <span>{t('tips.2-2')}</span>
                    </div>}
                    <div className={Styles.tipLine}>
                        <span>{t('tips.3-1')}</span>
                        <span className={Styles.value}>
                            {manualAmountYuan}
                        </span>
                        <span>{t('tips.3-2')}</span>
                    </div>
                </div>
                <div className={Styles.helps}>
                    <Button size="small" className={Styles.label2} type="link" icon={showMethodHelp ? <UpOutlined /> : <DownOutlined />} onClick={() => switchHelp('method')}>
                        {t('helps.label.method')}
                    </Button>
                    {showMethodHelp && <Alert className={Styles.content2} type="info" message={t('helps.content.method')}/>}
                    <Button size="small" className={Styles.label2} type="link" icon={showLossHelp ? <UpOutlined /> : <DownOutlined />} onClick={() => switchHelp('loss')}>
                        {t('helps.label.loss')}
                    </Button>
                    {showLossHelp && <Alert className={Styles.content2} type="info" message={withdrawLossText}/>}
                </div>
                <div className={Styles.gotoHistory} onClick={onGoToHistory}>
                    {t('gotoHistory')}
                </div>
                <div className={Styles.gotoHistory} onClick={onGoToWaManage}>
                    {t('gotoWaManage')}
                </div>
                <div style={{ flex: 1 }}/>
                <Button className={Styles.btn} size="large" type="primary" disabled={!executale} onClick={() => createWithdrawData()}>
                    {t('common::confirm')}
                </Button>
            </div>);
    }
}