ad-manage/src/pages/launchSystemNew/launchManage/createAd/creativeCL/index.tsx

import { CreateAdProps } from "@/services/launchAdq/createAd"
import { BaseResult } from "@ahooksjs/use-request/lib/types"
import { Col, Select, Space, Spin, Tooltip } from "antd"
import React, { useCallback, useState } from "react"
import { ModalConfig } from "../ad"
import style from '../index.less'
import AdcreativeCol from "../adcreativeCol"
import CreativePup from "./modal"
import Material from "./modal/material"
import Copywriting from "./modal/copywriting"


type Props = {
    queryForm: Partial<CreateAdProps>,
    setQueryForm: React.Dispatch<React.SetStateAction<Partial<CreateAdProps>>>,
    getSysAdcreative: BaseResult<any, any>,
    clearData: () => void,
    targetKey: string,
}
const CreativeCL: React.FC<Props> = (props) => {

    /********************************/
    const { queryForm, getSysAdcreative, setQueryForm, clearData, targetKey } = props

    const [adModalConfig, setAdModalConfig] = useState<ModalConfig>({//新建广告弹窗
        visible: false,
        type: 'add'
    })
    /********************************/

    // 设置变量
    const handleAdModalConfig = useCallback((arg: ModalConfig) => {
        setAdModalConfig({ ...adModalConfig, ...arg })
    }, [adModalConfig])

    return <>
        <Col className={style.conRightBorder}>
            <div className={style.top}>创意基本信息</div>
            <div className={style.center}>
                {
                    queryForm?.taskMediaMaps?.filter((item, index) => index === 0)?.map((item, index) => {
                        return <Spin spinning={getSysAdcreative.loading} key={index}>
                            <div className={style.centerContent}>
                                {item.sysAdcreative && <AdcreativeCol data={item.sysAdcreative} />}
                            </div>
                        </Spin>
                    })
                }
            </div>
            <div className={style.bottom}>
                <Space size={20}>
                    {queryForm?.sysAdgroup ? <>
                        <span onClick={() => { handleAdModalConfig(queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysAdcreative ? { visible: true, type: 'edit' } : { visible: true, type: 'add' }) }}>{queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysAdcreative ? '编辑' : '添加'}</span>
                    </> : <Tooltip title="请先设置广告">
                        <span>添加</span>
                    </Tooltip>}
                </Space>
            </div>

            {/* 创建创意 */}
            {adModalConfig.visible && <CreativePup visible={adModalConfig.visible} type={adModalConfig.type} PupFn={handleAdModalConfig} callback={(values: any, material: any, textData: any[]) => {
                let arr = queryForm.taskMediaMaps || []
                let adqPageArr: any = queryForm.adqPageList || []
                let pageArr: any = queryForm.pageList || []
                adqPageArr[targetKey as string] = null//清除adq落地页
                pageArr[targetKey as string] = null//清除本地落地页
                arr[targetKey] = { sysAdcreative: values }
                setQueryForm({ ...queryForm, taskMediaMaps: arr, adqPageList: adqPageArr, pageList: pageArr, materialData: material, materials: [], textData, texts: [] }); clearData();
                handleAdModalConfig({ visible: false, dataInfo: null, type: 'add' })
            }} dataInfo={queryForm?.taskMediaMaps && queryForm?.taskMediaMaps[targetKey]?.sysAdcreative} queryForm={queryForm} />}
        </Col>
        <Col className={style.conRightBorder}>
            <div className={style.top}>
                <strong style={{ fontSize: 15 }}>创意素材</strong>
                <span>已选：{queryForm?.materials?.length || 0}</span>
            </div>
            <div className={style.center}>
                <div className={queryForm?.materialData && queryForm?.materialData[0]?.name === 'image_list' && queryForm?.materialData[0]?.arrayProperty?.minNumber > 1 ? style.imgListGroup : style.otherGroup}>
                    {queryForm?.materials?.map((item: any, index: number) => {
                        let keys = Object.keys(item)
                        if (keys?.includes('imageUrlList')) {
                            return <div key={index} className={style.group}>
                                {item?.imageUrlList?.map((url: string, index: number) => <div key={index}><img src={url} /></div>)}
                            </div>
                        } else if (keys?.includes('elementStory')) {
                            return <div key={index} className={style.group}>
                                {item?.elementStory?.map((item: { imageUrl: string }, index: number) => <div key={index}><img src={item.imageUrl} /></div>)}
                            </div>
                        } else {
                            if (keys?.length > 1) {
                                return <div key={index} className={style.otherGroup}>
                                    {keys?.includes('imageUrl') && <div className={style.group}><img src={item.imageUrl} /></div>}
                                    {keys?.includes('videoUrl') && <div className={style.group}><video src={item.videoUrl} /></div>}
                                    {keys?.includes('shortVideo1Url') && <div className={style.group}><video src={item.shortVideo1Url} /></div>}
                                </div>
                            } else {
                                if (keys?.includes('imageUrl')) {
                                    return <div key={index} className={style.group}><img src={item.imageUrl} /></div>
                                } else if (keys?.includes('videoUrl')) {
                                    return <div key={index} className={style.group}><video src={item.videoUrl} /></div>
                                } else if (keys?.includes('shortVideo1Url')) {
                                    return <div key={index} className={style.group}><video src={item.shortVideo1Url} /></div>
                                }
                            }
                            return null
                        }
                    })}
                </div>
            </div>
            <div className={style.bottom}>
                <Space size={20}>
                    {queryForm?.taskMediaMaps && queryForm?.taskMediaMaps?.length > 0 ? <>
                        <Material
                            onChange={(data) => {
                                setQueryForm({ ...queryForm, materials: data })
                            }}
                            material={queryForm?.materialData}
                            value={queryForm?.materials}
                            sysAdcreative={queryForm?.taskMediaMaps[0]?.sysAdcreative}
                        />
                    </> : <Tooltip title="请先设置创意">
                        <span>添加</span>
                    </Tooltip>}
                </Space>
            </div>
            {!(queryForm?.materialData && queryForm?.materialData?.length > 0) && <div className={style.noMaterial}>无需配置素材</div>}
        </Col>
        <Col className={style.conRightBorder} style={{ maxWidth: '25%' }}>
            <div className={style.top}>
                <strong style={{ fontSize: 15 }}>创意文案</strong>
                <span>已选：{queryForm?.texts?.length || 0}</span>
            </div>
            <div className={style.center}>
                <Select style={{ minWidth: 150 }} value={queryForm.model} onChange={(e) => { setQueryForm({ ...queryForm, model: e }) }} dropdownMatchSelectWidth={false}>
                    <Select.Option value="cross">素材文案叉乘</Select.Option>
                    <Select.Option value="corres">一一对应</Select.Option>
                </Select>

                {queryForm?.texts?.some((item: any) => item?.title) && <div className={style.accName} style={{ fontWeight: 800 }}>标题</div>}
                {queryForm?.texts?.map((item: any, index: number) => {
                    if (item?.title) {
                        return <div className={style.accCon} key={index}><span className={style.title}>{item?.title}</span> </div>
                    } else {
                        return null
                    }
                })}
                {queryForm?.texts?.some((item: any) => item?.description) && <div className={style.accName} style={{ fontWeight: 800 }}>广告详情</div>}
                {queryForm?.texts?.map((item: any, index: number) => {
                    if (item?.description) {
                        return <div className={style.accCon} key={index}><span className={style.title}>{item?.description}</span></div>
                    } else {
                        return null
                    }
                })}
            </div>
            <div className={style.bottom}>
                <Space size={20}>
                    {queryForm?.taskMediaMaps && queryForm?.taskMediaMaps?.length > 0 ? <>
                        <Copywriting
                            textData={queryForm.textData}
                            sysAdcreative={queryForm?.taskMediaMaps[0]?.sysAdcreative}
                            value={queryForm?.texts}
                            onChange={(data) => {
                                setQueryForm({ ...queryForm, texts: data })
                            }}
                        />
                    </> : <Tooltip title="请先设置创意">
                        <span>添加</span>
                    </Tooltip>}
                </Space>
            </div>
            {!(queryForm?.textData && queryForm.textData?.length > 0) && <div className={style.noMaterial}>无需配置文案</div>}
        </Col>
    </>
}

export default React.memo(CreativeCL)