ad-manage/src/pages/launchSystemV3/adqv3/creative/tableConfig.tsx

import React from 'react'
import { Space, Switch, Image, Popover } from 'antd'
import '../index.less'
import { copy } from '@/utils/utils'
import { DELIVERY_MODE, DYNAMIC_CREATIVE_TYPE, dynamicCreativeStatus } from '../const'
import Box from './box'
function tableConfig(): any {
    return [
        {
            title: '启停',
            dataIndex: 'configuredStatus',
            key: 'configuredStatus',
            align: 'center',
            width: 40,
            fixed: 'left',
            render: (a: string, b: any) => {
                return <Switch size="small" checked={a === 'AD_STATUS_NORMAL'} onChange={(checked) => { }} />
            }
        },
        // {
        //     title: '创意预览',
        //     dataIndex: 'creativeComponents',
        //     key: 'creativeComponents',
        //     width: 130,
        //     render: (a: any) => {
        //         return <Box creativeComponents={a} />
        //     }
        // },
        {
            title: '品牌形象',
            dataIndex: 'brand',
            key: 'brand',
            width: 110,
            ellipsis: true,
            render: (_: any[], b: any) => {
                let brand = b?.creativeComponents?.brand
                return brand?.length > 0 ? <Space>
                    <img src={brand?.[0]?.value?.brandImageUrl} height={18} />
                    <span>{brand?.[0]?.value?.brandName}</span>
                </Space> : '--'
            }
        },
        {
            title: '文本标题',
            dataIndex: 'title',
            key: 'title',
            width: 140,
            ellipsis: true,
            render: (_: any[], b: any) => {
                let title = b?.creativeComponents?.title
                return title?.length > 0 ? title.map((item: { value: { content: any } }, index: number) => `标题${index + 1}:${item?.value?.content}`)?.toString() : '--'
            }
        },
        {
            title: '文本描述',
            dataIndex: 'description',
            key: 'description',
            width: 140,
            ellipsis: true,
            render: (_: any[], b: any) => {
                let description = b?.creativeComponents?.description
                return description?.length > 0 ? description.map((item: { value: { content: any } }, index: number) => `描述${index + 1}:${item?.value?.content}`)?.toString() : '--'
            }
        },
        {
            title: '单图片',
            dataIndex: 'image',
            key: 'image',
            width: 140,
            ellipsis: true,
            render: (_: any[], b: any) => {
                let image = b?.creativeComponents?.image
                return <div style={{ minHeight: 50, display: 'flex', alignItems: 'center' }}>
                    {image?.length > 0 ? <div className='tableScrollbar' style={{ overflow: 'hidden', overflowX: 'auto' }}>
                        <Image.PreviewGroup>
                            {image?.map((item: { componentId: string; value: { imageUrl: string | undefined } }, index: string) => <Image key={item?.componentId + '_' + index} src={item?.value?.imageUrl} height={45} />)}
                        </Image.PreviewGroup>
                    </div> : '--'}
                </div>
            }
        },
        {
            title: '图集',
            dataIndex: 'imageList',
            key: 'imageList',
            width: 140,
            ellipsis: true,
            render: (_: any[], b: any) => {
                let imageList = b?.creativeComponents?.imageList
                return imageList?.length > 0 ? <div className='tableScrollbar' style={{ overflow: 'hidden', overflowX: 'auto', display: 'flex', gap: 10 }}>
                    {imageList?.map((item: { value: { list: any[] } }, index: React.Key | null | undefined) => <Image.PreviewGroup key={index}>
                        {item?.value?.list?.map((list: any, i: number) => <Image key={i} src={list?.imageUrl} height={45} />)}
                    </Image.PreviewGroup>)}
                </div> : '--'
            }
        },
        {
            title: '视频',
            dataIndex: 'video',
            key: 'video',
            width: 140,
            ellipsis: true,
            render: (_: any[], b: any) => {
                let video = b?.creativeComponents?.video
                return video?.length > 0 ? < Popover
                    placement='right'
                    content={< div >
                        <Space style={{ maxWidth: 300, display: 'flex', flexFlow: 'row wrap', margin: '10px 0' }}>
                            {video?.map((item: { value: { videoUrl: string | undefined } }, index: React.Key | null | undefined) => <video key={index} src={item?.value?.videoUrl} style={{ width: 250 }} controls />)}
                        </Space>
                    </div >}
                    destroyTooltipOnHide
                    mouseEnterDelay={0.5}
                >
                    <Space style={{ width: '100%' }}>
                        <video src={video?.[0]?.value?.videoUrl} style={{ maxHeight: 40, maxWidth: 60 }} />
                    </Space>
                </Popover> : '--'
            }
        },
        {
            title: '轮播',
            dataIndex: 'floatingZone',
            key: 'floatingZone',
            width: 150,
            ellipsis: true,
            render: (_: any[], b: any) => {
                let floatingZone = b?.creativeComponents?.floatingZone
                return floatingZone?.length > 0 ? <div className='tableScrollbar' style={{ overflow: 'hidden', overflowX: 'auto' }}>
                    {floatingZone?.map((item: { value: { floatingZoneImageUrl: string | undefined; floatingZoneName: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null | undefined; floatingZoneDesc: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null | undefined } }, index: React.Key | null | undefined) => <div key={index} style={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                        <div style={{ width: 40 }}>
                            <Image src={item?.value?.floatingZoneImageUrl} width={40} height={40} />
                        </div>
                        <div>
                            <span>{item?.value?.floatingZoneName}</span><br />
                            <span>{item?.value?.floatingZoneDesc}</span>
                        </div>
                    </div>)}
                </div> : '--'
            }
        },
        {
            title: '所属账号',
            dataIndex: 'accountId',
            key: 'accountId',
            align: 'center',
            width: 80,
            ellipsis: true,
            render: (a: string) => {
                return <Space>
                    <a onClick={() => copy(a)} >{a}</a>
                </Space>
            }
        },
        {
            title: '广告ID',
            dataIndex: 'adgroupId',
            key: 'adgroupId',
            align: 'center',
            width: 100,
            ellipsis: true,
            render: (a: string, b: any) => {
                return <Space>
                    <a onClick={() => copy(a)} >{a}</a>
                </Space>
            }
        },
        {
            title: '创意名称',
            dataIndex: 'dynamicCreativeName',
            key: 'dynamicCreativeName',
            align: 'center',
            width: 120,
            ellipsis: true
        },
        {
            title: '创意ID',
            dataIndex: 'dynamicCreativeId',
            key: 'dynamicCreativeId',
            align: 'center',
            width: 100,
            ellipsis: true,
            render: (a: string, b: any) => {
                return <Space>
                    <a onClick={() => copy(a)} >{a}</a>
                </Space>
            }
        },
        {
            title: '投放模式',
            dataIndex: 'deliveryMode',
            key: 'deliveryMode',
            align: 'center',
            width: 120,
            render: (a: string) => {
                return DELIVERY_MODE[a]
            }
        },
        {
            title: '创意形式匹配方式',
            dataIndex: 'dynamicCreativeType',
            key: 'dynamicCreativeType',
            align: 'center',
            width: 120,
            render: (a: string) => {
                return DYNAMIC_CREATIVE_TYPE[a]
            }
        },
        {
            title: '状态',
            dataIndex: 'systemStatus',
            key: 'systemStatus',
            align: 'center',
            width: 120,
            render: (a: string) => {
                return dynamicCreativeStatus[a]
            }
        },
    ]
}
export default tableConfig