import { useAjax } from "@/Hook/useAjax"
import { PromotedObjectType } from "@/services/launchAdq/enum"
import { getTaskListApi, TaskListProps } from "@/services/launchAdq/taskList"
import { Input, Select, Space } from "antd"
import React, { useEffect, useState } from "react"
import LookLanding from "../../components/lookLanding"
import TableData from "../../components/TableData"
import Log from "./log"
import tableConfig from './tableConfig'

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

    /*************************/
    const [queryForm, setQueryForm] = useState<TaskListProps>({ pageSize: 20, pageNum: 1 })
    const [logVisible, setLogVisible] = useState<boolean>(false)
    const [lookVisible, setLookVisible] = useState<boolean>(false)
    const [logData, setLogData] = useState<{ taskId: number, campaignName: string } | number>({ taskId: 0, campaignName: '' })
    const [allData, setAllData] = useState<any>({})

    const getTaskList = useAjax((params) => getTaskListApi(params), { formatResult: true })
    /*************************/

    useEffect(() => {
        let campaignName = sessionStorage.getItem('CAMP')
        if (campaignName) {
            setQueryForm({ ...queryForm, campaignName })
            sessionStorage.removeItem('CAMP')
        }
    }, [])

    useEffect(() => {
        getList()
    }, [queryForm])

    const getList = () => {
        getTaskList.run(queryForm)
    }

    const callback = (data: any, type: 'log' | 'page', allData?: any) => {
        switch (type) {
            case 'log':
                setLogData({ ...data })
                setLogVisible(true)
                setAllData(allData)
                break
            case 'page':
                setLogData(data)
                setLookVisible(true)
                break
        }
    }

    return <>
        <TableData
            columns={() => tableConfig(callback)}
            ajax={getTaskList}
            dataSource={getTaskList?.data?.data?.records}
            loading={getTaskList?.loading}
            scroll={{ y: 600 }}
            total={getTaskList?.data?.data?.total}
            page={getTaskList?.data?.data?.current}
            pageSize={getTaskList?.data?.data?.size}
            leftChild={<Space>
                <Input placeholder="计划名称" style={{ width: 150 }} allowClear value={queryForm?.campaignName} onChange={(e) => {setQueryForm({ ...queryForm, campaignName: e.target.value, pageNum: 1 }); sessionStorage.removeItem('CAMP')}} />
                <Select
                    placeholder="计划类型"
                    maxTagCount={1}
                    allowClear
                    style={{ width: 150 }}
                    value={queryForm?.campaignType}
                    onChange={(e) => { setQueryForm({ ...queryForm, campaignType: e }) }}
                >
                    <Select.Option value='CAMPAIGN_TYPE_NORMAL'>普通展示广告</Select.Option>
                    <Select.Option value='CAMPAIGN_TYPE_WECHAT_MOMENTS'>微信朋友圈广告</Select.Option>
                </Select>
                <Select style={{ width: 150 }} allowClear value={queryForm?.promotedObjectType} placeholder="推广目标" showSearch filterOption={(input: any, option: any) =>
                    (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
                } onChange={(e) => { setQueryForm({ ...queryForm, promotedObjectType: e }) }}>
                    {Object.keys(PromotedObjectType).map(key => {
                        return <Select.Option value={key} key={key}>{PromotedObjectType[key]}</Select.Option>
                    })}
                </Select>
            </Space>}
            onChange={(props: any) => {
                let { pagination } = props
                let { current, pageSize } = pagination
                setQueryForm({ ...queryForm, pageNum: current, pageSize })
            }}
        />
        {/* 日志 */}
        {logVisible && <Log {...logData as any} visible={logVisible} onClose={() => setLogVisible(false)} allData={allData}/>}
        {/* 查看落地页 */}
        {lookVisible && <LookLanding visible={lookVisible} onClose={() => setLookVisible(false)} id={logData as any} />}
    </>
}

export default React.memo(TaskList)