import { useAjax } from "@/Hook/useAjax"
import { GameServerGsListProps, getGameServerGsListApi, getGameServerGsTotalApi } from "@/services/gameData/gameServer"
import React, { useEffect, useState } from "react"
import moment from "moment"
import columns12 from "./tableConfig"
import TableData from "../../components/TableData"
import QueryForm from "@/components/QueryForm"
import { getPresets } from "@/components/QueryForm/const"
import TablePro from "../../components/TablePro"

/**
 * GS区服
 * @returns 
 */
const ServerGsData: React.FC = () => {

    /********************************/
    const [queryForm, setQueryForm] = useState<GameServerGsListProps>({ pageNum: 1, pageSize: 40, beginDate: moment().format('YYYY-MM-DD'), endDate: moment().format('YYYY-MM-DD'), sourceSystem: 'ZX_ONE' })
    const [totalData, setTotalData] = useState<any[]>([])

    const getGameServerGsList = useAjax((params) => getGameServerGsListApi(params))
    const getGameServerGsTotal = useAjax((params) => getGameServerGsTotalApi(params))
    /********************************/

    useEffect(() => {
        getGameServerGsTotal.run(queryForm).then((res: { id: number; dt?: string; gameName: string; }) => {
            res.id = 1
            res.dt = queryForm?.beginDate ? queryForm?.beginDate : moment().subtract(90, 'days').format('YYYY-MM-DD')
            res.gameName = '总计'
            setTotalData([res])
        })
        getGameServerGsList.run(queryForm)
    }, [queryForm])

    return <div>
        {/* <TableData
            leftChild={<QueryForm
                initialValues={{ sourceSystem: 'ZX_ONE', serverDay: [moment(), moment()] }}
                onChange={(data: any) => {
                    const { serverDay, parentGameIds, serverId, ...params } = data
                    let newQueryForm = JSON.parse(JSON.stringify(queryForm))
                    if (serverDay && serverDay?.length === 2) {
                        newQueryForm['beginDate'] = moment(serverDay[0]).format('YYYY-MM-DD')
                        newQueryForm['endDate'] = moment(serverDay[1]).format('YYYY-MM-DD')
                    } else {
                        delete newQueryForm['beginDate']
                        delete newQueryForm['endDate']
                    }
                    newQueryForm.pageNum = 1
                    newQueryForm.gameId = parentGameIds
                    newQueryForm.serverId = serverId ? serverId?.split(/[,，\s\n]+/) : []
                    setQueryForm({ ...newQueryForm, ...params })
                }}
                isSource
                isServerDay={{ ranges: getPresets() }}
                isParentIds
                isServerName
                isServerId={{placeholder: '区服ID(多个逗号，空格，换行)'}}
                isGsId
            />}
            isZj
            isVirtually={false}
            totalData={totalData}
            scroll={{ x: 1000, y: 600 }}
            ajax={getGameServerGsList}
            fixed={{ left: 3, right: 0 }}
            dataSource={getGameServerGsList?.data?.records?.map((item: any, index: number) => ({ ...item, id: Number(queryForm.pageNum.toString() + index.toString()) }))}
            total={getGameServerGsList?.data?.total}
            page={queryForm.pageNum}
            pageSize={queryForm.pageSize}
            title='GS区服数据'
            onChange={(props: any) => {
                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={'GS区服数据'}
        /> */}
        <TablePro
            leftChild={<QueryForm
                initialValues={{ sourceSystem: 'ZX_ONE', serverDay: [moment(), moment()] }}
                onChange={(data: any) => {
                    const { serverDay, parentGameIds, serverId, ...params } = data
                    let newQueryForm = JSON.parse(JSON.stringify(queryForm))
                    if (serverDay && serverDay?.length === 2) {
                        newQueryForm['beginDate'] = moment(serverDay[0]).format('YYYY-MM-DD')
                        newQueryForm['endDate'] = moment(serverDay[1]).format('YYYY-MM-DD')
                    } else {
                        delete newQueryForm['beginDate']
                        delete newQueryForm['endDate']
                    }
                    newQueryForm.pageNum = 1
                    newQueryForm.gameId = parentGameIds
                    newQueryForm.serverId = serverId ? serverId?.split(/[,，\s\n]+/) : []
                    setQueryForm({ ...newQueryForm, ...params })
                }}
                isSource
                isServerDay={{ ranges: getPresets() }}
                isParentIds
                isServerName
                isServerId={{placeholder: '区服ID(多个逗号，空格，换行)'}}
                isGsId
            />}
            isZj
            totalData={totalData}
            config={columns12()}
            configName={'GS区服数据'}
            fixed={{ left: 3, right: 0 }}
            scroll={{ x: 1000, y: 500 }}
            title='GS区服数据'
            loading={getGameServerGsList.loading || getGameServerGsTotal.loading}
            ajax={getGameServerGsList}
            page={getGameServerGsList?.data?.current || 1}
            pageSize={getGameServerGsList?.data?.size || 20}
            total={getGameServerGsList?.data?.total || 0}
            dataSource={getGameServerGsList?.data?.records?.map((item: any, index: number) => ({ ...item, id: Number(queryForm.pageNum.toString() + index.toString()) }))}
            onChange={(pagination: any, _: any, sortData: any) => {
                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 })
            }}
        />
    </div>
}

export default ServerGsData