import QueryForm from "@/components/QueryForm"
import { useAjax } from "@/Hook/useAjax"
import TablePro from "@/pages/gameDataStatistics/components/TablePro"
import { getRoleChatListApi, GetRoleChatListProps } from "@/services/gsData"
import React, { useEffect, useState } from "react"
import moment from "moment"
import columns12 from "./tableConfig"
import Details from "./details"

/**
 * 角色IP风险监控
 * @returns 
 */
const RoleChatNum: React.FC = () => {


    /****************************************/
    const [queryForm, setQueryForm] = useState<GetRoleChatListProps>({
        pageNum: 1,
        pageSize: 30,
        startDate: moment().format('YYYY-MM-DD'),
        endDate: moment().format('YYYY-MM-DD')
    })
    const [detaisData, setDetailsData] = useState<{ visible: boolean, roleId: any, dt: any }>({ visible: false, roleId: undefined, dt: undefined })
    const getRoleChatList = useAjax((params) => getRoleChatListApi(params))
    /****************************************/

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

    const detailsHandle = (data: any) => {
        setDetailsData({ visible: true, roleId: data.roleId, dt: data.dt })
    }

    return <div>
        <TablePro
            leftChild={<QueryForm
                initialValues={{createRoleDay: [moment(), moment()]}}
                isServerIdDg
                isCreateRoleDay={{placeholder: ['日期开始', '日期结束']}}
                isGameRoleName
                isGameRoleId
                isSuperParentGameId
                isCountry
                onChange={(data: any) => {
                    console.log(data)
                    const { superParentGameId, createRoleDay, ...params } = data
                    let newQueryForm = JSON.parse(JSON.stringify(queryForm))
                    newQueryForm.pageNum = 1
                    newQueryForm.superGameId = superParentGameId
                    if (createRoleDay && createRoleDay?.length === 2) {
                        newQueryForm['startDate'] = moment(createRoleDay[0]).format('YYYY-MM-DD')
                        newQueryForm['endDate'] = moment(createRoleDay[1]).format('YYYY-MM-DD')
                    } else {
                        delete newQueryForm['startDate']
                        delete newQueryForm['endDate']
                    }
                    setQueryForm({ ...newQueryForm, ...params })
                }}
            />}
            config={columns12(detailsHandle)}
            configName={'角色日维度的聊天数量统计列表'}
            fixed={{ left: 2, right: 1 }}
            scroll={{ x: 1000, y: 620 }}
            title='角色日维度的聊天数量统计列表'
            loading={getRoleChatList.loading}
            ajax={getRoleChatList}
            page={getRoleChatList?.data?.current || 1}
            pageSize={getRoleChatList?.data?.size || 20}
            total={getRoleChatList?.data?.total || 0}
            dataSource={getRoleChatList?.data?.records?.map((item: any, index: number) => ({ ...item, id: Number(queryForm.pageNum.toString() + (index + '')) }))}
            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.pageNum
                newQueryForm.pageSize = pageSize || newQueryForm.pageSize
                setQueryForm({ ...newQueryForm })
            }}
        />

        {/* 角色聊天详情 */}
        {detaisData.visible && <Details
            {...detaisData}
            onClose={() => setDetailsData({ ...detaisData, visible: false })}
        />}
    </div>
}

export default RoleChatNum