import React, { useState } from 'react';
import { Button, Input, Row, Col } from 'antd';
import Styles from './styles.less';
import ContactText from './contactText'

const Recharge = props => {
    const { balance } = props

    // if (e.target.value == 0) { setValue(0); return }
    // if (e.target.value <= 0) return
    // if (!(/^[0-9]{1,5}([.][0-9]{1,2})?$/.test(e.target.value))) return
    // if (e.target.value > 99999.99) { setValue(99999.99); return }
    // console.log('changed', e.target.value);
    // setValue(e.target.value)

    const [value, setValue] = useState()

    function onChange(e) {
        console.log('changed', e.target.value);
        // if (e.target.value == 0) { setValue(); return }
        if (e.target.value < 0) return
        if (e.target.value == '') { setValue(e.target.value); return }
        if (!(/^[0-9]{1,5}([.][0-9]{1,2})?$/.test(e.target.value))) return
        if (e.target.value > balance) { setValue(balance); return }
        // console.log('changed', e.target.value);
        setValue(e.target.value)

    }
    return (
        <>
            <Row>
                <Col span={3}> <span style={{ fontSize: '20px', color: '#666' }}>退款金额/元</span></Col>
                <Col span={17} offset={1}>
                    <Input type="number" min={0} step={0.01} value={value} onChange={onChange} style={{ marginBottom: '40px' }}></Input>
                    <span style={{ fontSize: '20px', color: '#979797', lineHeight: '30px' }}>账户余额：{balance}元</span>
                    <p style={{ fontSize: '18px', color: '#333', marginBottom: '8px', marginTop: '20px' }}>因微信商户平台限制，需先提交退款申请，提交后会冻结退款额对应余额资金，冻结金额无法使用，若您的平台有正在举办的活动等需要消费的地方，请预留充足的余额。如有疑问， <ContactText /></p>
                </Col>
            </Row>
            <div style={{ textAlign: 'center', marginTop: '40px' }}>
                <Button className={Styles.btn} type="primary" htmlType="submit" onClick={() => props.value(value)}>确认申请</Button>

            </div>
        </>
    )
}
export default Recharge
