import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal, DatePicker } from 'antd';
import router from 'umi/router';
import apis from '../../../services/apis';
import request from '../../../utils/request';
import AuthButton from '../../../components/AuthButton';


const data = [
    {
        nickName: '2342',
        phone: '2342',
        gender: '2342',
        province: '2342',
    },
]

const dataRecord = props => {
      const [data, setData] = useState({})
      const { targetId, targetType, channelId, targetName, buildingId, visitPersons, startDate, endDate } = props.location.query

    useEffect(() => {
        getList({ pageNum: 1, pageSize: 10 })

    }, [])

    const getList = params => {
        console.log(params)
        request({ ...apis.channelList.personNumList, params: { ...params, targetId: targetId,targetType: targetType,channelId: channelId,buildingId: buildingId,startDate: startDate, endDate: endDate} }).then(data => {
          setData(data)
        }).catch(e => {
          console.log(e)
        })
    }

    const columns = [
        {
            title: '姓名',
            dataIndex: 'nickName',
            key: 'nickName',
            align: 'center',
        },
        {
            title: '电话',
            dataIndex: 'phone',
            key: 'phone',
            align: 'center',
        },
        {
            title: '性别',
            dataIndex: 'gender',
            key: 'gender',
            align: 'center',
        },
        {
            title: '归属地',
            dataIndex: 'province',
            key: 'province',
            align: 'center',
        },
        {
            title: '访问次数',
            dataIndex: 'visitNum',
            key: 'visitNum',
            align: 'center',
        },

    ]



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


/**
     * 导出
     */
    const exportExcel = () => {
        // const fieldsValue = getFieldsValue()
        // console.log('fieldsValue', fieldsValue)
        request({ ...apis.channelList.personNumListExport, params: { targetId: targetId,targetType: targetType,channelId: channelId,buildingId: buildingId,startDate: startDate, endDate: endDate} })
          .then(data => {
            if (!data) {
              return
            }
            const url = window.URL.createObjectURL(new Blob([data]))
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', '访问人数.xlsx')
            document.body.append(link)
            link.click()
          }).catch(() => {
    
          })
      }

    return <>
        <div>
            <div>
                <span>内容{targetName}</span>
                <Button style={{ float: 'right', zIndex: 1 }} onClick={() => router.go(-1)}>
                    返回
               </Button>
            </div>
            <div style={{ marginTop: '20px'  }}>
                <span>访问人数:{visitPersons}</span>
                <Button type="primary" style={{ float: 'right', marginBottom: '20px', zIndex: 1 }} onClick={exportExcel}>导出</Button>
            </div>
            <Table style={{ marginTop: '30px' }} 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 dataRecord