import Tables from "@/components/Tables"
import { useAjax } from "@/Hook/useAjax"
import { getUserGameRoleListApi } from "@/services/gameData/player"
import { Modal } from "antd"
import React, { useEffect, useState } from "react"
import { gameRoleTableColumns } from "../list/look"


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

    /*********************************/
    const [visible, setVisible] = useState<boolean>(false)
    const getUserGameRoleList = useAjax((id: number) => getUserGameRoleListApi(id))
    /*********************************/

    useEffect(() => {
        if (visible) {
            getUserGameRoleList.run(userId)
        }
    }, [userId, visible])

    return <>
        <a onClick={() => setVisible(true)}>{icon || '角色'}</a>
        {visible && <Modal
            title={<strong>游戏角色(玩家ID：{userId})</strong>}
            visible={visible}
            onCancel={() => setVisible(false)}
            footer={null}
            width={1100}
        >
            <Tables
                columns={gameRoleTableColumns}
                dataSource={getUserGameRoleList?.data}
                loading={getUserGameRoleList?.loading}
                size="small"
                scroll={{ x: 1000 }}
                bordered
            />
        </Modal>}
    </>
}

export default React.memo(LookRoleDetails)