import { useAjax } from "@/Hook/useAjax"
import { PromotionDataDay, getPromotionDataDayListApi, getPromotionDataDayTotalApi } from "@/services/gameData/adlist"
import { Button, Drawer } from "antd"
import React, { useEffect, useState } from "react"
import TableData from "../../components/TableData"
import columns12 from './tableConfigDay'
import QueryForm from "@/components/QueryForm"
import { getPresets } from "@/components/QueryForm/const"
import { CloseOutlined } from "@ant-design/icons"

interface Props {
    queryForm: PromotionDataDay
    adName: string,
    promotionId?: number
    onClose?: () => void
    visible?: boolean
}

/**
 * 广告每日监控
 * @returns 
 */
const DayAd: React.FC<Props> = ({ adName, queryForm, promotionId, onClose, visible }) => {

    /***********************************/
    const [data, setData] = useState<{ pageSize: number, pageNum: number, sortFiled?: string, sortType?: string }>({ pageNum: 1, pageSize: 100 })
    const [date, setDate] = useState<[string, string]>()
    const [totalData, setTotalData] = useState<any[]>([])
    const getPromotionDataDayList = useAjax((params) => getPromotionDataDayListApi(params))
    const getPromotionDataDayTotal = useAjax((params) => getPromotionDataDayTotalApi(params))
    /***********************************/

    useEffect(() => {
        let params = JSON.parse(JSON.stringify(queryForm))
        delete params.sortType
        delete params.sortFiled
        delete params.pageSize
        delete params.pageNum
        if (promotionId) {
            params.promotionId = promotionId
        }
        if (date && date?.length > 0) {
            params.costBeginDate = date[0]
            params.costEndDate = date[1]
        } else {
            delete params?.costBeginDate
            delete params?.costEndDate
        }
        getPromotionDataDayList.run({ ...params, ...data })
        getPromotionDataDayTotal.run({ ...params, ...data }).then(res => {
            res.id = 1
            res.dt = '总计'
            setTotalData([res])
        })
    }, [promotionId, queryForm, data, date])

    return <Drawer title={<div style={{ display: 'flex', justifyContent: 'space-between' }}><span>{`${adName} 广告每日数据`}</span> <Button type="text" icon={<CloseOutlined />} onClick={() => onClose?.()}></Button> </div>} closable={false} placement="right" width={'90%'} onClose={onClose} visible={visible}>
        <TableData
            leftChild={<QueryForm
                onChange={(data: any) => {
                    const { costBeginDay, costEndDay } = data
                    if (costBeginDay && costEndDay) {
                        setDate([costBeginDay, costEndDay])
                    } else {
                        setDate(undefined)
                    }
                }}
                isConsumeDay={{ ranges: getPresets() }}
            />}
            isZj
            totalData={totalData}
            scroll={{ x: 1000, y: 600 }}
            ajax={getPromotionDataDayList}
            fixed={{ left: 3, right: 0 }}
            dataSource={getPromotionDataDayList?.data?.records?.map((item: any, index: number) => ({ ...item, id: Number(data.pageNum.toString() + index.toString()) }))}
            total={getPromotionDataDayList?.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(data))
                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
                setData({ ...newQueryForm })
            }}
            config={columns12()}
            configName={'广告每日监控'}
        />
    </Drawer>
}

export default React.memo(DayAd)