import { useAjax } from '@/Hook/useAjax';
import { getSuspectedRoleDetailListApi } from '@/services/gsData';
import { Modal, Table } from 'antd';
import React, { useEffect, useState } from 'react';

/**
 * 疑似同玩家
 * @param param0 
 * @returns 
 */
const SuspectedUser: React.FC<{ roleId: string, icon?: React.ReactNode }> = ({ roleId, icon }) => {

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

    useEffect(() => {
        if (visible) {
            const params = { roleId }
            getSuspectedRoleDetailList.run(params)
        }
    }, [roleId, visible])

    return <>
        <a onClick={() => setVisible(true)}>{icon}</a>
        {visible && <Modal
            title={<strong>疑似同玩家(角色ID：{roleId})</strong>}
            visible={visible}
            onCancel={() => setVisible(false)}
            footer={null}
            width={1000}
        >
            <Table
                columns={[
                    {
                        title: '角色名称',
                        dataIndex: 'roleName',
                        key: 'roleName',
                        ellipsis: true,
                        width: 90
                    },
                    {
                        title: '角色ID',
                        dataIndex: 'roleId',
                        key: 'roleId',
                        align: 'center',
                        ellipsis: true,
                        width: 80
                    },
                    {
                        title: '玩家角色战力',
                        dataIndex: 'combatNum',
                        key: 'combatNum',
                        align: 'center',
                        width: 90
                    },
                    {
                        title: '角色充值金额',
                        dataIndex: 'roleTotalAmount',
                        key: 'roleTotalAmount',
                        align: 'center',
                        width: 80
                    },
                    {
                        title: '角色等级',
                        dataIndex: 'roleLevel',
                        key: 'roleLevel',
                        align: 'center',
                        width: 80
                    },
                    {
                        title: '游戏名称',
                        dataIndex: 'gameName',
                        key: 'gameName',
                        align: 'center',
                        ellipsis: true,
                        width: 100
                    },
                    {
                        title: '区服名称',
                        dataIndex: 'serverName',
                        key: 'serverName',
                        align: 'center',
                        ellipsis: true,
                        width: 100
                    },
                    {
                        title: '区服ID',
                        dataIndex: 'serverId',
                        key: 'serverId',
                        ellipsis: true,
                        align: 'center',
                        width: 70
                    },
                    {
                        title: '系统',
                        dataIndex: 'os',
                        key: 'os',
                        align: 'center',
                        width: 70,
                        render(value) {
                            return value || '--'
                        },
                    },
                    {
                        title: '创建时间',
                        dataIndex: 'createTime',
                        key: 'createTime',
                        align: 'center',
                        width: 140,
                        ellipsis: true,
                        render(value) {
                            return value || '--'
                        },
                    },
                    {
                        title: '更新时间',
                        dataIndex: 'updateTime',
                        key: 'updateTime',
                        align: 'center',
                        width: 140,
                        ellipsis: true,
                        render(value) {
                            return value || '--'
                        },
                    },
                    {
                        title: '最近登录时间',
                        dataIndex: 'lastLoginTime',
                        key: 'lastLoginTime',
                        align: 'center',
                        width: 140,
                        ellipsis: true,
                        render(value) {
                            return value || '--'
                        },
                    },
                    {
                        title: '最近充值时间',
                        dataIndex: 'lastRechargeTime',
                        key: 'lastRechargeTime',
                        align: 'center',
                        width: 140,
                        ellipsis: true,
                        render(value) {
                            return value || '--'
                        },
                    },
                ]}
                rowKey={(record) => {
                    return record.roleId + '_' + record.gameId + '_' + record.userId
                }}
                scroll={{ x: 1000 }}
                dataSource={getSuspectedRoleDetailList?.data}
                loading={getSuspectedRoleDetailList?.loading}
                size="small"
                bordered
            />
        </Modal>}
    </>
};

export default SuspectedUser;