import WidthEllipsis from "@/components/widthEllipsis"
import { useAjax } from "@/Hook/useAjax"
import { getUserDetailListApi } from "@/services/gsData"
import { Modal, Table } from "antd"
import React, { useEffect, useState } from "react"

/**
 * 角色同IP的玩家
 * @returns 
 */
const TongIpUser: React.FC<{ roleId: any, userId?: any, icon?: React.ReactNode }> = ({ roleId, icon }) => {

    /*********************************/
    const [visible, setVisible] = useState<boolean>(false)
    const getUserDetailList = useAjax((params) => getUserDetailListApi(params))
    /*********************************/

    useEffect(() => {
        if (visible) {
            getUserDetailList.run({ roleId })
        }
    }, [roleId, visible])

    return <>
        <a onClick={() => setVisible(true)}>{icon}</a>
        {visible && <Modal
            title={<strong>角色同IP的玩家(角色ID：{roleId})</strong>}
            visible={visible}
            onCancel={() => setVisible(false)}
            footer={null}
            width={950}
        >
            <Table
                scroll={{ x: 900 }}
                columns={[
                    {
                        title: '玩家名称',
                        dataIndex: 'userName',
                        key: 'userName',
                        width: 100,
                        ellipsis: true
                    },
                    {
                        title: '玩家ID',
                        dataIndex: 'id',
                        key: 'id',
                        align: 'center',
                        width: 85,
                    },
                    {
                        title: '最近订单时间',
                        dataIndex: 'lastOrderTime',
                        key: 'lastOrderTime',
                        align: 'center',
                        width: 140,
                        render: (a: string, b: any) => (<WidthEllipsis value={a} />)
                    },
                    {
                        title: '累计充值金额',
                        dataIndex: 'totalAmount',
                        key: 'totalAmount',
                        align: 'center',
                        width: 75,
                    },
                    {
                        title: '玩家角色总数',
                        dataIndex: 'userRoleCount',
                        key: 'userRoleCount',
                        align: 'center',
                        width: 75,
                    },
                    {
                        title: '渠道名称',
                        dataIndex: 'agentGame',
                        key: 'agentGame',
                        width: 90,
                        ellipsis: true,
                        align: 'center',
                    },
                    {
                        title: '渠道ID',
                        dataIndex: 'agentId',
                        key: 'agentId',
                        align: 'center',
                        width: 75,
                    },
                    {
                        title: '玩家注册游戏名称',
                        dataIndex: 'gameName',
                        key: 'gameName',
                        width: 100,
                        ellipsis: true
                    },
                    {
                        title: '玩家注册游戏ID',
                        dataIndex: 'gameId',
                        key: 'gameId',
                        align: 'center',
                        width: 75,
                    },
                    {
                        title: '最近登录游戏名称',
                        dataIndex: 'lastLoginGame',
                        key: 'lastLoginGame',
                        width: 100,
                        ellipsis: true
                    },
                    {
                        title: '最近登录游戏ID',
                        dataIndex: 'lastLoginGameId',
                        key: 'lastLoginGameId',
                        align: 'center',
                        width: 75,
                    },
                    {
                        title: '玩家注册时间',
                        dataIndex: 'createTime',
                        key: 'createTime',
                        align: 'center',
                        width: 140,
                        render: (a: string, b: any) => (<WidthEllipsis value={a} />)
                    },
                    {
                        title: '最近登录时间',
                        dataIndex: 'lastLoginTime',
                        key: 'lastLoginTime',
                        align: 'center',
                        width: 140,
                        render: (a: string, b: any) => (<WidthEllipsis value={a} />)
                    },

                ]}
                rowKey={'id'}
                dataSource={getUserDetailList?.data}
                loading={getUserDetailList?.loading}
                size="small"
                bordered
            />
        </Modal>}
    </>
}

export default React.memo(TongIpUser)