import React, { useState, useEffect } from 'react';
import { Button, Icon, message } from 'antd';
import router from 'umi/router';
import { fetch, apis } from '../../utils/request';
import request from '../../utils/request';
import XForm, { FieldTypes } from '../../components/XForm';
import Recharge from './components/Recharge'
import { regFenToYuan } from '@/utils/money';

function header(props) {
    const orgId = props.orgId || ''
    const [newsData, setNewsData] = useState({})

    useEffect(() => {
        if (orgId) {
            getDetail(orgId);
        }
    }, [])

    // 查询详情
    const getDetail = (orgId) => {
        request({
            ...apis.fund.accountDetail,
            urlData: { id: orgId }
        }).then((data) => {
            console.log(data)
            setNewsData(data)
        })
    }

    const fields = [
        {
            label: '小程序名',
            name: 'orgName',
            type: FieldTypes.Message,
            value: newsData.miniappName || '',
        },
        {
            label: '公司/组织名称',
            name: 'company',
            type: FieldTypes.Message,
            value: newsData.orgName || '',
        },
        {
            label: '代理商',
            name: 'agent',
            type: FieldTypes.Message,
            value: newsData.channelProxyName || '',
        },
        {
            label: '总充值金额',
            name: 'recharge',
            type: FieldTypes.Message,
            value: regFenToYuan(newsData.totalRechargeAmount) || '0',
            help: '对账请在充值订单中查看充值状态为“已支付”的充值记录',
        },
        {
            label: '已消费金额',
            name: 'consume',
            type: FieldTypes.Message,
            value: regFenToYuan(newsData.purchaseAmount) || '0',
            help: '对账请在充值订单中查看充值状态为“成功”的充值记录',
        },
        {
            label: '已退款金额',
            name: 'refund',
            type: FieldTypes.Message,
            value: regFenToYuan(newsData.totalRefund) || '0',
            help: '对账请在充值订单中查看充值状态为“已退款”的退款记录',
        },
        {
            label: '退款冻结金额',
            name: 'consume',
            type: FieldTypes.Message,
            value: regFenToYuan(newsData.refundBlockedAmonut) || '0',
            help: '对账请在充值订单中查看充值状态为“已申请”的退款记录',
        },
        {
            label: '账户余额',
            name: 'consume',
            type: FieldTypes.Message,
            value: regFenToYuan(newsData.realBalance) || '0',
            help: '对账户余额=总充值金额-已消费金额-已退款额-退款冻结额',
        },
    ]


    return (

        <>
            <div>
                <XForm buttonVisible={false} fields={fields}></XForm>
                <div style={{ paddingLeft: '30%', marginTop: '30px' }}>
                    <Recharge orgId={newsData.orgId || ''} onClick={() => getDetail(newsData.orgId)} accountId={newsData.accountId || ''} />
                    <Button onClick={() => router.go(-1)}>返回</Button>
                </div>
            </div>
        </>
    )
}

export default header