import { useAjax } from "@/Hook/useAjax"
import { PlayerRoleListProps, getUserRoleListApi, getUserRoleTotalApi } from "@/services/gameData/player"
import React, { useEffect, useState } from "react"
import TableData from "../../components/TableData"
import QueryForm from "@/components/QueryForm"
import { getPresetsRanking } from "@/components/QueryForm/const"
import columns12 from "./tableConfig"
import moment from "moment"

/**
 * 玩家角色列表
 * @returns 
 */
const Role: React.FC = () => {

    /************************/
    const [queryForm, setQueryForm] = useState<PlayerRoleListProps>({ pageNum: 1, pageSize: 30, sourceSystem: 'ZX_ONE', beginDate: moment().format('YYYY-MM-DD'), endDate: moment().format('YYYY-MM-DD') })
    const [totalData, setTotalData] = useState<any[]>([])
    const getUserRoleList = useAjax((params) => getUserRoleListApi(params))
    const getUserRoleTotal = useAjax((params) => getUserRoleTotalApi(params))
    /************************/

    useEffect(() => {
        getUserRoleTotal.run(queryForm).then((res: { id: number; zj: string; }) => {
            res.id = 1
            res.zj = '总计'
            setTotalData([res])
        })
        getUserRoleList.run(queryForm)
    }, [queryForm])

    return <div>
        <TableData
            leftChild={<QueryForm
                initialValues={{ sourceSystem: 'ZX_ONE', createRoleDay: [moment(), moment()] }}
                onChange={(data: any) => {
                    console.log(data)
                    const { gameUserId, username, gameClassify, agentId, roleCount, rechargeDay, regStartDay, regEndDay, regPayIntervalTime, createRoleDay, ...par } = data
                    let newQueryForm = JSON.parse(JSON.stringify(queryForm))
                    newQueryForm.pageNum = 1
                    newQueryForm.userId = gameUserId
                    newQueryForm.userName = username
                    newQueryForm.gameCategoryId = gameClassify
                    newQueryForm.channelId = agentId
                    if (rechargeDay && rechargeDay?.length === 2) {
                        newQueryForm['rechargeBeginDate'] = moment(rechargeDay[0]).format('YYYY-MM-DD')
                        newQueryForm['rechargeEndDate'] = moment(rechargeDay[1]).format('YYYY-MM-DD')
                    } else {
                        delete newQueryForm['rechargeBeginDate']
                        delete newQueryForm['rechargeEndDate']
                    }
                    if (createRoleDay && createRoleDay?.length === 2) {
                        newQueryForm['beginDate'] = moment(createRoleDay[0]).format('YYYY-MM-DD')
                        newQueryForm['endDate'] = moment(createRoleDay[1]).format('YYYY-MM-DD')
                    } else {
                        delete newQueryForm['beginDate']
                        delete newQueryForm['endDate']
                    }
                    if (regStartDay && regEndDay) {
                        newQueryForm.regTimeBeginDate = regStartDay
                        newQueryForm.regTimeEndDate = regEndDay
                    } else {
                        delete newQueryForm.regTimeBeginDate
                        delete newQueryForm.regTimeEndDate
                    }
                    if (regPayIntervalTime?.length > 0 && (regPayIntervalTime[0] || regPayIntervalTime[1])) {
                        newQueryForm.regPayIntervalTimeMin = regPayIntervalTime[0]
                        newQueryForm.regPayIntervalTimeMax = regPayIntervalTime[1]
                    } else {
                        delete newQueryForm.regPayIntervalTimeMin
                        delete newQueryForm.regPayIntervalTimeMax
                    }
                    if (roleCount?.length > 0 && (roleCount[0] || roleCount[1])) {
                        newQueryForm.roleLevelMin = roleCount[0]
                        newQueryForm.roleLevelMax = roleCount[1]
                    } else {
                        delete newQueryForm.roleLevelMin
                        delete newQueryForm.roleLevelMax
                    }
                    setQueryForm({ ...newQueryForm, ...par })
                }}
                isSource
                isGameUserId
                isUserName
                isNickname
                isRegIp
                isServerName
                isGameRoleName
                isCpId
                isGameId
                isBGGameClassify
                isAgentId
                isAccountId
                isSysUserId
                isOs
                isIsRecharge
                isCreateRole
                isGameRoleId
                rechargeDay={{ ranges: getPresetsRanking() }}
                isRegDay={{ ranges: getPresetsRanking() }}
                isCreateRoleDay={{ ranges: getPresetsRanking() }}
                isPayIntervalTime={{ tips: '充值距注册时间区间(分钟)' }}
                isRoleCount={{ tips: '玩家等级区间' }}
            />}
            isZj
            totalData={totalData}
            scroll={{ x: 1000, y: 600 }}
            ajax={getUserRoleList}
            fixed={{ left: 1, right: 1 }}
            dataSource={getUserRoleList?.data?.records}
            page={getUserRoleList?.data?.current || 1}
            pageSize={getUserRoleList?.data?.size || 20}
            total={getUserRoleList?.data?.total || 0}
            title='玩家角色列表'
            onChange={(props: any) => {
                console.log('props--->', props)
                let { pagination, sortData } = props
                let { current, pageSize } = pagination
                let newQueryForm = JSON.parse(JSON.stringify(queryForm))
                if (sortData && sortData?.order) {
                    newQueryForm['sortType'] = sortData?.order === 'ascend' ? 'asc' : 'desc'
                    newQueryForm['sortFiled'] = sortData?.field
                } else {
                    delete newQueryForm['sortType']
                    delete newQueryForm['sortFiled']
                }
                newQueryForm.pageNum = current
                newQueryForm.pageSize = pageSize
                setQueryForm({ ...newQueryForm })
            }}
            config={columns12()}
            configName={'玩家角色列表'}
        />
    </div>
}

export default Role