import { Button, Card, DatePicker, Input, Table, Tag } from "antd"
import React, { useEffect, useState } from "react"
import '../index.less'
import { SearchOutlined } from "@ant-design/icons"
import { useAjax } from "@/Hook/useAjax"
import { getTaskV3ListApi } from "@/services/adqV3"
import moment from "moment"
import { useModel } from "umi"
import columns from "./tableConfig"
import Log from "./log"

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

    /****************************************/
    const { initTargeting, geoLocationList, modelList } = useModel('useLaunchV3.useTargeting')

    const [queryParams, setQueryParams] = useState<PULLIN.GetTaskV3Props>({ pageNum: 1, pageSize: 20 })
    const [queryParamsNew, setQueryParamsNew] = useState<PULLIN.GetTaskV3Props>({ pageNum: 1, pageSize: 20 })
    const [logVisible, setLogVisible] = useState<boolean>(false)
    const [logData, setLogData] = useState<any>({})

    const getTaskV3List = useAjax((params) => getTaskV3ListApi(params), { formatResult: true })
    /****************************************/

    useEffect(() => {
        initTargeting()
        let taskName = sessionStorage.getItem('CAMPV3')
        if (taskName) {
            setQueryParamsNew({ ...queryParamsNew, taskName })
            setQueryParams({ ...queryParamsNew, taskName })
            sessionStorage.removeItem('CAMPV3')
        }
    }, [])

    useEffect(() => {
        getTaskV3List.run(queryParamsNew)
    }, [queryParamsNew])


    const callback = (data: any, type: 'log' | 'page' | 'copy', allData?: any) => {
        switch (type) {
            case 'log':
                setLogData({ ...data })
                setLogVisible(true)
                break
            case 'copy':
                sessionStorage.setItem('TASKID3.0', data.id)
                window.location.href = '/#/launchSystemV3/tencentAdPutIn/create'
                break
        }
    }

    return <Card
        className="cardResetCss"
        title={<div className="flexStart" style={{ gap: 8 }}>
            <Input style={{ width: 180 }} placeholder="请输入任务名称" value={queryParams?.taskName} allowClear onChange={(e) => setQueryParams({ ...queryParams, taskName: e.target.value, pageNum: 1 })} />
            <DatePicker.RangePicker style={{ width: 250 }} placeholder={['创建开始时间', '创建结束时间']} value={(queryParams?.createTimeMin && queryParams?.createTimeMax) ? [moment(queryParams?.createTimeMin), moment(queryParams?.createTimeMax)] as any : undefined} onChange={(_, option) => setQueryParams({ ...queryParams, createTimeMin: option[0], createTimeMax: option[1], pageNum: 1 })} />
            <Button type="primary" icon={<SearchOutlined />} onClick={() => setQueryParamsNew({ ...queryParams })}>搜索</Button>
        </div>}
    >
        <Table
            columns={columns(geoLocationList, modelList, callback)}
            dataSource={getTaskV3List?.data?.data?.records}
            size="small"
            loading={getTaskV3List?.loading}
            scroll={{ y: 600 }}
            bordered
            rowKey={'id'}
            pagination={{
                pageSize: queryParamsNew.pageSize,
                current: queryParamsNew.pageNum,
                total: getTaskV3List?.data?.data?.total || 0,
                showTotal: (total) => <Tag color="cyan">总共{total}数据</Tag>
            }}
            onChange={(pagination) => {
                let { current, pageSize } = pagination
                let newQueryForm = JSON.parse(JSON.stringify(queryParamsNew))
                newQueryForm.pageNum = current
                newQueryForm.pageSize = pageSize
                setQueryParamsNew(newQueryForm)
                setQueryParams(newQueryForm)
            }}
        />

        {/* 任务日志 */}
        {logVisible && <Log
            visible={logVisible}
            data={logData}
            onClose={() =>{
                setLogData({})
                setLogVisible(false)
            }}
        />}
    </Card>
}

export default React.memo(TaskList)