import React, { useEffect, useState } from "react"
import TableData from "../../components/TableData"
import QueryForm from "@/components/QueryForm"
import { getPresets } from "@/components/QueryForm/const"
import moment from "moment"
import { LtvListProps, gteLtvListApi, gteLtvTotalApi } from "@/services/gameData/game"
import { useAjax } from "@/Hook/useAjax"
import { Tabs } from "antd"
import './index.less'
import columnsUser12 from "./tableConfig"
import columnsRole12 from "./tableConfigRole"


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

    /************************************/
    const [queryForm, setQueryForm] = useState<LtvListProps>({
        tableTypes: 'buy',
        pageNum: 1, pageSize: 50,
        registeredBeginDate: moment().format('YYYY-MM-DD'),
        registeredEndDate: moment().format('YYYY-MM-DD'),
        sourceSystem: 'ZX_ONE'
    })
    const [totalData, setTotalData] = useState<any[]>([])
    const [accessKey, setAccessKey] = useState<string>('1')

    const gteLtvList = useAjax((params) => gteLtvListApi(params))
    const gteLtvTotal = useAjax((params) => gteLtvTotalApi(params))
    /************************************/

    useEffect(() => {
        gteLtvList.run(queryForm)
        gteLtvTotal.run(queryForm).then((res: { id: number; costDate: string; beginDay: string | undefined }) => {
            res.id = 1
            res.costDate = '总计'
            res.beginDay = queryForm.registeredBeginDate
            setTotalData([res])
        })
    }, [queryForm])

    return <div>
        <Tabs type="card" className="tabsBottom0" accessKey={accessKey} onChange={(accessKey) => setAccessKey(accessKey)}>
            <Tabs.TabPane tab="注册" key="1" />
            <Tabs.TabPane tab="创角" key="2" />
        </Tabs>

        <TableData
            leftChild={<QueryForm
                initialValues={{ regDay: [moment(), moment()], sourceSystem: 'ZX_ONE', tableTypes: 'buy' }}
                onChange={(data: any) => {
                    console.log(data)
                    const { regStartDay, gameClassify, regEndDay, rechargeDay, ...params } = data
                    let newQueryForm = JSON.parse(JSON.stringify(queryForm))
                    newQueryForm.pageNum = 1
                    if (regStartDay && regEndDay) {
                        newQueryForm.registeredBeginDate = regStartDay
                        newQueryForm.registeredEndDate = regEndDay
                    } else {
                        delete newQueryForm.registeredBeginDate
                        delete newQueryForm.registeredEndDate
                    }
                    newQueryForm.classify = gameClassify
                    setQueryForm({ ...newQueryForm, ...params })
                }}
                isSource
                isRegDay={{ ranges: getPresets() }}
                isGameIds
                isBGGameClassify
                isUserEnterType
                isGameDimension
            />}
            isZj
            totalData={totalData}
            scroll={{ x: 1000, y: 600 }}
            ajax={gteLtvList}
            fixed={{ left: 2, right: 1 }}
            dataSource={gteLtvList?.data?.records?.map((item: any, index: number) => ({ ...item, id: Number(queryForm.pageNum.toString() + index.toString()) }))}
            total={gteLtvList?.data?.total}
            page={queryForm.pageNum}
            pageSize={queryForm.pageSize}
            sortData={{
                field: queryForm?.sortFiled,
                order: queryForm?.sortType === 'asc' ? 'ascend' : 'descend'
            }}
            title={`LTV`}
            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={accessKey === '1' ? columnsUser12() : columnsRole12()}
            configName={accessKey === '1' ? `LTV_USER` : 'LTV_ROL'}
        />
    </div>
}

export default Ltv