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

import React from 'react'
import { Space, Switch, Image, Popover, TableProps, Typography } from 'antd'
import '../index.less'
import { copy } from '@/utils/utils'
import { DELIVERY_MODE, DYNAMIC_CREATIVE_TYPE } from '../const'
import { ELEMENT_ENUM, SITE_SET_ENUM, creativeTemplate } from '../../tencentAdPutIn/const'
import { AD_STATUS } from '.'
const { Text } = Typography;

function tableConfig(reviewStatusDetails: (value: any) => void): 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: '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 <a onClick={() => copy(a)} >{a}</a>
            }
        },
        {
            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: 'creativeTemplateId',
            key: 'creativeTemplateId',
            align: 'center',
            width: 120,
            ellipsis: true,
            render: (a: string) => {
                return creativeTemplate[a]
            }
        },
        {
            title: '审核状态',
            dataIndex: 'reviewStatusCn',
            key: 'reviewStatusCn',
            align: 'center',
            width: 100,
            render: (a: string, b: any) => {
                return <Space direction="vertical" size={0}>
                    <span style={{ fontSize: 12 }}>{a}</span>
                    <a style={{ fontSize: 12 }} onClick={() => { reviewStatusDetails(b) }}>详情</a>
                </Space>
            }
        }
    ]
}

export const tableConfigDetail = (): TableProps<any>['columns'] => {


    return [
        {
            title: '创意组件',
            dataIndex: 'componentInfo',
            key: 'componentInfo',
            width: 180,
            render: (value) => {
                if (value) {
                    let { componentId, componentType } = value
                    return <Space direction="vertical" size={0}>
                        <Text style={{ fontSize: 12 }}>{ELEMENT_ENUM[componentType]}</Text>
                        <Text type="secondary" style={{ fontSize: 12 }}>{componentId}</Text>
                    </Space>
                }
                return null
            },
            onCell: (record) => ({
                rowSpan: record.rowSpan
            })
        },
        {
            title: '组件审核结果',
            dataIndex: 'reviewStatus',
            key: 'reviewStatus',
            width: 120,
            render: (value, records) => {
                if (!records?.componentInfo) {
                    return null
                }
                return <span style={{ fontSize: 12 }}>{AD_STATUS[value]}</span>
            }
        },
        {
            title: '组件元素',
            dataIndex: 'elementName',
            key: 'elementName',
            width: 155,
            render: (value, records) => {
                return <>
                    <Text type="secondary" style={{ fontSize: 12 }}>{value}</Text>
                    <div style={{ maxWidth: 178 }}>
                        {records.elementType === 'VIDEO' ? <Popover
                            placement='right'
                            content={< div >
                                <Space style={{ maxWidth: 300, display: 'flex', flexFlow: 'row wrap', margin: '10px 0' }}>
                                    <video src={records.elementValue} style={{ width: 250 }} controls />
                                </Space>
                            </div >}
                            destroyTooltipOnHide
                            mouseEnterDelay={0.5}
                        >
                            <video src={records.elementValue} style={{ maxHeight: 40, maxWidth: 60 }} />
                        </Popover> : records.elementType === 'IMAGE' ? <img src={records.elementValue} style={{ maxHeight: 40, maxWidth: 60 }} />
                            : <Text style={{ fontSize: 12 }} ellipsis strong>{records.elementValue}</Text>}
                    </div>
                </>
            }
        },
        {
            title: '驳回原因',
            dataIndex: 'elementRejectDetailInfo',
            key: 'elementRejectDetailInfo',
            width: 560,
            render: (value) => {
                return value ? <Text style={{ fontSize: 12 }}>{value?.map((item: { reason: any }) => item.reason)?.join('，')}</Text> : null
            }
        },
        {
            title: '影响版位',
            dataIndex: 'siteSetList',
            key: 'siteSetList',
            width: 125,
            render: (_, records) => {
                let siteSetList = records?.elementRejectDetailInfo?.siteSetList
                return siteSetList ? <Text style={{ fontSize: 12 }}>{siteSetList?.map((item: { siteSet: any }) => SITE_SET_ENUM[item?.siteSet])?.join('，')}</Text> : null
            }
        },
    ]
}
export default tableConfig