import React, { useState, useEffect } from 'react';
import { Radio } from 'antd';
import router from 'umi/router';
import moment from 'moment';
import apis from '../../../services/apis';
import request from '../../../utils/request';
import Basic from './components/Basic';
import RechargeOrder from './components/RechargeOrder'
import ConsumerOrder from './components/ConsumerOrder'
import RefundOrder from './components/RefundOrder'

const H5configuration = props => {

    const [tab, setTab] = useState('1')
    const [data, setData] = useState({})

    const id = props.location.query.id
    // const type = props.activeType


    useEffect(() => {
        console.log(props)
        // getData({ id: id, type: type })

    }, [])

    const getData = (params) => {

        // request({ ...apis.activityDataStatis.getStatisticData, params: { ...params, } }).then((data) => {
        //     console.log(data)
        //     setData(data || {})
        // })
    }

    function tabsCallback(e) {

        setTab(e.target.value)
    }
    const onDetai = (e) => {
        console.log(e)
        setTab('4')
    }


    return <>

        <div>
            <Radio.Group value={tab} buttonStyle="solid" onChange={e => tabsCallback(e)}>
                <Radio.Button value="1">基本信息</Radio.Button>
                <Radio.Button value="2">充值订单</Radio.Button>
                <Radio.Button value="3">消费订单</Radio.Button>
                <Radio.Button value="4">退款订单</Radio.Button>
            </Radio.Group>
            <div style={{ marginTop: '20px' }}>
                {/* 基本信息 */}
                {(tab === '1' && <Basic />)}
                {/* 充值订单 */}
                {(tab === '2' && <RechargeOrder />)}
                {/* 消费订单 */}
                {(tab === '3' && <ConsumerOrder />)}
                {/* 退款订单 */}
                {(tab === '4' && <RefundOrder />)}
            </div>
        </div>
    </>
}

export default H5configuration
