import React, { useState, useEffect } from 'react';
import { Button, Modal, Input, Row, Col, message } from 'antd';
import router from 'umi/router';
import moment from 'moment';
import Navigate from '@/components/Navigate';
import AuthButton from '@/components/AuthButton';
import apis from '../../../../services/apis';
import request from '../../../../utils/request';
import Styles from './styles.less';
import Recharge from './Recharge'
import Refund from './Refund'
import Pay from './Pay'
import Contact from './Contact'

function Basic(props) {

    // const [taNoticeList, setTaNoticeList] = useState([])
    const [data, setData] = useState({})
    const [visible, setvisiblea] = useState(false)
    const [confirmLoading, setConfirmLoading] = useState(false)
    const [title, setTitle] = useState()
    const [amount, setAmount] = useState()
    useEffect(() => {
        getData();
    }, [])
    // 查询列表

    const getData = params => {
        request({ ...apis.funds.get, params: { ...params } }).then(data => {
            setData(data)
        })
    }

    const handleOkRecharge = e => {
        console.log(e, '123123')
        if (e == 0) {
            message.error('充值金额不能为0')
            return
        }
        if (e) {

            request({ ...apis.funds.saveOrder, data: { amount: Math.round(e * 100) } }).then(data => {
                setAmount(data)
                showModal('pay')
            }).catch(err => {
                console.log(err)
            })

        }


    };
    // data: { amount: e }
    const handleOkRefund = e => {
        console.log(e, e * 100, '123123')

        if (e) {
            request({ ...apis.funds.saveRefundOrder, data: { amount: Math.round(e * 100) } }).then(data => {
                message.info('申请退款成功')
                setvisiblea(false)
            }).catch(err => {
                console.log(err)
            })
        }
        // setConfirmLoading(true)
        // setTimeout(() => {
        //   this.setState({
        //     visible: false,
        //     confirmLoading: false,
        //   });
        // }, 2000);
        // setvisiblea(false)
    };

    const handleOkRepay = e => {
        console.log(e, '123123')
        if (e === 'success') {
            showModal('contact')
        } else {
            // showModal()
            Modal.error({
                title: '充值失败',
                // content: 'some messages...some messages...',
            });
            setvisiblea(false)
        }
        // setConfirmLoading(true)
        // setTimeout(() => {
        //   this.setState({
        //     visible: false,
        //     confirmLoading: false,
        //   });
        // }, 2000);

    };

    const toNewContact = () => {

        router.push({
            pathname: '/funds/financialContact',
            // query: {
            //   id: rowData.raiseId,
            //   buildingId: rowData.buildingId,
            //   salesBatchId: rowData.salesBatchId,
        })

    }


    const showModal = value => {
        if (value === 'recharge') {
            setTitle('线上充值')
        }
        if (value === 'refund') {
            setTitle('申请退款')
        }
        if (value === 'pay') {
            setTitle('扫码支付')
        }
        if (value === 'contact') {
            setTitle('联系我们')
        }
        setvisiblea(true)
    };

    const handleCancel = () => {
        console.log('Clicked cancel button');
        setvisiblea(false)
    };

    return (

        <>
            对资金有疑问？ <Navigate onClick={() => toNewContact()}>请联系我们</Navigate>
            <div style={{ display: 'flex', margin: '20px 0 40px' }}>
                <div className={Styles.redHeader}>
                    <div className={Styles.redHeaderTop}><div className={Styles.redHeaderTopText}>总充值金额/元</div><div className={Styles.redHeaderTopNum}>{data.totalRechargeAmount / 100 || 0}</div></div>
                    <div className={Styles.redHeaderBottom}> 对账请在充值订单中查看充值状态为“已支付”的充值记录</div>
                </div>
                <div className={Styles.redHeader} style={{ margin: '0 40px' }}>
                    <div className={Styles.redHeaderTop}><div className={Styles.redHeaderTopText}>已消费金额/元</div><div className={Styles.redHeaderTopNum}>{data.purchaseAmount / 100 || 0}</div></div>
                    <div className={Styles.redHeaderBottom}>对账请在消费订单中查看消费状态为“成功”的消费记录</div>
                </div>
                <div className={Styles.redHeader}>
                    <div className={Styles.redHeaderTop}><div className={Styles.redHeaderTopText}>已退款额/元</div><div className={Styles.redHeaderTopNum}>{data.totalRefund / 100 || 0}</div></div>
                    <div className={Styles.redHeaderBottom}>对账请在退款订单中查看退款状态为“已退款”的退款记录</div>
                </div>

                <div className={Styles.redHeader} style={{ margin: '0 40px' }}>
                    <div className={Styles.redHeaderTop}><div className={Styles.redHeaderTopText}>退款冻结额/元</div><div className={Styles.redHeaderTopNum}>{data.refundBlockedAmount / 100 || 0}</div></div>
                    <div className={Styles.redHeaderBottom}>对账请在退款订单中查看退款状态为“已申请”的退款记录</div>
                </div>
                <div className={Styles.redHeader}>
                    <div className={Styles.redHeaderTop}><div className={Styles.redHeaderTopText}>账户余额/元</div><div className={Styles.redHeaderTopNum}>{data.availableBalance / 100 || 0}</div></div>
                    <div className={Styles.redHeaderBottom}>账户余额=总充值金额-已消费金额-已退款额-退款冻结额</div>
                </div>
            </div>
            <div style={{ textAlign: 'center', marginTop: '272px' }}>
                <AuthButton name="admin.funds.account.recharge" noRight={null}>
                    <Button className={Styles.btn} type="primary" htmlType="submit" onClick={() => showModal('recharge')}>充值</Button>
                </AuthButton>
                <AuthButton name="admin.funds.account.refund" noRight={null}>
                    <Button className={Styles.btn} style={{ marginLeft: '80px' }} onClick={() => showModal('refund')}>退款</Button>
                </AuthButton>
            </div>

            <Modal
                title={title}
                visible={visible}
                // onOk={handleOk}
                confirmLoading={confirmLoading}
                onCancel={handleCancel}
                footer={null}
                width="1000px"
                maskClosable={false}
            >
                {title === '线上充值' && <Recharge value={e => handleOkRecharge(e)}></Recharge>}
                {title === '申请退款' && <Refund balance={data.availableBalance / 100 || 0} value={e => handleOkRefund(e)}></Refund>}
                {title === '扫码支付' && <Pay amount={amount} visible={visible} value={e => handleOkRepay(e)}></Pay>}
                {title === '联系我们' && <Contact></Contact>}

            </Modal>
        </>
    )
}

export default Basic
