ad-manage/src/pages/launchSystemNew/launchManage/localAd/creative/modal.tsx

import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { Modal, Form, Input, Divider, Select, Radio, Switch, Spin, List } from 'antd'
import { SiteSetEnum, PromotedObjectType } from '@/services/launchAdq/enum'
import { ModalConfig } from '.'
import styles from './index.less'
import { outAdcreativeTemplateIdFun } from '../adenum';
import { useAjax } from '@/Hook/useAjax'
import { getText, get_adcreative_template, get_adcreative_template_list } from '@/services/launchAdq/global'
import { AdcreativeTemplate, AdcreativeTemplateList } from '@/services/launchAdq'
import { mySet } from '@/utils/arrFn'
import SelectCloud from '@/pages/launchSystemNew/components/selectCloud'
import { useModel } from '@/.umi/plugin-model/useModel'
interface Props {
    title?: string,
    visible: boolean,
    PupFn: (arg: ModalConfig) => void,
    callback: (params: any) => void,
    confirmLoading: boolean,
    type?: 'add' | 'look' | 'edit',//新增，查看，编辑
    dataInfo?: any
}
/**创意模板*/
function CreativeModal(props: Props) {
    let { visible,  confirmLoading, PupFn, callback ,type,dataInfo} = props
    const { init } = useModel('useLaunchAdq.useBdMediaPup')
    let arg = type === 'look' ? { footer: null } : {}
    // 请求
    const getAdcreativeTemplate = useAjax((params) => get_adcreative_template(params))
    const getAdcreativeTemplateList = useAjax((params) => get_adcreative_template_list(params))
    const getTextLsit = useAjax((params) => getText(params))
    // 变量
    const [adcreative_template, set_adcreative_template] = useState<AdcreativeTemplate>()
    const [adcreative_template_list, set_adcreative_template_list] = useState<AdcreativeTemplateList[]>([])
    const [selectImgVisible, set_selectImgVisible] = useState(false)
    const [descriptionShow, setdescriptionshow] = useState(false)
    const [endPageDescShow, setendPageDescnshow] = useState(false)
    const [titleShow, settitleshow] = useState(false)
    const [login,setlogin]=useState(true)
    const [form] = Form.useForm();
    const [pupState, setPupState] = useState({
        kp_show: false,
        xd_show: false,
        sj_show: false,
        bq_show: false,
        sp_show: false
    })
    const [materialConfig, setMaterialConfig] = useState<{ adcreativeTemplateId?: number, type: string, cloudSize: { relation: string, width: number, height: number }[], list: any[], max: number }>({
        type: '',//类型
        cloudSize: [],//素材搜索条件
        list: [],//素材
        max: 1,//素材数量
    })//素材配置
    const [conversionList, setConversionList] = useState<any>(null)
    let pageType = Form.useWatch('pageType', form)
    let adcreativeTemplateId = Form.useWatch('adcreativeTemplateId', form)
    let actionBtn = Form.useWatch('actionBtn', form)
    let siteSet = Form.useWatch('siteSet', form)
    let promotedObjectType = Form.useWatch('promotedObjectType', form)
    let adcreativeElementsType = Form.useWatch('adcreativeElementsType', form)
    let dataShow = Form.useWatch('dataShow', form)
    let conversionDataType = Form.useWatch('conversionDataType', form)
    let titles = Form.useWatch('title', form)
    let description = Form.useWatch('description', form)
    let videoOver = Form.useWatch('videoOver', form)
    let endPageDesc = Form.useWatch('endPageDesc', form)

    // 确定事件
    const handleOk = useCallback(() => {
        form.validateFields().then(values => {
            console.log('values=>1', values)
            let newValues = JSON.parse(JSON.stringify(values))
            for (let key in newValues) {
                switch (key) {
                    case 'image'://图素材
                        newValues.adcreativeElements = {
                            ...newValues.adcreativeElements,
                            imageUrl: materialConfig.list[0].url,
                        }
                        delete newValues[key]
                        break;
                    case 'video'://视频素材
                        newValues.adcreativeElements = {
                            ...newValues.adcreativeElements,
                            videoUrl: materialConfig.list[0].url,
                        }
                        delete newValues[key]
                        break;
                    case 'image_list'://图素材
                        newValues.adcreativeElements = {
                            imageUrlList: materialConfig.list?.map(item=>item.url),
                            description: newValues.description,
                        }
                        delete newValues[key]
                        break;
                    case 'short_video1'://视频素材
                        // newValues.adcreativeElements = {
                        //     video: materialConfig.list[0].url,
                        //     description: newValues.description,
                        // }
                        // delete newValues[key]
                        break;
                    case 'description'://文案
                        newValues.adcreativeElements = { ...newValues.adcreativeElements, description: newValues.description }
                        break;
                    case 'title'://文案
                        newValues.adcreativeElements = { ...newValues.adcreativeElements, title: newValues.title }
                        break;
                }
            }
            delete newValues.description //删除外层文案
            delete newValues.title //删除外层文案
            delete newValues.adcreativeElementsType //删除创意形式
            delete newValues.dataShow //删除数据开关
            delete newValues.actionBtn //删除行动开关
            console.log('newValues=>2', newValues)
            callback(newValues)
        })
        // PupFn({ visible: false })
    }, [form, materialConfig])
    // 获取创意形式列表
    useEffect(() => {
        if (siteSet?.length > 0 && promotedObjectType) {
            getAdcreativeTemplateList.run({
                siteSet,
                promotedObjectType,
                campaignType: 'CAMPAIGN_TYPE_NORMAL',
            }).then(res => {
                let newArr: any = []
                // 过滤掉相同的和即将下线的
                Object.values(res)?.forEach((arr: any) => {
                    Array.isArray(arr) && arr?.forEach((item: any) => {
                        if (newArr.length > 0) {
                            if (outAdcreativeTemplateIdFun(item.adcreativeTemplateId) && newArr.every((i: { adcreativeTemplateId: any }) => i.adcreativeTemplateId !== item.adcreativeTemplateId)) {
                                newArr.push(item)
                            } else {
                                // 找出通用创意
                                newArr = newArr?.map((arr: { adcreativeTemplateId: any }) => {
                                    if (arr.adcreativeTemplateId === item.adcreativeTemplateId) {
                                        return { ...arr, isGeneral: true }
                                    }
                                    return arr
                                })
                            }
                        } else {
                            if (outAdcreativeTemplateIdFun(item.adcreativeTemplateId)) {
                                newArr.push(item)
                            }
                        }
                    })
                })
                set_adcreative_template_list(newArr)
            })
        }
    }, [siteSet, promotedObjectType, form])
    // 获取创意形式详情
    useEffect(() => {
        // CAMPAIGN_TYPE_NORMAL
        if (siteSet?.length > 0 && promotedObjectType && adcreativeTemplateId) {
            if (adcreativeTemplateId) {
                getAdcreativeTemplate.run({
                    siteSet,
                    promotedObjectType,
                    adcreativeTemplateId
                }).then(res => {
                    if (res?.length > 0) {
                        set_adcreative_template(res[0])
                    }
                })
            }
        }
    }, [siteSet, promotedObjectType, adcreativeTemplateId])
    // 获取对应落地页按钮
    const pageTypeList = useMemo(() => {
        if (adcreativeTemplateId) {
            let arr: any = adcreative_template?.landingPageConfig?.supportPageTypeList
            return arr
        }
        return null

    }, [adcreativeTemplateId, adcreative_template])
    // 获取对应行动按钮数据
    const linkNameList = useMemo(() => {
        if (pageType) {
            let arr = (pageTypeList?.filter((item: { pageType: any; }) => item.pageType === pageType)[0] as any)?.supportLinkNameType?.list
            return arr
        }
        return null
    }, [pageType, pageTypeList])
    // 跳转落地页
    const linkPageList = useMemo(() => {
        if (pageType) {
            let arr = (pageTypeList?.filter((item: { pageType: any; }) => item.pageType === pageType)[0] as any)?.supportLinkPageType?.list
            return arr
        }
        return null
    }, [pageType, pageTypeList])
    // 切换创意形式默认选中第一个
    useEffect(() => {
        // 设置默认选中第一个
        if (adcreativeElementsType && adcreative_template_list?.length > 0) {
            let adcreativeTemplateIdArr = adcreative_template_list?.filter(item => item.adcreativeTemplateStyle === adcreativeElementsType)
            form.setFieldsValue({ adcreativeTemplateId: adcreativeTemplateIdArr[0].adcreativeTemplateId })
        }
    }, [adcreativeElementsType, adcreative_template_list])


    //每次选中创意设置该展示的界面
    useEffect(() => {
        let states = {
            kp_show: false,
            xd_show: true,
            sj_show: false,
            bq_show: false,
            sp_show: false
        }
        let values: any = { pageType: 'PAGE_TYPE_CANVAS_WECHAT', }
        if (adcreative_template) {
            let pageList = adcreative_template?.landingPageConfig?.supportPageTypeList
            let pageType = pageList?.length ? pageList[0]?.pageType : null
            //数据展示组件
            if (adcreative_template.adcreativeAttributes.some(item => item.name === 'conversion_data_type' || item.name === 'conversion_target_type')) {
                let arr = adcreative_template.adcreativeAttributes?.filter((item: { name: string; }) => item.name === 'conversion_data_type' || item.name === 'conversion_target_type')
                let newObj: any = {}
                arr.forEach((item) => {
                    let arr: any[] = mySet(item.propertyDetail.enumDetail.enumeration)
                    newObj[item.name] = arr
                })
                setConversionList(newObj)

                states = { ...states, sj_show: true }
                values = { ...values, conversionDataType: newObj.conversion_data_type[0].value, conversionTargetType: newObj.conversion_target_type[0].value }
            }
            //行动按钮组件存在
            if (states.xd_show) {
                let linkNameList = (pageList?.filter((item: { pageType: any; }) => item.pageType === pageType)[0] as any)?.supportLinkNameType?.list
                let linkPageList = (pageList?.filter((item: { pageType: any; }) => item.pageType === pageType)[0] as any)?.supportLinkPageType?.list
                if (linkNameList) {
                    let linkNameType = linkNameList[0]?.linkNameType
                    let linkPageType = linkPageList[0]?.linkPageType
                    values = { ...values, linkNameType, linkPageType }
                } else {
                    states = { ...states, xd_show: false }
                }
            }
            // 视频结束页 end_page
            if (adcreative_template.adcreativeElements.some(item => item.name === 'end_page')) {
                // let endPageType =adcreative_template?.adcreativeElements?.filter(item=>item.name === 'end_page_type')[0]?.enumProperty?.enumeration
                values = { ...values, endPageType: 'END_PAGE_AVATAR_NICKNAME_HIGHLIGHT' }
                states = { ...states, sp_show: true }
            }
            setPupState(states)
            form.setFieldsValue(values)
        }
    }, [adcreative_template])
    // 版位改变清空数据
    useEffect(() => {
        if (materialConfig.adcreativeTemplateId && adcreativeTemplateId !== materialConfig.adcreativeTemplateId) {
            setMaterialConfig({ ...materialConfig, adcreativeTemplateId: undefined, list: [] })
        }
    }, [adcreativeTemplateId, materialConfig])
    // 文案助手
    const textList = useCallback((arg: { maxTextLength: number, keyword?: string }) => {
        let { maxTextLength, keyword } = arg
        getTextLsit.run({ keyword: keyword || titles || description, maxTextLength })
    }, [titles, description])
    // 监听点击取消文案助手弹窗
    useEffect(() => {
        let modal = document.querySelector('.myModal')
        let onBiurdescription = (e: any) => {
            let d = document.querySelector('.my_description')
            let t = document.querySelector('.my_title')
            let p = document.querySelector('.my_endPageDesc')
            if (!d?.contains(e.target)) {
                setdescriptionshow(false)
            }
            if (!t?.contains(e.target)) {
                settitleshow(false)
            }
            if (!p?.contains(e.target)) {
                setendPageDescnshow(false)
            }
        }
        modal?.addEventListener('click', onBiurdescription)
        return () => {
            modal?.removeEventListener('click', onBiurdescription)
        }

    }, [])
    // 数据回填
    useEffect(()=>{
        if(dataInfo && adcreative_template_list?.length >0 && adcreative_template){
            let {adcreativeName,adcreativeTemplateId,conversionDataType,conversionTargetType,linkNameType,linkPageType,pageType,promotedObjectType,siteSet,adcreativeElements} = dataInfo
            let {description,imageUrl,title,videoUrl,imageUrlList} = adcreativeElements
            let obj:any={
                adcreativeName,
                siteSet,
                promotedObjectType,
                adcreativeTemplateId,
            }
            if([720,721,618,1708].some(n=>n === adcreativeTemplateId)){
                obj={...obj,adcreativeElementsType:'视频'}
            }else{
                obj={...obj,adcreativeElementsType:'图片'}
            }
            if(conversionDataType){
                obj={...obj,conversionDataType,dataShow:true}
            }
            if(conversionTargetType){
                obj={...obj,conversionTargetType,dataShow:true}
            }
            if(linkNameType){
                obj={...obj,linkNameType,actionBtn:true}
            }
            if(linkPageType){
                obj={...obj,linkPageType,actionBtn:true}
            }
            if(pageType){
                obj={...obj,pageType}
            }
            if(description){
                obj={...obj,description}
            }
            if(title){
                obj={...obj,title}
            }
            if(videoUrl){
                setMaterialConfig({
                    cloudSize:[],
                    list:[{url:videoUrl}],
                    max:1,
                    type:'video',
                    adcreativeTemplateId
                })
            }
            if(imageUrl){
                setMaterialConfig({
                    cloudSize:[],
                    list:[{url:imageUrl}],
                    max:1,
                    type:'image',
                    adcreativeTemplateId
                })
            }
            if(imageUrlList){
                setMaterialConfig({
                    cloudSize:[],
                    list:imageUrlList?.map((url: any)=>({url})),
                    max:imageUrlList.length,
                    type:'image_list',
                    adcreativeTemplateId
                })
            }
            form.setFieldsValue(obj)
        }
    },[dataInfo,adcreative_template_list,adcreative_template])
    return <Modal
        visible={visible}
        title={type === 'add' ? '新建创意' : type === 'look' ? '创意详情' : '编辑创意'}
        onCancel={() => { PupFn({ visible: false,dataInfo:null,type:'add' }) }}
        onOk={handleOk}
        width={1200}
        confirmLoading={confirmLoading}
        className='myModal'
        {...arg}
    >
        <Form
            form={form}
            labelCol={{ span: 5 }}
            labelWrap={true}
            initialValues={
                {
                    adcreativeElementsType: '视频',
                    promotedObjectType: 'PROMOTED_OBJECT_TYPE_WECHAT_OFFICIAL_ACCOUNT',
                    siteSet: ['SITE_SET_MOMENTS', 'SITE_SET_WECHAT'],
                    // actionBtn: false,//行动按钮
                    // dataShow: false,//数据展示
                }
            }
        >
            {/* ============================================================基本信息============================================================= */}
            <Divider orientation='center'>基本信息</Divider>
            {/* ============================================================创意名称============================================================= */}
            <Form.Item label={<strong>创意名称</strong>} name='adcreativeName' rules={[{ required: true, message: '请输入广告名称!' }]}>
                <Input placeholder='创意名称' style={{ width: 300 }} />
            </Form.Item>
            {/* ============================================================推广目标类型============================================================= */}
            <Form.Item label={<strong>推广目标类型</strong>} name='promotedObjectType' rules={[{ required: true, message: '请选择推广告推广目标类型!' }]}>
                <Select style={{ width: 300 }} showSearch filterOption={(input, option) =>
                    (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
                } allowClear>
                    {
                        Object.keys(PromotedObjectType).map(key => {
                            return <Select.Option value={key} key={key}>{PromotedObjectType[key]}</Select.Option>
                        })
                    }
                </Select>
            </Form.Item>
            {/* ============================================================投放版位============================================================= */}
            <Form.Item label={<strong>投放版位</strong>} name='siteSet' rules={[{ required: true, message: '请输入选择广告版位！' }]}>
                <Select mode='multiple' style={{ width: 300 }} allowClear>
                    {
                        Object.keys(SiteSetEnum).map(key => {
                            return <Select.Option value={key} key={key}>{SiteSetEnum[key]}</Select.Option>
                        })
                    }
                </Select>
            </Form.Item>
            {/* ============================================================创意形式============================================================= */}
            <Divider orientation='center'>创意形式</Divider>
            {/* ============================================================创意形式============================================================= */}
            <Form.Item label={<strong>创意形式</strong>} name='adcreativeElementsType'>
                <Radio.Group >
                    <Radio.Button value="视频">视频</Radio.Button>
                    <Radio.Button value="图片">图片</Radio.Button>
                </Radio.Group>
            </Form.Item>

            {
                getAdcreativeTemplateList?.loading ? <Spin tip="Loading..." style={{ width: '100%' }}></Spin> :
                    <>
                        <Form.Item style={{ marginLeft: 177 }} name='adcreativeTemplateId'>
                            <Radio.Group className={styles.adcreative_template}>
                                {
                                    adcreative_template_list?.filter(item => item.adcreativeTemplateStyle === adcreativeElementsType)?.map((item: any) => {
                                        return <Radio.Button value={item.adcreativeTemplateId} key={item.adcreativeTemplateId}>
                                            <div className={styles.adcreative_template_item}>
                                                {item.isGeneral && <span style={{ color: '#4080ff', fontSize: 10 }}>所选版位通投</span>}
                                                <img src={item.adcreativeSampleImage} />
                                                <span style={{fontSize:12,height:20,lineHeight:'20px'}}>{item.adcreativeTemplateAppellation}</span>
                                                <span style={{fontSize:12,height:20,lineHeight:'20px'}}>{item.adcreativeTemplateId}</span>
                                            </div>
                                        </Radio.Button>
                                    })
                                }
                            </Radio.Group>
                        </Form.Item>
                        {/* ============================================================创意内容============================================================= */}
                        <Divider orientation='center'>创意内容</Divider>
                        {/* ============================================================素材============================================================= */}
                        {/* 优先展示视频或图片 */}
                        {
                            adcreative_template?.adcreativeElements?.filter(item => item.required && item.name === 'image_list' || item.name === 'short_video1' || item.name === 'video' || item.name === 'image').map(item => {
                                return <Form.Item label={<strong>{item.description}</strong>} rules={[{ required: true, message: '请选择素材!' }]} key={item.name} name={item.name}>
                                    {/* 视频 */}
                                    {
                                        (item.name === 'short_video1' || item.name === 'video') && <div className={`${styles.box} ${styles.video}`} onClick={() => {
                                            init({ mediaType: 'VIDEO', cloudSize: [[{ relation: '=', width: item.restriction.videoRestriction.minWidth, height: item.restriction.videoRestriction.minHeight }]] })
                                            setTimeout(() => {
                                                set_selectImgVisible(true)
                                                setMaterialConfig({
                                                    ...materialConfig,
                                                    type: item.name,
                                                    max: 1,
                                                    adcreativeTemplateId
                                                })
                                            }, 100)
                                        }}>
                                            <p>
                                                {
                                                    materialConfig?.list[0] ? <video src={materialConfig?.list[0].url} /> : <>
                                                        <span>{`推荐尺寸（${item.restriction.videoRestriction.minWidth} x ${item.restriction.videoRestriction.minHeight}）`}</span>
                                                        <span>{`${item.restriction.videoRestriction.fileFormat?.map(str => str?.replace('MEDIA_TYPE_', ''))};< ${item.restriction.videoRestriction.fileSize / 1024}M;时长 ≥ ${item.restriction.videoRestriction.minDuration}s,≤ ${item.restriction.videoRestriction.maxDuration}s,必须带有声音`}</span>
                                                    </>
                                                }
                                            </p>
                                        </div>
                                    }
                                    {/* 单图 */}
                                    {
                                        item.name === 'image' && <div className={`${styles.box} ${styles.image}`} onClick={() => {
                                            init({ mediaType: 'IMG', cloudSize: [[{ relation: '=', width: item.restriction.imageRestriction.width, height: item.restriction.imageRestriction.height }]] })
                                            setTimeout(() => {
                                                set_selectImgVisible(true)
                                                setMaterialConfig({
                                                    ...materialConfig,
                                                    type: item.name,
                                                    max: 1,
                                                    adcreativeTemplateId
                                                })
                                            }, 100)

                                        }}>
                                            <p>
                                                {materialConfig?.list[0] ? <img src={materialConfig?.list[0].url} /> : <>
                                                    <span>{`推荐尺寸（${item.restriction.imageRestriction.width} x ${item.restriction.imageRestriction.height}）`}</span>
                                                    <span>{`${item.restriction.imageRestriction.fileFormat?.map(str => str?.replace('IMAGE_TYPE_', ''))}；小于 ${item.restriction.imageRestriction.fileSize}KB`}</span>
                                                </>
                                                }
                                            </p>
                                        </div>
                                    }
                                    {/* 多图 */}
                                    {
                                        item.name === 'image_list' && <div className={`${styles.box} ${item.arrayProperty.maxNumber >= 3 ? styles.image_list : styles.image}`} onClick={() => {
                                            init({ mediaType: 'IMG', num: item.arrayProperty.maxNumber, cloudSize: [[{ relation: '=', width: item.restriction.imageRestriction.width, height: item.restriction.imageRestriction.height }]] })
                                            setTimeout(() => {
                                                set_selectImgVisible(true)
                                                setMaterialConfig({
                                                    ...materialConfig,
                                                    type: item.name,
                                                    max: item.arrayProperty.maxNumber,
                                                    adcreativeTemplateId
                                                })
                                            }, 100)
                                        }}>
                                            {
                                                Array(item.arrayProperty.maxNumber).fill('').map((arr, index) => {
                                                    return <p key={index}>
                                                        {
                                                            materialConfig?.list[index] ? <img src={materialConfig?.list[index].url} /> : <>
                                                                <span>{`推荐尺寸（${item.restriction.imageRestriction.width} x ${item.restriction.imageRestriction.height}）`}</span>
                                                                <span>{`${item.restriction.imageRestriction.fileFormat?.map(str => str?.replace('IMAGE_TYPE_', ''))}；小于 ${item.restriction.imageRestriction.fileSize}KB`}</span>
                                                            </>
                                                        }

                                                    </p>
                                                })
                                            }
                                        </div>
                                    }
                                </Form.Item>
                            })
                        }
                        {/* 标题 */}
                        {
                            adcreative_template?.adcreativeElements?.filter(item => item.name === 'title').map(item => {
                                return <div key={item.fieldType}>
                                    <Form.Item label={<strong>{item.description}(选填)</strong>} className={'my_title'} >
                                        <Form.Item name={item.name} rules={[{ pattern: RegExp(item.restriction.textRestriction.textPattern?.replace(/\+/ig, `{1,${item.restriction.textRestriction.maxLength}}`)), message: '请输入正确的' + item.description }]} noStyle>
                                            <Input
                                                placeholder={'请输入' + item.description}
                                                style={{ width: 500 }}
                                                allowClear
                                                onFocus={() => {
                                                    settitleshow(true)
                                                    textList({ maxTextLength: item.restriction.textRestriction.maxLength })
                                                }}
                                                onChange={(e) => {
                                                    let value = e.target.value
                                                    textList({ maxTextLength: item.restriction.textRestriction.maxLength, keyword: value })
                                                }}
                                            />
                                        </Form.Item>
                                        <span>{`${titles?.length ?? 0}/${item.restriction.textRestriction.maxLength}`}</span>
                                        {
                                            titleShow && <List
                                                loading={getTextLsit?.loading}
                                                size="small"
                                                style={{ maxHeight: 300, overflowX: 'auto' }}
                                                bordered
                                                dataSource={getTextLsit?.data?.returnTexts}
                                                renderItem={(item: any) => <List.Item onClick={() => {
                                                    form.setFieldsValue({ title: item.text })
                                                    settitleshow(false)
                                                }}><span >{item.text}{item.tag && <span className={styles.crt}>{'CTR 高'}</span>}</span></List.Item>}
                                            />
                                        }
                                    </Form.Item>
                                </div>
                            })
                        }
                        {//过滤了不必传和品牌名称，品牌标识图（外部传）短视频结构（组装使用）
                            adcreative_template?.adcreativeElements?.filter(item => item.required && item.name === 'description').map(item => {
                                return <div key={item.fieldType}>
                                    <Form.Item label={<strong>{item.description}</strong>} className={'my_description'}>
                                        <Form.Item name={item.name} noStyle rules={[{ required: true, pattern: RegExp(item.restriction.textRestriction.textPattern?.replace(/\+/ig, `{1,${item.restriction.textRestriction.maxLength}}`)), message: '请输入正确的' + item.description }]}>
                                            <Input
                                                placeholder={'请输入' + item.description}
                                                style={{ width: 500 }}
                                                onFocus={() => {
                                                    setdescriptionshow(true)
                                                    textList({ maxTextLength: item.restriction.textRestriction.maxLength })
                                                }}
                                                onChange={(e) => {
                                                    let value = e.target.value
                                                    textList({ maxTextLength: item.restriction.textRestriction.maxLength, keyword: value })
                                                }}
                                                allowClear
                                            />
                                        </Form.Item>
                                        <span>{`${description?.length ?? 0}/${item.restriction.textRestriction.maxLength}`}</span>
                                        {
                                            descriptionShow && <List
                                                loading={getTextLsit?.loading}
                                                size="small"
                                                style={{ maxHeight: 300, overflowX: 'auto' }}
                                                bordered
                                                dataSource={getTextLsit?.data?.returnTexts}
                                                renderItem={(item: any) => <List.Item onClick={(e: any) => {
                                                    form.setFieldsValue({ description: item.text })
                                                    setdescriptionshow(false)
                                                }}><span >{item.text}{item.tag && <span className={styles.crt}>{'CTR 高'}</span>}</span></List.Item>}
                                            />
                                        }
                                    </Form.Item>
                                </div>
                            })
                        }
                        {/* ============================================================落地页============================================================= */}
                        <Form.Item label={<strong>落地页</strong>} name='pageType'>
                            <Radio.Group>
                                {
                                    pageTypeList?.map((item: any) => {
                                        return <Radio.Button value={item.pageType} key={item.pageType} disabled={!item.description.includes('微信原生推广页')}>{item.description.includes('微信原生推广页') ? '微信原生推广页' : item.description}</Radio.Button>
                                    })
                                }
                            </Radio.Group>
                        </Form.Item>
                        {/* ============================================================行动按钮============================================================= */}
                        {
                            pupState.xd_show && <Form.Item label={<strong>行动按钮</strong>} name='actionBtn' valuePropName="checked">
                                <Switch checkedChildren="开启" unCheckedChildren="关闭" />
                            </Form.Item>
                        }
                        {
                            actionBtn && <>
                                <div style={{ display: 'flex' }}>
                                    <p style={{ marginBottom: 5, marginLeft: 177 }}><strong style={{ marginRight: 20 }}>按钮文案</strong></p>
                                    <Form.Item name='linkNameType'>
                                        <Select style={{ width: 200 }} showSearch filterOption={(input, option) =>
                                            (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
                                        } allowClear>
                                            {
                                                linkNameList?.map((item: any) => {
                                                    return <Select.Option value={item.linkNameType} key={item.linkNameType}>{item.description}</Select.Option>
                                                })
                                            }
                                        </Select>
                                    </Form.Item>
                                </div>
                                <div style={{ display: 'flex' }}>
                                    <p style={{ marginBottom: 5, marginLeft: 177 }}><strong style={{ marginRight: 20 }}>跳转落地页</strong></p>
                                    <Form.Item name='linkPageType'>
                                        <Radio.Group>
                                            {
                                                linkPageList?.map((item: { linkPageType: string; description: string; }, index: number) => {
                                                    return <Radio.Button value={item.linkPageType} key={item.linkPageType}>{item.description}</Radio.Button>
                                                })
                                            }
                                        </Radio.Group>
                                    </Form.Item>
                                </div>
                            </>
                        }
                        {/* ============================================================数据展示============================================================= */}
                        {pupState.sj_show && <Form.Item label={<strong>数据展示</strong>} name='dataShow' valuePropName="checked">
                            <Switch checkedChildren="开启" unCheckedChildren="关闭" />
                        </Form.Item>}
                        {
                            dataShow && <>
                                <div style={{ display: 'flex' }}>
                                    <p style={{ marginBottom: 5, marginLeft: 177 }}><strong style={{ marginRight: 20 }}>数据类型</strong></p>
                                    <Form.Item name='conversionDataType'>
                                        <Radio.Group>
                                            {
                                                conversionList?.conversion_data_type?.map((item: { value: string; description: string; }, index: number) => {
                                                    return <Radio.Button value={item.value} key={item.value}>{item.description}</Radio.Button>
                                                })
                                            }
                                        </Radio.Group>
                                    </Form.Item>
                                </div>
                                {conversionDataType === 'CONVERSION_DATA_ADMETRIC' && <div style={{ display: 'flex' }}>
                                    <p style={{ marginBottom: 5, marginLeft: 177 }}><strong style={{ marginRight: 20 }}>转化行为</strong></p>
                                    <Form.Item name='conversionTargetType'>
                                        <Radio.Group>
                                            {
                                                conversionList?.conversion_target_type?.map((item: { value: string; description: string; }, index: number) => {
                                                    return <Radio.Button value={item.value} key={item.value}>{item.description}</Radio.Button>
                                                })
                                            }
                                        </Radio.Group>
                                    </Form.Item>
                                </div>}
                            </>
                        }
                        {/* ============================================================视频结束页============================================================= */}
                        {pupState.sp_show && <Form.Item label={<strong>视频结束页</strong>} name='videoOver' valuePropName="checked">
                            <Switch checkedChildren="开启" unCheckedChildren="关闭" />
                        </Form.Item>}
                        {
                            videoOver && <>
                                <div style={{ display: 'flex', alignItems: 'center', marginBottom: 10 }}>
                                    <p style={{ marginBottom: 5, marginLeft: 177 }}><strong style={{ marginRight: 20 }}>视频结束页类型</strong></p>
                                    <Form.Item name='endPageType' style={{ marginBottom: 0 }} >
                                        <Radio.Group>
                                            {
                                                adcreative_template?.adcreativeElements?.filter(item => item.name === 'end_page_type')[0]?.enumProperty?.enumeration?.map((item) => {
                                                    return <Radio.Button value={item.value} key={item.value}>{item.description}</Radio.Button>
                                                })
                                            }
                                        </Radio.Group>
                                    </Form.Item>
                                </div>
                                <div className={'my_endPageDesc'}>
                                    <div style={{ display: 'flex', alignItems: 'center' }} >
                                        <p style={{ marginBottom: 5, marginLeft: 177 }}><strong style={{ marginRight: 20 }}>结束文案</strong></p>
                                        <Form.Item name='endPageDesc' rules={[{ required: true, pattern: RegExp("^[^\\<\\>\\&'\\\"\\/\\x08\\x09\\x0A\\x0D\\\\]{1,12}$"), message: '请输入正确的结束页文案' }]} style={{ marginBottom: 0, marginRight: 10 }}>
                                            <Input
                                                placeholder='请输入结束页文案'
                                                style={{width:300}}
                                                onFocus={() => {
                                                    setendPageDescnshow(true)
                                                    textList({ maxTextLength: 12 })
                                                }}
                                                onChange={(e) => {
                                                    let value = e.target.value
                                                    textList({ maxTextLength: 12, keyword: value })
                                                }}
                                                allowClear
                                            />
                                        </Form.Item>
                                        <span>{endPageDesc?.length || 0}/12</span>
                                    </div>
                                    {
                                        endPageDescShow && <List
                                            loading={getTextLsit?.loading}
                                            size="small"
                                            style={{ maxHeight: 300, maxWidth: 300, overflowX: 'auto', marginLeft: 253 }}
                                            bordered
                                            dataSource={getTextLsit?.data?.returnTexts}
                                            renderItem={(item: any) => <List.Item onClick={(e: any) => {
                                                form.setFieldsValue({ endPageDesc: item.text })
                                                setendPageDescnshow(false)
                                            }}><span >{item.text}{item.tag && <span className={styles.crt}>{'CTR 高'}</span>}</span></List.Item>}
                                        />
                                    }
                                </div>
                            </>
                        }
                    </>
            }
        </Form>
        {/* 选择素材 */}
        {
            selectImgVisible && <SelectCloud
                visible={selectImgVisible}
                onClose={() => set_selectImgVisible(false)}
                sliderImgContent={materialConfig.list}
                onChange={(content) => {
                    if (content.length > 0) {
                        form.setFieldsValue({ [materialConfig.type]: materialConfig.type })
                    }
                    setMaterialConfig({ ...materialConfig, list: content })
                    set_selectImgVisible(false)
                    console.log(content)
                }} />
        }
    </Modal >
}
export default CreativeModal