import React, { useState, useEffect } from 'react';
import { Button, Icon, Modal, Tabs } from 'antd';
import router from 'umi/router';
import apis from '../../../services/apis';
import request from '../../../utils/request';
import Tables from './table'

const { TabPane } = Tabs;

const DataRecord = props => {

    const { id } = props.location.query

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

    useEffect(() => {
        getStatisticData({ qrCodeId: id })

    }, [])

    const getStatisticData = params => {

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

    function tabsCallback(e) {
        setTab(e)
    }

    return <>
        <div>
            <div>
                <Icon type="question-circle" theme="filled" style={{ fontSize: '25px', color: '#F00', marginLeft: '30px' }} onClick={() => setShowHelp(true)} />
                <Modal
                    title="指标说明（数据会存在一定时间延迟）"
                    centered
                    visible={showHelp}
                    footer={null}
                    onCancel={() => setShowHelp(false)}
                >
                    <p style={{ fontSize: '0.106rem', color: '#333', marginBottom: '8px' }}>新增注册用户：</p>
                    <p style={{ fontSize: '0.106rem', color: '#999', marginBottom: '8px' }}>通过当前二维码授权手机号的总人数</p>
                    <p style={{ fontSize: '0.106rem', color: '#333', marginBottom: '8px' }}>访问人数：</p>
                    <p style={{ fontSize: '0.106rem', color: '#999', marginBottom: '8px' }}>通过当前二维码访问小程序的总人数</p>
                    <p style={{ fontSize: '0.106rem', color: '#333', marginBottom: '8px' }}>访问次数：</p>
                    <p style={{ fontSize: '0.106rem', color: '#999', marginBottom: '8px' }}>通过当前二维码访问小程序的总次数</p>
                </Modal>
                <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>
            </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>
            </Tabs>
            <div style={{ marginTop: '20px' }}>
                <Tables id={id} type={tab} />
                {/* 访问人数 */}
                {/* {(tab === '1' && <Tables id={id} type="visitors"/>)} */}
                {/* 访问次数 */}
                {/* {(tab === '2' && <Tables id={id} type="visitors"/>)} */}
                {/* 新增注册用户 */}
                {/* {(tab === '3' && <Tables id={id} type="visitors"/>)} */}

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

export default DataRecord
