ad-manage/src/pages/launchSystemV3/tencentAdPutIn/create/Material/index.tsx

import React, { useContext, useEffect, useState } from "react"
import style from '../index.less'
import { DispatchAddelivery } from "..";
import { Button, Empty, Typography } from "antd";
import { FolderOpenOutlined, RedoOutlined } from "@ant-design/icons";
import AddMaterial from "./addMaterial";
import VideoNews from "@/pages/launchSystemNew/components/newsModal/videoNews";
const { Title } = Typography;

const Material: React.FC<{ adData?: any[] }> = ({ adData }) => {

    /***************************************/
    const { materialData, addelivery, setAddelivery, clearData, accountCreateLogs } = useContext(DispatchAddelivery)!;
    const { dynamic, dynamicMaterialDTos, mediaType, targeting, adgroups: { marketingAssetOuterSpec } } = addelivery
    const { creativeTemplateId, deliveryMode } = dynamic
    const [adLength, setAdLength] = useState<number>(0)

    const [newVisible, setNewVisible] = useState<boolean>(false)
    const [mType, setMtype] = useState<string>()
    /***************************************/

    useEffect(() => {
        if (materialData && Object.keys(materialData).length > 0) {
            let type = Object.keys(materialData)[0];
            setMtype(type)
        }
    }, [materialData])

    // 获取广告总数
    useEffect(() => {
        if (adData && adData?.length > 0) {
            setAdLength(adData.length)
        } else if (accountCreateLogs?.length > 0 && marketingAssetOuterSpec?.marketingTargetType) {
            let adLength = 0
            accountCreateLogs.forEach(item => {
                let productList: any[] = []
                if (['MARKETING_TARGET_TYPE_FICTION'].includes(marketingAssetOuterSpec?.marketingTargetType)) { // 小说
                    productList = item?.productList || []
                } else if (['MARKETING_TARGET_TYPE_WECHAT_OFFICIAL_ACCOUNT'].includes(marketingAssetOuterSpec?.marketingTargetType)) { // 公众号
                    productList = item?.wechatChannelList || []
                }
                adLength += productList.length * targeting.length
            })
            setAdLength(adLength)
        }
    }, [accountCreateLogs, marketingAssetOuterSpec, adData])

    return <div className={`${style.settingsBody_content_row} ${style.row4}`}>
        <div className={style.title}>
            <span>创意素材 <span className={style.selected}>已选 {dynamicMaterialDTos?.dynamicGroup?.length || 0}</span></span>
            {(dynamicMaterialDTos && Object.keys(dynamicMaterialDTos).length > 0) ? <Button type="link" size="small" style={{ fontSize: 11, padding: 0 }} onClick={() => setAddelivery({ ...addelivery, dynamicMaterialDTos: [], dynamicCreativesTextDTOS: {} })}><RedoOutlined />清空</Button> : null}
        </div>
        <div className={style.detail}>
            <div className={style.detail_body}>
                {(dynamicMaterialDTos && Object.keys(dynamicMaterialDTos).length > 0) ?
                    <>
                        <Title level={5} style={{ fontSize: 12 }}>{mediaType === 0 ? '全账号复用' : mediaType === 1 ? '创意组平均分配到广告' : null}</Title>
                        <div className={style.detail_body_m}>
                            {dynamicMaterialDTos.dynamicGroup.map((item: any, index: number) => {
                                return <div key={index} style={{ width: deliveryMode === 'DELIVERY_MODE_CUSTOMIZE' ? [641, 642, 643].includes(creativeTemplateId) ? '100%' : [720, 721, 722, 1529, 618].includes(creativeTemplateId) ? '50%' : '25%' : '100%' }}>
                                    <Title level={5} style={{ fontSize: 12 }}>创意组{index + 1}</Title>
                                    {mType ? ['short_video', 'video'].includes(mType) ? <div className={style.video}>
                                        <VideoNews src={item?.video_id?.url || item?.short_video1?.url} />
                                        {item?.cover_id && <div className={style.cover_image}>
                                            <img src={item?.cover_id?.url} />
                                        </div>}
                                    </div> : ['image_list'].includes(mType) ? <div className={style.imageList}>
                                        {item?.image_list?.map((item: { url: string | undefined; }, index: undefined) => <div className={style.cover_image} key={index}>
                                            <img src={item?.url} />
                                        </div>)}
                                    </div> : ['element_story'].includes(mType) ? <div className={style.imageList}>
                                        {item?.element_story?.map((item: { url: string | undefined; }, index: undefined) => <div className={style.cover_image} key={index}>
                                            <img src={item?.url} />
                                        </div>)}
                                    </div> : ['image'].includes(mType) ? <div className={style.cover_image}>
                                        <img src={item?.image_id?.url} />
                                    </div> : null : null}
                                </div>
                            })}
                        </div>
                    </> :
                    <div className={style.empty_block}>
                        <Empty description="暂无素材" imageStyle={{ height: 50 }} />
                    </div>}
                {((dynamic && Object.keys(dynamic).length > 0) && !(materialData && Object.keys(materialData).length > 0)) && <div className={style.ad_config}>
                    <div className={style.ad_config_item}>无需设置创意素材</div>
                </div>}
            </div>
            <div className={style.detail_footer}>
                <Button disabled={!(dynamic && Object.keys(dynamic)?.length > 0)} type="link" icon={<FolderOpenOutlined />} style={{ padding: 0, fontSize: 12 }} onClick={() => setNewVisible(true)}>选择素材</Button>
            </div>

        </div>

        {newVisible && <AddMaterial
            adLength={adLength}
            creativeTemplateId={creativeTemplateId}
            value={{ dynamicMaterialDTos, mediaType }}
            materialData={materialData}
            deliveryMode={deliveryMode}
            visible={newVisible}
            onClose={() => {
                setNewVisible(false)
            }}
            onChange={({ dynamicMaterialDTos, mediaType }) => {
                setAddelivery({ ...addelivery, dynamicMaterialDTos, mediaType })
                setNewVisible(false)
                clearData()
            }}
        />}
    </div>
}

export default React.memo(Material)