import { useAjax } from "@/Hook/useAjax"
import { getTaskLogListApi, TaskLogListProps } from "@/services/launchAdq/taskList"
import { Button, Drawer, Select, Space } from "antd"
import React, { useEffect, useState } from "react"
import { useModel } from "umi"
import LookLanding from "../../components/lookLanding"
import TableData from "../../components/TableData"
import BatchCreativeCopy from "./batchCreativeCopy"
import tableConfig from './logTableConfig'

interface Props {
    taskId: number,  // 任务ID
    campaignName: string, // 计划名称
    allData: any, // 所有数据
    visible?: boolean,
    onClose?: () => void
}
/**
 * 创建日志
 * @returns 
 */
const Log: React.FC<Props> = (props) => {

    /*****************************/
    const { taskId, campaignName, allData, visible, onClose } = props
    const [queryForm, setQueryForm] = useState<TaskLogListProps>({ pageNum: 1, pageSize: 20, taskId })
    const [selectedRowKeys, setSelectedRowKeys] = useState<any[]>([])
    const [visibleCopy, setVisibleCopy] = useState<boolean>(false)
    const [data, setData] = useState<any>({})
    const [lookVisible, setLookVisible] = useState<boolean>(false)
    const [logData, setLogData] = useState<{ taskId: number, campaignName: string } | number>({ taskId: 0, campaignName: '' })

    const { getAdAccount } = useModel('useLaunchAdq.useAdAuthorize')
    const getTaskLogList = useAjax((params) => getTaskLogListApi(params), { formatResult: true })
    /*****************************/

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

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

    /** 获取列表 */
    const getList = () => {
        getTaskLogList.run(queryForm)
    }

    /** 批量复制 */
    const copyCreative = (data: any) => {
        console.log(data);
        setData(data)
        setVisibleCopy(true)
    }

    const callback = (data: any) => {
        setLogData(data)
        setLookVisible(true)
    }

    return <Drawer bodyStyle={{ padding: 0 }} title={campaignName + ' 日志'} width={1400} placement="right" onClose={() => { onClose && onClose() }} open={visible}>
        <Space>
            <Button></Button>
        </Space>
        <TableData
            columns={() => tableConfig(copyCreative, callback)}
            ajax={getTaskLogList}
            dataSource={getTaskLogList?.data?.data?.records}
            loading={getTaskLogList?.loading}
            scroll={{ x: 1200, y: 600 }}
            total={getTaskLogList?.data?.data?.total}
            page={getTaskLogList?.data?.data?.current}
            pageSize={getTaskLogList?.data?.data?.size}
            // rowSelection={{
            //     type: 'checkbox',
            //     selectedRowKeys: selectedRowKeys?.map((item: {id: number}) => item.id.toString()),
            //     onSelect: (record: any, selected: boolean, selectedRows: any, nativeEvent: any) => {
            //         let oldSelectedRowKeys: any[] = JSON.parse(JSON.stringify(selectedRowKeys))
            //         if (selected) { // 新增
            //             oldSelectedRowKeys.push(record)
            //         } else { // 减少
            //             oldSelectedRowKeys = oldSelectedRowKeys.filter((item: {id: number}) => item.id != record.id)
            //         }
            //         setSelectedRowKeys(oldSelectedRowKeys)
            //     },
            //     onSelectAll: (selected: boolean, selectedRows: any, changeRows: any) => {
            //         let oldSelectedRowKeys: any[] = JSON.parse(JSON.stringify(selectedRowKeys))
            //         if (selected) {
            //             oldSelectedRowKeys = [...oldSelectedRowKeys, ...changeRows]
            //         } else {
            //             oldSelectedRowKeys = oldSelectedRowKeys.filter((item: {id: number}) => !changeRows?.some((item1: {id: number}) => item1.id == item.id))
            //         }
            //         setSelectedRowKeys(oldSelectedRowKeys)
            //     }
            // }}
            leftChild={<Space>
                <Select
                    placeholder="媒体账户"
                    allowClear
                    style={{ width: 150 }}
                    showSearch
                    value={queryForm?.accountId}
                    filterOption={(input, option) => {
                        return (option?.children as unknown as string)?.toString()?.toLowerCase()?.includes(input.toLowerCase())
                    }}
                    onChange={(e) => { setQueryForm({ ...queryForm, accountId: e }) }}
                >
                    {getAdAccount?.data?.data?.map((item: any) => <Select.Option value={item.accountId} key={item.id}>{item.accountId}</Select.Option>)}
                </Select>
                <Select style={{ width: 150 }} allowClear value={queryForm?.createStatus} placeholder="创建状态" showSearch onChange={(e) => { setQueryForm({ ...queryForm, createStatus: e }) }}>
                    <Select.Option value={-1}>创建失败</Select.Option>
                    <Select.Option value={0}>创建中</Select.Option>
                    <Select.Option value={100}>创建成功</Select.Option>
                </Select>
            </Space>}
            onChange={(props: any) => {
                let { pagination } = props
                let { current, pageSize } = pagination
                setQueryForm({ ...queryForm, pageNum: current, pageSize })
            }}
        />

        {/* 批量复制 */}
        {visibleCopy && <BatchCreativeCopy data={data} publicData={allData} visible={visibleCopy} onClose={() => setVisibleCopy(false)} onChange={() => { }} />}
        {/* 查看落地页 */}
        {lookVisible && <LookLanding visible={lookVisible} onClose={() => setLookVisible(false)} id={logData as any} />}
    </Drawer>
}


export default React.memo(Log)