import React, { useState, useEffect } from 'react';
import { Button, Table, Pagination } from 'antd';
import moment from 'moment';
import apis from '../../../../services/apis';
import request from '../../../../utils/request';

const table = props => {
    const { id, type } = props
    const [data, setData] = useState([])
    const [loading, setLoading] = useState(true)


    useEffect(() => {
        // console.log(activityId, activityType)
        setData([])
        setLoading(true)
        getList({ pageNum: 1, pageSize: 10, qrCodeId: id, type })

    }, [type])

    const getList = params => {
        // console.log(params)
        request({ ...apis.qrcode.getStatisticRecord, params: { ...params } }).then(data => {
            console.log(data)

            setData(data)
            setLoading(false)
        }).catch(e => {
            console.log(e)
        })
    }

    const visitNum = {
        title: '访问时间',
        dataIndex: 'visitTime',
        key: 'visitTime',
        align: 'center',
        render: (x, row) => <><span>{`${moment(row.visitTime).format('YYYY-MM-DD HH:mm:ss')}`}</span></>,
    }

    const visitors = {
        title: '访问次数',
        dataIndex: 'accessCount',
        key: 'accessCount',
        align: 'center',
    }

    const newuser = {
        title: '注册时间',
        dataIndex: 'registerTime',
        key: 'registerTime',
        align: 'center',
        render: (x, row) => <><span>{`${moment(row.registerTime).format('YYYY-MM-DD HH:mm:ss')}`}</span></>,
    }

    const columns = [
        {
            title: '姓名',
            dataIndex: 'userName',
            key: 'userName',
            align: 'center',
            width: '20%',
        },
        {
            title: '电话',
            dataIndex: 'userTel',
            key: 'userTel',
            align: 'center',
            width: '20%',
        },
        {
            title: '性别',
            dataIndex: 'sex',
            key: 'sex',
            align: 'center',
            width: '20%',
            // eslint-disable-next-line no-nested-ternary
            render: x => <><span>{x === 1 ? '男' : x === 2 ? '女' : '未知'}</span></>,
        },
        {
            title: '归属地',
            dataIndex: 'city',
            key: 'city',
            align: 'center',
            width: '20%',
        },
        // eslint-disable-next-line no-nested-ternary
        type === '1' ? visitors : type === '2' ? visitNum : newuser,
    ]


    const changePageNum = pageNumber => {
        getList({ pageNum: pageNumber, pageSize: 10, qrCodeId: id, type })
    }

    // 下载文档
    function download(data) {
        if (!data) {
            console.log('234')
            return
        }
        const url = window.URL.createObjectURL(new Blob([data]))
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        if (type === '1') {
            link.setAttribute('download', '访问人数.xlsx')
        } else if (type === '2') {
            link.setAttribute('download', '访问次数.xlsx')
        } else {
            link.setAttribute('download', '新增注册用户.xlsx')
        }

        document.body.append(link)
        link.click()
    }

    const exportStatisticRecord = () => {

        request({ ...apis.qrcode.getStatisticRecordExport, responseType: 'blob', params: { qrCodeId: id, type } }).then(data => {
            download(data)
        }).catch()
    }

    return <>
        <div>
            <div>


                <Button type="primary" style={{ float: 'right', marginBottom: '20px', zIndex: 1 }} onClick={exportStatisticRecord} >
                    导出
            </Button>

            </div>
            <Table style={{ marginTop: '30px' }} loading={loading} dataSource={data.records} columns={columns} pagination={false} rowKey="activityList" />
            <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
                <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={changePageNum} current={data.current} />
            </div>
        </div>
    </>
}

export default table
