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

const { RangePicker } = DatePicker

const formateValue = v => {
    const { date, ...values } = v

    console.log(date)
    return {
        ...values,
        startTime: date && date[0] ? `${date[0].format('YYYY-MM-DDT00:00:00')}Z` : undefined,
        endTime: date && date[1] ? `${date[1].format('YYYY-MM-DDT23:59:59')}Z` : undefined,
    }
}

function CustomerData(props) {

    const { id, drainageId } = props
    // const [taNoticeList, setTaNoticeList] = useState([])
    const [data, setData] = useState({})

    useEffect(() => {
        getList({ pageNum: 1, pageSize: 10 });
    }, [])
    // 查询列表

    const getList = params => {
        // const { LocalDate, ...values } = params
        // if (LocalDate != null && LocalDate.length > 0) {
        //     const [refundStartTime, refundEndTime] = LocalDate
        //     values.refundStartTime = `${moment(refundStartTime).format('YYYY-MM-DDT00:00:00')}Z`;
        //     values.refundEndTime = `${moment(refundEndTime).format('YYYY-MM-DDT23:59:59')}Z`;
        // } else {
        //     values.refundStartTime = null
        //     values.refundEndTime = null
        // }
        console.log(params, 'params')
        request({ ...apis.redPacket.getRecordByConditionList, params: { ...params, activityId: id, drainageId } }).then(data => {
            setData(data)
        })
    }

    const changePageNum = pageNumber => {
        props.form.validateFields((err, values) => {
            if (!err) {
                getList({ pageNum: pageNumber, pageSize: 10, ...formateValue(values) })
            }
        });
    }

    function handleSubmit(e) {
        e.preventDefault();
        props.form.validateFields((err, values) => {
            if (!err) {
                // eslint-disable-next-line no-console
                console.log('提交数据: ', values)
                getList({
                    pageNum: 1,
                    pageSize: 10,
                    ...formateValue(values),
                })
            }
        });
    }

    function handleReset() {
        props.form.resetFields();

        getList({ pageNum: 1, pageSize: 10 })
    }

    const columns = [
        {
            title: '头像',
            dataIndex: 'avatarurl',
            key: 'avatarurl',
            align: 'center',
            render: (x, row) => <img src={row.avatarurl} alt="" width="64px"></img >,
        },
        {
            title: '昵称',
            dataIndex: 'nickname',
            key: 'nickname',
            align: 'center',
        },
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
            align: 'center',
        },
        {
            title: '手机号',
            dataIndex: 'phone',
            key: 'phone',
            align: 'center',
        },
        {
            title: '访问时间',
            dataIndex: 'visitTime',
            key: 'visitTime',
            align: 'center',
            render: (x, row) => <><span>{`${moment(row.visitTime).format('YYYY-MM-DD HH:mm:ss')}`}</span></>,
        },
        {
            title: '分享人昵称',
            dataIndex: 'sharePersonNickname',
            key: 'sharePersonNickname',
            align: 'center',
            render: (x, row) => <><span>{row.sharePersonNickname || row.sharePersonName}</span></>,
        },
        {
            title: '分享人手机号',
            dataIndex: 'sharePersonPhone',
            key: 'sharePersonPhone',
            align: 'center',
        },
    ]

    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
        link.setAttribute('download', '客户数据.xlsx')
        document.body.append(link)
        link.click()
    }

    // ...formateValue(values)
    const exportReport = () => {
        props.form.validateFields((err, values) => {
            if (!err) {
                request({ ...apis.redPacket.exportVisitRecordByCondition, responseType: 'blob', params: { ...formateValue(values), activityId: id, drainageId } }).then(data => {
                    download(data)
                }).catch()
            }
        });

    }

    const { getFieldDecorator } = props.form

    return (

        <>
            <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
                <Form.Item>
                    {getFieldDecorator('phone')(
                        <Input
                            placeholder="手机号"
                        />,
                    )}
                </Form.Item>

                <Form.Item>
                    {getFieldDecorator('date')(
                        <RangePicker placeholder={['访问开始时间', '访问结束时间']} />,
                    )}
                </Form.Item>

                {/* <Form.Item>
                    {getFieldDecorator('startTime')(
                        <DatePicker placeholder="访问开始时间" />,
                    )}
                </Form.Item>
                <Form.Item>
                    {getFieldDecorator('endTime')(
                        <DatePicker placeholder="访问结束时间" />,
                    )}
                </Form.Item> */}
                <Form.Item>
                    {getFieldDecorator('sharePersonPhone')(
                        <Input
                            placeholder="分享人手机号"
                        />,
                    )}
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit"> 搜索</Button>
                    <Button style={{ marginLeft: 8 }} onClick={handleReset}>重置</Button>
                </Form.Item>
            </Form>
            <div style={{ marginTop: '20px' }}>
                <span style={{ lineHeight: '32px' }}>共筛选出{data.total}条数据</span>
                <Button type="primary" onClick={() => exportReport()} style={{ float: 'right', marginBottom: '20px', zIndex: 1 }} >导出</Button>
            </div>
            <Table dataSource={data.records} columns={columns} pagination={false} style={{ marginTop: '20px' }} />
            <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
                <Pagination
                    showQuickJumper
                    defaultCurrent={1}
                    total={data.total} onChange={e => changePageNum(e)} current={data.current} />
            </div>
        </>

    )
}

const WrappedCustomerData = Form.create({ name: 'CustomerData' })(CustomerData);

export default WrappedCustomerData
