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

const Recharge = props => {

    const [value, setValue] = useState()
    // /^1[3456789]\d{9}$/
    function onChange(e) {
        // 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)
        if (e.target.value == '') { setValue(e.target.value); 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)

    }
    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' }}>重要说明：</span>
                    <p style={{ fontSize: '18px', color: '#333', marginBottom: '8px', marginTop: '20px' }}>1.充值流程：输入充值金额-点击确定-扫码支付-支付成功。</p>
                    <p style={{ fontSize: '18px', color: '#333', marginBottom: '8px' }}>2.因微信限制，微信充值有手续费，因此充值金额中应包含手续费，费率1%。</p>
                    <p style={{ fontSize: '18px', color: '#333', marginBottom: '8px' }}>3.微信充值到账为T+7，因此，充值金额7日后才能到账，为不影响客户使用，实际活动金额由致云预先充值垫付，需要在使用预算前和运营人员确认致云余额是否充足。充值后请联系我们。</p>
                    <p style={{ fontSize: '18px', color: '#333', marginBottom: '8px' }}>4.您也可使用银行卡转账/支付宝支付/对公账户打款/现金支付等方式充值，具体方式<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
