ad-manage/src/pages/adMonitor/adMonitorList/components/box.tsx

import { Popover, Space } from 'antd'
import React, { useMemo } from 'react'

function Box(props: { b: any }) {
    const { b } = props
    let el = useMemo(() => {
        if (b?.imagePreviewUrl?.length > 0 || b?.videoKeyFrameImageUrl) {//图片存在？ 或者视频首针图存在？
            return <div className='imagesConfig'>
                <Popover placement='right' content={
                    <div>
                        {b?.title && <div style={{ maxWidth: 300 }}><strong style={{ fontSize: 15 }}>标题:</strong>{b?.title}</div>}
                        <Space style={{ maxWidth: 300, display: 'flex',  flexFlow: 'row wrap',margin:'10px 0' }}>
                            {
                                b?.imagePreviewUrl?.length > 0 ? b?.imagePreviewUrl?.map((img: string | undefined) => {
                                    return <img src={img} key={img} width={b?.imagePreviewUrl?.length === 1 ? 200 : b?.imagePreviewUrl?.length === 3 ? 70 : b?.imagePreviewUrl?.length === 4 ? 100 : 70} />
                                }) : <img src={b?.videoKeyFrameImageUrl} width={200} />
                            }
                        </Space>
                        {b?.description && <small style={{ fontSize: 10, maxWidth: 300, display: 'inline-block' }}><strong style={{ fontSize: 13 }}>描述:</strong>{b?.description}</small>}
                    </div>
                }>
                    <img src={b?.imagePreviewUrl ?  b?.imagePreviewUrl[0] : b?.videoKeyFrameImageUrl} width={24} />
                </Popover>
            </div>
        } else if (b?.videoPreviewUrl) {//视频存在？
            return <Popover placement='right' content={
                <div>
                    {b?.title && <div style={{ maxWidth: 300 }}><strong style={{ fontSize: 15 }}>标题:</strong>{b?.title}</div>}
                    <video src='https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/b946235d4e4f078cdfe5099736e1dbc8_preview.mp4' style={{ maxWidth: 300 }} controls />
                    {b?.description && <small style={{ fontSize: 10, maxWidth: 300, display: 'inline-block' }}><strong style={{ fontSize: 13 }}>描述:</strong>{b?.description}</small>}
                </div>
            }>
                <video src='https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/b946235d4e4f078cdfe5099736e1dbc8_preview.mp4' style={{ width: 24 }} />
            </Popover>
        } else {
            return <Popover placement='right' content={
                <div>
                     {b?.title && <div style={{ maxWidth: 300 }}><strong style={{ fontSize: 15 }}>标题:</strong>{b?.title}</div>}
                    {b?.description && <small style={{ fontSize: 10, maxWidth: 300, display: 'inline-block' }}><strong style={{ fontSize: 13 }}>描述:</strong>{b?.description}</small>}
                </div>
            }>
                <div style={{width:'100%',height:'100%'}}>
                    --
                </div>
            </Popover>
        }
    }, [b])
    return el
}
export default React.memo(Box)