import { Modal, Radio, Space, Switch, Image, Input, Button, message } from "antd"
import React, { useCallback, useEffect, useState } from "react"
import { useModel } from "umi"
import { BcForm } from '../AdBasicConfig'
import style from '../AdBasicConfig/index.less'
import { originalitySize, MOMENTSVIDEO, MOMENTSIMAGE } from '../adList'
import ClerkAide from "./components/ClerkAide"
import SelectImg from '@/pages/launchSystem/launchManage/components/selectImg'
import { txtLength } from "@/utils/utils"

export interface State {
    name?: string,//创意名称
    pattern?: string, // 创意模式
}
interface Props {
    visible: boolean,
    hideModel: () => void,
    pageData?: any[]
}
function AdOriginality(props: Props) {
    const { visible, hideModel, pageData } = props

    // 变量start
    const { state, dispatch, setAdcreative, setAdcreativeType, resetPage } = useModel('useLaunch.useNewCreateAd')
    const { adcreative, material, adgroup } = state
    const { adcreative_template_id, link_page_type, link_name_type, adcreative_elements, page_spec, adcreative_name } = adcreative
    const { site_set, scene_spec, bid_mode } = adgroup
    const { info_bar_spec } = adcreative_elements
    const [smType, setSmType] = useState<'IMAGE' | 'VIDEO'>('IMAGE')   // 素材类型
    const [textChainOpen, setTextChainOpen] = useState<boolean>(true)  // 是否开启文字链
    const [fieldType, setFieldType] = useState<'one' | 'two'>('one') // 文案字段
    const [clerkAideVisible, setClerkAideVisible] = useState<boolean>(false)
    const [selectImgVisible, setSelectImgVisible] = useState<boolean>(false)   // 选择图片弹窗
    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 })   // 307200 要选择的素材信息
    const [creativeDisabled, setCreativeDisabled] = useState<boolean>(false)  // 是否不允许选择使用落地页素材
    // 变量end

    // 处理落地页
    useEffect(() => {
        if (pageData && pageData?.length > 0) {
            if (adcreative_template_id === '1707') {
                let topType = pageData[0]?.topCanvasType
                if (topType === 101) {
                    // 设置创意 外层素材来源使用 上传素材
                    setCreativeDisabled(true)
                } 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) {
                        // 设置创意 外层素材来源使用 上传素材
                        setCreativeDisabled(true)
                    } else {
                        setCreativeDisabled(false)
                    }
                } else {
                    setCreativeDisabled(false)
                }
            } else if (adcreative_template_id === '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) {
                        setCreativeDisabled(true)
                    }
                } else {
                    setCreativeDisabled(false)
                }
            } else {
                setCreativeDisabled(false)
            }
        }
    }, [pageData])

    // 开机判断是否设置了文字链
    useEffect(() => {
        if (link_page_type && link_name_type) {
            setTextChainOpen(() => true)
        } else {
            setTextChainOpen(() => false)
        }
    }, [link_page_type, link_name_type])
    // 判断创意样式
    useEffect(() => {
        switch (adcreative_template_id) {
            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 (MOMENTSVIDEO.includes(adcreative_template_id)) {
            setSmType('VIDEO')
        }
        if (MOMENTSIMAGE.includes(adcreative_template_id)) {
            setSmType('IMAGE')
        }
    }, [adcreative_template_id])

    const handleOk = useCallback(() => {
        if (site_set[0] === "SITE_SET_MOMENTS") { // 朋友圈信息流
            if (['311', '641', '642', '643', '618', '1465', '1480'].includes(adcreative_template_id)) {  // 常规大图
                if (txtLength(adcreative_elements.title) === 0 || txtLength(adcreative_elements.title) > 40) {
                    message.error('外层文案输入有误，请修改')
                    return
                }
            } else { // 常规横板大图
                if (txtLength(adcreative_elements.title) === 0 || txtLength(adcreative_elements.title) > 10) {
                    message.error('外层文案标题输入有误，请修改')
                    return
                }
                if (txtLength(adcreative_elements.description) === 0 || txtLength(adcreative_elements.description) > 30) {
                    message.error('外层文案输入有误，请修改')
                    return
                }
                if (page_spec?.override_canvas_head_option === "OPTION_KEEP_DIFFERENT" && !material.url) {
                    message.error('请上传外层素材')
                    return
                }
            }
        } else { // 公众平台流量
            if (scene_spec?.wechat_position?.length === 0) { // 没有开启 广告位定向
                if (!material.url) {
                    message.error('请上传外部素材')
                    return
                }
                if (txtLength(adcreative_elements.title) === 0 || txtLength(adcreative_elements.title) > 12) {
                    message.error('卡片文案输入有误，请修改')
                    return
                }
                if (txtLength(adcreative_elements?.description) === 0 || txtLength(adcreative_elements?.description) > 16) {
                    message.error('首行文案输入有误，请修改')
                    return
                }
                if (txtLength(adcreative_elements?.caption) === 0 || txtLength(adcreative_elements?.caption) > 16) {
                    message.error('次行文案输入有误，请修改')
                    return
                }
            }
            if (adcreative_template_id === '928' && info_bar_spec?.info_bar_type === 'INFO_BAR_TYPE_TITLE'){
                if (!info_bar_spec?.info_bar_description) {
                    message.error('请输入信息栏文案')
                    return 
                }
            }
        }
        hideModel()
    }, [site_set, adcreative_template_id, adcreative_elements, scene_spec, material, page_spec])

    /** 选择图片 */
    const selectImg = useCallback(() => {
        setSelectImgVisible(true)
    }, [selectImgVisible])

    /** 弹窗返回设置图片 */
    const setImg = useCallback((value: any[]) => {
        switch (adcreative_template_id) {
            case '1707':
                dispatch({ type: 'setMaterial', params: { ...state, material: { ...material, type: 'image', url: value[0]?.content } } })
                break
            case '928':
                dispatch({ type: 'setMaterial', params: { ...state, material: { ...material, type: 'image', url: value[0]?.content } } })
                break
            case '929':
                dispatch({ type: 'setMaterial', params: { ...state, material: { ...material, type: 'video', url: value[0]?.content } } })
                break
            case '1708':
                dispatch({ type: 'setMaterial', params: { ...state, material: { ...material, type: 'video', url: value[0]?.content } } })
                break

        }
    }, [material?.url, adcreative_template_id])

    return <Modal
        bodyStyle={{ height: 600, overflowY: 'auto' }}
        title={`创意基本信息`}
        visible={visible}
        onCancel={() => { hideModel && hideModel() }}
        onOk={handleOk}
        width={900}
        className={style.AdBasicConfig}
    >
        {/* 选择文案 */}
        {clerkAideVisible && <ClerkAide
            fieldType={fieldType}
            visible={clerkAideVisible}
            hideModel={() => { setClerkAideVisible(false) }}
            onChange={(value1, value2) => {
                if (fieldType === 'one') {
                    setAdcreative('adcreative_elements', { ...adcreative_elements, title: value1 })
                } else {
                    setAdcreative('adcreative_elements', { ...adcreative_elements, title: value1, description: value2 })
                }
            }}
        ></ClerkAide>}

        {/* 选择图片 视频 */}
        {selectImgVisible && <SelectImg visible={selectImgVisible} hideModel={() => { setSelectImgVisible(false) }} num={1} onChange={setImg} listParams={imgSize} sliderImgContent={material?.url ? [{ content: material?.url }] : []}></SelectImg>}

        <div className={style.title}>创意样式</div>
        <BcForm name="素材类型">
            {site_set[0] === "SITE_SET_MOMENTS" ? <Radio.Group className={style.radio} value={smType} onChange={(e) => {
                setSmType(e.target.value)
                if (e.target.value === 'IMAGE') {
                    setAdcreativeType("311");
                } else if (e.target.value === 'VIDEO') {
                    setAdcreativeType("618");
                }
                resetPage()
            }}>
                <Radio.Button value="IMAGE">图片</Radio.Button>
                <Radio.Button value="VIDEO">视频</Radio.Button>
            </Radio.Group> : <span>{['929', '618', '1465', '1480', '1064', '1708', '721'].includes(adcreative_template_id) ? '视频' : '图片'}</span>}
        </BcForm>
        <BcForm name="创意样式">
            <Radio.Group className={style.radio} value={adcreative_template_id} onChange={(e) => { setAdcreativeType(e.target.value); resetPage() }}>
                {site_set[0] === 'SITE_SET_MOMENTS' ? smType === 'IMAGE' ? <>
                    <Radio.Button value="311">常规大图</Radio.Button>
                    <Radio.Button value="1707">卡片横板大图</Radio.Button>
                    <Radio.Button value="641">常规3图</Radio.Button>
                    <Radio.Button value="642">常规4图</Radio.Button>
                    <Radio.Button value="643">常规6图</Radio.Button>
                </> : <>
                    <Radio.Button value="618">常规视频4:3</Radio.Button>
                    <Radio.Button value="1465">常规视频16:9</Radio.Button>
                    <Radio.Button value="1480">竖版视频750:1334</Radio.Button>
                    <Radio.Button value="1708">卡片横版视频</Radio.Button>
                </> : <>
                    {scene_spec?.wechat_position?.length === 0 ? <>
                        {adcreative_template_id === "928" ?
                            <Radio.Button value="928">大图式卡片</Radio.Button> : adcreative_template_id === "929" ?
                                <Radio.Button value="929">视频式卡片</Radio.Button> : null}
                    </> : <>
                        {bid_mode === 'BID_MODE_OCPM' ? <Radio.Button value="929">视频式卡片</Radio.Button> : <Radio.Button value="928">大图式卡片</Radio.Button>}
                    </>}
                </>}
            </Radio.Group>
        </BcForm>
        <BcForm name="素材规格">
            <span>{originalitySize[adcreative_template_id]} 像素</span>
        </BcForm>

        {['311', '641', '642', '643', '618', '1465', '1480'].includes(adcreative_template_id) ? <>
            {/* 常规大图 */}
            <div className={style.title}>跳转类型</div>
            <BcForm name="点击跳转">
                <Radio.Group className={style.radio} value={"1"} onChange={() => { }}>
                    <Radio value="1">原生推广页</Radio>
                </Radio.Group>
            </BcForm>
            <BcForm name="文字链">
                <Switch checkedChildren="开启" unCheckedChildren="关闭" size="small" checked={textChainOpen} onChange={(e) => {
                    setTextChainOpen(e)
                    if (e) {
                        setAdcreative('link_page_type', 'LINK_PAGE_TYPE_WECHAT_OFFICIAL_ACCOUNT_DETAIL')
                        setAdcreative('link_name_type', 'READ_NOVELS')
                    } else {
                        setAdcreative('link_page_type', 'All')
                        setAdcreative('link_name_type', 'All')
                    }
                }} />
            </BcForm>
            {textChainOpen && <BcForm name="文字链文案">
                <Radio.Group className={style.radio} value={link_name_type} onChange={(e) => { setAdcreative('link_name_type', e.target.value) }}>
                    <Radio value="FOLLOW_OFFICIAL_ACCOUNT">关注公众号</Radio>
                    <Radio value="MORE_INFO">了解更多</Radio>
                    <Radio value="READ_NOVELS">阅读小说</Radio>
                </Radio.Group>
            </BcForm>}

            <div className={style.title}>转化</div>
            <BcForm name="原生推广页">
                <div className={style.flexStart} style={{ alignItems: 'center' }}>
                    {pageData && pageData.length > 0 ? <div>{pageData[0]?.name}</div> : <div>{"<空>"}</div>}
                </div>
            </BcForm>
            {pageData && 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' }} />
                            :
                            <span>无此类型预览，请联系管理员</span>}
                </div>
            </BcForm>}

            <BcForm name="外层文案" flex='flex-start'>
                <div className={style.flexStart}>
                    <div>
                        <Input.TextArea
                            value={adcreative_elements.title}
                            onChange={(e) => { setAdcreative('adcreative_elements', { ...adcreative_elements, title: 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(adcreative_elements?.title) > 40 && '广告文案不得超过40字，请缩短输入内容'}</div>
                            <div>{txtLength(adcreative_elements?.title)}/40</div>
                        </div>
                    </div>
                    <Button onClick={() => { setFieldType('one'); setClerkAideVisible(true) }}>文案助手</Button>
                </div>
            </BcForm>
        </> : ['1707', '1708'].includes(adcreative_template_id) ? <>
            <div className={style.title}>转化</div>
            <BcForm name="原生推广页">
                <div className={style.flexStart} style={{ alignItems: 'center' }}>
                    {pageData && pageData.length > 0 ? <div>{pageData[0]?.name}</div> : <div>{"<空>"}</div>}
                </div>
            </BcForm>
            {pageData && 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' }} />
                            :
                            <span>无此类型预览，请联系管理员</span>}
                </div>
            </BcForm>}

            <BcForm name="外层素材来源">
                <Radio.Group className={style.radio} value={page_spec?.override_canvas_head_option} onChange={(e) => { setAdcreative('page_spec', { ...page_spec, override_canvas_head_option: e.target.value }) }}>
                    <Radio value="OPTION_CANVAS_OVERRIDE_CREATIVE" disabled={creativeDisabled}>使用原生推广页顶部素材</Radio>
                    <Radio value="OPTION_KEEP_DIFFERENT">上传素材</Radio>
                </Radio.Group>
            </BcForm>
            {
                page_spec?.override_canvas_head_option === "OPTION_KEEP_DIFFERENT" && <BcForm name="外层素材" flex="flex-start">
                    {adcreative_template_id === '1708' ? <>
                        <Button onClick={() => { selectImg() }}>{material?.url ? '修改视频' : '上传视频'}</Button>
                        <div style={{ marginTop: 8, fontSize: 13, color: '#8f9196' }}>视频大小{originalitySize[adcreative_template_id]}像素</div>
                        {material?.url && <div style={{ marginTop: 20 }}><video width={100} src={material?.url} style={{ borderRadius: 8, overflow: 'hidden' }} /></div>}
                    </> :
                        <div>
                            <Button onClick={() => { selectImg() }}>{material?.url ? '修改图片' : '上传图片'}</Button>
                            <div style={{ marginTop: 8, fontSize: 13, color: '#8f9196' }}>图片大小{originalitySize[adcreative_template_id]}像素，不超过300KB</div>
                            {material?.url && <div style={{ marginTop: 20 }}><Image width={100} src={material?.url} style={{ borderRadius: 8, overflow: 'hidden' }} /></div>}
                        </div>}
                </BcForm>
            }

            <BcForm name="外层文案标题" flex='flex-start'>
                <div className={style.flexStart}>
                    <div>
                        <Input.TextArea
                            value={adcreative_elements.title}
                            onChange={(e) => { setAdcreative('adcreative_elements', { ...adcreative_elements, title: e.target.value }) }}
                            className={style.textArea}
                            style={{ width: 300 }}
                            placeholder="文案友好、易阅读和理解，建议与图片设计、详情页内容关联。"
                            autoSize={{ minRows: 2, maxRows: 2 }}
                        />
                        <div className={style.maxLength}>
                            <div style={{ color: 'rgb(242, 77, 77)', fontSize: 12 }}>{txtLength(adcreative_elements.title) > 10 && '广告文案不得超过10字，请缩短输入内容'}</div>
                            <div>{txtLength(adcreative_elements.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={adcreative_elements.description}
                            onChange={(e) => { setAdcreative('adcreative_elements', { ...adcreative_elements, description: e.target.value }) }}
                            className={style.textArea}
                            style={{ width: 300 }}
                            placeholder="文案友好、易阅读和理解，建议与图片设计、详情页内容关联。"
                            autoSize={{ minRows: 3, maxRows: 4 }}
                        />
                        <div className={style.maxLength}>
                            <div style={{ color: 'rgb(242, 77, 77)', fontSize: 12 }}>{txtLength(adcreative_elements.description) > 30 && '广告文案不得超过30字，请缩短输入内容'}</div>
                            <div>{txtLength(adcreative_elements.description)}/30</div>
                        </div>
                    </div>
                </div>
            </BcForm>
        </> : adcreative_template_id === "928" || adcreative_template_id === "929" ? <>
            <div className={style.title}>转化</div>
            <BcForm name="原生推广页">
                <div className={style.flexStart} style={{ alignItems: 'center' }}>
                    {pageData && pageData.length > 0 ? <div>{pageData[0]?.name}</div> : <div>{"<空>"}</div>}
                </div>
            </BcForm>
            {pageData && 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' }} />
                            :
                            <span>无此类型预览，请联系管理员</span>}
                </div>
            </BcForm>}
            <BcForm name="外层素材" flex="flex-start">
                <div>
                    {adcreative_template_id === '929' ? <>
                        <Button onClick={() => { selectImg() }}>{material?.url ? '修改视频' : '上传视频'}</Button>
                        <div style={{ marginTop: 8, fontSize: 13, color: '#8f9196' }}>视频大小{originalitySize[adcreative_template_id]}像素</div>
                        {material?.url && <div style={{ marginTop: 20 }}><video width={100} src={material?.url} style={{ borderRadius: 8, overflow: 'hidden' }} /></div>}
                    </> : <>
                        <Button onClick={() => { selectImg() }}>{material?.url ? '修改图片' : '上传图片'}</Button>
                        <div style={{ marginTop: 8, fontSize: 13, color: '#8f9196' }}>图片大小{originalitySize[adcreative_template_id]}像素，不超过300KB</div>
                        {material?.url && <div style={{ marginTop: 20 }}><Image width={100} src={material?.url} style={{ borderRadius: 8, overflow: 'hidden' }} /></div>}
                    </>}

                </div>
            </BcForm>
            {
                adcreative_template_id === '928' && <>
                    <BcForm name="卡片文案" flex="flex-start">
                        <Radio.Group className={style.radio} value={info_bar_spec?.info_bar_type} onChange={(e) => {
                            setAdcreative('adcreative_elements', { ...adcreative_elements, info_bar_spec: { ...info_bar_spec, info_bar_type: e.target.value, info_bar_description: '' } })
                        }}>
                            <Radio value="INFO_BAR_TYPE_HEAD">头像昵称型</Radio>
                            <Radio value="INFO_BAR_TYPE_TITLE">文案型</Radio>
                        </Radio.Group>
                    </BcForm>
                    {info_bar_spec?.info_bar_type === 'INFO_BAR_TYPE_TITLE' && <BcForm name="信息栏文案">
                        <Input.TextArea showCount maxLength={14} style={{ width: 300 }} className={style.textArea} value={info_bar_spec.info_bar_description} onChange={(e) => { setAdcreative('adcreative_elements', { ...adcreative_elements, info_bar_spec: { ...info_bar_spec, info_bar_description: e.target.value?.replace(/\r|\n/ig, "") } }) }} autoSize placeholder="请输入" />
                    </BcForm>}
                </>
            }
            <BcForm name="卡片文案" flex="flex-start">
                <Input.TextArea showCount maxLength={12} style={{ width: 300 }} className={style.textArea} value={adcreative_elements.title} onChange={(e) => { setAdcreative('adcreative_elements', { ...adcreative_elements, title: e.target.value?.replace(/\r|\n/ig, "") }) }} autoSize placeholder="请输入" />
            </BcForm>
            <BcForm name="广告文案" flex="flex-start">
                <>
                    <Input.TextArea autoSize showCount maxLength={16} style={{ width: 300 }} className={style.textArea} value={adcreative_elements.description} onChange={(e) => { setAdcreative('adcreative_elements', { ...adcreative_elements, description: e.target.value?.replace(/\r|\n/ig, "") }) }} placeholder="请输入首行文案" />
                    <Input.TextArea autoSize showCount maxLength={16} style={{ width: 300 }} className={style.textArea} value={adcreative_elements.caption} onChange={(e) => { setAdcreative('adcreative_elements', { ...adcreative_elements, caption: e.target.value?.replace(/\r|\n/ig, "") }) }} placeholder="请输入次行文案" />
                    <Input.TextArea autoSize showCount maxLength={16} style={{ width: 300 }} className={style.textArea} value={adcreative_elements.left_bottom_txt} onChange={(e) => { setAdcreative('adcreative_elements', { ...adcreative_elements, left_bottom_txt: e.target.value?.replace(/\r|\n/ig, "") }) }} placeholder="请输入第三行文案（选填）" />
                </>
            </BcForm>
            <BcForm name="按钮文案">
                <Radio.Group className={style.radio} value={link_name_type} onChange={(e) => { setAdcreative('link_name_type', e.target.value) }}>
                    <Radio value="MORE_INFO">了解更多</Radio>
                    <Radio value="FOLLOW_OFFICIAL_ACCOUNT">关注公众号</Radio>
                </Radio.Group>
            </BcForm>
        </> : <></>}


        <div className={style.form}>
            <div className={style.content}>
                <div className={style.label}><label>创意名称</label></div>
                <div className={style.control}>
                    <div className={style.children}>
                        <div className={style.inputGroup}>
                            <span>{`<落地页(小说)>-<当前时间>`}</span>
                            <Input maxLength={10} className={`${style.input}`} placeholder='自定义标记' value={adcreative_name} onChange={(e) => {
                                setAdcreative('adcreative_name', e.target.value)
                            }} />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </Modal>
}

export default React.memo(AdOriginality)