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

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

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

    useEffect(() => {
        if (visible) {
            getRoleIpDetailList.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={700}
        >
            <Table
                columns={[
                    {
                        title: 'IP',
                        dataIndex: 'ip',
                        key: 'ip',
                    },
                    {
                        title: 'IP角色数量',
                        dataIndex: 'ipRoleCount',
                        key: 'ipRoleCount',
                    }
                ]}
                rowKey={'ip'}
                dataSource={getRoleIpDetailList?.data?.records}
                loading={getRoleIpDetailList?.loading}
                size="small"
                bordered
                pagination={false}
            />
        </Modal>}
    </>
};

export default React.memo(LoginIpDetails);