import React, { useState, useEffect } from 'react';
import { Input, Menu, Dropdown, Button, Icon, Modal, message, Table, Divider, Tabs, Tag, Select, Pagination } from 'antd';
import router from 'umi/router';
import apis from '../../../services/apis';
import request from '../../../utils/request';
import Visitors from './table/visitors'
import VisitNum from './table/visitNum'
import Newuser from './table/newuser'
import Shares from './table/shares'
import ShareNum from './table/shareNum'
import moment from 'moment';

const { TabPane } = Tabs;



const DataRecord = props => {

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

    const id = props.id
    const type = props.activeType


    useEffect(() => {

        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)
    }

    return <>
        <div>
            <div>
                <span>{data.activityName || '0'}</span>
                <Button style={{ float: 'right', zIndex: 1 }} onClick={() => router.go(-1)}>
                    返回
               </Button>
            </div>
            <div>

                <div style={{ display: 'flex', marginBottom: '33px', marginTop: '20px' }}>
                    <div style={{
                        textAlign: 'center', display: 'flex', justifyContent: 'center', lineHeight: '100px', background: 'linear-gradient(144deg,rgba(241,43,62,1) 0%,rgba(254,144,155,1) 100%)', height: '100px',
                        borderRadius: '12px', width: '32%', marginRight: '15px'
                    }}>
                        <span style={{ fontSize: '20px', color: '#fff' }}>访问总人数 </span>
                        <span style={{ fontSize: '46px', color: '#fff', marginLeft: '26px', fontFamily: 'fantasy' }}>{data.visitPersons || '0'}</span>
                    </div>
                    <div style={{
                        textAlign: 'center', display: 'flex', justifyContent: 'center', lineHeight: '100px', background: 'linear-gradient(144deg,rgba(255,126,74,1) 0%,rgba(255,196,168,1) 100%)', height: '100px',
                        borderRadius: '12px', width: '32%', marginRight: '15px'
                    }}>
                        <span style={{ fontSize: '20px', color: '#fff' }}>访问总次数 </span>
                        <span style={{ fontSize: '46px', color: '#fff', marginLeft: '26px', fontFamily: 'fantasy' }}>{data.visitNum || '0'}</span>
                    </div>
                    <div style={{
                        textAlign: 'center', display: 'flex', justifyContent: 'center', lineHeight: '100px', background: 'linear-gradient(137deg,rgba(107,130,230,1) 0%,rgba(152,175,251,1) 100%)', height: '100px',
                        borderRadius: '12px', width: '32%', marginRight: '15px'
                    }}>
                        <span style={{ fontSize: '20px', color: '#fff' }}>新增注册用户 </span>
                        <span style={{ fontSize: '46px', color: '#fff', marginLeft: '26px', fontFamily: 'fantasy' }}>{data.newPersons || '0'}</span>
                    </div>
                    <div style={{
                        textAlign: 'center', display: 'flex', justifyContent: 'center', lineHeight: '100px', background: 'linear-gradient(137deg,rgba(150,83,215,1) 0%,rgba(208,160,255,1) 100%)', height: '100px',
                        borderRadius: '12px', width: '32%', marginRight: '15px'
                    }}>
                        <span style={{ fontSize: '20px', color: '#fff' }}>分享总人数 </span>
                        <span style={{ fontSize: '46px', color: '#fff', marginLeft: '26px', fontFamily: 'fantasy' }}>{data.sharePersons || '0'}</span>
                    </div>
                    <div style={{
                        textAlign: 'center', display: 'flex', justifyContent: 'center', lineHeight: '100px', background: 'linear-gradient(144deg,rgba(0,175,141,1) 0%,rgba(115,231,209,1) 100%)', height: '100px',
                        borderRadius: '12px', width: '32%'
                    }}>
                        <span style={{ fontSize: '20px', color: '#fff' }}>分享总次数 </span>
                        <span style={{ fontSize: '46px', color: '#fff', marginLeft: '26px', fontFamily: 'fantasy' }}>{data.shareNum || '0'}</span>
                    </div>
                </div>
            </div>

        </div>
        <div>
            <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>
            </Tabs>
            <div style={{ marginTop: '20px' }}>
                {/* 访问人数 */}
                {(tab === '1' && < Visitors id={id} type={type} getData={() => getData({ id: id, type: type })} />)}
                {/* 访问次数 */}
                {(tab === '2' && <VisitNum id={id} type={type} getData={() => getData({ id: id, type: type })} />)}
                {/* 新增注册用户 */}
                {(tab === '3' && <Newuser id={id} type={type} getData={() => getData({ id: id, type: type })} />)}
                {/* 分享人数 */}
                {(tab === '4' && <Shares id={id} type={type} getData={() => getData({ id: id, type: type })} />)}
                {/* 分享次数 */}
                {(tab === '5' && <ShareNum id={id} type={type} getData={() => getData({ id: id, type: type })} />)}

                {/* { (tab === 'desc' && <Icon type="question-circle" theme="filled" style={{ fontSize: '25px', color: '#F00', marginLeft:'30px'}} />)} */}

            </div>
        </div>
    </>
}

export default DataRecord