import { useAjax } from "@/Hook/useAjax"
import WidthEllipsis from "@/components/widthEllipsis"
import { getDetailsApi } from "@/services/gameData/game"
import { Popover, Statistic, Table, Tag } from "antd"
import { ColumnsType } from "antd/lib/table"
import React, { useEffect, useState } from "react"
import './index.less'


interface Props {
    sourceSystem?: string
    data: any
}

/**
 * 用户详情
 * @param param0 
 * @returns 
 */
const UserInfo: React.FC<Props> = ({ data, sourceSystem }) => {

    /******************************/
    const [queryForm, setQueryForm] = useState<{ pageNum: number, pageSize: number, sortType?: string, sortFiled?: string }>({ pageNum: 1, pageSize: 20 })
    const [visible, setVisible] = useState<boolean>(false)
    const getDetails = useAjax((params) => getDetailsApi(params))
    /******************************/

    useEffect(() => {
        if (visible) {
            getDetails.run({ againTrendVO: { ...data }, ...queryForm, sourceSystem })
        }
    }, [queryForm, visible, sourceSystem])

    const visibleChange = (visible: boolean) => {
        setVisible(visible)
    }

    return <>

        <Popover
            overlayInnerStyle={{ width: 700, padding: 0, backgroundColor: '#f1e0e0' }}
            overlayClassName="userPopover"
            content={<Table
                size="small"
                className="all_table content_table_body"
                loading={getDetails.loading}
                scroll={{ y: 280 }}
                dataSource={getDetails?.data?.records?.map((item: any, index: number) => ({ ...item, id: Number(queryForm.pageNum.toString() + index.toString()) }))}
                columns={columns}
                rowKey={'id'}
                pagination={{
                    current: queryForm.pageNum,//当前页数,需state控制配合翻页
                    pageSize: queryForm.pageSize,
                    total: getDetails?.data?.total || 0,
                    defaultCurrent: 1,//默认初始的当前页数
                    defaultPageSize: 20,//默认初始的每页条数
                    pageSizeOptions: ['10', '20', '30', '40', '50', '60', '70', '80', '90', '100'],
                    showTotal: (total) => <Tag color="cyan">总共{total}数据</Tag>,
                    hideOnSinglePage: false,//只有一页数据隐藏分页
                    showLessItems: true,
                }}
                onChange={(props: any, _filters, sorter: any) => {
                    let { current, pageSize } = props
                    let newQueryForm = JSON.parse(JSON.stringify(queryForm))
                    newQueryForm.pageNum = current
                    newQueryForm.pageSize = pageSize
                    if (sorter && sorter?.order) {
                        newQueryForm['sortType'] = sorter?.order === 'ascend' ? 'asc' : 'desc'
                        newQueryForm['sortFiled'] = sorter?.field
                    } else {
                        delete newQueryForm['sortType']
                        delete newQueryForm['sortFiled']
                    }
                    setQueryForm({ ...newQueryForm })
                }}
            />}
            trigger="click"
            title={<strong>用户详情</strong>}
            placement="left"
            destroyTooltipOnHide={true}
            onVisibleChange={visibleChange}
        >
            <span style={{ fontSize: 12 }}><a>D1用户详情</a></span>
        </Popover>
    </>
}

export default React.memo(UserInfo)


const columns: ColumnsType<any> = [
    {
        title: '累充排名',
        dataIndex: 'num',
        key: 'num',
        width: 60,
        fixed: 'left',
        align: 'center'
    },
    {
        title: '累计充值次数',
        dataIndex: 'totalAmountCount',
        key: 'totalAmountCount',
        width: 60,
        fixed: 'left',
        align: 'center'
    },
    {
        title: '玩家ID',
        dataIndex: 'playerId',
        key: 'playerId',
        width: 80,
        fixed: 'left',
        align: 'center'
    },
    {
        title: '角色名称',
        dataIndex: 'roleName',
        key: 'roleName',
        width: 90,
        align: 'center',
        render: (a: string) => (<WidthEllipsis value={a} />)
    },
    {
        title: '游戏服',
        dataIndex: 'serverName',
        key: 'serverName',
        width: 90,
        align: 'center',
        render: (a: string) => (<WidthEllipsis value={a} />)
    },
    {
        title: '玩家操作系统',
        dataIndex: 'playerOs',
        key: 'playerOs',
        width: 70,
        align: 'center',
        render: (a: string) => (<WidthEllipsis value={a} />)
    },
    {
        title: '注册渠道名称',
        dataIndex: 'regAgentName',
        key: 'regAgentName',
        width: 120,
        align: 'center',
        render: (a: string) => (<WidthEllipsis value={a} />)
    },
    {
        title: '注册渠道ID',
        dataIndex: 'regAgentId',
        key: 'regAgentId',
        width: 90,
        align: 'center',
        render: (a: string) => (<WidthEllipsis value={a} />)
    },
    {
        title: '充值金额',
        dataIndex: 'todayTotalAmount',
        key: 'todayTotalAmount',
        width: 70,
        align: 'center',
        fixed: 'right',
        sorter: true,
        render: (a: string) => <Statistic value={a || 0} />
    },
];