import { Button, DatePicker, Input, InputNumber, Modal, Radio, Image, message, Space, Collapse } 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 AdLogin from '@/pages/launchSystem/launchManage/components/adLogin'
import { CaretRightOutlined } from "@ant-design/icons";
import { setCopyPlanApi } from '@/services/operating/adNewAuthorize'
import SelectImg from '@/pages/launchSystem/launchManage/components/selectImg'
import dic from "../createPlan/components/Dic";

/** 
 * 批量复制
 * 单独落地页
 *  */
interface Props {
    visible: boolean,
    defaultValue: any,
    ajax?: any,
    onChange?: () => void,
    onClose?: () => void,
    clearSelect?: (d: any) => void
}
type ShortVideoProps = {
    media_id: string,
    thumb_height: number,
    thumb_width: number,
    video_duration: number,
    video_url: string
}
function BatchCopys(props: Props) {
    const { visible, defaultValue, onClose, ajax, clearSelect } = props

    const { planInfo } = Array.isArray(defaultValue) ? defaultValue[0] : defaultValue
    // 数据开始
    const [posType, setPosType] = useState<number>(311)
    const [loading, setLoading] = useState<boolean>(false)
    const [clerkAideVisible, setClerkAideVisible] = useState<boolean>(false)
    const [pageShow, setPageShow] = useState<boolean>(false) // 选择落地弹窗
    const [infoIndex, setInfoIndex] = useState<number>(-1)
    const [begin_time, setBegin_time] = useState<string>('') // 开始时间
    const [end_time, setEnd_time] = useState<string>('') // 结束时间
    const [copy_count, setCopy_count] = useState<number>(1)  // 数量
    const [authData, setAuthData] = useState<{ base64: string, code: string }>({ base64: '', code: '' })
    const [basicInfo, setBasicInfo] = useState<{
        desc?: string,     // 文案信息
        imageUrl?: string, // 广告位图片
        shortVideo?: ShortVideoProps,  // 广告位视频
        headDescType?: number, // 信息栏类型
        description?: string, // 信息栏文案
        title?: string, // 图文标题
        cardInfoDesc?: string[], // 广告文案
        pageData: any[],
        planName: string,
        accountName: string,
        putLocation: string,
        putTarget: string,
        taskName: string,
        posType: number,
        crtSize?: number,
        caption?: string, // 次行文案
        left_bottom_txt?: string,  // 第三行文案
        override_canvas_head_option?: string, // 是否使用头部信息
        isCanvasTop?: boolean,  // 是否不能使用头部图片
        accout?: { accountId?: number, accountType?: 'mp' | 'adq' }
        infoBarType?: 'INFO_BAR_TYPE_HEAD' | 'INFO_BAR_TYPE_TITLE',
        infoBarDescription?: string
    }[]>([])
    const [selectImgVisible, setSelectImgVisible] = useState<boolean>(false)   // 选择图片弹窗
    const [sliderImgContent, setSliderImgContent] = useState<{ content: string }[]>([])  // 保存回填数据
    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 => {
        if (data && typeof data === 'object') {
            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
                    if (initWidth != 1280 || initHeight != 720) {
                        return true
                    }
                }
                return false
            } else {
                return false
            }
        } else {
            return false
        }
    }
    // 首次进来
    useEffect(() => {
        if (Array.isArray(defaultValue) && defaultValue?.length > 0) {
            setPosType(planInfo?.posType)
            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
            }
            let { adgroup } = planInfo
            if (adgroup) {
                let a = JSON.parse(adgroup)
                setBegin_time(a.begin_date)
                setEnd_time(a.end_date)
            }
            if ([311, 641, 642, 643, 618, 1465, 1480].includes(planInfo?.posType)) {
                setBasicInfo(() => defaultValue?.map((item: any) => {
                    const { planInfo, mpAccountInfo } = item
                    let { adcreative, sharePageInfo } = planInfo
                    let a = JSON.parse(adcreative)
                    let { adcreative_elements } = a
                    return { desc: adcreative_elements.title, posType: planInfo.posType, accout: { accountType: 'mp', accountId: mpAccountInfo?.id }, pageData: sharePageInfo ? [sharePageInfo] : [], planName: planInfo?.planName, accountName: mpAccountInfo?.channel?.accountName + '—' + mpAccountInfo?.uname, putLocation: planInfo?.putLocation, putTarget: planInfo?.putTarget, taskName: planInfo?.taskInfo?.taskName }
                }))
            } else if ([1707, 1708].includes(planInfo?.posType)) {
                setBasicInfo(() => defaultValue?.map((item: any) => {
                    const { planInfo, mpAccountInfo } = item
                    let { adcreative, sharePageInfo, material } = planInfo
                    let a = JSON.parse(adcreative)
                    let b = JSON.parse(material)
                    let { adcreative_elements, page_spec } = a
                    let isCanvasTop = getIsCanvasTop(sharePageInfo, planInfo?.posType)
                    return { title: adcreative_elements.title, desc: adcreative_elements.description, posType: planInfo.posType, accout: { accountType: 'mp', accountId: mpAccountInfo?.id }, imageUrl: b.url, override_canvas_head_option: page_spec?.override_canvas_head_option, pageData: sharePageInfo ? [sharePageInfo] : [], isCanvasTop, planName: planInfo?.planName, accountName: mpAccountInfo?.channel?.accountName + '—' + mpAccountInfo?.uname, putLocation: planInfo?.putLocation, putTarget: planInfo?.putTarget, taskName: planInfo?.taskInfo?.taskName }
                }))
            } else if (planInfo?.posType === 928 || planInfo?.posType === 929) {
                setBasicInfo(() => defaultValue?.map((item: any) => {
                    const { planInfo, mpAccountInfo } = item
                    let { adcreative, sharePageInfo, material } = planInfo
                    let a = JSON.parse(adcreative)
                    let b = JSON.parse(material)
                    let { adcreative_elements } = a
                    if (planInfo?.posType === 928) {
                        const { info_bar_spec } = adcreative_elements
                        return { title: adcreative_elements.title, infoBarType: info_bar_spec?.info_bar_type, infoBarDescription: info_bar_spec.info_bar_description, posType: planInfo.posType, accout: { accountType: 'mp', accountId: mpAccountInfo?.id }, desc: adcreative_elements.description, caption: adcreative_elements.caption, left_bottom_txt: adcreative_elements?.left_bottom_txt, imageUrl: b.url, pageData: sharePageInfo ? [sharePageInfo] : [], planName: planInfo?.planName, accountName: mpAccountInfo?.channel?.accountName + '—' + mpAccountInfo?.uname, putLocation: planInfo?.putLocation, putTarget: planInfo?.putTarget, taskName: planInfo?.taskInfo?.taskName }
                    }
                    return { title: adcreative_elements.title, posType: planInfo.posType, accout: { accountType: 'mp', accountId: mpAccountInfo?.id }, desc: adcreative_elements.description, caption: adcreative_elements.caption, left_bottom_txt: adcreative_elements?.left_bottom_txt, imageUrl: b.url, pageData: sharePageInfo ? [sharePageInfo] : [], planName: planInfo?.planName, accountName: mpAccountInfo?.channel?.accountName + '—' + mpAccountInfo?.uname, putLocation: planInfo?.putLocation, putTarget: planInfo?.putTarget, taskName: planInfo?.taskInfo?.taskName }
                }))
            }
        }
    }, [defaultValue])

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

    const handleOk = useCallback(() => {
        if (basicInfo?.length > 0) {
            if (!basicInfo?.every((item: { pageData: any[] }) => item?.pageData && item?.pageData?.length > 0)) {
                message.error('请选择原生推广页')
                return
            }
            if ([311, 641, 642, 643, 618, 1465, 1480].includes(posType)) {
                if (!basicInfo?.every((item: { desc?: string }) => item?.desc)) {
                    message.error('请完善外层文案标题')
                    return
                }
            } else if ([1707, 1708].includes(posType)) {
                if (!basicInfo?.every((item: { title?: string }) => item?.title)) {
                    message.error('请完善外层文案标题')
                    return
                }
                if (!basicInfo?.every((item: { desc?: string }) => item?.desc)) {
                    message.error('请完善外层文案')
                    return
                }
                if (!basicInfo?.every((item: { imageUrl?: string, override_canvas_head_option?: string }) => item?.override_canvas_head_option === "OPTION_KEEP_DIFFERENT" ? item?.imageUrl : true)) {
                    message.error('请完善外层图片')
                    return
                }
            } else if (posType === 928 || posType === 929) {
                if (!basicInfo?.every((item: { title?: string }) => item?.title)) {
                    message.error('请完善图文标题')
                    return
                }
                if (!basicInfo?.every((item: { desc?: string }) => item?.desc)) {
                    message.error('请完善首行文案')
                    return
                }
                if (!basicInfo?.every((item: { caption?: string }) => item?.caption)) {
                    message.error('请完善次行文案')
                    return
                }
                if (!basicInfo?.every((item: { imageUrl?: string }) => item?.imageUrl)) {
                    message.error('请完善外层素材')
                    return
                }
                if (posType === 928 && !basicInfo?.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 planDto: any = {}
                    if ([311, 641, 642, 643, 618, 1465, 1480].includes(basicInfo[index].posType)) {
                        newAdcreative = {
                            ...newAdcreative,
                            adcreative_elements: {
                                ...newAdcreative.adcreative_elements,
                                title: basicInfo[index].desc
                            }
                        }
                        newMaterial = {
                            ...newMaterial,
                            page_name: basicInfo[index].pageData[0]?.name
                        }
                        planDto = { posType, content: basicInfo[index].desc, putLocation, planName, putTarget, pageId: basicInfo[index].pageData[0]?.id, campaign, adgroup: JSON.stringify(newAdgroup), adcreative: JSON.stringify(newAdcreative), material: JSON.stringify(newMaterial) }
                    } else if ([1707, 1708].includes(basicInfo[index].posType)) {
                        newAdcreative = {
                            ...newAdcreative,
                            adcreative_elements: {
                                ...newAdcreative.adcreative_elements,
                                title: basicInfo[index]?.title,
                                description: basicInfo[index]?.desc
                            },
                            page_spec: {
                                ...newAdcreative.page_spec,
                                override_canvas_head_option: basicInfo[index]?.override_canvas_head_option
                            }
                        }
                        if (basicInfo[index]?.override_canvas_head_option === 'OPTION_KEEP_DIFFERENT') {
                            newMaterial = {
                                ...newMaterial,
                                page_name: basicInfo[index]?.pageData[0].name,
                                url: basicInfo[index]?.imageUrl
                            }
                        } else {
                            newMaterial = {
                                page_name: basicInfo[index]?.pageData[0].name
                            }
                        }
                        let url = basicInfo[index]?.imageUrl
                        if (basicInfo[index].override_canvas_head_option !== 'OPTION_KEEP_DIFFERENT') {
                            url = basicInfo[index]?.pageData[0]?.thumbUrl
                        }
                        planDto = { posType, content: basicInfo[index].desc, title: basicInfo[index].title, type: basicInfo[index].posType === 1707 ? 'image' : 'video', url, planName, putLocation, putTarget, pageId: basicInfo[index]?.pageData[0]?.id, campaign, adgroup: JSON.stringify(newAdgroup), adcreative: JSON.stringify(newAdcreative), material: JSON.stringify(newMaterial) }
                    } else if (basicInfo[index].posType === 928 || basicInfo[index].posType === 929) {
                        let adcreative_elements = newAdcreative.adcreative_elements
                        let lbt = {}
                        if (basicInfo[index]?.left_bottom_txt) {
                            lbt = { left_bottom_txt: basicInfo[index]?.left_bottom_txt }
                        } else {
                            delete adcreative_elements.left_bottom_txt
                        }
                        if (basicInfo[index].posType === 928) {
                            let info_bar_spec = {}
                            info_bar_spec = {
                                info_bar_type: basicInfo[index]?.infoBarType,
                                info_bar_description: basicInfo[index]?.infoBarType === 'INFO_BAR_TYPE_HEAD' ? "" : basicInfo[index]?.infoBarDescription
                            }
                            newAdcreative = {
                                ...newAdcreative,
                                adcreative_elements: {
                                    ...newAdcreative.adcreative_elements,
                                    title: basicInfo[index]?.title,
                                    description: basicInfo[index]?.desc,
                                    caption: basicInfo[index]?.caption,
                                    info_bar_spec: {
                                        ...adcreative_elements?.info_bar_spec,
                                        ...info_bar_spec
                                    },
                                    ...lbt
                                }
                            }
                        } else {
                            newAdcreative = {
                                ...newAdcreative,
                                adcreative_elements: {
                                    ...newAdcreative.adcreative_elements,
                                    title: basicInfo[index]?.title,
                                    description: basicInfo[index]?.desc,
                                    caption: basicInfo[index]?.caption,
                                    ...lbt
                                }
                            }
                        }

                        newMaterial = {
                            ...newMaterial,
                            page_name: basicInfo[index]?.pageData[0].name,
                            url: basicInfo[index]?.imageUrl
                        }
                        let descList = []
                        descList.push(basicInfo[index]?.desc)
                        descList.push(basicInfo[index]?.caption)
                        basicInfo[index]?.left_bottom_txt && (descList.push(basicInfo[index]?.left_bottom_txt))
                        planDto = { posType, title: basicInfo[index].title, content: basicInfo[index].posType === 928 && basicInfo[index].infoBarType === 'INFO_BAR_TYPE_TITLE' ? basicInfo[index].infoBarDescription : '', type: basicInfo[index].posType === 929 ? 'video' : 'image', descList, url: basicInfo[index]?.imageUrl, planName, putLocation, putTarget, pageId: basicInfo[index]?.pageData[0]?.id, campaign, adgroup: JSON.stringify(newAdgroup), adcreative: JSON.stringify(newAdcreative), material: JSON.stringify(newMaterial) }
                    }
                    let planDtos: any[] = Array(copy_count).fill('').map(() => {
                        return { ...planDto }
                    })
                    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 }))
                })
                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 {
            message.error('数据异常')
        }
    }, [begin_time, end_time, copy_count, planInfo, authData, defaultValue, basicInfo, loading, posType])


    // 计算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
        }
    }

    // 设置Desc
    const handleDesc = useCallback((value: string, index?: number) => {
        if (index === -1) {  // 选择文案
            let info = { ...basicInfo[infoIndex] }
            info.desc = value
            basicInfo[infoIndex] = info
        } else if (index || index === 0) { // 输入文案
            let info = { ...basicInfo[index] }
            info.desc = value
            basicInfo[index] = info
        }
        setBasicInfo(() => ([...basicInfo]))
    }, [basicInfo, infoIndex])

    // 设置落地页
    const handlePageData = useCallback((data: any[]) => {
        let info = { ...basicInfo[infoIndex] }
        if (info?.posType === 1707) { // 1480
            let isCanvasTop = getIsCanvasTop(data[0], info?.posType)
            if (isCanvasTop) {
                info = { ...info, pageData: data, isCanvasTop, override_canvas_head_option: "OPTION_KEEP_DIFFERENT" }
            } else {
                info = { ...info, pageData: data, isCanvasTop }
            }
        } else {
            info.pageData = data
        }
        basicInfo[infoIndex] = info
        setBasicInfo(() => ([...basicInfo]))
    }, [basicInfo, infoIndex])

    // 不可选择日期
    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])

    /** 弹窗返回设置图片 */
    const setImg = useCallback((value: any[]) => {
        if (infoIndex !== -1 && value?.length > 0) {
            let data = basicInfo[infoIndex]
            if (data.crtSize === 538) {
                data = { ...data, shortVideo: { video_url: value[0].content, thumb_width: 960, thumb_height: 540, video_duration: value[0].videoLength, media_id: value[0].mediaSize } }
            } else {
                data = { ...data, imageUrl: value[0].content }
            }
            basicInfo[infoIndex] = { ...data }
            setBasicInfo([...basicInfo])
        }
    }, [basicInfo, infoIndex])

    /** 选择图片 */
    const selectImg = useCallback((imageUrl: string | undefined, index: number) => {
        if (imageUrl) {
            setSliderImgContent([{ content: imageUrl }])
        }
        setInfoIndex(index)
        setSelectImgVisible(true)
    }, [selectImgVisible, infoIndex, sliderImgContent])

    /** 设置参数 */
    const setParams = useCallback((params: string, value: any, index: number, i?: number) => {
        let data: any = basicInfo[index]
        if (params === "cardInfoDesc" && (i === 0 || i)) {
            data[params][i] = value
        } else {
            if (params === 'headDescType' && value === 1) {
                data.description = ''
            }
            data[params] = value
        }
        basicInfo[index] = { ...data }
        setBasicInfo([...basicInfo])
    }, [basicInfo])

    return <Modal
        bodyStyle={{ height: 600, overflowY: 'auto' }}
        title="批量复制"
        visible={visible}
        onCancel={hideHandle}
        confirmLoading={loading}
        onOk={handleOk}
        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) => {
                let info = { ...basicInfo[infoIndex] }
                if (fieldType === 'one') {
                    info.desc = value1
                    basicInfo[infoIndex] = info
                } else {
                    info.title = value1
                    info.desc = value2
                    basicInfo[infoIndex] = info
                }
                setBasicInfo(() => ([...basicInfo]))
            }}
        ></ClerkAide>}
        {/* 选择原生推广页 */}
        {pageShow && <SelectPage
            account={basicInfo[infoIndex]?.accout}
            type={basicInfo[infoIndex]?.posType.toString()}
            show={pageShow}
            onClose={() => { setPageShow(false) }}
            onChange={(data) => {
                setPageShow(false);
                if (basicInfo[infoIndex]?.pageData?.length === 0) {
                    handlePageData(data)
                } else if (basicInfo[infoIndex]?.pageData[0]?.id === data[0]?.id) {

                } else {
                    handlePageData(data)
                }
            }}
            pageData={basicInfo[infoIndex]?.pageData}
        ></SelectPage>}

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

        {
            Array.isArray(defaultValue) && <div>
                <strong style={{ color: 'red', marginBottom: '15px', display: 'block' }}>注：叉乘一定要确保所有账号都存在对应的推广页，否则会出错失败<br />本次操作所有选择的计划不做修改都会保持原计划的日期，文案，推广页，单独展开修改的创意按修改的内容创建！！！</strong>
            </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>
        <BcForm name="选择数量" flex='flex-start'>
            <InputNumber min={1} max={100} value={copy_count} onChange={(e) => { setCopy_count(e) }} />
        </BcForm>
        <div className={style1.title}>创意基本信息</div>
        {
            basicInfo?.length > 0 && <Collapse
                bordered={false}
                className="coll"
                expandIcon={({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />}
            >
                {basicInfo?.map((item: { desc?: string, posType: number, caption?: string, infoBarType?: 'INFO_BAR_TYPE_HEAD' | 'INFO_BAR_TYPE_TITLE', infoBarDescription?: string, left_bottom_txt?: string, override_canvas_head_option?: string, isCanvasTop?: boolean, imageUrl?: string, headDescType?: number, description?: string, title?: string, cardInfoDesc?: string[], pageData: any[], planName: string, accountName: string, putLocation: string, putTarget: string, taskName: string, shortVideo?: ShortVideoProps }, index: number) => {
                    return <Collapse.Panel header={item.taskName} key={(index + 1).toString()}>
                        <div>
                            <div className={style1.info}>
                                <div className={style1.items}>
                                    <div className={style1.item}>
                                        <label className={style1.label}>投放计划名称:</label>
                                        <span>{item.planName}</span>
                                    </div>
                                    <div className={style1.item}>
                                        <label className={style1.label}>投放号:</label>
                                        <span>{item.accountName}</span>
                                    </div>
                                </div>
                                <div className={style1.items}>
                                    <div className={style1.item}>
                                        <label className={style1.label}>流量位:</label>
                                        <span>{dic.siteSet[item?.putLocation]}</span>
                                    </div>
                                    <div className={style1.item}>
                                        <label className={style1.label}>推广目标:</label>
                                        <span>{item?.putTarget === 'PROMOTED_OBJECT_TYPE_WECHAT_OFFICIAL_ACCOUNT' ? '公众号推广' : '视频号推广'}</span>
                                    </div>
                                </div>
                            </div>

                            {[311, 641, 642, 643, 618, 1465, 1480].includes(item?.posType) ? <>
                                <BcForm name="外层文案" flex='flex-start'>
                                    <div className={style.flexStart}>
                                        <div>
                                            <Input.TextArea
                                                value={item.desc}
                                                onChange={(e) => { handleDesc(e.target.value?.replace(/\r|\n$/ig, ""), index) }}
                                                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={() => { setClerkAideVisible(true); setInfoIndex(index); setFieldType('one') }}>文案助手</Button>
                                    </div>
                                </BcForm>
                            </> : [1707, 1708].includes(item?.posType) ? <>
                                <BcForm name="原生推广页">
                                    <div className={style.flexStart} style={{ alignItems: 'center' }}>
                                        {item?.pageData.length > 0 && <div>{item?.pageData[0]?.name}</div>}
                                        <Button onClick={() => { setPageShow(true); setInfoIndex(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, overflow: 'hidden' }} />
                                                        :
                                                        <Image width={80} src={item?.pageData[0]?.thumbUrl} style={{ borderRadius: 8, overflow: 'hidden' }} />}
                                            </div>
                                        </BcForm>

                                        <BcForm name="外层素材">
                                            <Radio.Group
                                                className={style.radio}
                                                value={item?.override_canvas_head_option}
                                                onChange={(e) => {
                                                    let data = { ...basicInfo[index] }
                                                    data = { ...data, override_canvas_head_option: e.target.value }
                                                    basicInfo[index] = { ...data }
                                                    setBasicInfo(() => ([...basicInfo]))
                                                }}
                                            >
                                                <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">
                                                {item?.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) => { setParams('title', e.target.value?.replace(/\r|\n/ig, ""), index) }}
                                                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={() => { setClerkAideVisible(true); setInfoIndex(index); setFieldType('two') }}>文案助手</Button>
                                    </div>
                                </BcForm>
                                <BcForm name="外层文案" flex='flex-start'>
                                    <div className={style.flexStart}>
                                        <div>
                                            <Input.TextArea
                                                value={item.desc}
                                                onChange={(e) => { handleDesc(e.target.value?.replace(/\r|\n$/ig, ""), index) }}
                                                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>
                            </> : item?.posType === 928 || item?.posType === 929 ? <>
                                {item?.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>}

                                {
                                    item?.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>
                            </> : null}
                            {
                                item?.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); setInfoIndex(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, overflow: 'hidden' }} />
                                                        :
                                                        <Image width={80} src={item?.pageData[0]?.thumbUrl} style={{ borderRadius: 8, overflow: 'hidden' }} />}
                                            </div>
                                        </BcForm>
                                    }
                                </>
                            }

                        </div>
                    </Collapse.Panel>
                })}

            </Collapse>
        }
    </Modal >
}

export default React.memo(BatchCopys)