import { useAjax } from "@/Hook/useAjax"
import { getSysAdcreativeInfo } from "@/services/launchAdq/creative"
import { PromotedObjectType, SiteSetEnum } from "@/services/launchAdq/enum"
import { PlusOutlined } from "@ant-design/icons"
import { Button, Modal } from "antd"
import React, { useEffect, useRef, useState } from "react"
import CreativeForm from "./creativeForm"
import style from './index.less'

interface Props {
    publicData: any,
    data: any,
    visible?: boolean,
    onClose?: () => void,
    onChange?: () => void
}
/**
 * 批量复制
 * @returns 
 */
const BatchCreativeCopy: React.FC<Props> = (props) => {

    /*******************************/
    const { publicData, visible, onClose, onChange } = props
    const [oriData, setOriData] = useState<any[]>([])  // 创意数据
    const [template, setTemplate] = useState<{ siteSet: string[], promotedObjectType: string }>({ siteSet: [], promotedObjectType: '' })
    const itemsRef: any = useRef([]);

    const getSysAdcreative = useAjax((params) => getSysAdcreativeInfo(params))
    /*******************************/

    // 获取创意详情
    useEffect(() => {
        getSysAdcreative.run(publicData?.sysAdcreativeId).then(res => {
            console.log(111111, res);
            oriData[0] = { data: res, isOpen: true }
            setOriData(JSON.parse(JSON.stringify(oriData)))
            setTemplate({ siteSet: res?.siteSet, promotedObjectType: res?.promotedObjectType })
        })
    }, [])

    const handleOk = () => {
        console.log('itemsRef---->', itemsRef);
        let current = (itemsRef?.current as any[])?.filter(item => item)
        console.log('itemsRef?.current---->', current);
        Promise.all(current?.map((item: { handleOk: any }) => item.handleOk())).then(res => {
            console.log(1111111, res);
            
        }).catch(err => {
            console.log(22222222, err);
        })
    }

    // 删除创意
    const delOri = (index: number) => {
        oriData?.splice(index, 1)
        setOriData([...oriData])
    }

    // 新增创意
    const addOri = () => {
        let newOriData = [...oriData]
        newOriData.push({ isOpen: true })
        setOriData(newOriData)
    }

    return <Modal title="批量复制" open={visible} onOk={handleOk} width={1000} onCancel={() => { onClose && onClose() }} className={style.batchCopy}>
        <div className={style.info}>
            <div className={style.items}>
                <div className={style.item}>
                    <label className={style.label}>计划名称:</label>
                    <span>{publicData?.campaignName}</span>
                </div>
                <div className={style.item}>
                    <label className={style.label}>计划类型:</label>
                    <span>{publicData?.campaignType === 'CAMPAIGN_TYPE_NORMAL' ? '普通展示广告' : '微信朋友圈广告'}</span>
                </div>
            </div>
            <div className={style.items}>
                <div className={style.item}>
                    <label className={style.label}>推广目标:</label>
                    <span>{PromotedObjectType[publicData?.promotedObjectType]}</span>
                </div>
                <div className={style.item}>
                    <label className={style.label}>广告版位:</label>
                    <span>{getSysAdcreative?.data?.siteSet?.map((item: string) => SiteSetEnum[item]).toString()}</span>
                </div>
            </div>
        </div>

        {oriData?.length > 0 && oriData?.map((item: any, index: number) => {
            return <CreativeForm data={item.data} template={template} ref={el => { itemsRef.current[index] = el }} index={index + 1} key={index} delOri={() => { delOri(index) }} isDel={oriData?.length > 1}/>
        })}

        <Button type="link" style={{ padding: '4px 0', marginTop: 10 }} onClick={addOri}><PlusOutlined /> 新增创意</Button>
    </Modal>
}

export default React.memo(BatchCreativeCopy)