import { Button, DatePicker, Input, Modal, Radio, Image, message, Popconfirm, Space } from "antd";
import React, { useCallback, useEffect, useState } from "react";
import { BcForm } from '../createPlan/components/AdBasicConfig'
import style from '../createPlan/components/AdBasicConfig/index.less'
import style1 from './index.less'
import ClerkAide from "../createPlan/components/AdOriginality/components/ClerkAide";
import SelectPage from '@/pages/launchSystem/launchManage/components/SelectPageNew'
import moment from "moment";
import { DeleteOutlined, DownOutlined, PlusOutlined, UpOutlined } from "@ant-design/icons";
import { useModel } from "umi";
import AdLogin from '@/pages/launchSystem/launchManage/components/adLogin'
import SelectImg from '@/pages/launchSystem/launchManage/components/selectImg'
import { setCopyPlanApi } from '@/services/operating/adNewAuthorize'
import dic from "../createPlan/components/Dic";

/** 批量复制 */
interface Props {
    visible: boolean,
    defaultValue: any,
    ajax?: any,
    onChange?: () => void,
    onClose?: () => void,
    clearSelect?: (d: any) => void
}
type OriDataProps = {
    desc?: string,     // 文案信息
    imageUrl?: string, // 广告位图片
    title?: string, // 图文标题
    caption?: string, // 次行文案
    left_bottom_txt?: string, // 第三行文案
    pageData: any[],  // 落地页信息
    override_canvas_head_option?: string, // 是否使用头部信息
    isCanvasTop?: boolean,  // 是否不能使用头部图片
    infoBarType?: 'INFO_BAR_TYPE_HEAD' | 'INFO_BAR_TYPE_TITLE',
    infoBarDescription?: string
    isOpen: boolean   // 是否展开
}
function BatchPageCopy(props: Props) {
    const { visible, defaultValue, onClose, ajax, clearSelect } = props
    const { planInfo, mpAccountInfo, id: planCreateLogId } = Array.isArray(defaultValue) ? defaultValue[0] : defaultValue
    const { setCopyPlan } = useModel('useLaunch.useAdAuthorize')

    // 数据开始
    const [posType, setPosType] = useState<number>(311)
    const [clerkAideVisible, setClerkAideVisible] = useState<boolean>(false)
    const [accout, setAccout] = useState<{ accountId?: number, accountType?: 'mp' | 'adq' }>({})
    const [pageShow, setPageShow] = useState<boolean>(false) // 选择落地弹窗
    const [begin_time, setBegin_time] = useState<string>('') // 开始时间
    const [end_time, setEnd_time] = useState<string>('') // 结束时间
    const [oriData, setOriData] = useState<OriDataProps[]>([])  // 创意数据
    const [clickNum, setClickNum] = useState<number>(-1)  // 点击了第几个创意按钮
    const [authData, setAuthData] = useState<{ base64: string, code: string }>({ base64: '', code: '' })
    const [selectImgVisible, setSelectImgVisible] = useState<boolean>(false)   // 选择图片弹窗
    const [sliderImgContent, setSliderImgContent] = useState<{ content: string }[]>([])  // 保存回填数据
    const [loading, setLoading] = useState<boolean>(false)
    const [fieldType, setFieldType] = useState<'one' | 'two'>('one') // 文案字段
    const [imgSize, setImgSize] = useState<{
        aspectRatio?: string, //宽高比
        minWidth?: string,   //最小宽度
        maxWidth?: string,   //最大宽度
        minHeight?: string,  //最小高度
        maxHeight?: string,  //最大高度
        minMediaSize?: number, // 最小媒体大小
        maxMediaSize?: number, // 最大媒体大小
        minVideoLength?: number, // 最小视频时长
        maxVideoLength?: number, // 最大视频时长
        minVideoBitRate?: number, // 最小视频比特率
        maxVideoBitRate?: number, // 最大视频比特率
        type?: 1 | 2,  // 内容类型 1 图片 2 视频
    }>({ minWidth: '960', maxWidth: '960', minHeight: '540', maxHeight: '540', minMediaSize: 0, maxMediaSize: 81920, type: 1 })   // 要选择的素材信息
    // 数据结束

    const getIsCanvasTop = (data: any, posType: number): boolean => {
        console.log('0000000---》', data)
        if (data && typeof data === 'object') {
            console.log('0000000---》111111', posType)
            if (posType === 1707) {
                let topType = data?.topCanvasType
                if (topType === 101) {
                    return true
                } else if (topType === 41) {
                    let pageContextList = JSON.parse(data?.pageContextList[0]?.pageContextList)
                    let topContent = pageContextList[0]
                    let initWidth = topContent?.initWidth
                    let initHeight = topContent?.initHeight
                    if (initWidth !== 800 || initHeight !== 450) {
                        return true
                    } else {
                        return false
                    }
                } else {
                    return false
                }
            } else if (posType === 1708) {
                let topType = data?.topCanvasType
                if (topType === 142 || topType === 61) {
                    let initWidth = JSON.parse(data?.pageContextList[0]?.pageContextList)[0]?.initWidth
                    let initHeight = JSON.parse(data?.pageContextList[0]?.pageContextList)[0]?.initHeight
                    console.log(22222, initWidth, initHeight)
                    if (initWidth != 1280 || initHeight != 720) {
                        return true
                    }
                }
                return false
            } else {
                return false
            }
        } else {
            return false
        }
    }

    // 回填数据
    useEffect(() => {
        if (typeof defaultValue === 'object' && Object.keys(defaultValue).length > 0) {
            let { sharePageInfo, adcreative, adgroup, material } = planInfo
            switch (planInfo?.posType) {
                case 1707:
                    setImgSize({ ...imgSize, minWidth: '800', maxWidth: '800', minHeight: '450', maxHeight: '450', maxMediaSize: 307200 });
                    break
                case 928:
                    setImgSize({ ...imgSize, minWidth: '960', maxWidth: '960', minHeight: '540', maxHeight: '540', maxMediaSize: 307200 });
                    break
                case 929:
                    setImgSize(() => ({ minWidth: '960', maxWidth: '960', minHeight: '540', maxHeight: '540', minMediaSize: 0, maxMediaSize: 99614720, minVideoLength: 6, maxVideoLength: 30, type: 2 }))
                    break
                case 1708:
                    setImgSize(() => ({ minWidth: '1280', maxWidth: '1280', minHeight: '720', maxHeight: '720', minMediaSize: 0, maxMediaSize: 99614720, minVideoLength: 5, maxVideoLength: 30, type: 2 }))
                    break
            }
            if (mpAccountInfo) {
                setAccout({ accountType: 'mp', accountId: mpAccountInfo?.id })
            }
            setPosType(planInfo?.posType)
            if (adgroup) {
                let a = JSON.parse(adgroup)
                setBegin_time(a.begin_date)
                setEnd_time(a.end_date)
            }
            if (adcreative) {
                let a = JSON.parse(adcreative)
                let b = JSON.parse(material)
                let { adcreative_elements, page_spec } = a
                if ([311, 641, 642, 643, 618, 1465, 1480].includes(planInfo?.posType)) {
                    setOriData([{ desc: adcreative_elements.title, pageData: sharePageInfo ? [sharePageInfo] : [], isOpen: true }])
                } else if ([1707, 1708].includes(planInfo?.posType)) {
                    let isCanvasTop = getIsCanvasTop(sharePageInfo, planInfo?.posType)
                    setOriData([{ desc: adcreative_elements.description, title: adcreative_elements.title, imageUrl: b.url, override_canvas_head_option: page_spec?.override_canvas_head_option, isCanvasTop, pageData: sharePageInfo ? [sharePageInfo] : [], isOpen: true }])
                } else if (planInfo?.posType === 928) {
                    const { info_bar_spec } = adcreative_elements
                    setOriData([{ title: adcreative_elements.title, infoBarType: info_bar_spec?.info_bar_type, infoBarDescription: info_bar_spec.info_bar_description, desc: adcreative_elements.description, caption: adcreative_elements.caption, left_bottom_txt: adcreative_elements.left_bottom_txt, imageUrl: b.url, pageData: sharePageInfo ? [sharePageInfo] : [], isOpen: true }])
                } else if (planInfo?.posType === 929) {
                    setOriData([{ title: adcreative_elements.title, desc: adcreative_elements.description, caption: adcreative_elements.caption, left_bottom_txt: adcreative_elements.left_bottom_txt, imageUrl: b.url, pageData: sharePageInfo ? [sharePageInfo] : [], isOpen: true }])
                }
            }
        }
    }, [defaultValue])

    const hideHandle = () => {
        onClose && onClose()
    }

    // 确认提交
    const handleOk = useCallback(() => {
        if (!planCreateLogId) {
            return
        }
        if (oriData?.some((item: { pageData: any }) => item.pageData?.length === 0)) {
            message.error('请选择原生推广页')
            return
        }
        if ([311, 641, 642, 643, 618, 1465, 1480].includes(posType)) {
            if (oriData?.some((item: { desc?: string }) => !item?.desc)) {
                message.error('请完善外层文案')
                return
            }
        } else if ([1707, 1708].includes(posType)) {
            if (oriData?.some((item: { desc?: string }) => !item?.desc)) {
                message.error('请完善外层文案')
                return
            }
            if (oriData?.some((item: { title?: string }) => !item?.title)) {
                message.error('请完善外层文案标题')
                return
            }
            if (oriData?.some((item: { imageUrl?: string, override_canvas_head_option?: string }) => item?.override_canvas_head_option === 'OPTION_KEEP_DIFFERENT' ? !item?.imageUrl : false)) {
                message.error('请完善外层图片')
                return
            }
        } else if (posType === 928 || posType === 929) {
            if (oriData?.some((item: { title?: string }) => !item?.title)) {
                message.error('请完善图文标题')
                return
            }
            if (oriData?.some((item: { desc?: string }) => !item?.desc)) {
                message.error('请完善首行文案')
                return
            }
            if (oriData?.some((item: { caption?: string }) => !item?.caption)) {
                message.error('请完善次行文案')
                return
            }
            if (!oriData?.every((item: { imageUrl?: string }) => item?.imageUrl)) {
                message.error('请选择外层素材')
                return
            }
            if (posType === 928 && !oriData?.every((item: any) => item?.infoBarType === 'INFO_BAR_TYPE_TITLE' && item.infoBarDescription)) {
                message.error('请输入信息栏文案')
                return
            }
        }
        setLoading(true)
        if (Array.isArray(defaultValue)) {//叉乘
            let ajaxArr: any = []
            defaultValue?.forEach((item, index) => {
                let { planName, putLocation, putTarget, adcreative, adgroup, campaign, material } = item?.planInfo
                let newAdgroup = JSON.parse(adgroup)
                let newAdcreative = JSON.parse(adcreative)
                let newMaterial = JSON.parse(material)
                newAdgroup = {
                    ...newAdgroup,
                    begin_date: begin_time,
                    end_date: end_time
                }
                let planDtos: any = oriData?.map((item: OriDataProps) => {
                    if ([311, 641, 642, 643, 618, 1465, 1480].includes(posType)) {
                        newAdcreative = {
                            ...newAdcreative,
                            adcreative_elements: {
                                ...newAdcreative.adcreative_elements,
                                title: item.desc
                            }
                        }
                        newMaterial = {
                            ...newMaterial,
                            page_name: item.pageData[0]?.name
                        }
                        return {
                            posType,
                            content: item.desc,
                            planName,
                            putLocation,
                            putTarget,
                            pageId: item.pageData[0]?.id,
                            campaign,
                            adgroup: JSON.stringify(newAdgroup),
                            adcreative: JSON.stringify(newAdcreative),
                            material: JSON.stringify(newMaterial)
                        }
                    } else if ([1707, 1708].includes(posType)) {
                        newAdcreative = {
                            ...newAdcreative,
                            adcreative_elements: {
                                ...newAdcreative.adcreative_elements,
                                title: item?.title,
                                description: item?.desc
                            },
                            page_spec: {
                                ...newAdcreative.page_spec,
                                override_canvas_head_option: item?.override_canvas_head_option
                            }
                        }
                        if (item?.override_canvas_head_option === 'OPTION_KEEP_DIFFERENT') {
                            newMaterial = {
                                ...newMaterial,
                                page_name: item?.pageData[0].name,
                                url: item?.imageUrl,
                                type: posType === 1707 ? 'image' : 'video'
                            }
                        } else {
                            newMaterial = {
                                page_name: item?.pageData[0].name
                            }
                        }
                        let url = item.imageUrl
                        if (item.override_canvas_head_option !== 'OPTION_KEEP_DIFFERENT') {
                            url = item.pageData[0]?.thumbUrl
                        }
                        return {
                            posType,
                            content: item.desc,
                            title: item.title,
                            type: posType === 1707 ? 'image' : 'video',
                            url,
                            planName,
                            putLocation,
                            putTarget,
                            pageId: item.pageData[0]?.id,
                            campaign,
                            adgroup: JSON.stringify(newAdgroup),
                            adcreative: JSON.stringify(newAdcreative),
                            material: JSON.stringify(newMaterial)
                        }
                    } else if (posType === 928 || posType === 929) {
                        let adcreative_elements = newAdcreative.adcreative_elements
                        let lbt = {}
                        if (item?.left_bottom_txt) {
                            lbt = { left_bottom_txt: item?.left_bottom_txt }
                        } else {
                            delete adcreative_elements.left_bottom_txt
                        }
                        if (posType === 928) {
                            let info_bar_spec = {}
                            info_bar_spec = {
                                info_bar_type: item?.infoBarType,
                                info_bar_description: item?.infoBarType === 'INFO_BAR_TYPE_HEAD' ? "" : item?.infoBarDescription
                            }
                            newAdcreative = {
                                ...newAdcreative,
                                adcreative_elements: {
                                    ...adcreative_elements,
                                    title: item?.title,
                                    description: item?.desc,
                                    caption: item?.caption,
                                    info_bar_spec: {
                                        ...adcreative_elements?.info_bar_spec,
                                        ...info_bar_spec
                                    },
                                    ...lbt
                                }
                            }
                        } else {
                            newAdcreative = {
                                ...newAdcreative,
                                adcreative_elements: {
                                    ...adcreative_elements,
                                    title: item?.title,
                                    description: item?.desc,
                                    caption: item?.caption,
                                    ...lbt
                                }
                            }
                        }

                        newMaterial = {
                            ...newMaterial,
                            page_name: item?.pageData[0].name,
                            url: item?.imageUrl,
                        }
                        let descList = []
                        descList.push(item?.desc)
                        descList.push(item?.caption)
                        item?.left_bottom_txt && (descList.push(item?.left_bottom_txt))
                        return {
                            posType,
                            title: item.title,
                            content: posType === 928 && item?.infoBarType === 'INFO_BAR_TYPE_TITLE' ? item?.infoBarDescription : '',
                            type: posType === 929 ? 'video' : 'image',
                            descList,
                            url: item?.imageUrl,
                            planName,
                            putLocation,
                            putTarget,
                            pageId: item.pageData[0]?.id,
                            campaign,
                            adgroup: JSON.stringify(newAdgroup),
                            adcreative: JSON.stringify(newAdcreative),
                            material: JSON.stringify(newMaterial)
                        }
                    } else {
                        return item
                    }
                })
                ajaxArr.push(setCopyPlanApi({ planCreateLogId: item.id, begin_time: moment(begin_time).unix(), end_time: moment(end_time).unix(), taskName: "批量更换落地页-" + index + moment().unix(), copy_count: planDtos?.length, planDtos }))
            })
            Promise.all(ajaxArr).then((res: any) => {
                setLoading(false)
                if (res[res.length - 1]?.code === 200) {
                    // window.location.href = '/#/launchSystem/launchManage/taskList'
                    ajax && ajax?.refresh()
                    hideHandle && hideHandle()
                    clearSelect && clearSelect([])
                } else if (res[res.length - 1]?.code === 1003 && res[res.length - 1]?.data?.base64) {
                    setAuthData(res?.data)
                }
            })
        } else {
            let { planName, putLocation, putTarget, adcreative, adgroup, campaign, material } = planInfo
            let newAdgroup = JSON.parse(adgroup)
            let newAdcreative = JSON.parse(adcreative)
            let newMaterial = JSON.parse(material)
            newAdgroup = {
                ...newAdgroup,
                begin_date: begin_time,
                end_date: end_time
            }
            let planDtos: any = oriData?.map((item: OriDataProps) => {
                if ([311, 641, 642, 643, 618, 1465, 1480].includes(posType)) {
                    newAdcreative = {
                        ...newAdcreative,
                        adcreative_elements: {
                            ...newAdcreative.adcreative_elements,
                            title: item.desc
                        }
                    }
                    newMaterial = {
                        ...newMaterial,
                        page_name: item.pageData[0]?.name
                    }
                    return {
                        posType,
                        content: item.desc,
                        planName,
                        putLocation,
                        putTarget,
                        pageId: item.pageData[0]?.id,
                        campaign,
                        adgroup: JSON.stringify(newAdgroup),
                        adcreative: JSON.stringify(newAdcreative),
                        material: JSON.stringify(newMaterial)
                    }
                } else if ([1707, 1708].includes(posType)) {
                    newAdcreative = {
                        ...newAdcreative,
                        adcreative_elements: {
                            ...newAdcreative.adcreative_elements,
                            title: item?.title,
                            description: item?.desc
                        },
                        page_spec: {
                            ...newAdcreative.page_spec,
                            override_canvas_head_option: item?.override_canvas_head_option
                        }
                    }
                    if (item?.override_canvas_head_option === 'OPTION_KEEP_DIFFERENT') {
                        newMaterial = {
                            ...newMaterial,
                            page_name: item?.pageData[0].name,
                            url: item?.imageUrl,
                            type: posType === 1707 ? 'image' : 'video'
                        }
                    } else {
                        newMaterial = {
                            page_name: item?.pageData[0].name
                        }
                    }
                    let url = item.imageUrl
                    if (item.override_canvas_head_option !== 'OPTION_KEEP_DIFFERENT') {
                        url = item.pageData[0]?.thumbUrl
                    }
                    return {
                        posType,
                        content: item.desc,
                        title: item.title,
                        type: posType === 1707 ? 'image' : 'video',
                        url,
                        planName,
                        putLocation,
                        putTarget,
                        pageId: item.pageData[0]?.id,
                        campaign,
                        adgroup: JSON.stringify(newAdgroup),
                        adcreative: JSON.stringify(newAdcreative),
                        material: JSON.stringify(newMaterial)
                    }
                } else if (posType === 928 || posType === 929) {
                    let adcreative_elements = newAdcreative.adcreative_elements
                    let lbt = {}
                    if (item?.left_bottom_txt) {
                        lbt = { left_bottom_txt: item?.left_bottom_txt }
                    } else {
                        delete adcreative_elements.left_bottom_txt
                    }

                    if (posType === 928) {
                        let info_bar_spec = {}
                        info_bar_spec = {
                            info_bar_type: item?.infoBarType,
                            info_bar_description: item?.infoBarType === 'INFO_BAR_TYPE_HEAD' ? "" : item?.infoBarDescription
                        }
                        newAdcreative = {
                            ...newAdcreative,
                            adcreative_elements: {
                                ...adcreative_elements,
                                title: item?.title,
                                description: item?.desc,
                                caption: item?.caption,
                                info_bar_spec: {
                                    ...adcreative_elements?.info_bar_spec,
                                    ...info_bar_spec
                                },
                                ...lbt
                            }
                        }
                    } else {
                        newAdcreative = {
                            ...newAdcreative,
                            adcreative_elements: {
                                ...adcreative_elements,
                                title: item?.title,
                                description: item?.desc,
                                caption: item?.caption,
                                ...lbt
                            }
                        }
                    }

                    newMaterial = {
                        ...newMaterial,
                        page_name: item?.pageData[0].name,
                        url: item?.imageUrl
                    }
                    let descList = []
                    descList.push(item?.desc)
                    descList.push(item?.caption)
                    item?.left_bottom_txt && (descList.push(item?.left_bottom_txt))
                    return {
                        posType,
                        title: item.title,
                        content: posType === 928 && item?.infoBarType === 'INFO_BAR_TYPE_TITLE' ? item?.infoBarDescription : '',
                        type: posType === 929 ? 'video' : 'image',
                        descList,
                        url: item?.imageUrl,
                        planName,
                        putLocation,
                        putTarget,
                        pageId: item.pageData[0]?.id,
                        campaign,
                        adgroup: JSON.stringify(newAdgroup),
                        adcreative: JSON.stringify(newAdcreative),
                        material: JSON.stringify(newMaterial)
                    }
                } else {
                    return item
                }
            })
            setCopyPlanApi({ planCreateLogId, begin_time: moment(begin_time).unix(), end_time: moment(end_time).unix(), taskName: "批量更换落地页-" + moment().unix(), copy_count: planDtos?.length, planDtos }).then(res => {
                setLoading(false)
                if (res.code === 200) {
                    // window.location.href = '/#/launchSystem/launchManage/taskList'
                    ajax && ajax?.refresh()
                    hideHandle && hideHandle()
                    clearSelect && clearSelect([])
                } else if (res?.code === 1003 && res?.data?.base64) {
                    setAuthData(res?.data)
                }
            })
        }
    }, [oriData, begin_time, end_time, planInfo, authData, defaultValue, posType, loading])

    // 不可选择日期
    function disabledDate(current: any) {
        return current && current < moment().subtract(1, 'day') || current > (moment().add(1, 'year').startOf('day'))
    }

    // 结束日期不可选择日期
    const disabledEndDate = useCallback((current: any) => {
        if (begin_time) {
            return current && current < moment(begin_time) || current < moment().subtract(1, 'day') || current > (moment().add(1, 'year').startOf('day'))
        } else {
            return current && current < moment().subtract(1, 'day') || current > (moment().add(1, 'year').startOf('day'))
        }
    }, [begin_time])

    // 计算desc字数
    const descNum = (desc: string | undefined): number => {
        if (desc) {
            let length = desc?.length
            let text = desc?.replace(/[\x00-\xff]/g, '')
            return text?.length + Number(((length - text?.length) / 2).toFixed())
        } else {
            return 0
        }
    }
    // 新增创意
    const addOri = useCallback(() => {
        let newOriData = [...oriData]
        if ([311, 641, 642, 643, 618, 1465, 1480].includes(posType)) {
            newOriData.push({ desc: "", pageData: [], isOpen: true })
        } else if ([1707, 1708].includes(posType)) {
            newOriData.push({ desc: "", title: "", imageUrl: '', override_canvas_head_option: 'OPTION_CANVAS_OVERRIDE_CREATIVE', isCanvasTop: false, pageData: [], isOpen: true })
        } else if (posType === 928) {
            newOriData.push({ title: "", infoBarType: 'INFO_BAR_TYPE_HEAD', infoBarDescription: '', desc: "", caption: "", left_bottom_txt: "", imageUrl: "", pageData: [], isOpen: true })
        } else if (posType === 929) {
            newOriData.push({ title: "", desc: "", caption: "", left_bottom_txt: "", imageUrl: "", pageData: [], isOpen: true })
        }
        setOriData(newOriData)
    }, [oriData, posType])

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

    /** 弹窗返回设置图片 */
    const setImg = useCallback((value: any[]) => {
        if (clickNum !== -1 && value?.length > 0) {
            let data = oriData[clickNum]
            data = { ...data, imageUrl: value[0].content }
            oriData[clickNum] = { ...data }
            setOriData([...oriData])
        }
    }, [oriData, clickNum])

    /** 选择图片 */
    const selectImg = useCallback((imageUrl: string | undefined, index: number) => {
        if (imageUrl) {
            setSliderImgContent([{ content: imageUrl }])
        }
        setClickNum(index)
        setSelectImgVisible(true)
    }, [selectImgVisible, clickNum, sliderImgContent])
    /** 设置参数 */
    const setParams = useCallback((params: string, value: any, index: number, i?: number) => {
        let data: any = oriData[index]
        if (params === "cardInfoDesc" && (i === 0 || i)) {
            data[params][i] = value
        } else {
            if (params === 'headDescType' && value === 1) {
                data.description = ''
            }
            data[params] = value
        }
        oriData[index] = { ...data }
        setOriData([...oriData])
    }, [oriData])

    // 设置落地页
    const setPageData = (data: any[]) => {
        let dataOri = oriData[clickNum]
        if (posType === 1707) { // 1480
            let isCanvasTop = getIsCanvasTop(data[0], posType)
            if (isCanvasTop) {
                dataOri = { ...dataOri, pageData: data, isCanvasTop, override_canvas_head_option: "OPTION_KEEP_DIFFERENT" }
            } else {
                dataOri = { ...dataOri, pageData: data, isCanvasTop }
            }
        } else {
            dataOri = { ...dataOri, pageData: data }
        }
        oriData[clickNum] = { ...dataOri }
        setOriData([...oriData])
    }
    return <Modal
        bodyStyle={{ height: 600, overflowY: 'auto' }}
        title="批量更换落地页"
        visible={visible}
        onCancel={hideHandle}
        onOk={handleOk}
        confirmLoading={setCopyPlan.loading || loading}
        width={1000}
        className={style1.batchCopy}
        maskClosable={false}
    >
        {/* 授权登录 */}
        <AdLogin onClose={() => { setAuthData({ base64: '', code: '' }) }} value={authData} onChange={() => { setAuthData({ base64: '', code: '' }); message.success('再次点击按钮提交') }} />
        {/* 选择文案 */}
        {clerkAideVisible && <ClerkAide
            fieldType={fieldType}
            visible={clerkAideVisible}
            hideModel={() => { setClerkAideVisible(false) }}
            onChange={(value1, value2) => {
                if (fieldType === 'one') {
                    if (clickNum !== -1) {
                        let data = oriData[clickNum]
                        data = { ...data, desc: value1 }
                        oriData[clickNum] = { ...data }
                        setOriData([...oriData])
                    }
                } else {
                    if (clickNum !== -1) {
                        let data = oriData[clickNum]
                        data = { ...data, title: value1, desc: value2 }
                        oriData[clickNum] = { ...data }
                        setOriData([...oriData])
                    }
                }

            }}
        />}
        {/* 选择落地页 */}
        {pageShow && clickNum !== -1 && <SelectPage
            account={accout}
            type={posType.toString()}
            show={pageShow}
            onClose={() => { setPageShow(false) }}
            onChange={(data) => {
                setPageShow(false);
                if (clickNum !== -1) {
                    let dataOri = oriData[clickNum]
                    if (dataOri?.pageData?.length === 0) {
                        setPageData(data)
                    } else if (dataOri?.pageData[0]?.id === data[0]?.id) {

                    } else {
                        setPageData(data)
                    }
                }
            }}
            pageData={oriData[clickNum]?.pageData}
        ></SelectPage>}

        {/* 选择图片 视频 */}
        {selectImgVisible && <SelectImg visible={selectImgVisible} hideModel={() => { setSelectImgVisible(false) }} num={1} onChange={setImg} listParams={imgSize} sliderImgContent={sliderImgContent}></SelectImg>}

        {
            Array.isArray(defaultValue) && <strong style={{ color: 'red', marginBottom: '15px', display: 'block' }}>注：叉乘一定要确保所有账号都存在对应的推广页，否则会出错失败<br />本次操作所有选择的计划都会执行一次创意的配置，即选中10条计划，每条计划都会建一条创意1的配置计划，当有新增创意2时，10条计划各自再创建一次创意2的配置，依次类推！！！</strong>
        }
        <div className={style1.info}>
            <div className={style1.items}>
                <div className={style1.item}>
                    <label className={style1.label}>投放计划名称:</label>
                    <span>{planInfo?.planName}</span>
                </div>
                <div className={style1.item}>
                    <label className={style1.label}>投放号:</label>
                    <span>{mpAccountInfo?.channel?.accountName}——{mpAccountInfo?.uname}</span>
                </div>
            </div>
            <div className={style1.items}>
                <div className={style1.item}>
                    <label className={style1.label}>流量位:</label>
                    <span>{dic.siteSet[planInfo?.putLocation]}</span>
                </div>
                <div className={style1.item}>
                    <label className={style1.label}>推广目标:</label>
                    <span>{planInfo?.putTarget === 'PROMOTED_OBJECT_TYPE_WECHAT_OFFICIAL_ACCOUNT' ? '公众号推广' : '视频号推广'}</span>
                </div>
            </div>
        </div>

        <div className={style1.title}>排期修改</div>
        <BcForm name='开始与结束日期' >
            <div style={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center' }}>
                <DatePicker
                    className={style.picker}
                    disabledDate={disabledDate}
                    value={begin_time ? moment(begin_time) : undefined}
                    onChange={(e: moment.Moment | null) => {
                        setBegin_time(e ? moment(e).format('YYYY-MM-DD') : "")
                    }}
                    allowClear={false}
                    placeholder="开始日期"
                />
                <span style={{ margin: '0 10px' }}>-</span>
                <DatePicker
                    className={style.picker}
                    disabledDate={disabledEndDate}
                    value={end_time ? moment(end_time) : undefined}
                    onChange={(e: moment.Moment | null) => {
                        setEnd_time(e ? moment(e).format('YYYY-MM-DD') : "")
                    }}
                    allowClear={false}
                    placeholder="结束日期"
                />
            </div>
        </BcForm>

        <div className={style1.title}>创意基本信息</div>
        {oriData?.length > 0 && oriData?.map((item: OriDataProps, index: number) => {
            return <div className={style1.originality} key={index}>
                <div className={style1.head}>
                    <div>创意{index + 1}</div>
                    <div>
                        {oriData?.length > 1 && <Popconfirm placement="top" title="是否放弃该创意" onConfirm={() => { delOri(index) }} okText="Yes" cancelText="No">
                            <Button type="link" size='small' className={style1.clear} style={{ color: 'red' }}><DeleteOutlined /></Button>
                        </Popconfirm>}
                        <Button
                            type="link"
                            size='small'
                            style={{ color: '#000' }}
                            onClick={() => {
                                let data = oriData[index]
                                data = { ...data, isOpen: !data.isOpen }
                                oriData[index] = { ...data }
                                setOriData([...oriData])
                            }}
                        >
                            {item?.isOpen ? <UpOutlined /> : <DownOutlined />}
                        </Button>
                    </div>
                </div>
                {item?.isOpen && <>
                    <div style={{ height: 20 }}></div>
                    {[311, 641, 642, 643, 618, 1465, 1480].includes(posType) ? <>
                        <BcForm name="外层文案" flex='flex-start'>
                            <div className={style.flexStart}>
                                <div>
                                    <Input.TextArea
                                        value={item.desc}
                                        onChange={(e) => {
                                            let data = oriData[index]
                                            data = { ...data, desc: e.target.value?.replace(/\r|\n$/ig, "") }
                                            oriData[index] = { ...data }
                                            setOriData([...oriData])
                                        }}
                                        className={style.textArea}
                                        style={{ width: 300 }}
                                        placeholder="请输入文案(可直接编辑，或点击文案助手选择合适文案)"
                                        autoSize={{ minRows: 2, maxRows: 4 }}
                                    />
                                    <div className={style.maxLength}>
                                        <div style={{ color: 'rgb(242, 77, 77)', fontSize: 12 }}>{descNum(item?.desc) > 40 && '广告文案不得超过40字，请缩短输入内容'}</div>
                                        <div>{descNum(item?.desc)}/40</div>
                                    </div>
                                </div>
                                <Button onClick={() => { setFieldType('one'); setClerkAideVisible(true); setClickNum(index) }}>文案助手</Button>
                            </div>
                        </BcForm>
                    </> : [1707, 1708].includes(posType) ? <>
                        <BcForm name="原生推广页">
                            <div className={style.flexStart} style={{ alignItems: 'center' }}>
                                {item.pageData.length > 0 && <div>{item.pageData[0]?.name}</div>}
                                <Button onClick={() => { setPageShow(true); setClickNum(index) }}>选择原生推广页</Button>
                            </div>
                        </BcForm>
                        {item.pageData.length > 0 && <>
                            <BcForm name="原生推广页顶部素材预览" flex='flex-start'>
                                <div className={style.flexStart}>
                                    {item?.pageData[0]?.topCanvasType === 101 ?
                                        <Space>
                                            {JSON.parse(item?.pageData[0]?.pageContextList[0]?.pageContextList)[0]?.componentGroupList?.componentGroup?.map((item: any, index: number) => {
                                                return <Image width={80} src={item?.componentItem?.pureImageUrl} style={{ borderRadius: 8 }} key={index} />
                                            })}
                                        </Space> :
                                        item?.pageData[0]?.topCanvasType === 41 ?
                                            <Image width={80} src={item.pageData[0]?.thumbUrl} style={{ borderRadius: 8 }} />
                                            :
                                            <Image width={80} src={item.pageData[0]?.thumbUrl} style={{ borderRadius: 8 }} />}
                                </div>
                            </BcForm>

                            <BcForm name="外层素材">
                                <Radio.Group
                                    className={style.radio}
                                    value={item?.override_canvas_head_option}
                                    onChange={(e) => {
                                        let data = oriData[index]
                                        data = { ...data, override_canvas_head_option: e.target.value }
                                        oriData[index] = { ...data }
                                        setOriData([...oriData])
                                    }}
                                >
                                    <Radio value="OPTION_CANVAS_OVERRIDE_CREATIVE" disabled={item?.isCanvasTop}>使用原生推广页顶部素材</Radio>
                                    <Radio value="OPTION_KEEP_DIFFERENT">上传素材</Radio>
                                </Radio.Group>
                            </BcForm>
                            {
                                item?.override_canvas_head_option === "OPTION_KEEP_DIFFERENT" && <BcForm name="外层图片" flex="flex-start">
                                    {posType === 1708 ? <>
                                        <Button onClick={() => { selectImg(item?.imageUrl, index) }}>{item?.imageUrl ? '修改视频' : '上传视频'}</Button>
                                        <div style={{ marginTop: 8, fontSize: 13, color: '#8f9196' }}>视频大小1280×720像素</div>
                                        {item?.imageUrl && <div style={{ marginTop: 20 }}><video width={100} src={item?.imageUrl} style={{ borderRadius: 8, overflow: 'hidden' }} /></div>}
                                    </> : <div>
                                        <Button onClick={() => { selectImg(item?.imageUrl, index) }}>{item?.imageUrl ? '修改图片' : '上传图片'}</Button>
                                        <div style={{ marginTop: 8, fontSize: 13, color: '#8f9196' }}>图片大小800像素x450像素，不超过300KB</div>
                                        {item?.imageUrl && <div style={{ marginTop: 20 }}><Image width={100} src={item?.imageUrl} style={{ borderRadius: 8, overflow: 'hidden' }} /></div>}
                                    </div>}

                                </BcForm>
                            }
                        </>}

                        <BcForm name="外层文案标题" flex='flex-start'>
                            <div className={style.flexStart}>
                                <div>
                                    <Input.TextArea
                                        value={item?.title}
                                        onChange={(e) => {
                                            let data = oriData[index]
                                            data = { ...data, title: e.target.value?.replace(/\r|\n/ig, "") }
                                            oriData[index] = { ...data }
                                            setOriData([...oriData])
                                        }}
                                        className={style.textArea}
                                        style={{ width: 300 }}
                                        placeholder="请填广告标题"
                                        autoSize={{ minRows: 1, maxRows: 2 }}
                                    />
                                    <div className={style.maxLength}>
                                        <div style={{ color: 'rgb(242, 77, 77)', fontSize: 12 }}>{descNum(item?.title) > 10 && '广告文案不得超过10字，请缩短输入内容'}</div>
                                        <div>{descNum(item?.title)}/10</div>
                                    </div>
                                </div>
                                <Button onClick={() => { setFieldType('two'); setClerkAideVisible(true); setClickNum(index) }}>文案助手</Button>
                            </div>
                        </BcForm>
                        <BcForm name="外层文案" flex='flex-start'>
                            <div className={style.flexStart}>
                                <div>
                                    <Input.TextArea
                                        value={item.desc}
                                        onChange={(e) => {
                                            let data = oriData[index]
                                            data = { ...data, desc: e.target.value?.replace(/\r|\n$/ig, "") }
                                            oriData[index] = { ...data }
                                            setOriData([...oriData])
                                        }}
                                        className={style.textArea}
                                        style={{ width: 300 }}
                                        placeholder="请输入文案(可直接编辑，或点击文案助手选择合适文案)"
                                        autoSize={{ minRows: 2, maxRows: 4 }}
                                    />
                                    <div className={style.maxLength}>
                                        <div style={{ color: 'rgb(242, 77, 77)', fontSize: 12 }}>{descNum(item?.desc) > 30 && '广告文案不得超过40字，请缩短输入内容'}</div>
                                        <div>{descNum(item?.desc)}/30</div>
                                    </div>
                                </div>
                            </div>
                        </BcForm>
                    </> : posType === 928 || posType === 929 ? <>
                        {posType === 929 ? <BcForm name="外层素材" flex="flex-start">
                            <div>
                                <Button onClick={() => { selectImg(item?.imageUrl, index) }}>{item?.imageUrl ? '修改视频' : '上传视频'}</Button>
                                <div style={{ marginTop: 8, fontSize: 13, color: '#8f9196' }}>视频尺寸960x540，不超过100MB，视频时长6-30秒</div>
                                {item?.imageUrl && <div style={{ marginTop: 20 }}><video width={100} src={item?.imageUrl} style={{ borderRadius: 8, overflow: 'hidden' }} /></div>}
                            </div>
                        </BcForm> : <BcForm name="外层素材" flex="flex-start">
                            <div>
                                <Button onClick={() => { selectImg(item?.imageUrl, index) }}>{item?.imageUrl ? '修改图片' : '上传图片'}</Button>
                                <div style={{ marginTop: 8, fontSize: 13, color: '#8f9196' }}>图片大小960像素x540像素，不超过80KB</div>
                                {item?.imageUrl && <div style={{ marginTop: 20 }}><Image width={100} src={item?.imageUrl} style={{ borderRadius: 8, overflow: 'hidden' }} /></div>}
                            </div>
                        </BcForm>}

                        {
                            posType === 928 && <>
                                <BcForm name="卡片文案" flex="flex-start">
                                    <Radio.Group className={style.radio} value={item?.infoBarType} onChange={(e) => { setParams('infoBarType', e.target.value, index) }}>
                                        <Radio value="INFO_BAR_TYPE_HEAD">头像昵称型</Radio>
                                        <Radio value="INFO_BAR_TYPE_TITLE">文案型</Radio>
                                    </Radio.Group>
                                </BcForm>
                                {item?.infoBarType === 'INFO_BAR_TYPE_TITLE' && <BcForm name="信息栏文案">
                                    <Input.TextArea showCount maxLength={14} style={{ width: 300 }} className={style.textArea} value={item?.infoBarDescription} onChange={(e) => { setParams('infoBarDescription', e.target.value?.replace(/\r|\n/ig, ""), index) }} autoSize placeholder="请输入" />
                                </BcForm>}
                            </>
                        }

                        <BcForm name="图文标题" flex="flex-start">
                            <Input.TextArea showCount maxLength={12} value={item?.title} onChange={(e) => { setParams('title', e.target.value?.replace(/\r|\n/ig, ""), index) }} autoSize />
                        </BcForm>
                        <BcForm name="广告文案" flex="flex-start">
                            <>
                                <Input.TextArea showCount maxLength={16} value={item?.desc} onChange={(e) => { setParams('desc', e.target.value?.replace(/\r|\n/ig, ""), index) }} autoSize placeholder="请输入首行文案" />
                                <Input.TextArea showCount maxLength={16} value={item?.caption} onChange={(e) => { setParams('caption', e.target.value?.replace(/\r|\n/ig, ""), index) }} autoSize placeholder="次行文案" />
                                <Input.TextArea showCount maxLength={16} value={item?.left_bottom_txt} onChange={(e) => { setParams('left_bottom_txt', e.target.value?.replace(/\r|\n/ig, ""), index) }} autoSize placeholder="请输入第三行文案（选填）" />
                            </>
                        </BcForm>
                    </> : <></>}

                    {posType !== 1707 && <>
                        <BcForm name="原生推广页">
                            <div className={style.flexStart} style={{ alignItems: 'center' }}>
                                {item.pageData.length > 0 && <div>{item.pageData[0]?.name}</div>}
                                <Button onClick={() => { setPageShow(true); setClickNum(index) }}>选择原生推广页</Button>
                            </div>
                        </BcForm>
                        {item.pageData.length > 0 && <BcForm name="原生推广页顶部素材预览" flex='flex-start'>
                            <div className={style.flexStart}>
                                {item?.pageData[0]?.topCanvasType === 101 ?
                                    <Space>
                                        {JSON.parse(item?.pageData[0]?.pageContextList[0]?.pageContextList)[0]?.componentGroupList?.componentGroup?.map((item: any, index: number) => {
                                            return <Image width={80} src={item?.componentItem?.pureImageUrl} style={{ borderRadius: 8 }} key={index} />
                                        })}
                                    </Space> :
                                    item?.pageData[0]?.topCanvasType === 41 ?
                                        <Image width={80} src={item.pageData[0]?.thumbUrl} style={{ borderRadius: 8 }} />
                                        :
                                        <Image width={80} src={item.pageData[0]?.thumbUrl} style={{ borderRadius: 8 }} />}
                            </div>
                        </BcForm>}
                    </>}
                </>}
            </div>
        })}
        <Button type="link" style={{ padding: '4px 0', marginTop: 10 }} onClick={addOri}><PlusOutlined /> 新增创意</Button>
    </Modal>
}

export default React.memo(BatchPageCopy)