ad-manage/src/pages/launchSystemV3/tencentAdPutIn/create/Dynamic/creativeConversionAssistant.tsx

import { Card, Checkbox, Form, Radio, Select, Space, Switch, Tooltip } from "antd"
import React, { useContext, useEffect, useMemo, useState } from "react"
import { DispatchDynamic } from "./newDynamic";
import style from '../index.less'
import New1Radio from "@/pages/launchSystemV3/components/New1Radio";
import { useUpdateEffect } from "ahooks";
import { QuestionCircleFilled } from "@ant-design/icons";
import { txtLength } from "@/utils/utils";
import TextAideInput from "@/pages/launchSystemV3/components/TextAideInput";
import styles from '../Material/index.less'
import SelectLabel from "./SelectLable"
import SelectCloudNew from "@/pages/launchSystemV3/material/cloudNew/selectCloudNew";

/**
 * 营销组件
 * @returns 
 */
const CreativeConversionAssistant: React.FC<{ automaticSiteEnabled?: boolean }> = ({ automaticSiteEnabled }) => {

    /**************************************/
    const { creativeComponents, form, isUpdate, setIsUpdate } = useContext(DispatchDynamic)!;
    const textLinkShow = Form.useWatch('textLinkShow', form)
    const actionButtonShow = Form.useWatch('actionButtonShow', form)
    const showDataShow = Form.useWatch('showDataShow', form)
    const pageSpec = Form.useWatch('pageSpec', form)
    const linkNameType = Form.useWatch(['textLink', 'value', 'linkNameType'], form)
    const conversionDataType = Form.useWatch(['showData', 'value', 'conversionDataType'], form)
    const conversionTargetType = Form.useWatch(['showData', 'value', 'conversionTargetType'], form)
    const floatingZone = Form.useWatch('floatingZone', form)
    const floatingZoneSwitch = Form.useWatch(['floatingZone', 'value', 'floatingZoneSwitch'], form)
    const floatingZoneType = Form.useWatch(['floatingZone', 'value', 'floatingZoneType'], form)
    const image = Form.useWatch(['floatingZone', 'value', 'image'], form)
    const creativeTemplateId = Form.useWatch('creativeTemplateId', form)
    const cardType: string[] = Form.useWatch('cardType', form)
    const [cardData, setCardData] = useState<{ label: string, value: string, disabled?: boolean }[]>([])
    const [materialConfig, setMaterialConfig] = useState<{
        adcreativeTemplateId?: number,
        type: string,
        cloudSize: { relation: string, width: number, height: number }[],
        list: any[],
        index: number,
        max: number,
        sliderImgContent: any,
        isGroup?: boolean
    }>({
        type: '',//类型
        cloudSize: [],//素材搜索条件
        list: [],//素材
        index: 0, // 素材组下标
        max: 1,//素材数量
        sliderImgContent: undefined
    })//图片素材配置
    const [selectCloudData, setSelectCloudData] = useState<{
        defaultParams: {
            sizeQueries?: {
                width: number,
                height: number,
                relation: string
            }[],
            materialType: 'image' | 'video'
            fileSize: number
        }
        num: number
    }>()
    const [selectVideoVisible, setSelectVideoVisible] = useState(false)
    /**************************************/

    useUpdateEffect(() => {
        if (isUpdate) {
            setDefaultShouData()
        }
    }, [linkNameType, conversionDataType, conversionTargetType, showDataShow, creativeComponents?.show_data, isUpdate])

    const setDefaultShouData = () => {
        setIsUpdate(false)
        if (showDataShow && creativeComponents?.show_data) {
            let showData = creativeComponents?.show_data;
            let link_name_type = linkNameType || ''
            let conversionDataTypeData = showData?.children?.conversion_data_type
            let values: any = {}
            if (conversionDataTypeData) {
                let conversionDataTypeEnumeration = (conversionDataTypeData.enumProperty.enumeration as { value: string, category: string, description: string }[])
                    .filter(item => item.category === link_name_type)
                    .map(item => item.value)
                if (conversionDataTypeEnumeration.length === 0) {
                    conversionDataTypeEnumeration = (conversionDataTypeData.enumProperty.enumeration as { value: string, category: string, description: string }[])
                        .filter(item => item.category === '')
                        .map(item => item.value)
                }
                if (!conversionDataTypeEnumeration.includes(conversionDataType)) {
                    values.conversionDataType = conversionDataTypeEnumeration?.[0]
                }
            }
            let conversionTargetTypeData = showData?.children?.conversion_target_type
            if (conversionTargetTypeData) {
                let conversionTargetTypeEnumeration = (conversionTargetTypeData.enumProperty.enumeration as { value: string, category: string, description: string }[])
                    .filter(item => item.category === link_name_type)
                    .map(item => item.value)
                if (conversionTargetTypeEnumeration.length === 0) {
                    conversionTargetTypeEnumeration = (conversionTargetTypeData.enumProperty.enumeration as { value: string, category: string, description: string }[])
                        .filter(item => item.category === '')
                        .map(item => item.value)
                }
                if (!conversionTargetTypeEnumeration.includes(conversionTargetType)) {
                    values.conversionTargetType = conversionTargetTypeEnumeration?.[0]
                }
            }
            let valueKeys = Object.keys(values)
            if (valueKeys.length > 0) {
                if (!valueKeys.includes('conversionTargetType')) {
                    values.conversionTargetType = conversionTargetType
                }
                if (!valueKeys.includes('conversionDataType')) {
                    values.conversionDataType = conversionDataType
                }
                console.log('values--->', values)
                form.setFieldsValue({
                    showData: {
                        value: values
                    }
                })
            }
        }
    }

    /** 微信文字链 */
    const textLinkContent = useMemo(() => {
        let textLink = creativeComponents?.text_link
        if (textLink && ![1707, 1708].includes(creativeTemplateId) && !automaticSiteEnabled) {
            let pageSpecPageType = pageSpec?.[0]?.pageType || 'PAGE_TYPE_WECHAT_CANVAS'
            let textLinkRequired, linkNameEnumeration: { label: string, value: string }[] = [];
            let linkNamePageType, linkNamePageTypeEnumeration: PULLIN.DataType[] = [];
            textLinkRequired = textLink.required
            let linkNameType = textLink.children.link_name_type
            linkNameEnumeration = (linkNameType.enumProperty.enumeration as { value: string, description: string }[]).map(item => ({ label: item.description, value: item.value }))
            linkNamePageType = textLink?.children?.page_type
            if (linkNamePageType) {
                linkNamePageTypeEnumeration = (linkNamePageType?.enumProperty?.enumeration as { value: string, description: string }[]).filter(item => item.value === pageSpecPageType).map(item => ({ label: item.description, value: item.value }))
            }

            return <Form.Item style={{ marginBottom: 0 }}>
                <div className={style.newSpace}>
                    <div className={style.newSpace_top}>
                        <div className={style.newSpace_title}>朋友圈文字链</div>
                        <Form.Item name={'textLinkShow'} valuePropName="checked" style={{ marginBottom: 0 }}>
                            <Switch disabled={textLinkRequired} onChange={() => setIsUpdate(true)} />
                        </Form.Item>
                    </div>
                </div>
                {textLinkShow && <Card bordered className="cardResetCss newCss" bodyStyle={{ padding: 0 }}>
                    <div className={style.newSpace}>
                        <div className={style.newSpace_top}>
                            <div className={style.newSpace_title}>文字链文案</div>
                            <Form.Item
                                name={['textLink', 'value', 'linkNameType']}
                                rules={[{ required: true, message: '请选择文字链文案' }]}
                                style={{ marginBottom: 0 }}
                            >
                                <Select
                                    style={{ width: 480 }}
                                    showSearch
                                    placeholder="请选择文字链文案"
                                    optionFilterProp="children"
                                    filterOption={(input, option: any) =>
                                        (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                                    }
                                    onChange={() => setIsUpdate(true)}
                                    options={linkNameEnumeration}
                                />
                            </Form.Item>
                        </div>
                    </div>
                    {linkNamePageType && <div className={style.newSpace}>
                        <div className={style.newSpace_top}>
                            <div className={style.newSpace_title}>跳转落地页</div>
                            <Form.Item
                                name={['textLink', 'value', 'jumpInfo', 'pageType']}
                                rules={[{ required: true, message: '请选择跳转落地页类型' }]}
                                style={{ marginBottom: 0 }}
                            >
                                <New1Radio data={linkNamePageTypeEnumeration} />
                            </Form.Item>
                        </div>
                    </div>}
                </Card>}
            </Form.Item>
        }
        return null
    }, [creativeComponents?.text_link, pageSpec, textLinkShow, creativeTemplateId, automaticSiteEnabled])

    /** 行动按钮 */
    const actionButtonContent = useMemo(() => {
        // 卡片广告用卡片组件控制
        if ([1707, 1708].includes(creativeTemplateId) && !cardType?.includes('action_button')) {
            return null
        }
        let actionButton = creativeComponents?.action_button
        if (actionButton) {
            let pageSpecPageType = pageSpec?.[0]?.pageType || 'PAGE_TYPE_WECHAT_CANVAS'
            let actionButtonRequired, butttonTextEnumeration: { label: string, value: string }[] = [];
            let actionButtonPageType, actionButtonPageTypeEnumeration: PULLIN.DataType[] = [];
            actionButtonRequired = actionButton.required
            let buttonText = actionButton.children.button_text
            butttonTextEnumeration = (buttonText.enumProperty.enumeration as { value: string }[]).map(item => ({ label: item.value, value: item.value }))
            actionButtonPageType = actionButton?.children?.page_type
            if (actionButtonPageType) {
                actionButtonPageTypeEnumeration = (actionButtonPageType?.enumProperty?.enumeration as { value: string, description: string }[]).filter(item => item.value === pageSpecPageType).map(item => ({ label: item.description, value: item.value }))
                if (pageSpecPageType === 'PAGE_TYPE_OFFICIAL' && actionButtonPageTypeEnumeration.length === 0) {
                    actionButtonPageTypeEnumeration = (actionButtonPageType?.enumProperty?.enumeration as { value: string, description: string }[]).filter(item => item.value === 'PAGE_TYPE_WECHAT_FOCUS_DAILOG').map(item => ({ label: item.description, value: item.value }))
                }
            }

            return <Form.Item style={{ marginBottom: 0 }}>
                {![1707, 1708].includes(creativeTemplateId) && <div className={style.newSpace}>
                    <div className={style.newSpace_top}>
                        <div className={style.newSpace_title}>行动按钮</div>
                        <Form.Item name={'actionButtonShow'} valuePropName="checked" style={{ marginBottom: 0 }}>
                            <Switch disabled={actionButtonRequired} />
                        </Form.Item>
                    </div>
                </div>}
                {(actionButtonShow || cardType?.includes('action_button')) && <Card bordered className="cardResetCss newCss" bodyStyle={{ padding: 0 }}>
                    <div className={style.newSpace}>
                        <div className={style.newSpace_top}>
                            <div className={style.newSpace_title}>按钮文案</div>
                            <Form.Item
                                name={['actionButton', 'value', 'buttonText']}
                                rules={[{ required: true, message: '请选择按钮文案' }]}
                                style={{ marginBottom: 0 }}
                            >
                                <Select
                                    style={{ width: 480 }}
                                    showSearch
                                    placeholder="请选择按钮文案"
                                    optionFilterProp="children"
                                    filterOption={(input, option: any) =>
                                        (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                                    }
                                    options={butttonTextEnumeration}
                                />
                            </Form.Item>
                        </div>
                    </div>
                    {actionButtonPageType && <div className={style.newSpace}>
                        <div className={style.newSpace_top}>
                            <div className={style.newSpace_title}>跳转落地页</div>
                            <Form.Item
                                name={['actionButton', 'value', 'jumpInfo', 'pageType']}
                                rules={[{ required: true, message: '请选择跳转落地页类型' }]}
                                style={{ marginBottom: 0 }}
                            >
                                <New1Radio data={actionButtonPageTypeEnumeration} />
                            </Form.Item>
                        </div>
                    </div>}
                </Card>}
            </Form.Item>
        }
        return null
    }, [creativeComponents?.action_button, pageSpec, actionButtonShow, cardType, creativeTemplateId])

    /** 标签 */
    const labelContent = useMemo(() => {
        // 卡片广告用卡片组件控制
        if ([1707, 1708].includes(creativeTemplateId) && !cardType?.includes('label')) {
            return null
        }
        let label = creativeComponents?.label;
        if (label) {
            const list = label.children.list

            return <Form.Item name={'creativeLabelDTOS'} style={{ marginTop: 16, marginBottom: 0 }} label={<strong>&nbsp;&nbsp;&nbsp;标签{label.required ? '' : '(选填)'}</strong>}>
                <SelectLabel arrayProperty={list.arrayProperty} />
            </Form.Item>
        }
        return null
    }, [creativeComponents?.label, cardType])

    /** 数据外显 */
    const showDataContent = useMemo(() => {
        let showData = creativeComponents?.show_data;
        if (showData) {
            let conversionDataTypeEnumeration: PULLIN.DataType[] = [];
            let conversionTargetTypeEnumeration: PULLIN.DataType[] = [];
            let link_name_type = linkNameType || ''
            let showDataRequired = showData?.required
            let conversionDataType = showData?.children?.conversion_data_type
            if (conversionDataType) {
                conversionDataTypeEnumeration = (conversionDataType.enumProperty.enumeration as { value: string, category: string, description: string }[])
                    .filter(item => item.category === link_name_type)
                    .map(item => ({ label: item.description, value: item.value }))
                if (conversionDataTypeEnumeration.length === 0) {
                    conversionDataTypeEnumeration = (conversionDataType.enumProperty.enumeration as { value: string, category: string, description: string }[])
                        .filter(item => item.category === '')
                        .map(item => ({ label: item.description, value: item.value }))
                }
            }
            let conversionTargetType = showData?.children?.conversion_target_type
            if (conversionTargetType) {
                conversionTargetTypeEnumeration = (conversionTargetType.enumProperty.enumeration as { value: string, category: string, description: string }[])
                    .filter(item => item.category === link_name_type)
                    .map(item => ({ label: item.description, value: item.value }))
                if (conversionTargetTypeEnumeration.length === 0) {
                    conversionTargetTypeEnumeration = (conversionTargetType.enumProperty.enumeration as { value: string, category: string, description: string }[])
                        .filter(item => item.category === '')
                        .map(item => ({ label: item.description, value: item.value }))
                }
            }
            // 卡片广告去掉商品数据
            if ([1707, 1708].includes(creativeTemplateId)) {
                conversionDataTypeEnumeration = conversionDataTypeEnumeration.filter(item => item.value !== "CONVERSION_DATA_PRODUCT_DATA")
            }

            return <Form.Item style={{ marginBottom: 0 }}>
                <div className={style.newSpace}>
                    <div className={style.newSpace_top}>
                        <div className={style.newSpace_title}>数据外显</div>
                        <Form.Item name={'showDataShow'} valuePropName="checked" style={{ marginBottom: 0 }}>
                            <Switch disabled={showDataRequired} onChange={() => setIsUpdate(true)} />
                        </Form.Item>
                    </div>
                </div>
                {showDataShow && <Card bordered className="cardResetCss newCss" bodyStyle={{ padding: 0 }}>
                    <div className={style.newSpace}>
                        <div className={style.newSpace_top}>
                            <div className={style.newSpace_title}>数据类型</div>
                            <Form.Item
                                name={['showData', 'value', 'conversionDataType']}
                                rules={[{ required: true, message: '请选择数据类型' }]}
                                style={{ marginBottom: 0 }}
                            >
                                <Radio.Group options={conversionDataTypeEnumeration} />
                            </Form.Item>
                        </div>
                    </div>
                    <div className={style.newSpace}>
                        <div className={style.newSpace_top}>
                            <div className={style.newSpace_title}>转化行为</div>
                            <Form.Item
                                name={['showData', 'value', 'conversionTargetType']}
                                rules={[{ required: true, message: '请选择转化行为' }]}
                                style={{ marginBottom: 0 }}
                            >
                                <Radio.Group options={conversionTargetTypeEnumeration} />
                            </Form.Item>
                        </div>
                    </div>
                </Card>}
            </Form.Item>
        }
        return null
    }, [creativeComponents?.show_data, linkNameType, showDataShow, creativeTemplateId])

    /** 浮层卡片 */
    const floatingZoneContent = useMemo(() => {
        let floatingZone = creativeComponents?.floating_zone;
        if (floatingZone) {
            let required = floatingZone?.required
            let children = floatingZone.children
            const { floating_zone_type, floating_zone_image_id, floating_zone_single_image_id, floating_zone_name, floating_zone_desc, floating_zone_button_text } = children
            const floatingZoneTypeList: PULLIN.DataType[] = []
            if (floating_zone_image_id) {
                floatingZoneTypeList.push({ label: "图文复合类型", value: "FLOATING_ZONE_TYPE_IMAGE_TEXT" })
            }
            if (floating_zone_single_image_id) {
                floatingZoneTypeList.push({ label: "单图类型", value: "FLOATING_ZONE_TYPE_SINGLE_IMAGE" })
            }
            let floatingZoneButtonTextEnumeration: { label: string, value: string }[] = [];
            if (floating_zone_button_text) {
                floatingZoneButtonTextEnumeration = (floating_zone_button_text.enumProperty.enumeration as { value: string, description: string }[]).map(item => ({ label: item.value, value: item.value }))
            }

            return <>
                <Form.Item style={{ marginBottom: 0 }}>
                    <div className={style.newSpace} style={{ border: 'none' }}>
                        <div className={style.newSpace_top}>
                            <div className={style.newSpace_title}>浮层卡片</div>
                            <Form.Item name={['floatingZone', 'value', 'floatingZoneSwitch']} rules={[{ required, message: '请选择浮层卡片!' }]} valuePropName="checked" style={{ marginBottom: 0 }}>
                                <Switch
                                    disabled={required}
                                    onChange={(e) => {
                                        if (e) {
                                            let floatingZoneData: any = {
                                                value: {
                                                    floatingZoneSwitch: true,
                                                    floatingZoneType: 'FLOATING_ZONE_TYPE_IMAGE_TEXT',
                                                    floatingZoneButtonText: '了解更多'
                                                }
                                            }
                                            if (floating_zone_image_id && floating_zone_button_text) {
                                                floatingZoneData.value.floatingZoneButtonText = floatingZone.children.floating_zone_button_text?.enumProperty?.enumeration[0]?.value
                                            }
                                            form.setFieldsValue({ floatingZone: floatingZoneData })
                                        }
                                    }}
                                />
                            </Form.Item>
                        </div>
                        {floatingZoneSwitch && <Form.Item name={['floatingZone', 'value', 'floatingZoneType']} rules={[{ required: floating_zone_type?.required, message: `请选择` + floating_zone_type?.description }]} style={{ marginTop: 10, marginBottom: 0 }}>
                            <New1Radio data={floatingZoneTypeList} />
                        </Form.Item>}
                    </div>

                    {(floatingZoneSwitch && floatingZoneType === 'FLOATING_ZONE_TYPE_IMAGE_TEXT') ? <Card bordered className="cardResetCss newCss" bodyStyle={{ padding: 0 }}>
                        <div className={style.newSpace}>
                            <div className={style.newSpace_top} style={{ alignItems: 'flex-start' }}>
                                <div className={style.newSpace_title}>{floating_zone_image_id?.description}</div>
                                <Form.Item
                                    rules={[{ required: true, message: '请选择素材!' }]}
                                    name={['floatingZone', 'value', 'image']}
                                >
                                    <div className={`${styles.box} ${styles.image}`} style={{ width: 300, height: 160 }} onClick={() => {
                                        setSelectCloudData({ defaultParams: { sizeQueries: [{ relation: '=', width: floating_zone_image_id.restriction.imageRestriction.width, height: floating_zone_image_id.restriction.imageRestriction.height }], fileSize: floating_zone_image_id.restriction.imageRestriction.fileSize * 1024, materialType: 'image' }, num: 1 })
                                        setMaterialConfig({
                                            ...materialConfig,
                                            type: 'floatingZoneImage',
                                            max: 1,
                                            index: 1,
                                            adcreativeTemplateId: creativeTemplateId
                                        })
                                        setTimeout(() => {
                                            setSelectVideoVisible(true)
                                        }, 100)
                                    }}>
                                        <p>
                                            {image?.floatingZoneImageUrl ? <img src={image?.floatingZoneImageUrl} /> : <>
                                                <span>{`推荐尺寸（${floating_zone_image_id.restriction.imageRestriction.width} x ${floating_zone_image_id.restriction.imageRestriction.height}）`}</span>
                                                <span>{`${floating_zone_image_id.restriction.imageRestriction.fileFormat?.map((str: any) => str?.replace('IMAGE_TYPE_', ''))}；小于 ${floating_zone_image_id.restriction.imageRestriction.fileSize}KB`}</span>
                                            </>}
                                        </p>
                                    </div>
                                </Form.Item>
                            </div>
                        </div>
                        <div className={style.newSpace}>
                            <div className={style.newSpace_top}>
                                <div className={style.newSpace_title}>{floating_zone_name?.description}</div>
                                <Form.Item
                                    name={['floatingZone', 'value', 'floatingZoneName']}
                                    rules={[{
                                        required: floating_zone_name.required, message: '请输入正确的' + floating_zone_name.description, validator: (rule, value) => {
                                            if (!value) {
                                                return Promise.reject()
                                            } else if (!value.match(RegExp(floating_zone_name.restriction.textRestriction.textPattern))) {
                                                return Promise.reject()
                                            } else if (txtLength(value) > floating_zone_name.restriction.textRestriction.maxLength) {
                                                return Promise.reject()
                                            }
                                            return Promise.resolve()
                                        }
                                    }]}
                                    style={{ marginBottom: 0 }}
                                >
                                    <TextAideInput isShowAjax={false} isSelectEmoji={false} placeholder={'请输入' + floating_zone_name.description} style={{ width: 480 }} maxTextLength={floating_zone_name.restriction.textRestriction.maxLength} />
                                </Form.Item>
                            </div>
                        </div>
                        <div className={style.newSpace}>
                            <div className={style.newSpace_top}>
                                <div className={style.newSpace_title}>{floating_zone_desc?.description}</div>
                                <Form.Item
                                    name={['floatingZone', 'value', 'floatingZoneDesc']}
                                    rules={[{
                                        required: floating_zone_desc.required, message: '请输入正确的' + floating_zone_desc.description, validator: (rule, value) => {
                                            if (!value) {
                                                return Promise.reject()
                                            } else if (!value.match(RegExp(floating_zone_desc.restriction.textRestriction.textPattern))) {
                                                return Promise.reject()
                                            } else if (txtLength(value) > floating_zone_desc.restriction.textRestriction.maxLength) {
                                                return Promise.reject()
                                            }
                                            return Promise.resolve()
                                        }
                                    }]}
                                    style={{ marginBottom: 0 }}
                                >
                                    <TextAideInput isShowAjax={false} isSelectEmoji={false} placeholder={'请输入' + floating_zone_desc.description} style={{ width: 480 }} maxTextLength={floating_zone_desc.restriction.textRestriction.maxLength} />
                                </Form.Item>
                            </div>
                        </div>
                        <div className={style.newSpace}>
                            <div className={style.newSpace_top}>
                                <div className={style.newSpace_title}>按钮文案</div>
                                <Form.Item
                                    name={['floatingZone', 'value', 'floatingZoneButtonText']}
                                    rules={[{ required: true, message: '请选择按钮文案' }]}
                                    style={{ marginBottom: 0 }}
                                >
                                    <Select
                                        style={{ width: 480 }}
                                        showSearch
                                        placeholder="请选择按钮文案"
                                        optionFilterProp="children"
                                        filterOption={(input, option: any) =>
                                            (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                                        }
                                        options={floatingZoneButtonTextEnumeration}
                                    />
                                </Form.Item>
                            </div>
                        </div>
                    </Card> : (floatingZoneSwitch && floatingZoneType === 'FLOATING_ZONE_TYPE_SINGLE_IMAGE') ? <Card bordered className="cardResetCss newCss" bodyStyle={{ padding: 0 }}>
                        <div className={style.newSpace}>
                            <div className={style.newSpace_top} style={{ alignItems: 'flex-start' }}>
                                <div className={style.newSpace_title}>{floating_zone_single_image_id?.description}</div>
                                <Form.Item
                                    rules={[{ required: true, message: '请选择素材!' }]}
                                    name={['floatingZone', 'value', 'image']}
                                >
                                    <div className={`${styles.box} ${styles.image}`} style={{ width: 300, height: 160 }} onClick={() => {
                                        setSelectCloudData({ defaultParams: { sizeQueries: [{ relation: '=', width: floating_zone_single_image_id.restriction.imageRestriction.width, height: floating_zone_single_image_id.restriction.imageRestriction.height }], fileSize: floating_zone_single_image_id.restriction.imageRestriction.fileSize * 1024, materialType: 'image' }, num: 1 })
                                        setMaterialConfig({
                                            ...materialConfig,
                                            type: 'floatingZoneSingleImage',
                                            max: 1,
                                            index: 1,
                                            adcreativeTemplateId: creativeTemplateId
                                        })
                                        setTimeout(() => {
                                            setSelectVideoVisible(true)
                                        }, 100)
                                    }}>
                                        <p>
                                            {image?.floatingZoneSingleImageUrl ? <img src={image?.floatingZoneSingleImageUrl} /> : <>
                                                <span>{`推荐尺寸（${floating_zone_single_image_id.restriction.imageRestriction.width} x ${floating_zone_single_image_id.restriction.imageRestriction.height}）`}</span>
                                                <span>{`${floating_zone_single_image_id.restriction.imageRestriction.fileFormat?.map((str: any) => str?.replace('IMAGE_TYPE_', ''))}；小于 ${floating_zone_single_image_id.restriction.imageRestriction.fileSize}KB`}</span>
                                            </>}
                                        </p>
                                    </div>
                                </Form.Item>
                            </div>
                        </div>
                    </Card> : null}
                </Form.Item>
            </>
        }
        return null
    }, [creativeComponents?.floating_zone, floatingZoneSwitch, floatingZoneType, image])

    useEffect(() => {
        let data = [
            { label: '不使用', value: 'not', disabled: false },
            { label: '行动按钮', value: 'action_button', disabled: cardType?.some(item => ['chosen_button', 'shop_imag'].includes(item)) },
            // { label: '选择按钮', value: 'chosen_button', disabled: cardType?.some(item => ['label', 'action_button', 'shop_imag'].includes(item)) },
            // { label: '卖点图', value: 'shop_imag', disabled: cardType?.some(item => ['chosen_button'].includes(item)) },
            { label: '标签', value: 'label', disabled: cardType?.some(item => ['chosen_button', 'count_down'].includes(item)) },
            // { label: '倒计时', value: 'count_down', disabled: cardType?.some(item => ['living_desc', 'label'].includes(item)) },
            // { label: '轮播文案', value: 'living_desc', disabled: cardType?.some(item => ['count_down'].includes(item)) }
        ]
        if (cardType?.length >= 3) {
            setCardData(data.map(item => {
                if (cardType.includes(item.value)) {
                    return { ...item, disabled: false }
                } else if (item.value === 'not') {
                    return { ...item, disabled: false }
                } else {
                    return { ...item, disabled: true }
                }
            }))
        } else {
            setCardData(data)
        }
    }, [cardType])

    if (Object.keys(creativeComponents).some(key => ['text_link', 'action_button', 'show_data', 'floating_zone', 'label'].includes(key))) {
        return <Card
            title={<strong style={{ fontSize: 18 }}>营销组件</strong>}
            className="cardResetCss"
        >
            {/* 卡片广告所需 */}
            {[1707, 1708].includes(creativeTemplateId) && <Form.Item style={{ marginBottom: 0 }}>
                <div className={style.newSpace}>
                    <div className={style.newSpace_top}>
                        <div className={style.newSpace_title}>
                            <Space>
                                <strong>卡片组件</strong>
                                <Tooltip title={<div>
                                    卡片组件有以下使用条件：<br />
                                    1.卡片组件最多只能使用 3 个<br />
                                    2.倒计时不能与标签、轮播文案同时使用<br />
                                    3.卖点图必须与行动按钮同时使用<br />
                                    4.选择按钮不能与行动按钮、标签、卖点图同时使用
                                </div>}>
                                    <QuestionCircleFilled />
                                </Tooltip>
                            </Space>
                        </div>
                        <Form.Item
                            noStyle
                            name={'cardType'}
                            rules={[{ required: true, message: '请选择跳转落地页类型' }]}
                            style={{ marginBottom: 0 }}
                            getValueFromEvent={(e: string[]) => {
                                if (e.length > 1 && !cardType.includes('not') && e.includes('not')) {
                                    return ['not'];
                                }
                                if (e.includes('shop_imag') && !e.includes('action_button')) {
                                    e.push('action_button')
                                }
                                return e.length > 0 ? (e.length > 1 && e.includes('not') ? e.filter(item => item !== 'not') : e) : ['not'];
                            }}
                        >
                            <Checkbox.Group options={cardData} onChange={(e) => {
                                console.log(e)
                            }} />
                        </Form.Item>
                    </div>
                </div>
            </Form.Item>}
            {textLinkContent}
            {actionButtonContent}
            {labelContent}
            {showDataContent}
            {floatingZoneContent}

            {/* 选择视频素材 */}
            {(selectVideoVisible && selectCloudData) && <SelectCloudNew
                {...selectCloudData}
                visible={selectVideoVisible}
                onClose={() => {
                    setSelectVideoVisible(false)
                    setSelectCloudData(undefined)
                }}
                sliderImgContent={materialConfig.type === 'floatingZoneSingleImage' ? image?.floatingZoneSingleImageUrl ? [{ oss_url: image.floatingZoneSingleImageUrl, id: image.floatingZoneSingleImageId }] : undefined : image?.floatingZoneImageUrl ? [{ oss_url: image.floatingZoneImageUrl, id: image.floatingZoneImageId }] : undefined}
                onChange={(content: any) => {
                    if (content.length > 0) {
                        if (materialConfig.type === 'floatingZoneSingleImage') {
                            form.setFieldsValue({
                                floatingZone: {
                                    ...floatingZone,
                                    value: {
                                        ...floatingZone?.value,
                                        image: { floatingZoneSingleImageId: content[0]?.id, floatingZoneSingleImageUrl: content[0]?.oss_url, floatingZoneSingleImageMaterialType: 0 }
                                    }
                                }
                            })
                        } else {
                            form.setFieldsValue({
                                floatingZone: {
                                    ...floatingZone,
                                    value: {
                                        ...floatingZone?.value,
                                        image: { floatingZoneImageId: content[0]?.id, floatingZoneImageUrl: content[0]?.oss_url, floatingZoneImageMaterialType: 0 }
                                    }
                                }
                            })
                        }
                    }
                    setSelectVideoVisible(false)
                }}
            />}
        </Card>
    } else {
        return null
    }
}

export default React.memo(CreativeConversionAssistant)