import React, { useState, useEffect, useMemo } from 'react';
import { Button, Input, Row, Col, message } from 'antd';
import QRCode from 'qrcode.react';
import Styles from './styles.less';
import apis from '../../../../services/apis';
import request from '../../../../utils/request';


let intervalState = true
const Recharge = props => {

    const { amount } = props
    console.log(amount, 'amount')
    const { orderInfo } = amount
    console.log(orderInfo, 'orderInfo')
    useEffect(() => {
        console.log(props.visible, 'props.visible')

        return () => clearInterval(getByInfo);
        // setTimeout(() => { getByInfo() }, 1000)
    }, [props.visible])


    const getByInfo = setInterval(() => {
        if (intervalState) {
            intervalState = false
            request({ ...apis.funds.getByInfo, params: { orderId: orderInfo.orderId } }).then(data => {
                if (data.tradingStatus === 'processing') {
                    // clearInterval(getByInfo)
                    // props.value()
                    // if (!visible) { clearInterval(getByInfo) }
                    intervalState = true
                } else if (data.tradingStatus === 'success') {
                    message.info('充值成功')
                    clearInterval(getByInfo)

                    props.value('success')
                } else {
                    message.info('充值失败')
                    clearInterval(getByInfo)
                    props.value('fail')
                }
                // tradingStatus
                // setTimeout(() => { getByInfo() }, 1000)
            }).catch(err => {
                console.log(err)
                clearInterval(getByInfo)
                message.info('充值失败')
                props.value('fail')
            })
        }
    }, 2000)


    return (
        <>
            <div style={{ fontSize: '18px', fontWeight: '400', color: '#333333' }}>
                <span onClick={props.value}>充值金额{amount.amount / 100 || 0}元</span><span style={{ marginLeft: '80px' }}>微信商户手续费率{amount.mchPayRate}</span><span style={{ marginLeft: '80px' }}>手续费{amount.serviceFee / 100 || 0}元</span>
                {/* <img src="" alt="" width:/> */}
            </div>
            <div style={{ height: '278px', borderRadius: '12px', border: '1px solid rgba(218,218,218,1', margin: '40px 0', display: 'flex' }}>
                <div className={Styles.box}>
                    <QRCode
                        value={amount.payQrCode}  //value参数为生成二维码的链接
                        size={194} //二维码的宽高尺寸
                        fgColor="#000000"  //二维码的颜色
                    />
                    {/* <img src={amount.payQrCode} alt="" /> */}
                </div>
                <div className={Styles.boxRight}>
                    <div className={Styles.child}>
                        <p style={{ lineHeight: '43px', height: '43px', marginBottom: '5px' }}><span style={{ fontSize: '32px', fontWeight: '600', color: '#EF273A' }}>￥{amount.realAmount / 100 || 0}</span><span style={{ marginLeft: '5px' }}>应付金额</span></p>
                        <p>仅支持微信支付</p>
                    </div>

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