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

/** 
 * 批量复制
 * 更改落地页为当前展示落地页
 *  */
interface Props {
    visible: boolean,
    defaultValue: any,
    ajax?: any,
    onChange?: () => void,
    onClose?: () => void,
    clearSelect?: (d: any) => void
}
function BatchCopy(props: Props) {
    const { visible, defaultValue, onClose, ajax, clearSelect } = props
    const { planInfo, mpAccountInfo, id: planCreateLogId } = Array.isArray(defaultValue) ? defaultValue[0] : defaultValue
    const { setCopyPlan } = useModel('useLaunch.useNewCreateAd')

    // 数据开始
    const [clerkAideVisible, setClerkAideVisible] = useState<boolean>(false)
    const [pageShow, setPageShow] = useState<boolean>(false) // 选择落地弹窗
    const [pageData, setPageData] = useState<any[]>([])  // 保存选中落地页
    const [desc, setDesc] = useState<string>("")  // 外层文案
    const [accout, setAccout] = useState<{ accountId?: number, accountType?: 'mp' | 'adq' }>({})
    const [begin_time, setBegin_time] = useState<string>('') // 开始时间
    const [end_time, setEnd_time] = useState<string>('') // 结束时间
    const [posType, setPosType] = useState<number>(311) // 创意样式

    const [copy_count, setCopy_count] = useState<number>(1)  // 数量
    const [authData, setAuthData] = useState<{ base64: string, code: string }>({ base64: '', code: '' })
    const [imageUrl, setImageUrl] = useState<string>('') // 广告位图片
    const [caption, setCaption] = useState<string>('') // 次行文案
    const [left_bottom_txt, setLeft_bottom_txt] = useState<string>('') // 第三行文案
    const [title, setTitle] = useState<string>('') // 图文标题 外层文案标题
    const [selectImgVisible, setSelectImgVisible] = useState<boolean>(false)   // 选择图片弹窗
    const [sliderImgContent, setSliderImgContent] = useState<{ content: string }[]>([])  // 保存回填数据
    const [loading, setLoading] = useState<boolean>(false)
    const [override_canvas_head_option, setOverride_canvas_head_option] = useState<string>('OPTION_CANVAS_OVERRIDE_CREATIVE')  // 外层素材
    const [isCanvasTop, setIsCanvasTop] = useState<boolean>(false)   // 是否禁止选择 使用原生推广页顶部素材
    const [fieldType, setFieldType] = useState<'one' | 'two'>('one') // 文案字段
    const [infoBarType, setInfoBarType] = useState<'INFO_BAR_TYPE_HEAD' | 'INFO_BAR_TYPE_TITLE'>('INFO_BAR_TYPE_HEAD') // 卡片文案
    const [infoBarDescription, setInfoBarDescription] = useState<string>("")
    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 })   // 要选择的素材信息
    // 数据结束

    // 处理是否禁止选择 使用原生推广页顶部素材
    useEffect(() => {
        if (pageData && pageData?.length > 0) {
            if (posType === 1707) {
                let topType = pageData[0]?.topCanvasType
                if (topType === 101) {
                    // 设置创意 外层素材来源使用 上传素材
                    setIsCanvasTop(true)
                    setOverride_canvas_head_option('OPTION_KEEP_DIFFERENT')
                } else if (topType === 41) {
                    let pageContextList = JSON.parse(pageData[0]?.pageContextList[0]?.pageContextList)
                    let topContent = pageContextList[0]
                    let initWidth = topContent?.initWidth
                    let initHeight = topContent?.initHeight
                    if (initWidth !== 800 || initHeight !== 450) {
                        // 设置创意 外层素材来源使用 上传素材
                        setIsCanvasTop(true)
                        setOverride_canvas_head_option('OPTION_KEEP_DIFFERENT')
                    } else {
                        setIsCanvasTop(false)
                    }
                } else {
                    setIsCanvasTop(false)
                }
            } else if (posType === 1708) {
                let topType = pageData[0]?.topCanvasType
                if (topType === 142 || topType === 61) {
                    let initWidth = JSON.parse(pageData[0]?.pageContextList[0]?.pageContextList)[0]?.initWidth
                    let initHeight = JSON.parse(pageData[0]?.pageContextList[0]?.pageContextList)[0]?.initHeight
                    if (initWidth != 1280 || initHeight != 720) {
                        setIsCanvasTop(true)
                        setOverride_canvas_head_option('OPTION_KEEP_DIFFERENT')
                    }
                } else {
                    setIsCanvasTop(false)
                }
            } else {
                setIsCanvasTop(false)
            }
        }
    }, [pageData])

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

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

    const handleOk = useCallback(() => {
        if (!planCreateLogId) {
            return
        }
        if ([311, 641, 642, 643, 618, 1465, 1480].includes(posType)) {
            if (txtLength(desc) === 0 || txtLength(desc) > 40) {
                message.error('外层文案输入有误，请修改')
                return
            }
        } else if ([1707, 1708].includes(posType)) {
            if (txtLength(title) === 0 || txtLength(title) > 10) {
                message.error('外层文案标题输入有误，请修改')
                return
            }
            if (txtLength(desc) === 0 || txtLength(desc) > 30) {
                message.error('外层文案输入有误，请修改')
                return
            }
            if (override_canvas_head_option === "OPTION_KEEP_DIFFERENT" && !imageUrl) {
                message.error('请上传外层素材')
                return
            }
        } else if (posType === 929 || posType === 928) {
            if (txtLength(title) === 0 || txtLength(title) > 12) {
                message.error('卡片文案输入有误，请修改')
                return
            }
            if (txtLength(desc) === 0 || txtLength(desc) > 16) {
                message.error('首行文案输入有误，请修改')
                return
            }
            if (txtLength(caption) === 0 || txtLength(caption) > 16) {
                message.error('次行文案输入有误，请修改')
                return
            }
            if (!imageUrl) {
                message.error('请上传外层素材')
                return
            }
            if (posType === 928 && infoBarType === 'INFO_BAR_TYPE_TITLE') {
                if (!infoBarDescription) {
                    message.error('请输入信息栏文案')
                    return 
                }
            }
        }
        if (!pageData || pageData?.length === 0) {
            message.error('请选择原生推广页')
            return
        }
        if (Array.isArray(defaultValue)) {//叉乘
            setLoading(true)
            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
                }

                if ([311, 641, 642, 643, 618, 1465, 1480].includes(posType)) {
                    newAdcreative = {
                        ...newAdcreative,
                        adcreative_elements: {
                            ...newAdcreative.adcreative_elements,
                            title: desc
                        }
                    }
                    newMaterial = {
                        ...newMaterial,
                        page_name: pageData[0].name
                    }
                } else if ([1707, 1708].includes(posType)) {
                    newAdcreative = {
                        ...newAdcreative,
                        adcreative_elements: {
                            ...newAdcreative.adcreative_elements,
                            title: title,
                            description: desc
                        },
                        page_spec: {
                            ...newAdcreative.page_spec,
                            override_canvas_head_option
                        }
                    }
                    if (override_canvas_head_option === 'OPTION_KEEP_DIFFERENT') {
                        newMaterial = {
                            ...newMaterial,
                            page_name: pageData[0].name,
                            url: imageUrl,
                            type: posType === 1707 ? 'image' : 'video'
                        }
                    } else {
                        newMaterial = {
                            page_name: pageData[0].name
                        }
                    }
                } else if (posType === 929 || posType === 928) {
                    let adcreative_elements = newAdcreative.adcreative_elements
                    let lbt = {}
                    if (item?.left_bottom_txt) {
                        lbt = { left_bottom_txt: item?.left_bottom_txt }
                    } else {
                        delete adcreative_elements.left_bottom_txt
                    }
                    if (posType === 928) {
                        let info_bar_spec = {}
                        info_bar_spec = {
                            info_bar_type: infoBarType,
                            info_bar_description: infoBarType === 'INFO_BAR_TYPE_HEAD' ? "" : infoBarDescription
                        }
                        newAdcreative = {
                            ...newAdcreative,
                            adcreative_elements: {
                                ...adcreative_elements,
                                title: title,
                                description: desc,
                                caption,
                                info_bar_spec: {
                                    ...adcreative_elements?.info_bar_spec,
                                    ...info_bar_spec
                                },
                                ...lbt
                            },
                        }
                    } else {
                        newAdcreative = {
                            ...newAdcreative,
                            adcreative_elements: {
                                ...adcreative_elements,
                                title: title,
                                description: desc,
                                caption,
                                ...lbt
                            },
                        }
                    }
                    
                    newMaterial = {
                        ...newMaterial,
                        page_name: pageData[0].name,
                        url: imageUrl
                    }
                }
                let planDto: any = {}
                if ([311, 641, 642, 643, 618, 1465, 1480].includes(posType)) {
                    planDto = { posType, content: desc, title, imageUrl, putLocation, planName, putTarget, pageId: pageData[0]?.id, campaign, adgroup: JSON.stringify(newAdgroup), adcreative: JSON.stringify(newAdcreative), material: JSON.stringify(newMaterial) }
                } else if ([1707, 1708].includes(posType)) {
                    let url = imageUrl
                    if (override_canvas_head_option !== 'OPTION_KEEP_DIFFERENT') {
                        url = pageData[0]?.thumbUrl
                    }
                    planDto = { posType, content: desc, title, type: posType === 1707 ? 'image' : 'video', url, putLocation, planName, putTarget, pageId: pageData[0]?.id, campaign, adgroup: JSON.stringify(newAdgroup), adcreative: JSON.stringify(newAdcreative), material: JSON.stringify(newMaterial) }
                } else if (posType === 929 || posType === 928) {
                    let descList = []
                    descList.push(desc)
                    descList.push(caption)
                    left_bottom_txt && (descList.push(left_bottom_txt))
                    planDto = { posType, title, content: infoBarType === 'INFO_BAR_TYPE_TITLE' ? infoBarDescription : '', descList, type: posType === 929 ? 'video' : 'image', url: imageUrl, putLocation, planName, putTarget, pageId: pageData[0]?.id, campaign, adgroup: JSON.stringify(newAdgroup), adcreative: JSON.stringify(newAdcreative), material: JSON.stringify(newMaterial) }
                }
                let planDtos = 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 {
            let { planName, putLocation, putTarget, adcreative, adgroup, campaign, material } = planInfo
            let newAdgroup = JSON.parse(adgroup)
            let newAdcreative = JSON.parse(adcreative)
            let newMaterial = JSON.parse(material)
            newAdgroup = {
                ...newAdgroup,
                begin_date: begin_time,
                end_date: end_time
            }
            if ([311, 641, 642, 643, 618, 1465, 1480].includes(posType)) {
                newAdcreative = {
                    ...newAdcreative,
                    adcreative_elements: {
                        ...newAdcreative.adcreative_elements,
                        title: desc
                    }
                }
                newMaterial = {
                    ...material,
                    page_name: pageData[0].name
                }
            } else if ([1707, 1708].includes(posType)) {
                newAdcreative = {
                    ...newAdcreative,
                    adcreative_elements: {
                        ...newAdcreative.adcreative_elements,
                        title: title,
                        description: desc
                    },
                    page_spec: {
                        ...newAdcreative.page_spec,
                        override_canvas_head_option
                    }
                }
                if (override_canvas_head_option === 'OPTION_KEEP_DIFFERENT') {
                    newMaterial = {
                        ...newMaterial,
                        page_name: pageData[0].name,
                        url: imageUrl,
                        type: posType === 1707 ? 'image' : 'video'
                    }
                } else {
                    newMaterial = {
                        page_name: pageData[0].name
                    }
                }
            } else if (posType === 929 || posType === 928) {
                let lbt = {}
                let adcreative_elements = newAdcreative.adcreative_elements
                if (left_bottom_txt) {
                    lbt = { left_bottom_txt }
                } else {
                    delete adcreative_elements.left_bottom_txt
                }
                if (posType === 928) {
                    let info_bar_spec = {}
                    info_bar_spec = {
                        info_bar_type: infoBarType,
                        info_bar_description: infoBarType === 'INFO_BAR_TYPE_HEAD' ? "" : infoBarDescription
                    }
                    newAdcreative = {
                        ...newAdcreative,
                        adcreative_elements: {
                            ...adcreative_elements,
                            title: title,
                            description: desc,
                            caption,
                            info_bar_spec: {
                                ...adcreative_elements?.info_bar_spec,
                                ...info_bar_spec
                            },
                            ...lbt
                        },
                    }
                } else {
                    newAdcreative = {
                        ...newAdcreative,
                        adcreative_elements: {
                            ...adcreative_elements,
                            title: title,
                            description: desc,
                            caption,
                            ...lbt
                        },
                    }
                }
                newMaterial = {
                    ...newMaterial,
                    page_name: pageData[0].name,
                    url: imageUrl
                }
            }
            let planDto: any = {}
            if ([311, 641, 642, 643, 618, 1465, 1480].includes(posType)) {
                planDto = { posType, content: desc, title, putLocation, planName, putTarget, pageId: pageData[0]?.id, campaign, adgroup: JSON.stringify(newAdgroup), adcreative: JSON.stringify(newAdcreative), material: JSON.stringify(newMaterial) }
            } else if ([1707, 1708].includes(posType)) {
                let url = imageUrl
                if (override_canvas_head_option !== 'OPTION_KEEP_DIFFERENT') {
                    url = pageData[0]?.thumbUrl
                }
                planDto = { posType, content: desc, title, type: posType === 1707 ? 'image' : 'video', url, putLocation, planName, putTarget, pageId: pageData[0]?.id, campaign, adgroup: JSON.stringify(newAdgroup), adcreative: JSON.stringify(newAdcreative), material: JSON.stringify(newMaterial) }
            } else if (posType === 929 || posType === 928) {
                // headDescType, description
                let descList = []
                descList.push(desc)
                descList.push(caption)
                left_bottom_txt && (descList.push(left_bottom_txt))
                planDto = { posType, title, descList, content: posType === 928 ? infoBarType === 'INFO_BAR_TYPE_TITLE' ? infoBarDescription : '' : '', type: posType === 929 ? 'video' : 'image', url: imageUrl, putLocation, planName, putTarget, pageId: pageData[0]?.id, campaign, adgroup: JSON.stringify(newAdgroup), adcreative: JSON.stringify(newAdcreative), material: JSON.stringify(newMaterial) }
            }
            let planDtos = Array(copy_count).fill('').map(() => {
                return { ...planDto }
            })
            setCopyPlan.run({ planCreateLogId, begin_time: moment(begin_time).unix(), end_time: moment(end_time).unix(), taskName: '批量复制' + '-' + moment().unix(), copy_count, planDtos }).then(res => {
                // window.location.href = '/#/launchSystem/launchManage/taskList'
                ajax && ajax?.refresh()
                hideHandle && hideHandle()
                clearSelect && clearSelect([])
            })
        }
    }, [desc, end_time, caption, infoBarType, infoBarDescription, left_bottom_txt, copy_count, planInfo, override_canvas_head_option, pageData, planCreateLogId, authData, defaultValue, posType, imageUrl, title, loading, override_canvas_head_option])

    // 不可选择日期
    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 selectImg = useCallback(() => {
        if (imageUrl) {
            setSliderImgContent([{ content: imageUrl }])
        }
        setSelectImgVisible(true)
    }, [selectImgVisible, imageUrl, sliderImgContent])

    /** 弹窗返回设置图片 */
    const setImg = useCallback((value: any[]) => {
        if (value?.length > 0) {
            setImageUrl(value[0].content)
        }
    }, [imageUrl, posType])

    return <Modal
        bodyStyle={{ height: 600, overflowY: 'auto' }}
        title="批量复制改相同基本信息"
        visible={visible}
        onCancel={hideHandle}
        confirmLoading={setCopyPlan.loading || loading}
        onOk={() => {
            if (Array.isArray(defaultValue)) {
                Modal.warning({
                    title: '请注意',
                    content: '当前勾选的计划批量复制会更改为当前展示的创意基本信息（如原生推广页，外层文案），不想更改可到操作里单独使用批量复制。',
                    onOk() { handleOk() },
                    closable: true
                });
            } else {
                handleOk()
            }
        }}
        width={1000}
        className={style1.batchCopy}
        maskClosable={false}
    >
        {/* 授权登录 */}
        <AdLogin onClose={() => { setAuthData({ base64: '', code: '' }) }} value={authData} onChange={() => { setAuthData({ base64: '', code: '' }); message.success('再次点击按钮提交') }} />
        {/* 选择文案 */}
        {clerkAideVisible && <ClerkAide
            visible={clerkAideVisible}
            fieldType={fieldType}
            hideModel={() => { setClerkAideVisible(false) }}
            onChange={(value1, value2) => {
                if (fieldType === 'one') {
                    setDesc(value1)
                } else {
                    setTitle(value1)
                    setDesc(value2 || '')
                }
            }}></ClerkAide>}

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

                } else {
                    setPageData(data);
                }
            }}
            pageData={pageData}
        ></SelectPage>}

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

        {
            Array.isArray(defaultValue) && <strong style={{ color: 'red', marginBottom: '15px', display: 'block' }}>注：叉乘一定要确保所有账号都存在对应的推广页，否则会出错失败<br />本次操作所有选择的计划都会统一使用当前界面设置的日期，文案，推广页！！！</strong>
        }
        <div className={style1.info}>
            <div className={style1.items}>
                <div className={style1.item}>
                    <label className={style1.label}>投放计划名称:</label>
                    <span>{planInfo?.planName}</span>
                </div>
                <div className={style1.item}>
                    <label className={style1.label}>投放号:</label>
                    <span>{mpAccountInfo?.channel?.accountName}——{mpAccountInfo?.uname}</span>
                </div>

            </div>
            <div className={style1.items}>
                <div className={style1.item}>
                    <label className={style1.label}>流量位:</label>
                    <span>{dic.siteSet[planInfo?.putLocation]}</span>
                </div>
                <div className={style1.item}>
                    <label className={style1.label}>推广目标:</label>
                    <span>{planInfo?.putTarget === 'PROMOTED_OBJECT_TYPE_WECHAT_OFFICIAL_ACCOUNT' ? '公众号推广' : '视频号推广'}</span>
                </div>
            </div>
        </div>
        <div className={style1.title}>排期修改</div>
        <BcForm name='开始与结束日期' >
            <div style={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center' }}>
                <DatePicker
                    className={style.picker}
                    disabledDate={disabledDate}
                    value={begin_time ? moment(begin_time) : undefined}
                    onChange={(e: moment.Moment | null) => {
                        setBegin_time(e ? moment(e).format('YYYY-MM-DD') : "")
                    }}
                    allowClear={false}
                    placeholder="开始日期"
                />
                <span style={{ margin: '0 10px' }}>-</span>
                <DatePicker
                    className={style.picker}
                    disabledDate={disabledEndDate}
                    value={end_time ? moment(end_time) : undefined}
                    onChange={(e: moment.Moment | null) => {
                        setEnd_time(e ? moment(e).format('YYYY-MM-DD') : "")
                    }}
                    allowClear={false}
                    placeholder="结束日期"
                />
            </div>
        </BcForm>
        <div className={style1.title}>创意基本信息</div>

        {[311, 641, 642, 643, 618, 1465, 1480].includes(posType) ? <>
            <BcForm name="外层文案" flex='flex-start'>
                <div className={style.flexStart}>
                    <div>
                        <Input.TextArea
                            value={desc}
                            onChange={(e) => { setDesc(e.target.value?.replace(/\r|\n$/ig, "")) }}
                            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 }}>{txtLength(desc) > 40 && '广告文案不得超过40字，请缩短输入内容'}</div>
                            <div>{txtLength(desc)}/40</div>
                        </div>
                    </div>
                    <Button onClick={() => { setFieldType('one'); setClerkAideVisible(true) }}>文案助手</Button>
                </div>
            </BcForm>
        </> : [1707, 1708].includes(posType) ? <>
            <BcForm name="外层文案标题" flex='flex-start'>
                <div className={style.flexStart}>
                    <div>
                        <Input.TextArea
                            value={title}
                            onChange={(e) => { setTitle(e.target.value?.replace(/\r|\n/ig, "")) }}
                            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 }}>{txtLength(title) > 10 && '广告文案不得超过10字，请缩短输入内容'}</div>
                            <div>{txtLength(title)}/10</div>
                        </div>
                    </div>
                    <Button onClick={() => { setFieldType('two'); setClerkAideVisible(true) }}>文案助手</Button>
                </div>
            </BcForm>
            <BcForm name="外层文案" flex='flex-start'>
                <div className={style.flexStart}>
                    <div>
                        <Input.TextArea
                            value={desc}
                            onChange={(e) => { setDesc(e.target.value?.replace(/\r|\n$/ig, "")) }}
                            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 }}>{txtLength(desc) > 30 && '广告文案不得超过30字，请缩短输入内容'}</div>
                            <div>{txtLength(desc)}/30</div>
                        </div>
                    </div>
                </div>
            </BcForm>

            <BcForm name="外层素材来源">
                <Radio.Group className={style.radio} value={override_canvas_head_option} onChange={(e) => { setOverride_canvas_head_option(e.target.value); setImageUrl('') }}>
                    <Radio value="OPTION_CANVAS_OVERRIDE_CREATIVE" disabled={isCanvasTop}>使用原生推广页顶部素材</Radio>
                    <Radio value="OPTION_KEEP_DIFFERENT">上传素材</Radio>
                </Radio.Group>
            </BcForm>
            {
                override_canvas_head_option === 'OPTION_KEEP_DIFFERENT' && <BcForm name="外层图片" flex="flex-start">
                    {posType === 1708 ? <>
                        <Button onClick={() => { selectImg() }}>{imageUrl ? '修改视频' : '上传视频'}</Button>
                        <div style={{ marginTop: 8, fontSize: 13, color: '#8f9196' }}>视频大小1280×720像素</div>
                        {imageUrl && <div style={{ marginTop: 20 }}><video width={100} src={imageUrl} style={{ borderRadius: 8, overflow: 'hidden' }} /></div>}
                    </> : <div>
                        <Button onClick={() => { selectImg() }}>{imageUrl ? '修改图片' : '上传图片'}</Button>
                        <div style={{ marginTop: 8, fontSize: 13, color: '#8f9196' }}>图片大小800像素x450像素，不超过300KB</div>
                        {imageUrl && <div style={{ marginTop: 20 }}><Image width={100} src={imageUrl} style={{ borderRadius: 8, overflow: 'hidden' }} /></div>}
                    </div>}
                </BcForm>
            }
        </> : posType === 928 || posType === 929 ? <>
            {posType === 929 ? <BcForm name="外层素材" flex="flex-start">
                <div>
                    <Button onClick={() => { selectImg() }}>{imageUrl ? '修改视频' : '上传视频'}</Button>
                    <div style={{ marginTop: 8, fontSize: 13, color: '#8f9196' }}>视频尺寸960x540，不超过100MB，视频时长6-30秒</div>
                    {imageUrl && <div style={{ marginTop: 20 }}><video width={100} src={imageUrl} style={{ borderRadius: 8, overflow: 'hidden' }} /></div>}
                </div>
            </BcForm> : <BcForm name="外层素材" flex="flex-start">
                <div>
                    <Button onClick={selectImg}>{imageUrl ? '修改图片' : '上传图片'}</Button>
                    <div style={{ marginTop: 8, fontSize: 13, color: '#8f9196' }}>图片大小960像素x540像素，不超过80KB</div>
                    {imageUrl && <div style={{ marginTop: 20 }}><Image width={100} src={imageUrl} style={{ borderRadius: 8, overflow: 'hidden' }} /></div>}
                </div>
            </BcForm>}
            {
                posType === 928 && <>
                    <BcForm name="卡片文案">
                        <Radio.Group className={style.radio} value={infoBarType} onChange={(e) => { setInfoBarType(e.target.value) }}>
                            <Radio value="INFO_BAR_TYPE_HEAD">头像昵称型</Radio>
                            <Radio value="INFO_BAR_TYPE_TITLE">文案型</Radio>
                        </Radio.Group>
                    </BcForm>
                    {infoBarType === 'INFO_BAR_TYPE_TITLE' && <BcForm name="信息栏文案" flex="flex-start">
                        <Input.TextArea showCount maxLength={14} style={{ width: 300 }} className={style.textArea} value={infoBarDescription} onChange={(e) => { setInfoBarDescription(e.target.value?.replace(/\r|\n/ig, "")) }} autoSize placeholder="请输入" />
                    </BcForm>}
                </>
            }
            <BcForm name="卡片文案" flex="flex-start">
                <Input.TextArea showCount maxLength={12} value={title} onChange={(e) => { setTitle(e.target.value?.replace(/\r|\n/ig, "")) }} autoSize />
            </BcForm>
            <BcForm name="广告文案" flex="flex-start">
                <>
                    <Input.TextArea showCount maxLength={16} value={desc} onChange={(e) => { setDesc(e.target.value?.replace(/\r|\n/ig, "")) }} autoSize placeholder="请输入首行文案" />
                    <Input.TextArea showCount maxLength={16} value={caption} onChange={(e) => { setCaption(e.target.value?.replace(/\r|\n/ig, "")) }} autoSize placeholder="次行文案" />
                    <Input.TextArea showCount maxLength={16} value={left_bottom_txt} onChange={(e) => { setLeft_bottom_txt(e.target.value?.replace(/\r|\n/ig, "")) }} autoSize placeholder="请输入第三行文案（选填）" />
                </>
            </BcForm>
        </> : <></>}

        <BcForm name="原生推广页">
            <div className={style.flexStart} style={{ alignItems: 'center' }}>
                {pageData.length > 0 && <div>{pageData[0]?.name}</div>}
                <Button onClick={() => { setPageShow(true) }}>选择原生推广页</Button>
            </div>
        </BcForm>
        {
            pageData.length > 0 && <BcForm name="原生推广页顶部素材预览" flex='flex-start'>
                <div className={style.flexStart}>
                    {pageData[0]?.topCanvasType === 101 ? // 顶部轮播图
                        <Space>
                            {JSON.parse(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>
                        :
                        pageData[0]?.topCanvasType === 41 ? // 顶部图片
                            <Image width={80} src={pageData[0]?.thumbUrl} style={{ borderRadius: 8, overflow: 'hidden' }} />
                            :
                            <Image width={80} src={pageData[0]?.thumbUrl} style={{ borderRadius: 8, overflow: 'hidden' }} />}
                </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>
    </Modal >
}

export default React.memo(BatchCopy)