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 '../../../components/selectPage'
import moment from "moment";
import AdLogin from '../../../components/adLogin'
import { CaretRightOutlined } from "@ant-design/icons";
import { setCopyPlanApi } from '@/services/operating/adAuthorize'
import SelectImg from '../../../components/selectImg'

/** 
 * 批量复制
 * 单独落地页
 *  */
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, mpAccountInfo } = Array.isArray(defaultValue) ? defaultValue[0] : defaultValue
    // 数据开始
    const [posType, setPosType] = useState<number>()
    const [productType, setProductType] = useState<string>("PRODUCTTYPE_WECHAT")
    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 [date_module, setDate_module] = useState<string>('1')  // 投放日期
    const [begin_time, setBegin_time] = useState<number>(0) // 开始时间
    const [end_time, setEnd_time] = useState<number>(0) // 结束时间
    const [copy_count, setCopy_count] = useState<number>(1)  // 数量
    const [accout, setAccout] = useState<{ accountId?: number, accountType?: 'mp' | 'adq' }>({})
    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,
        crtSize?: number,
        out_material_use_canvas_top?: number, // 是否使用头部信息
        isCanvasTop?: boolean,  // 是否不能使用头部图片
    }[]>([])
    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): boolean => {
        if (data && typeof data === 'object' && data?.topCanvasType === 41) {
            let pageContext = data?.pageContextList[0]?.pageContextList
            if (pageContext) {
                pageContext = JSON.parse(pageContext)
                let { adLocation, viewType } = pageContext[0]
                if (adLocation === 'sns' && viewType === '1') {
                    return false
                } else {
                    return true
                }
            } else {
                return true
            }
        } else {
            return true
        }
    }
    // 首次进来
    useEffect(() => {
        if (Array.isArray(defaultValue) && defaultValue?.length > 0) {
            setPosType(() => planInfo?.posType)
            setProductType(() => planInfo?.putTarget)
            let { firstContext } = planInfo
            if (mpAccountInfo) {
                setAccout({ accountType: 'mp', accountId: mpAccountInfo?.id })
            }
            if (firstContext) {
                let a = JSON.parse(firstContext)
                let campaign = a?.campaign
                let { begin_time, end_time } = campaign
                setBegin_time(begin_time)
                if (end_time) {
                    setEnd_time(end_time)
                } else {
                    setDate_module('2')
                }
            }
            if (planInfo?.posType === 999) {
                setImgSize({ minWidth: '800', maxWidth: '800', minHeight: '450', maxHeight: '450', minMediaSize: 0, maxMediaSize: 307200, type: 1 })
                setBasicInfo(() => defaultValue?.map((item: any) => {
                    const { planInfo, mpAccountInfo } = item
                    let { secondContext, sharePageInfo } = planInfo
                    let a = JSON.parse(secondContext)
                    let material = a?.materials[0]
                    let crtSize = material?.crt_size || 1480
                    if (crtSize === 1480) {
                        return { desc: material?.desc, pageData: sharePageInfo ? [sharePageInfo] : [], crtSize, planName: planInfo?.planName, accountName: mpAccountInfo?.channel?.accountName + '——' + mpAccountInfo?.uname, putLocation: planInfo?.putLocation, putTarget: planInfo?.putTarget, taskName: planInfo?.taskInfo?.taskName }
                    } else {
                        let crt_info = material?.crt_info
                        let isCanvasTop = getIsCanvasTop(sharePageInfo)
                        return { title: material?.title, desc: material?.desc, imageUrl: crt_info?.image_url, crtSize, out_material_use_canvas_top: material?.out_material_use_canvas_top, isCanvasTop, pageData: sharePageInfo ? [sharePageInfo] : [], planName: planInfo?.planName, accountName: mpAccountInfo?.channel?.accountName + '——' + mpAccountInfo?.uname, putLocation: planInfo?.putLocation, putTarget: planInfo?.putTarget, taskName: planInfo?.taskInfo?.taskName }
                    }
                }))
            } else if (planInfo?.posType === 8) {
                setBasicInfo(() => defaultValue?.map((item: any) => {
                    const { planInfo, mpAccountInfo } = item
                    let { sharePageInfo } = planInfo
                    return { pageData: sharePageInfo ? [sharePageInfo] : [], planName: planInfo?.planName, accountName: mpAccountInfo?.channel?.accountName + '——' + mpAccountInfo?.uname, putLocation: planInfo?.putLocation, putTarget: planInfo?.putTarget, taskName: planInfo?.taskInfo?.taskName }
                }))
            } else if (planInfo?.posType === 0) {
                setBasicInfo(() => defaultValue?.map((item: any) => {
                    const { planInfo, mpAccountInfo } = item
                    let { secondContext, sharePageInfo } = planInfo
                    let a = JSON.parse(secondContext)
                    let material = a?.materials[0]
                    let crt_info = material?.crt_info
                    let crtSize = material?.crt_size
                    if (crtSize === 538) {
                        setImgSize(() => ({ minWidth: '960', maxWidth: '960', minHeight: '540', maxHeight: '540', minMediaSize: 0, maxMediaSize: 99614720, minVideoLength: 6, maxVideoLength: 30, type: 2 }))
                        return { shortVideo: crt_info?.short_video, crtSize, headDescType: crt_info?.card_info?.head_desc_type, description: crt_info?.card_info?.description, pageData: sharePageInfo ? [sharePageInfo] : [], planName: planInfo?.planName, accountName: mpAccountInfo?.channel?.accountName + '——' + mpAccountInfo?.uname, putLocation: planInfo?.putLocation, putTarget: planInfo?.putTarget, taskName: planInfo?.taskInfo?.taskName }
                    } else {
                        return { imageUrl: crt_info?.image_url, crtSize, headDescType: crt_info?.card_info?.head_desc_type, description: crt_info?.card_info?.description, pageData: sharePageInfo ? [sharePageInfo] : [], planName: planInfo?.planName, accountName: mpAccountInfo?.channel?.accountName + '——' + mpAccountInfo?.uname, putLocation: planInfo?.putLocation, putTarget: planInfo?.putTarget, taskName: planInfo?.taskInfo?.taskName }
                    }
                }))
            } else if (planInfo?.posType === 101) {
                setBasicInfo(() => defaultValue?.map((item: any) => {
                    const { planInfo, mpAccountInfo } = item
                    let { secondContext, sharePageInfo } = planInfo
                    let a = JSON.parse(secondContext)
                    let material = a?.materials[0]
                    let crt_info = material?.crt_info
                    return { imageUrl: crt_info?.image_url, headDescType: crt_info?.card_info?.head_desc_type, description: crt_info?.card_info?.description, title: material?.title, cardInfoDesc: crt_info?.card_info?.desc, 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 (posType === 999) {
                if (!basicInfo?.every((item: { title?: string, crtSize?: number }) => item?.crtSize === 1480 ? true : item?.title)) {
                    message.error('请完善外层文案标题')
                    return
                }
                if (!basicInfo?.every((item: { desc?: string }) => item?.desc)) {
                    message.error('请完善外层文案')
                    return
                }
                if (!basicInfo?.every((item: { imageUrl?: string, out_material_use_canvas_top?: number, crtSize?: number }) => item?.crtSize === 1480 ? true : item?.out_material_use_canvas_top === 0 ? item?.imageUrl : true)) {
                    message.error('请完善外层图片')
                    return
                }
            }
            if (date_module === '1') {
                if (!begin_time || !end_time) {
                    message.error('请选择开始与结束日期')
                    return
                }
            } else {
                if (!begin_time) {
                    message.error('请选择开始日期')
                    return
                }
            }
            if (posType === 0 || posType === 101) {
                let crtSize = basicInfo[0].crtSize
                if (crtSize === 538) {
                    if (!basicInfo?.every((item: { shortVideo?: ShortVideoProps }) => item?.shortVideo?.video_url)) {
                        message.error('请选择广告位视频')
                        return
                    }
                } else {
                    if (!basicInfo?.every((item: { imageUrl?: string }) => item?.imageUrl)) {
                        message.error('请选择广告位图片')
                        return
                    }
                }
                if (!basicInfo?.every((item: { headDescType?: number, description?: string }) => {
                    if (item?.headDescType === 2) {
                        if (item?.description) {
                            return true
                        } else {
                            return false
                        }
                    } else {
                        return true
                    }
                })) {
                    message.error('请输入信息栏文案')
                    return
                }
                if (posType === 101) {
                    if (!basicInfo?.every((item: { title?: string }) => item?.title)) {
                        message.error('请输入图文标题')
                        return
                    }
                    if (!basicInfo?.every((item: { cardInfoDesc?: string[] }) => {
                        if (item?.cardInfoDesc) {
                            if (!item?.cardInfoDesc[0] || !item?.cardInfoDesc[1]) {
                                return false
                            } else {
                                return true
                            }
                        } else {
                            return false
                        }
                    })) {
                        message.error('请输入广告文案')
                        return
                    }
                }
            }
            setLoading(true)
            if (Array.isArray(defaultValue)) {//叉乘
                let ajaxArr: any = []
                defaultValue?.forEach((item, index) => {
                    let { planName, putLocation, putTarget, firstContext, secondContext } = item?.planInfo
                    let first = JSON.parse(firstContext)
                    let second = JSON.parse(secondContext)
                    let descData: string[] = []
                    first = {
                        ...first,
                        campaign: {
                            ...first.campaign,
                            begin_time,   // 开始时间
                            end_time      // 结束时间
                        },
                        target_groups: [{
                            ...first.target_groups[0],
                            ad_groups: [{
                                ...first.target_groups[0].ad_groups[0],
                                ad_group: {
                                    ...first.target_groups[0].ad_groups[0].ad_group,
                                    begin_time,   // 开始时间
                                    end_time      // 结束时间
                                }
                            }]
                        }]
                    }
                    let crtSize = basicInfo[index].crtSize
                    if (posType === 999) {
                        if (basicInfo[index].crtSize === 1480) {
                            second = {
                                ...second,
                                materials: [{ ...second.materials[0], desc: basicInfo[index].desc }]
                            }
                        } else if (basicInfo[index].crtSize === 1707) {
                            second = {
                                ...second,
                                materials: [{ ...second.materials[0], desc: basicInfo[index].desc, title: basicInfo[index].title, out_material_use_canvas_top: basicInfo[index].out_material_use_canvas_top, crt_info: basicInfo[index].out_material_use_canvas_top === 1 ? '' : { image_url: basicInfo[index].imageUrl } }]
                            }
                        }
                    } else if (posType === 8) {
                        second = {
                            ...second
                        }
                    } else if (posType === 0) {
                        let cardInfo: any = second.materials[0].crt_info.card_info
                        cardInfo.head_desc_type = basicInfo[index].headDescType
                        cardInfo.description = basicInfo[index].description
                        if (basicInfo[index].headDescType === 1) {
                            let { description, ...newInfo } = cardInfo
                            cardInfo = newInfo
                        }
                        second = {
                            ...second,
                            materials: [{
                                ...second.materials[0], crt_info: crtSize === 538 ? {
                                    ...second.materials[0].crt_info,
                                    short_video: { ...basicInfo[index].shortVideo },
                                    card_info: {
                                        ...cardInfo
                                    }
                                } : {
                                    ...second.materials[0].crt_info,
                                    image_url: basicInfo[index].imageUrl,
                                    card_info: {
                                        ...cardInfo
                                    }
                                }
                            }]
                        }
                    } else if (posType === 101) {
                        let cardInfo: any = second.materials[0].crt_info.card_info
                        let cardInfoDesc: any = basicInfo[index].cardInfoDesc
                        descData[0] = cardInfoDesc[0]
                        descData[1] = cardInfoDesc[1]
                        if (cardInfoDesc[2]) {
                            descData[2] = cardInfoDesc[2]
                        }
                        cardInfo.head_desc_type = basicInfo[index].headDescType
                        cardInfo.description = basicInfo[index].description
                        cardInfo.desc = descData
                        if (basicInfo[index].headDescType === 1) {
                            let { description, ...newInfo } = cardInfo
                            cardInfo = newInfo
                        }
                        second = {
                            ...second,
                            materials: [{
                                ...second.materials[0], title: basicInfo[index].title, crt_info: {
                                    ...second.materials[0].crt_info,
                                    image_url: basicInfo[index].imageUrl,
                                    card_info: {
                                        ...cardInfo
                                    }
                                }
                            }]
                        }
                    }
                    let planDto: any = {}
                    if (posType === 999) {
                        if (basicInfo[index].crtSize === 1480) {
                            planDto = { posType, content: basicInfo[index].desc, planName, putLocation, putTarget, pageId: basicInfo[index]?.pageData[0]?.id, firstContext: JSON.stringify(first), secondContext: JSON.stringify(second) }
                        } else if (basicInfo[index].crtSize === 1707) {
                            planDto = { posType, content: basicInfo[index].desc, title: basicInfo[index].title, imageUrl: basicInfo[index].imageUrl, planName, putLocation, putTarget, pageId: basicInfo[index]?.pageData[0]?.id, firstContext: JSON.stringify(first), secondContext: JSON.stringify(second) }
                        }
                    } else if (posType === 8) {
                        planDto = { posType, planName, putLocation, putTarget, pageId: basicInfo[index]?.pageData[0]?.id, firstContext: JSON.stringify(first), secondContext: JSON.stringify(second) }
                    } else if (posType === 0) {
                        if (crtSize === 538) {
                            planDto = { posType, shortVideo : JSON.stringify(basicInfo[index].shortVideo), headDescType: basicInfo[index].headDescType, description: basicInfo[index].description, planName, putLocation, putTarget, pageId: basicInfo[index]?.pageData[0]?.id, firstContext: JSON.stringify(first), secondContext: JSON.stringify(second) }
                        } else {
                            planDto = { posType, imageUrl: basicInfo[index].imageUrl, headDescType: basicInfo[index].headDescType, description: basicInfo[index].description, planName, putLocation, putTarget, pageId: basicInfo[index]?.pageData[0]?.id, firstContext: JSON.stringify(first), secondContext: JSON.stringify(second) }
                        }
                    } else if (posType === 101) {
                        planDto = { posType, imageUrl: basicInfo[index].imageUrl, headDescType: basicInfo[index].headDescType, description: basicInfo[index].description, title: basicInfo[index].title, planName, descList: descData, putLocation, putTarget, pageId: basicInfo[index]?.pageData[0]?.id, firstContext: JSON.stringify(first), secondContext: JSON.stringify(second) }
                    }

                    let planDtos: any[] = Array(copy_count).fill('').map(() => {
                        return { ...planDto }
                    })
                    ajaxArr.push(setCopyPlanApi({ planCreateLogId: item.id, begin_time, end_time, 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, date_module, 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] }
        let crtSize = info.crtSize
        if (crtSize === 1707) { // 1480
            let isCanvasTop = getIsCanvasTop(data[0])
            let out_material_use_canvas_top = info?.out_material_use_canvas_top
            if (isCanvasTop) {
                if (out_material_use_canvas_top === 1) {
                    info = { ...info, pageData: data, isCanvasTop, out_material_use_canvas_top: 0 }
                } else {
                    info = { ...info, pageData: data, isCanvasTop }
                }
            } 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'))
    }
    // 出来日期
    useEffect(() => {
        if (date_module === '2') {
            setEnd_time(0)
        }
    }, [date_module])
    // 结束日期不可选择日期
    const disabledEndDate = useCallback((current: any) => {
        if (begin_time) {
            return current && current < moment(begin_time * 1000) || 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={accout}
            show={pageShow}
            productType={productType}
            localtion={posType}
            crtSize={basicInfo[infoIndex]?.crtSize}
            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="投放日期" tips={date_module === '1' ? '竞价购买的朋友圈信息流广告投放时间，可选范围6小时~60天' : ''}>
            <Radio.Group value={date_module} className={style.radio} onChange={(e) => { setDate_module(e.target.value) }}>
                <Radio.Button value="1">选择开始与结束日期</Radio.Button>
                <Radio.Button value="2">长期投放</Radio.Button>
            </Radio.Group>
        </BcForm>
        <BcForm name={date_module === '1' ? '开始与结束日期' : '开始日期'} >
            <div style={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center' }}>
                <DatePicker
                    className={style.picker}
                    disabledDate={disabledDate}
                    value={begin_time ? moment(begin_time * 1000) : null}
                    onChange={(e: moment.Moment | null) => {
                        setBegin_time(e ? moment(e).startOf('day').unix() : 0)
                    }}
                    placeholder="开始日期"
                />
                {date_module === '1' && <>
                    <span style={{ margin: '0 10px' }}>-</span>
                    <DatePicker
                        className={style.picker}
                        disabledDate={disabledEndDate}
                        value={end_time ? moment(end_time as number * 1000) : null}
                        onChange={(e: moment.Moment | null) => {
                            setEnd_time(e ? moment(e).endOf('day').unix() : 0)
                        }}
                        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"
                // accordion
                expandIcon={({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />}
            >
                {basicInfo?.map((item: { desc?: string, crtSize?: number, out_material_use_canvas_top?: number, 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>{item?.putLocation}</span>
                                    </div>
                                    <div className={style1.item}>
                                        <label className={style1.label}>推广目标:</label>
                                        <span>{item?.putTarget}</span>
                                    </div>
                                </div>
                            </div>

                            {posType === 999 ? <>
                                {/* 朋友圈 */}
                                {item?.crtSize === 1480 ? <>
                                    <BcForm name="外层文案" flex='flex-start'>
                                        <div className={style.flexStart}>
                                            <div>
                                                <Input.TextArea
                                                    value={item.desc}
                                                    onChange={(e) => { handleDesc(e.target.value, 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>
                                </> : <>
                                    <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?.out_material_use_canvas_top}
                                                    onChange={(e) => {
                                                        let data = { ...basicInfo[index] }
                                                        data = { ...data, out_material_use_canvas_top: e.target.value }
                                                        basicInfo[index] = { ...data }
                                                        setBasicInfo(() => ([...basicInfo]))
                                                    }}
                                                >
                                                    <Radio value={1} disabled={item?.isCanvasTop}>使用原生推广页顶部素材</Radio>
                                                    <Radio value={0}>上传素材</Radio>
                                                </Radio.Group>
                                            </BcForm>
                                            {
                                                item?.out_material_use_canvas_top === 0 && <BcForm name="外层图片" flex="flex-start">
                                                    <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, 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, 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>
                                </>}
                            </> : posType === 0 || posType === 101 ? <>
                                {/* 底部 大图 */}
                                {item?.crtSize === 538 ? <BcForm name="广告位视频" flex="flex-start">
                                    <div>
                                        <Button onClick={() => { selectImg(item?.shortVideo?.video_url, index) }}>{item?.shortVideo?.video_url ? '修改视频' : '上传视频'}</Button>
                                        {/* ≥ */}
                                        <div style={{ marginTop: 8, fontSize: 13, color: '#8f9196' }}>视频尺寸960x540，不超过100MB，视频时长6-30秒</div>
                                        {item?.shortVideo?.video_url && <div style={{ marginTop: 20 }}><video width={100} src={item?.shortVideo?.video_url} 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>}
                                <BcForm name="信息栏类型">
                                    <Radio.Group className={style.radio} value={item?.headDescType} onChange={(e) => { setParams('headDescType', e.target.value, index) }}>
                                        <Radio value={1}>头像昵称型</Radio>
                                        <Radio value={2}>文案型</Radio>
                                    </Radio.Group>
                                </BcForm>
                                {item?.headDescType && item?.headDescType === 2 && <BcForm name="信息栏文案" flex="flex-start">
                                    <Input.TextArea showCount maxLength={12} value={item?.description} onChange={(e) => { setParams('description', e.target.value, index) }} placeholder="信息栏文案" autoSize />
                                </BcForm>}

                                {posType === 101 && <>
                                    <BcForm name="图文标题" flex="flex-start">
                                        <Input.TextArea showCount maxLength={12} value={item?.title} onChange={(e) => { setParams('title', e.target.value, index) }} autoSize />
                                    </BcForm>
                                    <BcForm name="广告文案" flex="flex-start">
                                        <>
                                            <Input.TextArea showCount maxLength={16} value={item?.cardInfoDesc ? item?.cardInfoDesc[0] : undefined} onChange={(e) => { setParams('cardInfoDesc', e.target.value, index, 0) }} autoSize placeholder="请输入首行文案" />
                                            <Input.TextArea showCount maxLength={16} value={item?.cardInfoDesc ? item?.cardInfoDesc[1] : undefined} onChange={(e) => { setParams('cardInfoDesc', e.target.value, index, 1) }} autoSize placeholder="次行文案" />
                                            <Input.TextArea showCount maxLength={16} value={item?.cardInfoDesc ? item?.cardInfoDesc[2] : undefined} onChange={(e) => { setParams('cardInfoDesc', e.target.value, index, 2) }} autoSize placeholder="请输入第三行文案（选填）" />
                                        </>
                                    </BcForm>
                                </>}

                            </> : <></>}
                            {
                                item?.crtSize !== 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)