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

const LoginIpDetails: React.FC<{ roleId: any, gameId: number, icon?: React.ReactNode }> = ({ roleId, gameId, icon }) => {

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

    useEffect(() => {
        if (visible) {
            getRoleIpDetail1List.run({ roleId, gameId: [gameId] })
        }
    }, [roleId, visible, gameId])

    return <>
        <a onClick={() => setVisible(true)}>{icon}</a>
        {visible && <Modal
            title={<strong>登录IP(角色ID：{roleId})</strong>}
            visible={visible}
            onCancel={() => setVisible(false)}
            footer={null}
            width={700}
        >
            <Table
                columns={[
                    {
                        title: 'IP',
                        dataIndex: 'ip',
                        key: 'ip',
                    },
                    {
                        title: '角色IP的登录次数',
                        dataIndex: 'loginCount',
                        key: 'loginCount',
                        render(value) {
                            return value || 0
                        },
                    },
                    {
                        title: 'IP角色数量',
                        dataIndex: 'ipRoleCount',
                        key: 'ipRoleCount',
                    }
                ]}
                rowKey={'ip'}
                dataSource={getRoleIpDetail1List?.data}
                loading={getRoleIpDetail1List?.loading}
                size="small"
                bordered
            />
        </Modal>}
    </>
};

export default React.memo(LoginIpDetails);