ad-manage/src/pages/launchSystemNew/launchManage/createAd/adcreativeCol.tsx

import { useAjax } from "@/Hook/useAjax"
import { PromotedObjectType, SiteSetEnum } from "@/services/launchAdq/enum"
import { get_adcreative_template_list } from "@/services/launchAdq/global"
import React, { useEffect, useState } from "react"
import { outAdcreativeTemplateIdFun } from "../localAd/adenum"
import { Image, Space, Spin } from "antd"

/**
 * 创意详情
 */
interface Props {
    data: any,
    onChange?: (value: string) => void
}
const AdcreativeCol: React.FC<Props> = (props) => {

    /***************************/
    const { data, onChange } = props
    const { adcreativeName, promotedObjectType, siteSet, adcreativeTemplateId, adcreativeElements } = data
    const [adcreative_template_list, set_adcreative_template_list] = useState<any[]>([])

    const getAdcreativeTemplateList = useAjax((params) => get_adcreative_template_list(params))
    /***************************/

    /** 获取创意形式 */
    useEffect(() => {
        if (siteSet?.length > 0 && promotedObjectType && !(adcreative_template_list.length > 0)) {
            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])

    useEffect(() => {
        if (adcreative_template_list?.length > 0 && adcreativeTemplateId) {
            onChange && onChange(adcreative_template_list?.find((item: any) => item?.adcreativeTemplateId === adcreativeTemplateId)?.adcreativeTemplateAppellation || '')
        }
    }, [adcreative_template_list, adcreativeTemplateId])

    return <Spin size="small" spinning={getAdcreativeTemplateList?.loading}>
        <div>创意名称: <span>{adcreativeName}</span></div>
        <div>推广目标: <span>{PromotedObjectType[promotedObjectType]}</span></div>
        <div>广告版位: <span>{siteSet?.map((item: string) => SiteSetEnum[item]).toString()}</span></div>
        <div>创意形式: <span>{adcreative_template_list?.find((item: any) => item?.adcreativeTemplateId === adcreativeTemplateId)?.adcreativeTemplateAppellation || ''}</span></div>
        {adcreativeElements?.description && <div>创意文案: <span>{adcreativeElements?.description}</span></div>}
        {adcreativeElements?.title && <div>文案: <span>{adcreativeElements?.title}</span></div>}
        {adcreativeElements?.imageUrl && <div style={{ display: 'flex', alignItems: 'flex-start' }}>创意素材: <Image width={80} src={adcreativeElements?.imageUrl} style={{ borderRadius: 8, overflow: 'hidden', marginLeft: 5 }} /></div>}
        {adcreativeElements?.imageUrlList && <div style={{ display: 'flex', alignItems: 'flex-start', flexWrap: 'wrap' }}><span style={{ marginRight: 4 }}>创意素材:</span> <Image.PreviewGroup>
            <Space wrap>
                {adcreativeElements?.imageUrlList?.map((url: string, index: number) => <Image width={50} src={url} style={{ borderRadius: 4 }} key={'TOP_SLIDER' + index} />)}
            </Space>
        </Image.PreviewGroup></div>}
        {adcreativeElements?.shortVideoStruct?.shortVideo1Url && <div style={{ display: 'flex', alignItems: 'flex-start' }}><span style={{ marginRight: 4 }}>创意素材:</span> <video src={adcreativeElements?.shortVideoStruct?.shortVideo1Url} width={130} controls></video></div>}
        {adcreativeElements?.videoUrl && <div style={{ display: 'flex', alignItems: 'flex-start' }}><span style={{ marginRight: 4 }}>创意素材:</span> <video src={adcreativeElements?.videoUrl} width={130} controls></video></div>}
    </Spin>
}

export default React.memo(AdcreativeCol)