import React, { useEffect, useState } from "react"
import { useAjax } from "@/Hook/useAjax"
import { getGDTListApi, GetGDTListProps, getGDTTotalApi } from "@/services/iaaData"
import TablePro from "@/components/TablePro"
import columns12 from "./tableConfig"
import QueryForm from "@/components/QueryForm"
import moment from "moment"
import { useModel } from "umi"

/**
 * 腾讯广告列表
 * @returns 
 */
const TencentIaaAd: React.FC = () => {

    /****************************************/
    const { initialState } = useModel('@@initialState');
    const [queryForm, setQueryForm] = useState<GetGDTListProps>({
        pageNum: 1,
        pageSize: 30
    })
    const [totalData, setTotalData] = useState<any[]>([])

    const getGDTList = useAjax((params) => getGDTListApi(params))
    const getGDTTotal = useAjax((params) => getGDTTotalApi(params))
    /****************************************/

    useEffect(() => {
        if (initialState?.iaaApp) {
            const [appId, productType] = initialState.iaaApp.split('||')
            getGDTList.run({ ...queryForm, appId, productType })
            getGDTTotal.run({ ...queryForm, appId, productType }).then((res: { data: { id: number; accountId: string } }) => {
                if (res?.data) {
                    let data = res?.data
                    data.id = 1
                    data.accountId = '总计'
                    setTotalData([data])
                } else {
                    setTotalData([{ id: 1, accountId: '总计' }])
                }
            })
        }

    }, [queryForm, initialState?.iaaApp])

    return <div>
        <TablePro
            leftChild={<QueryForm
                initialValues={{}}
                isAccountId
                isPromotionName
                isPutUserIdList
                isCpaBid
                isDeleted
                isPricing
                isStatus
                day1={{ placeholder: ['广告创建日期开始', '广告创建日期结束'] }}
                day2={{ placeholder: ['投放日期开始', '投放日期结束'] }}
                day3={{ placeholder: ['消耗日期开始', '消耗日期结束'] }}
                onChange={(data: any) => {
                    console.log(data)
                    const { day1, day2, day3, ...params } = data
                    let newQueryForm = JSON.parse(JSON.stringify(queryForm))

                    if (day1 && day1?.length === 2) {
                        newQueryForm['adCreateBegin'] = moment(day1[0]).format('YYYY-MM-DD')
                        newQueryForm['adCreateEnd'] = moment(day1[1]).format('YYYY-MM-DD')
                    } else {
                        delete newQueryForm['adCreateBegin']
                        delete newQueryForm['adCreateEnd']
                    }

                    if (day2 && day2?.length === 2) {
                        newQueryForm['putDayBegin'] = moment(day2[0]).format('YYYY-MM-DD')
                        newQueryForm['putDayEnd'] = moment(day2[1]).format('YYYY-MM-DD')
                    } else {
                        delete newQueryForm['putDayBegin']
                        delete newQueryForm['putDayEnd']
                    }

                    if (day3 && day3?.length === 2) {
                        newQueryForm['costDayBegin'] = moment(day3[0]).format('YYYY-MM-DD')
                        newQueryForm['costDayEnd'] = moment(day3[1]).format('YYYY-MM-DD')
                    } else {
                        delete newQueryForm['costDayBegin']
                        delete newQueryForm['costDayEnd']
                    }
                    setQueryForm({ ...newQueryForm, ...params })
                }}
            />}
            isZj
            totalData={totalData}
            config={columns12()}
            configName={'腾讯广告列表'}
            fixed={{ left: 4, right: 0 }}
            scroll={{ x: 1000, y: 620 }}
            title='腾讯广告列表'
            loading={getGDTList.loading}
            ajax={getGDTList}
            page={getGDTList?.data?.data?.current || 1}
            pageSize={getGDTList?.data?.data?.size || 20}
            total={getGDTList?.data?.data?.total || 0}
            dataSource={getGDTList?.data?.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['sortAsc'] = sortData?.order === 'ascend' ? true : false
                    newQueryForm['sortFiled'] = sortData?.field
                } else {
                    delete newQueryForm['sortAsc']
                    delete newQueryForm['sortFiled']
                }
                newQueryForm.pageNum = current || newQueryForm.pageNum
                newQueryForm.pageSize = pageSize || newQueryForm.pageSize
                setQueryForm({ ...newQueryForm })
            }}
        />
    </div>
}

export default TencentIaaAd