import React, { useState, useEffect } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Button, Icon, message, Modal, Radio } from 'antd';
import router from 'umi/router';
import moment from 'moment';
import className from 'classnames';
import styles from './style.less';
import { fetch, apis } from '../../utils/request';
import request from '../../utils/request';
import XForm, { FieldTypes } from '../../components/XForm';
import RechargeOrder from './RechargeOrder';
import ConsumeOrder from './ConsumeOrder';
import RefundOrder from './RefundOrder';


function header(props) {

    const [tab, changeTab] = useState('basic')

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




    return (

        <>
            <div style={{ marginBottom: '16px' }}>
                <Radio.Group value={tab} buttonStyle="solid" onChange={e => changeTab(e.target.value)}>
                    <Radio.Button value="basic">基本信息</Radio.Button>
                    <Radio.Button value="recharge">充值订单</Radio.Button>
                    <Radio.Button value="consume">消费订单</Radio.Button>
                    <Radio.Button value="refund">退款订单</Radio.Button>
                </Radio.Group>
            </div>
            <div>
                {tab === 'basic' &&
                    <div>
                        <XForm buttonVisible={false} fields={fields}></XForm>
                        <div style={{ paddingLeft: '30%', marginTop: '30px' }}>
                            <Button htmlType="submit" type="primary" style={{ marginRight: '10%' }}>充值</Button>
                            <Button >返回</Button>
                        </div>
                    </div>
                }
                {tab === 'recharge' && <RechargeOrder />}
                {tab === 'consume' && <ConsumeOrder />}
                {tab === 'refund' && <RefundOrder />}
            </div>
        </>
    )
}

export default header