import { useAjax } from "@/Hook/useAjax"
import { IpUserProps, getIpUserListApi, interdictionGamerApi } from "@/services/gameData/player"
import { Button, Modal, Space, Table, Tag, message } from "antd"
import React, { useEffect, useState } from "react"
import columns12 from "./ipTableConfig"
import { SyncOutlined } from "@ant-design/icons"


interface Props {
    ip: string
    visible?: boolean,
    onClose?: () => void
}
/**
 * 登录IP玩家列表
 * @returns 
 */
const LoginIpUser: React.FC<Props> = ({ ip, visible, onClose }) => {

    const getIpUserList = useAjax((params) => getIpUserListApi(params))
    const [queryForm, setQueryForm] = useState<IpUserProps>({ pageNum: 1, pageSize: 20, ip }) 
    const interdictionGamer = useAjax((params: { userId: number, status: number }) => interdictionGamerApi(params))
    
    useEffect(() => {
        getIpUserList.run(queryForm)
    }, [queryForm])

    // 封禁
    const interdictionHandle = (userId: number, status: number) => {
        interdictionGamer.run({ userId, status }).then(res => {
            if (res) {
                message.success(status === 1 ? '封禁成功！' : '解封成功！');
                getIpUserList.refresh();
            } else {
                message.error(res.msg)
            }
        })
    }

    return <Modal
        title={<Space>
            <span>{ip} 玩家列表</span>
            <Button size="small" type="link" icon={<SyncOutlined />} loading={interdictionGamer.loading} onClick={() => getIpUserList.refresh()}></Button>
        </Space>}
        visible={visible}
        onCancel={onClose}
        footer={null}
        width={900}
    >
        <Table 
            columns={columns12(interdictionHandle)} 
            dataSource={getIpUserList?.data?.records} 
            rowKey={'role_id'}
            size="small"
            loading={getIpUserList.loading}
            bordered
            pagination={{
                current: queryForm.pageNum,//当前页数,需state控制配合翻页
                pageSize: queryForm.pageSize,
                total: getIpUserList?.data?.total || 0,
                defaultCurrent: 1,//默认初始的当前页数
                defaultPageSize: 20,//默认初始的每页条数
                pageSizeOptions: ['10', '20', '30', '40', '50', '60', '70', '80', '90', '100'],
                showTotal: (total) => <Tag color="cyan">总共{total}数据</Tag>,
                hideOnSinglePage: false,//只有一页数据隐藏分页
                showLessItems: true,
            }}
            onChange={(props: any, _filters, sorter: any) => {
                let { current, pageSize } = props
                let newQueryForm = JSON.parse(JSON.stringify(queryForm))
                newQueryForm.pageNum = current
                newQueryForm.pageSize = pageSize
                if (sorter && sorter?.order) {
                    newQueryForm['sortType'] = sorter?.order === 'ascend' ? 'asc' : 'desc'
                    newQueryForm['sortFiled'] = sorter?.field
                } else {
                    delete newQueryForm['sortType']
                    delete newQueryForm['sortFiled']
                }
                setQueryForm({ ...newQueryForm })
            }}
        />
    </Modal>
}

export default React.memo(LoginIpUser)