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 = () => {

    /***************************************/
    const { materialData, addelivery, setAddelivery, clearData } = useContext(DispatchAddelivery)!;
    const { dynamic, dynamicMaterialDTos } = addelivery
    const { creativeTemplateId, deliveryMode } = dynamic

    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])

    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) ?
                    <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
            creativeTemplateId={creativeTemplateId}
            value={dynamicMaterialDTos}
            materialData={materialData}
            deliveryMode={deliveryMode}
            visible={newVisible}
            onClose={() => {
                setNewVisible(false)
            }}
            onChange={(values) => {
                setAddelivery({ ...addelivery, dynamicMaterialDTos: values, dynamicCreativesTextDTOS: {} })
                setNewVisible(false)
                clearData()
            }}
        />}
    </div>
}

export default React.memo(Material)