import { Radio, Space } from "antd"
import React, { useEffect, useState } from "react"
import TableData from "../../components/TableData"
import columns12 from "./tableConfig"
import moment from "moment"
import { useAjax } from "@/Hook/useAjax"
import { ChannelProps, getAgentRechargeRankingListApi } from "@/services/gameData/rankingList"
import QueryForm from "@/components/QueryForm"
import { rangePresets } from "@/components/QueryForm/const"


const Channel: React.FC = () => {

    /********************************/
    const [queryForm, setQueryForm] = useState<ChannelProps>({ pageNum: 1, pageSize: 20 })

    const getAgentRechargeRankingList = useAjax((params) => getAgentRechargeRankingListApi(params))
    /********************************/

    useEffect(() => {
        getAgentRechargeRankingList.run(queryForm)
    }, [queryForm])

    return <div>

        <TableData
            leftChild={<QueryForm
                onChange={(data: any) => {
                    console.log(data)
                    const { rechargeDay, ...params } = data
                    let newQueryForm = JSON.parse(JSON.stringify(queryForm))
                    newQueryForm.pageNum = 1
                    if (rechargeDay && rechargeDay?.length === 2) {
                        newQueryForm.beginDay = moment(rechargeDay[0]).format('YYYY-MM-DD')
                        newQueryForm.endDay = moment(rechargeDay[1]).format('YYYY-MM-DD')
                    } else {
                        delete newQueryForm.beginDay
                        delete newQueryForm.endDay
                    }
                    setQueryForm({ ...newQueryForm, ...params })
                }}
                rechargeDay={{ ranges: rangePresets }}
                isSysUserId
                isAgentId
                isType
            />}
            scroll={{ x: 1000, y: 600 }}
            ajax={getAgentRechargeRankingList}
            fixed={{ left: 1, right: 0 }}
            dataSource={getAgentRechargeRankingList?.data?.records?.map((item: any) => ({ ...item, id: item.index + 1 }))}
            total={getAgentRechargeRankingList?.data?.total}
            page={queryForm.pageNum}
            pageSize={queryForm.pageSize}
            title='推广渠道充值排行榜'
            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={'推广渠道充值排行榜'}
        />
    </div>
}

export default Channel