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

/** 
 * 批量复制
 * 更改落地页为当前展示落地页
 *  */
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.useAdAuthorize')

    // 数据开始
    const [posType, setPosType] = useState<number>(999)
    const [productType, setProductType] = useState<string>("PRODUCTTYPE_WECHAT")
    const [clerkAideVisible, setClerkAideVisible] = useState<boolean>(false)
    const [pageShow, setPageShow] = useState<boolean>(false) // 选择落地弹窗
    const [pageData, setPageData] = useState<any[]>([])  // 保存选中落地页
    const [desc, setDesc] = useState<string>("")  // 外层文案
    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 [imageUrl, setImageUrl] = useState<string>('') // 广告位图片
    const [shortVideo, setShortVideo] = useState<{ media_id: string, thumb_height: number, thumb_width: number, video_duration: number, video_url: string }>() // 广告位视频
    const [headDescType, setHeadDescType] = useState<number>() // 信息栏类型
    const [description, setDescription] = useState<string>('') // 信息栏文案
    const [title, setTitle] = useState<string>('') // 图文标题 外层文案标题
    const [cardInfoDesc, setCardInfoDesc] = useState<string[]>([]) // 广告文案
    const [selectImgVisible, setSelectImgVisible] = useState<boolean>(false)   // 选择图片弹窗
    const [sliderImgContent, setSliderImgContent] = useState<{ content: string }[]>([])  // 保存回填数据
    const [loading, setLoading] = useState<boolean>(false)
    const [crtSize, setCrtSize] = useState<number>(1480)  // 1707
    const [out_material_use_canvas_top, setOut_material_use_canvas_top] = useState<number>(0)  // 外层素材
    const [isCanvasTop, setIsCanvasTop] = useState<boolean>(false)   // 是否禁止选择 使用原生推广页顶部素材
    const [fieldType, setFieldType] = useState<'one' | 'two'>('one') // 文案字段
    const [imgSize, setImgSize] = useState<{
        aspectRatio?: string, //宽高比
        minWidth?: string,   //最小宽度
        maxWidth?: string,   //最大宽度
        minHeight?: string,  //最小高度
        maxHeight?: string,  //最大高度
        minMediaSize?: number, // 最小媒体大小
        maxMediaSize?: number, // 最大媒体大小
        minVideoLength?: number, // 最小视频时长
        maxVideoLength?: number, // 最大视频时长
        minVideoBitRate?: number, // 最小视频比特率
        maxVideoBitRate?: number, // 最大视频比特率
        type?: 1 | 2,  // 内容类型 1 图片 2 视频
    }>({ minWidth: '960', maxWidth: '960', minHeight: '540', maxHeight: '540', minMediaSize: 0, maxMediaSize: 81920, type: 1 })   // 要选择的素材信息
    // 数据结束

    // 处理是否禁止选择 使用原生推广页顶部素材
    useEffect(() => {
        if (pageData && pageData?.length > 0 && pageData[0]?.topCanvasType === 41) {
            let pageContext = pageData[0]?.pageContextList[0]?.pageContextList
            if (pageContext) {
                pageContext = JSON.parse(pageContext)
                let { adLocation, viewType } = pageContext[0]
                if (adLocation === 'sns' && viewType === '1') {
                    setIsCanvasTop(() => false)
                } else {
                    setIsCanvasTop(() => true)
                    if (out_material_use_canvas_top === 1) {
                        setOut_material_use_canvas_top(() => 0)
                    }
                }
            }
        } else {
            setIsCanvasTop(() => true)
            if (out_material_use_canvas_top === 1) {
                setOut_material_use_canvas_top(() => 0)
            }
        }
    }, [pageData])

    // 数据回填
    useEffect(() => {
        if (typeof defaultValue === 'object' && Object.keys(defaultValue).length > 0) {
            setPosType(() => planInfo?.posType)
            setProductType(() => planInfo?.putTarget)
            let { firstContext, secondContext, sharePageInfo } = 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 (secondContext) {
                let a = JSON.parse(secondContext)
                let material = a?.materials[0]
                setCrtSize(() => material?.crt_size || 1480)
                if (planInfo?.posType === 999) { // 朋友圈
                    setDesc(material?.desc)
                    if (material?.crt_size === 1707) {
                        let crt_info = material?.crt_info
                        setOut_material_use_canvas_top(material?.out_material_use_canvas_top)
                        setTitle(material?.title)
                        setImageUrl(crt_info?.image_url)  // 回填图片
                        setImgSize({ minWidth: '800', maxWidth: '800', minHeight: '450', maxHeight: '450', minMediaSize: 0, maxMediaSize: 307200, type: 1 })
                    }
                } else if (planInfo?.posType === 0 || planInfo?.posType === 101) { // 底部  大图
                    let crt_info = material?.crt_info
                    if (material?.crt_size === 538) {
                        setShortVideo(crt_info?.short_video)
                        setImgSize(() => ({ minWidth: '960', maxWidth: '960', minHeight: '540', maxHeight: '540', minMediaSize: 0, maxMediaSize: 99614720, minVideoLength: 6, maxVideoLength: 30, type: 2 }))
                    } else {
                        setImageUrl(crt_info?.image_url)  // 回填图片
                    }
                    setHeadDescType(crt_info?.card_info?.head_desc_type)  // 回填信息栏类型
                    setDescription(crt_info?.card_info?.description) // 回填信息栏文案
                    if (planInfo?.posType === 101) {
                        setTitle(material?.title)
                        setCardInfoDesc(crt_info?.card_info?.desc)
                    }
                }
            }
            sharePageInfo && setPageData([sharePageInfo])
        }
    }, [defaultValue])

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

    const handleOk = useCallback(() => {
        if (!planCreateLogId) {
            return
        }
        if (posType === 999) {
            if (!desc) {
                message.error('请输入文案')
                return
            }
            if (crtSize === 1707) {
                if (out_material_use_canvas_top === 0 && !imageUrl) {
                    message.error('请输入外层图片')
                    return
                }
                if (!title) {
                    message.error('外层文案标题')
                    return
                }
            }
        }
        if (date_module === '1') {
            if (!begin_time || !end_time) {
                message.error('请选择开始与结束日期')
                return
            }
        } else {
            if (!begin_time) {
                message.error('请选择开始日期')
                return
            }
        }
        if (!pageData || pageData?.length === 0) {
            message.error('请选择原生推广页')
            return
        }
        if (posType === 0 || posType === 101) {
            if (crtSize === 538) {
                if (!shortVideo?.video_url) {
                    message.error('请选择广告位视频')
                    return
                }
            } else {
                if (!imageUrl) {
                    message.error('请选择广告位图片')
                    return
                }
            }
            if (headDescType === 2 && !description) {
                message.error('请输入信息栏文案')
                return
            }
            if (posType === 101) {
                if (!title) {
                    message.error('请输入图文标题')
                    return
                }
                if (!cardInfoDesc[0] || !cardInfoDesc[1]) {
                    message.error('请输入广告文案')
                    return
                }
            }
        }
        if (Array.isArray(defaultValue)) {//叉乘
            setLoading(true)
            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      // 结束时间
                            }
                        }]
                    }]
                }
                if (posType === 999) {
                    if (crtSize === 1707) { // 卡片式广告
                        second = {
                            ...second,
                            materials: [{ ...second.materials[0], desc, title, out_material_use_canvas_top, crt_info: out_material_use_canvas_top === 1 ? '' : { image_url: imageUrl } }]
                        }
                    } else if (crtSize === 1480) { // 常规广告
                        second = {
                            ...second,
                            materials: [{ ...second.materials[0], desc }]
                        }
                    }
                } else if (posType === 0) {
                    let cardInfo: any = second.materials[0].crt_info.card_info
                    cardInfo.head_desc_type = headDescType
                    cardInfo.description = description
                    if (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: { ...shortVideo },
                                card_info: {
                                    ...cardInfo
                                }
                            } : {
                                ...second.materials[0].crt_info,
                                image_url: imageUrl,
                                card_info: {
                                    ...cardInfo
                                }
                            }
                        }]
                    }
                } else if (posType === 101) {
                    let cardInfo: any = second.materials[0].crt_info.card_info
                    descData[0] = cardInfoDesc[0]
                    descData[1] = cardInfoDesc[1]
                    if (cardInfoDesc[2]) {
                        descData[2] = cardInfoDesc[2]
                    }
                    cardInfo.head_desc_type = headDescType
                    cardInfo.description = description
                    cardInfo.desc = descData
                    if (headDescType === 1) {
                        let { description, ...newInfo } = cardInfo
                        cardInfo = newInfo
                    }
                    second = {
                        ...second,
                        materials: [{
                            ...second.materials[0], title, crt_info: {
                                ...second.materials[0].crt_info,
                                image_url: imageUrl,
                                card_info: {
                                    ...cardInfo
                                }
                            }
                        }]
                    }
                }
                let planDto: any = {}
                if (posType === 999) {
                    if (crtSize === 1707) {
                        planDto = { posType, content: desc, title, imageUrl, putLocation, planName, putTarget, pageId: pageData[0]?.id, firstContext: JSON.stringify(first), secondContext: JSON.stringify(second) }
                    } else if (crtSize === 1480) {
                        planDto = { posType, content: desc, putLocation, planName, putTarget, pageId: pageData[0]?.id, firstContext: JSON.stringify(first), secondContext: JSON.stringify(second) }
                    }
                    // planDto = { posType, content: desc, putLocation, planName, putTarget, pageId: pageData[0]?.id, firstContext: JSON.stringify(first), secondContext: JSON.stringify(second) }
                } else if (posType === 0) {
                    if (crtSize === 538) {
                        planDto = { posType, shortVideo: JSON.stringify(shortVideo), headDescType, description, planName, putLocation, putTarget, pageId: pageData[0]?.id, firstContext: JSON.stringify(first), secondContext: JSON.stringify(second) }
                    } else {
                        planDto = { posType, imageUrl, headDescType, description, planName, putLocation, putTarget, pageId: pageData[0]?.id, firstContext: JSON.stringify(first), secondContext: JSON.stringify(second) }
                    }
                } else if (posType === 101) {
                    planDto = { posType, imageUrl, headDescType, description, title, planName, descList: descData, putLocation, putTarget, pageId: pageData[0]?.id, firstContext: JSON.stringify(first), secondContext: JSON.stringify(second) }
                } else if (posType === 8) {
                    planDto = { posType, putLocation, putTarget, planName, pageId: pageData[0]?.id, firstContext: JSON.stringify(first), secondContext: JSON.stringify(second) }
                }

                let planDtos = 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 {
            let { planName, putLocation, putTarget, firstContext, secondContext } = planInfo
            let descData: string[] = []
            let first = JSON.parse(firstContext)
            let second = JSON.parse(secondContext)
            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      // 结束时间
                        }
                    }]
                }]
            }
            if (posType === 999) {
                if (crtSize === 1707) { // 卡片式广告
                    second = {
                        ...second,
                        materials: [{ ...second.materials[0], desc, title, out_material_use_canvas_top, crt_info: out_material_use_canvas_top === 1 ? '' : { image_url: imageUrl } }]
                    }
                } else if (crtSize === 1480) { // 常规广告
                    second = {
                        ...second,
                        materials: [{ ...second.materials[0], desc }]
                    }
                }

            } else if (posType === 0) {
                let cardInfo: any = second.materials[0].crt_info.card_info
                cardInfo.head_desc_type = headDescType
                cardInfo.description = description
                if (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: { ...shortVideo },
                            card_info: {
                                ...cardInfo
                            }
                        } : {
                            ...second.materials[0].crt_info,
                            image_url: imageUrl,
                            card_info: {
                                ...cardInfo
                            }
                        }
                    }]
                }
            } else if (posType === 101) {
                let cardInfo: any = second.materials[0].crt_info.card_info
                descData[0] = cardInfoDesc[0]
                descData[1] = cardInfoDesc[1]
                if (cardInfoDesc[2]) {
                    descData[2] = cardInfoDesc[2]
                }
                cardInfo.head_desc_type = headDescType
                cardInfo.description = description
                cardInfo.desc = descData
                if (headDescType === 1) {
                    let { description, ...newInfo } = cardInfo
                    cardInfo = newInfo
                }
                second = {
                    ...second,
                    materials: [{
                        ...second.materials[0], title, crt_info: {
                            ...second.materials[0].crt_info,
                            image_url: imageUrl,
                            card_info: {
                                ...cardInfo
                            }
                        }
                    }]
                }
            }
            let planDto: any = {}
            if (posType === 999) {
                if (crtSize === 1707) {
                    planDto = { posType, content: desc, title, imageUrl, putLocation, planName, putTarget, pageId: pageData[0]?.id, firstContext: JSON.stringify(first), secondContext: JSON.stringify(second) }
                } else if (crtSize === 1480) {
                    planDto = { posType, content: desc, putLocation, planName, putTarget, pageId: pageData[0]?.id, firstContext: JSON.stringify(first), secondContext: JSON.stringify(second) }
                }
            } else if (posType === 0) {
                if(crtSize === 538) {
                    planDto = { posType, shortVideo: JSON.stringify(shortVideo), headDescType, description, planName, putLocation, putTarget, pageId: pageData[0]?.id, firstContext: JSON.stringify(first), secondContext: JSON.stringify(second) }
                } else {
                    planDto = { posType, imageUrl, headDescType, description, planName, putLocation, putTarget, pageId: pageData[0]?.id, firstContext: JSON.stringify(first), secondContext: JSON.stringify(second) }
                }
            } else if (posType === 101) {
                planDto = { posType, imageUrl, headDescType, description, title, planName, descList: descData, putLocation, putTarget, pageId: pageData[0]?.id, firstContext: JSON.stringify(first), secondContext: JSON.stringify(second) }
            } else if (posType === 8) {
                planDto = { posType, putLocation, putTarget, planName, pageId: pageData[0]?.id, firstContext: JSON.stringify(first), secondContext: JSON.stringify(second) }
            }
            // return
            let planDtos = Array(copy_count).fill('').map(() => {
                return { ...planDto }
            })
            setCopyPlan.run({ planCreateLogId, begin_time, end_time, taskName: '批量复制' + '-' + moment().unix(), copy_count, planDtos }).then(res => {
                // window.location.href = '/#/launchSystem/launchManage/taskList'
                ajax && ajax?.refresh()
                hideHandle && hideHandle()
                clearSelect && clearSelect([])
            })
        }
    }, [desc, begin_time, end_time, copy_count, date_module, planInfo, pageData, planCreateLogId, authData, defaultValue, posType, imageUrl, headDescType, description, title, cardInfoDesc, loading, out_material_use_canvas_top, crtSize, shortVideo])

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

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

    /** 设置广告文案 */
    const setAdDesc = useCallback((value: string, index: number) => {
        let newDesc = [...cardInfoDesc]
        newDesc[index] = value
        setCardInfoDesc(newDesc)
    }, [cardInfoDesc])

    // 输入文案时判断
    const txtLength = (value: string) => {
        if (value) {
            let length = value?.length
            let text = value?.replace(/[\x00-\xff]/g, '')
            return text?.length + Number(((length - text?.length) / 2).toFixed())
        } else {
            return 0
        }
    }
    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}
            show={pageShow}
            productType={productType}
            localtion={posType}
            crtSize={Array.isArray(defaultValue) ? JSON.parse(defaultValue[0]?.planInfo?.secondContext)?.materials[0]?.crt_size : JSON.parse(defaultValue?.planInfo?.secondContext)?.materials[0]?.crt_size}
            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>{planInfo?.putLocation}</span>
                </div>
                <div className={style1.item}>
                    <label className={style1.label}>推广目标:</label>
                    <span>{planInfo?.putTarget}</span>
                </div>
            </div>
        </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>
        {/* posType === 999 朋友圈 === 0 底部 === 101 大图 */}
        {posType === 999 ? <>
            {crtSize === 1480 ? <>
                <BcForm name="外层文案" flex='flex-start'>
                    <div className={style.flexStart}>
                        <div>
                            <Input.TextArea
                                value={desc}
                                onChange={(e) => { setDesc(e.target.value) }}
                                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>
            </> : crtSize === 1707 ? <>
                <BcForm name="外层文案标题" flex='flex-start'>
                    <div className={style.flexStart}>
                        <div>
                            <Input.TextArea
                                value={title}
                                onChange={(e) => { setTitle(e.target.value) }}
                                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) }}
                                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={out_material_use_canvas_top} onChange={(e) => { setOut_material_use_canvas_top(e.target.value) }}>
                        <Radio value={1} disabled={isCanvasTop}>使用原生推广页顶部素材</Radio>
                        <Radio value={0}>上传素材</Radio>
                    </Radio.Group>
                </BcForm>
                {
                    out_material_use_canvas_top === 0 && <BcForm name="外层图片" flex="flex-start">
                        <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>
                }
            </> : null}

        </> : posType === 0 || posType === 101 ? <>
            {crtSize === 538 ? <BcForm name="广告位视频" flex="flex-start">
                <div>
                    <Button onClick={() => { selectImg() }}>{shortVideo?.video_url ? '修改视频' : '上传视频'}</Button>
                    {/* ≥ */}
                    <div style={{ marginTop: 8, fontSize: 13, color: '#8f9196' }}>视频尺寸960x540，不超过100MB，视频时长6-30秒</div>
                    {shortVideo?.video_url && <div style={{ marginTop: 20 }}><video width={100} src={shortVideo?.video_url} 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>}
            <BcForm name="信息栏类型">
                <Radio.Group className={style.radio} value={headDescType} onChange={(e) => { setHeadDescType(e.target.value); if (e.target.value === 1) { setDescription("") } }}>
                    <Radio value={1}>头像昵称型</Radio>
                    <Radio value={2}>文案型</Radio>
                </Radio.Group>
            </BcForm>
            {headDescType === 2 && <BcForm name="信息栏文案" flex="flex-start">
                <Input.TextArea showCount maxLength={12} value={description} onChange={(e) => { setDescription(e.target.value) }} placeholder="信息栏文案" autoSize />
            </BcForm>}

            {posType === 101 && <>
                <BcForm name="图文标题" flex="flex-start">
                    <Input.TextArea showCount maxLength={12} value={title} onChange={(e) => { setTitle(e.target.value) }} autoSize />
                </BcForm>
                <BcForm name="广告文案" flex="flex-start">
                    <>
                        <Input.TextArea showCount maxLength={16} value={cardInfoDesc[0]} onChange={(e) => { setAdDesc(e.target.value, 0) }} autoSize placeholder="请输入首行文案" />
                        <Input.TextArea showCount maxLength={16} value={cardInfoDesc[1]} onChange={(e) => { setAdDesc(e.target.value, 1) }} autoSize placeholder="次行文案" />
                        <Input.TextArea showCount maxLength={16} value={cardInfoDesc[2]} onChange={(e) => { setAdDesc(e.target.value, 2) }} 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)