import React, { useState, useEffect } from 'react';
import { Form, Button, Table, Pagination, Select, Input, Icon } from 'antd';
import router from 'umi/router';
import moment from 'moment';
import apis from '../../../services/apis';
import request from '../../../utils/request'
import Prompt from 'umi/prompt';

const typeList = [
    {
        label: '报名活动',
        value: 'dynamic_share'
    },
    {
        label: '助力活动',
        value: 'help_share'
    },
    {
        label: '拼团活动',
        value: 'group_share'
    },
    {
        label: 'H5活动',
        value: 'h5_share'
    },
    {
        label: '直播活动',
        value: 'live_share'
    },
    {
        label: '在线选房',
        value: 'house_share'
    },
    {
        label: '项目',
        value: 'building_share'
    },
    {
        label: '资讯',
        value: 'news_share'
    },
    {
        label: '首页',
        value: 'share'
    },
    {
        label: '个人主页',
        value: 'card_share'
    },
]


/**
  @param {*} props
  @returns
 */
const { Option } = Select;

function record(props) {
    const [radioVal, updateRadioVal] = useState(7)
    const [formData, updateFormData] = useState({
        pageNum: 1,
        pageSize: 10,
        ...props.location.query,
    })

    // 获取初始化数据
    const [data, setData] = useState({})
    const [loading, updataLoading] = useState(true)

    useEffect(() => {
        getList(formData);
    }, [])

    // 查询列表
    const getList = (params) => {
        request({ ...apis.stats.visitNum, params: { ...params }, }).then((data) => {
            setData(data)
            updataLoading(false)

        })
    }

    //重置搜索
    function handleReset() {
        props.form.resetFields();
        getList(formData);
    }

    // 提交事件
    const handleSubmit = (e) => {
        e.preventDefault();
        props.form.validateFields((err, values) => {
            if (!err) {
                console.log('提交数据: ', values)
                getList({ ...formData, ...values });

            }
        });
    }
    // 更新页码
    const changePageNum = (pageNumber) => {
        props.form.validateFields((err, values) => {
            if (!err) {
                getList({ ...formData, pageNum: pageNumber, ...values });
            }
        });
    }

    function getType(type) {
        return typeList.filter(t => t.value === type)[0].label
    }

    // 表格数据
    const columns = [

        {
            title: '分享标题',
            dataIndex: 'targetType',
            key: 'targetType',
            align: 'center',
            render: (_, record) => <><span>{getType(record.targetType)} {record.targetName ? '【' + record.targetName + '】' : ''}</span></>
        },
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
            align: 'center',
            render: (_, record) => <><span>{record.name || record.nickname}</span></>
        },
        {
            title: '电话',
            dataIndex: 'phone',
            key: 'phone',
            align: 'center',
        },
        {
            title: '性别',
            dataIndex: 'gender',
            key: 'gender',
            align: 'center',
            render: (_, record) => <span>{(record.gender || record.sex) == 1 ? '男' : (record.gender || record.sex) == 2 ? '女' : '未知'}</span>,
        },
        {
            title: '访问时间',
            dataIndex: 'visitTime',
            key: 'visitTime',
            align: 'center',
            render: (_, record) => <><span>{record.visitTime && moment(record.visitTime).format('YYYY-MM-DD HH:mm:ss')}</span></>,
        },

    ];

    const { getFieldDecorator } = props.form

    let row = 0

    return (

        <>
            <div align="right"><Button onClick={() => router.go(-1)}>返回</Button></div>
            <Form layout="inline">
                <div style={{ display: 'flex', alignItems: 'center' }}>
                    <Form.Item>
                        {getFieldDecorator('targetType')(
                            <Select placeholder="分享类型" style={{ width: 150 }}>
                                {typeList.map((item, index) => (
                                    <Option key={index} value={item.value}>{item.label}</Option>
                                ))}
                            </Select>
                        )}
                    </Form.Item>
                    <Form.Item>
                        {getFieldDecorator('targetName')(
                            <Input
                                prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                placeholder="分享标题"
                            />,
                        )}
                    </Form.Item>
                    <Form.Item>
                        {getFieldDecorator('userName')(
                            <Input
                                prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                placeholder="用户名"
                            />,
                        )}
                    </Form.Item>
                    <Form.Item style={{ position: 'absolute', right: '38px' }}>
                        <Button type="primary" onClick={handleSubmit}>搜索</Button>
                        <Button style={{ marginLeft: 8 }} onClick={handleReset}>重置</Button>
                    </Form.Item>
                </div>
            </Form>
            <Table rowKey={record => data.current * data.size + (row++)}
                style={{ marginTop: '30px' }}
                dataSource={data.records}
                columns={columns}
                pagination={false}
            />
            < div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
                <Pagination showQuickJumper defaultCurrent={1} loading={loading} total={data.total} onChange={changePageNum} current={data.current} />
            </div>
            <Prompt message={location =>
        location.pathname.startsWith("/statistical/consultant")
          ? true
          : localStorage.removeItem("consultantPageParams")} />
        </>
    )
}
const WrappedHeader = Form.create({ name: 'record' })(record);

export default WrappedHeader
