import { useAjax } from "@/Hook/useAjax"
import { GameWaterProps, getGameWaterListApi } from "@/services/gameData/game"
import React, { useEffect, useState } from "react"
import TableData from "../../components/TableData"
import QueryForm from "@/components/QueryForm"
import columns12 from "./tableConfig"
import moment from "moment"
import './index.less'

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

    /*************************************/
    const [queryForm, setQueryForm] = useState<GameWaterProps>({ pageNum: 1, pageSize: 100, sourceSystem: 'ZX_ONE', rechargeDate: moment().format('YYYY-MM-DD') })
    const getGameWaterList = useAjax((params) => getGameWaterListApi(params))
    /*************************************/

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

    return <div>

        <TableData
            leftChild={<QueryForm
                initialValues={{ sourceSystem: 'ZX_ONE', rechargeDate: moment() }}
                isGameIds
                isGameDimension
                isRechargeDate
                isBGGameClassify
                isSource
                onChange={(data: any) => {
                    // console.log(data)
                    const { rechargeDate, ...params } = data
                    let newQueryForm = JSON.parse(JSON.stringify(queryForm))
                    newQueryForm.pageNum = 1
                    if (rechargeDate) {
                        newQueryForm['rechargeDate'] = moment(rechargeDate).format('YYYY-MM-DD')
                    } else {
                        delete newQueryForm['rechargeDate']
                    }
                    setQueryForm({ ...newQueryForm, ...params })
                }}
            />}
            scroll={{ x: 1000, y: 600 }}
            ajax={getGameWaterList}
            fixed={{ left: 1, right: 0 }}
            dataSource={getGameWaterList?.data?.records?.map((item: any) => ({ ...item, color: '#000' }))}
            page={getGameWaterList?.data?.current || 1}
            pageSize={getGameWaterList?.data?.size || 20}
            total={getGameWaterList?.data?.total || 0}
            title='每日流水贡献(T+1)'
            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={'每日流水贡献'}
            rowClassName={(r: any, index) => {
                if (index % 2 === 0) {
                    return 'backC1'
                }
                return 'backC2'
            }}
        />
    </div>
}

export default FlowingWater