import React, { useState, useEffect } from 'react';
import { Form, Button, Table, Pagination, Radio, Typography, Avatar } from 'antd';
import router from 'umi/router';
import moment from 'moment';
import BuildSelect from '../../../components/SelectButton/BuildSelect'
import apis from '../../../services/apis';
import request from '../../../utils/request'
import Prompt from 'umi/prompt';
import Navigate from '@/components/Navigate';

/**
  @param {*} props
  @returns
 */
const { Text } = Typography;

function record(props) {
    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.homePagePersons, params: { ...params }, }).then((data) => {
            setData(data)
            updataLoading(false)
        })
    }

    // 更新页码
    const changePageNum = (pageNumber) => {
        props.form.validateFields((err, values) => {
            if (!err) {
                getList({ ...props.location.query, pageNum: pageNumber });
            }
        });
    }
    const toPersonDetail = (personId) => {
        router.push({
            pathname: '/customer/customerlist/publicCustomerDetail',
            query: {
                id: personId,
            },
        });
    }
    const toHomepageNum = (personId) => {

        router.push({
            pathname: '/statistical/consultant/homepageNum',
            query: {
                ...props.location.query,
                type: 'homePageNums',
                personId,
            },
        });
    }
    // 表格数据
    const columns = [

        {
            title: '头像',
            dataIndex: 'picture',
            key: 'picture',
            align: 'center',
            render: (_, record) => <Avatar shape="square" src={record.picture || record.avatarurl} size={64} icon="user" />,
        },
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
            align: 'center',
            render: (_, record) => <Navigate onClick={() => toPersonDetail(record.personId)}>{record.name || record.nickname}</Navigate>,
        },
        {
            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: 'visitTimes',
            key: 'visitTimes',
            align: 'center',
            render: (_, record) => <Navigate onClick={() => toHomepageNum(record.personId)}>{record.visitTimes}</Navigate>,
        },
        {
            title: '最后访问时间',
            dataIndex: 'visitTime',
            key: 'visitTime',
            align: 'center',
            render: (_, record) => <><span>{record.visitTime && moment(record.visitTime).format('YYYY-MM-DD HH:mm:ss')}</span></>,
        },

    ];

    return (

        <>
            <div align="right"><Button onClick={() => router.go(-1)}>返回</Button></div>
            <Table rowKey={(index => { index })}
                // <Table rowKey={record => (record.phone + record.buildingId || '')}
                style={{ marginTop: '30px' }}
                dataSource={data.records}
                columns={columns}
                pagination={false}
                loading={loading}
            />
            < div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
                <Pagination showQuickJumper defaultCurrent={1} 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
