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

interface Props {
    country: string
    serverId: string
    countryLevel: number
}
/**
 * 帮派成员
 * @returns 
 */
const CountryList: React.FC<Props> = ({ country, serverId, countryLevel }) => {

    /*********************************/
    const [visible, setVisible] = useState<boolean>(false)
    const [queryForm, setQueryForm] = useState<getGameCountryRoleListProps>({ country, serverId, countryLevel, pageNum: 1, pageSize: 20 })

    const getGameCountryRoleList = useAjax((params) => getGameCountryRoleListApi(params))
    /*********************************/

    useEffect(() => {
        if (visible) {
            getGameCountryRoleList.run(queryForm)
        }
    }, [visible, queryForm])

    return (<>
        <a style={{ fontSize: 12 }} onClick={() => setVisible(true)}>帮派成员</a>
        {visible && <Modal
            title={<strong>{country}</strong>}
            visible={visible}
            onCancel={() => setVisible(false)}
            footer={null}
            width={900}
        >
            <Table
                dataSource={getGameCountryRoleList?.data?.records}
                size="small"
                bordered
                loading={getGameCountryRoleList.loading}
                rowKey={'roleId'}
                scroll={{ x: 500 }}
                pagination={{
                    total: getGameCountryRoleList?.data?.total,
                    pageSize: getGameCountryRoleList?.data?.size,
                    current: getGameCountryRoleList?.data?.current
                }}
                columns={[
                    {
                        title: '角色名称',
                        dataIndex: 'roleName',
                        key: 'roleName',
                        width: 90,
                        ellipsis: true
                    },
                    {
                        title: '角色ID',
                        dataIndex: 'roleId',
                        key: 'roleId',
                        width: 80,
                        align: 'center'
                    },
                    {
                        title: '用户ID',
                        dataIndex: 'userId',
                        key: 'userId',
                        width: 80,
                        align: 'center'
                    },
                    {
                        title: '区服ID',
                        dataIndex: 'serverId',
                        key: 'serverId',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '帮派名称',
                        dataIndex: 'country',
                        key: 'country',
                        width: 90,
                        ellipsis: true,
                        align: 'center'
                    },
                    {
                        title: '角色等级',
                        dataIndex: 'roleLevel',
                        key: 'roleLevel',
                        width: 70,
                        align: 'center',
                        sorter: true
                    },
                    {
                        title: '玩家角色战力',
                        dataIndex: 'combatNum',
                        key: 'combatNum',
                        width: 80,
                        align: 'center',
                        sorter: true
                    },
                    {
                        title: '角色累计充值',
                        dataIndex: 'roleTotalAmount',
                        key: 'roleTotalAmount',
                        width: 80,
                        align: 'center',
                        sorter: true
                    },
                    {
                        title: '创角时间',
                        dataIndex: 'createTime',
                        key: 'createTime',
                        width: 140,
                        align: 'center',
                        ellipsis: true
                    }
                ]}
                onChange={(pagination, filters, sorter: any) => {
                    let { current, pageSize } = pagination
                    let newQueryForm = JSON.parse(JSON.stringify(queryForm))
                    if (sorter && sorter?.order) {
                        newQueryForm['sortType'] = sorter?.order === 'ascend' ? 'asc' : 'desc'
                        newQueryForm['sortFiled'] = sorter?.field
                    } else {
                        delete newQueryForm['sortType']
                        delete newQueryForm['sortFiled']
                    }
                    newQueryForm.pageNum = current || newQueryForm.pageNum
                    newQueryForm.pageSize = pageSize || newQueryForm.pageSize
                    setQueryForm({ ...newQueryForm })
                }}
            />
        </Modal>}
    </>);
};

export default React.memo(CountryList);