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 Help from './components/Help';
import RedPacket from './components/RedPacket';
import RedPacketRecord from './components/RedPacketRecord';
import CustomerData from './components/CustomerData';
import Ranking from './components/Ranking';


const H5configuration = props => {

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

    const { id, name, drainageId } = props.location.query
    // 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)
        setToRedPacketRecord()
    }
    const onDetai = (e) => {
        console.log(e)
        setTab('4')
        setToRedPacketRecord(e)
    }


    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.Button value="5">客户数据</Radio.Button>
                <Radio.Button value="6">排行榜</Radio.Button>
            </Radio.Group>

            {/* <Tabs type="card" value={tab} buttonStyle="solid" onChange={e => tabsCallback(e)}>
                <TabPane tab="基础配置" key="1" ></TabPane>
                <TabPane tab="助力配置" key="2" ></TabPane>
                <TabPane tab="红包配置" key="3" ></TabPane>
                <TabPane tab="红包记录" key="4" ></TabPane>
                <TabPane tab="客户数据" key="5" ></TabPane>
                <TabPane tab="排行榜" key="6" ></TabPane>
            </Tabs> */}
            <div style={{ marginTop: '20px' }}>
                {/* 基础配置 */}
                {(tab === '1' && <Basic id={id} name={name} />)}
                {/* 助力配置 */}
                {(tab === '2' && <Help id={id} name={name} />)}
                {/* 红包配置 */}
                {(tab === '3' && <RedPacket toDetail={onDetai} id={id} name={name} />)}
                {/* 红包记录 */}
                {(tab === '4' && <RedPacketRecord id={id} toRedPacketRecord={toRedPacketRecord} />)}
                {/* 客户数据 */}
                {(tab === '5' && <CustomerData id={id} drainageId={drainageId} />)}
                {/* 排行榜 */}
                {(tab === '6' && <Ranking id={id} />)}
            </div>
        </div>
    </>
}

export default H5configuration
