ad-manage/src/pages/launchSystemV3/tencentAdPutIn/create/tableConfig.tsx

import { Space, TableProps, Typography } from "antd"
import React from "react"
import { OPTIMIZATIONGOAL_ENUM } from "../const";
const { Text, Title } = Typography;
import style from './index.less'
import VideoNews from "@/pages/launchSystemNew/components/newsModal/videoNews";
import styles from './Material/index.less'

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

    return [
        {
            title: '广告',
            dataIndex: 'adgroup',
            key: 'adgroup',
            align: 'center',
            children: [
                {
                    title: '广告名称',
                    dataIndex: 'adgroupName',
                    key: 'adgroupName',
                    width: 250,
                    render: (_, b) => {
                        return <Text style={{ fontSize: 12 }}>{b?.adgroupsDto?.adgroupName}</Text>
                    },
                    onCell: (record, index = 0) => ({
                        rowSpan: record?.isRowSpan ? record.rowSpan : !(index % record.rowSpan) ? record.rowSpan : 0
                    })
                },
                {
                    title: '营销内容',
                    dataIndex: 'productName',
                    key: 'productName',
                    width: 200,
                    render: (_, b) => {
                        if (['MARKETING_TARGET_TYPE_FICTION'].includes(b.adgroupsDto?.marketingAssetOuterSpec?.marketingTargetType)) {
                            return <Space size={0} direction="vertical">
                                <Text style={{ fontSize: 12 }}>推广产品：{b?.productDto?.marketingAssetName}(产品ID：{b?.productDto?.marketingAssetId})</Text>
                                {(b.adgroupsDto?.marketingCarrierType === 'MARKETING_CARRIER_TYPE_WECHAT_OFFICIAL_ACCOUNT' && b?.marketingCarrierDto) && <Text style={{ fontSize: 12 }}>营销载体：{b.marketingCarrierDto.map((item: { wechatOfficialAccountName: any; wechatOfficialAccountId: any; }) => `${item?.wechatOfficialAccountName}(${item?.wechatOfficialAccountId})`)?.toString()}</Text>}
                                <Text style={{ fontSize: 12 }}>转化归因：{b?.userActionSetsList ? b?.userActionSetsList.map((item: { name: any; }) => item.name).toString() : '暂未配置'}</Text>
                            </Space>
                        } else if (['MARKETING_TARGET_TYPE_WECHAT_OFFICIAL_ACCOUNT'].includes(b.adgroupsDto?.marketingAssetOuterSpec?.marketingTargetType)) {
                            return <Space size={0} direction="vertical">
                                <Text style={{ fontSize: 12 }}>推广产品：微信公众号</Text>
                                <Text style={{ fontSize: 12 }}>营销载体：微信公众号</Text>
                                <Text style={{ fontSize: 12 }}>应用：{b?.productDto?.wechatOfficialAccountName}({b?.productDto?.wechatOfficialAccountId})</Text>
                                <Text style={{ fontSize: 12 }}>转化归因：{b?.userActionSetsList ? b?.userActionSetsList.map((item: { name: any; }) => item.name).toString() : '暂未配置'}</Text>
                            </Space>
                        }
                        return 'ERROR，请联系管理员'
                    },
                    onCell: (record, index = 0) => ({
                        rowSpan: record?.isRowSpan ? record.rowSpan : !(index % record.rowSpan) ? record.rowSpan : 0
                    }),
                },
                {
                    title: '定向',
                    dataIndex: 'targeting',
                    key: 'targeting',
                    width: 170,
                    render: (_, b) => {
                        return <Text style={{ fontSize: 12 }}>{b?.targetDto?.targetingName}</Text>
                    },
                    onCell: (record, index = 0) => ({
                        rowSpan: record?.isRowSpan ? record.rowSpan : !(index % record.rowSpan) ? record.rowSpan : 0
                    }),
                },
                {
                    title: '预算与出价',
                    dataIndex: 'dailyBudget',
                    key: 'dailyBudget',
                    width: 170,
                    render: (_, b) => {
                        let { optimizationGoal, dailyBudget, bidAmount, bidMode } = b?.adgroupsDto
                        return <Space size={0} direction="vertical">
                            <Text style={{ fontSize: 12 }}>广告日预算：{dailyBudget ? dailyBudget + '元/天' : '不限'}</Text>
                            <Text style={{ fontSize: 12 }}>出价：{bidAmount}元/{optimizationGoal ? OPTIMIZATIONGOAL_ENUM[optimizationGoal] : ['BID_MODE_OCPM', 'BID_MODE_OCPC'].includes(bidMode) ? '千次曝光' : '点击'}</Text>
                        </Space>
                    },
                    onCell: (record, index = 0) => ({
                        rowSpan: record?.isRowSpan ? record.rowSpan : !(index % record.rowSpan) ? record.rowSpan : 0
                    }),
                },
            ]
        },
        {
            title: '创意',
            dataIndex: 'dynamicDto',
            key: 'dynamicDto',
            align: 'center',
            children: [
                {
                    title: '创意名称',
                    dataIndex: 'dynamicCreativeName',
                    key: 'dynamicCreativeName',
                    width: 200,
                    render: (_, b) => {
                        return <Text style={{ fontSize: 12 }}>{b?.dynamicDto?.dynamicCreativeName}</Text>
                    }
                },
                {
                    title: '创意素材',
                    dataIndex: 'dynamicGroup',
                    key: 'dynamicGroup',
                    width: 210,
                    render: (_, b) => {
                        let deliveryMode = b?.dynamicDto?.deliveryMode
                        let dynamicGroup = b?.dynamicGroup
                        if (dynamicGroup && Object.keys(dynamicGroup).length) {
                            let keys = Object.keys(dynamicGroup)
                            if (deliveryMode === "DELIVERY_MODE_CUSTOMIZE") {
                                return <>
                                    <div className={style.detail_body_m}>
                                        {(keys.includes('video_id') || keys.includes('short_video1')) ? <>
                                            <Title style={{ fontSize: 12, color: '#1890ff', marginBottom: 0, width: '100%' }}>已选1个视频，0张图片</Title>
                                            <div className={style.video}>
                                                <VideoNews src={dynamicGroup?.video_id?.url || dynamicGroup?.short_video1?.url} />
                                                {dynamicGroup?.cover_id && <div className={style.cover_image} style={{ marginLeft: 4 }}>
                                                    <img src={dynamicGroup?.cover_id?.url} />
                                                </div>}
                                            </div>
                                        </> : keys.includes('image_id') ? <>
                                            <Title style={{ fontSize: 12, color: '#1890ff', marginBottom: 0, width: '100%' }}>已选0个视频，1张图片</Title>
                                            <div className={style.cover_image}>
                                                <img src={dynamicGroup?.image_id?.url} />
                                            </div>
                                        </> : (keys.includes('image_list') || keys.includes('element_story')) ? <>
                                            <Title style={{ fontSize: 12, color: '#1890ff', marginBottom: 0, width: '100%' }}>已选1个组图, 0个视频</Title>
                                            {dynamicGroup?.[keys.includes('image_list') ? 'image_list' : 'element_story']?.map((item: { url: string | undefined; }, index: undefined) => <div className={style.cover_image} key={index} style={{ width: 30, height: 24, minWidth: 32 }}>
                                                <img src={item?.url} />
                                            </div>)}
                                        </> : null}
                                    </div>
                                </>
                            } else {
                                return <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap' }}>
                                    {dynamicGroup?.list?.map((item: any, index: number) => {
                                        if (Array.isArray(item)) {
                                            let length = item.length
                                            return <div className={styles.boxList_body_item} key={index} style={{ width: 30, height: 30 }}>
                                                <div className={styles.content} style={{ width: 30, height: 30 }}>
                                                    {item.map((l, i) => <img src={l?.url} key={i} style={{ width: length === 6 ? 9.999 : 14.999 }} />)}
                                                </div>
                                            </div>
                                        } else if (item?.url?.includes('mp4')) {
                                            return <div className={styles.boxList_body_item} key={index} style={{ width: 30, height: 30 }}>
                                                <div className={styles.content} style={{ width: 30, height: 30 }}>
                                                    <VideoNews src={item?.url} style={{ width: 30, height: 30 }} maskBodyStyle={{ backgroundColor: "rgba(242, 246, 254, 0.1)" }} />
                                                </div>
                                            </div>
                                        } else {
                                            return <div className={styles.boxList_body_item} key={index} style={{ width: 30, height: 30 }}>
                                                <div className={styles.content} style={{ width: 30, height: 30 }}><img src={item?.url} /></div>
                                            </div>
                                        }
                                    })}
                                </div>
                            }
                        } else {
                            return <Text style={{ fontSize: 12 }}>无需配置</Text>
                        }

                    }
                },
                {
                    title: '创意文案',
                    dataIndex: 'textDto',
                    key: 'textDto',
                    width: 200,
                    render: (value, b) => {
                        let deliveryMode = b?.dynamicDto?.deliveryMode
                        if (value && Object.keys(value).length) {
                            if (deliveryMode === "DELIVERY_MODE_CUSTOMIZE") {
                                return <div className={style.detail_body} style={{ height: 'auto' }}>
                                    {Object.keys(value)?.map((key, index: number) => {
                                        return <div key={index}>
                                            {key === 'description' ? <>
                                                <Title level={5} style={{ fontSize: 12 }}>{'文案'}</Title>
                                                <div className={style.text}><Text ellipsis={{ tooltip: true }}>{value['description']?.toString()}</Text></div>
                                            </> : key === 'title' ? <>
                                                <Title level={5} style={{ fontSize: 12 }}>{'标题'}</Title>
                                                <div className={style.text}><Text ellipsis={{ tooltip: true }}>{value['title']?.toString()}</Text></div>
                                            </> : null}
                                        </div>
                                    })}
                                </div>
                            } else {
                                return <div className={style.detail_body} style={{ height: 'auto' }}>
                                    {Object.keys(value)?.map((key, index: number) => {
                                        return <div key={index}>
                                            {key === 'description' ? <>
                                                <Title level={5} style={{ fontSize: 12 }}>{'文案'}</Title>
                                                <div className={style.text}><Text ellipsis={{ tooltip: true }}>{value['description']?.toString()}</Text></div>
                                            </> : key === 'title' ? <>
                                                <Title level={5} style={{ fontSize: 12 }}>{'标题'}</Title>
                                                <div className={style.text}><Text ellipsis={{ tooltip: true }}>{value['title']?.toString()}</Text></div>
                                            </> : null}
                                        </div>
                                    })}
                                </div>
                            }
                        } else {
                            return <Text style={{ fontSize: 12 }}>无需配置</Text>
                        }

                    }
                },
                {
                    title: '跳转类型',
                    dataIndex: 'pageListDto',
                    key: 'pageListDto',
                    width: 200,
                    render: (_, b) => {
                        let pageListDto = b?.pageListDto
                        return <Text style={{ fontSize: 12, wordBreak: 'break-all' }}>原生推广页：{pageListDto?.map((item: { pageName: any; }) => item?.pageName)?.join('，')}</Text>
                    }
                }
            ]
        }
    ]
}


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

    return [
        {
            title: '广告',
            dataIndex: 'adgroup',
            key: 'adgroup',
            align: 'center',
            children: [
                {
                    title: '广告名称',
                    dataIndex: 'adgroupName',
                    key: 'adgroupName',
                    width: 250,
                    render: (_, b) => {
                        return <Text style={{ fontSize: 12 }}>{b?.adgroupsDto?.adgroupName}</Text>
                    },
                    onCell: (record, index = 0) => ({
                        rowSpan: !(index % record.rowSpan) ? record.rowSpan : 0
                    }),
                },
            ]
        },
        {
            title: '创意',
            dataIndex: 'dynamicDto',
            key: 'dynamicDto',
            align: 'center',
            children: [
                {
                    title: '创意名称',
                    dataIndex: 'dynamicCreativeName',
                    key: 'dynamicCreativeName',
                    width: 200,
                    render: (_, b) => {
                        return <Text style={{ fontSize: 12 }}>{b?.dynamicDto?.dynamicCreativeName}</Text>
                    }
                },
                {
                    title: '创意素材',
                    dataIndex: 'dynamicGroup',
                    key: 'dynamicGroup',
                    width: 200,
                    render: (_, b) => {
                        let deliveryMode = b?.dynamicDto?.deliveryMode
                        let dynamicGroup = b?.dynamicGroup
                        if (dynamicGroup && Object.keys(dynamicGroup).length) {
                            let keys = Object.keys(dynamicGroup)
                            if (deliveryMode === "DELIVERY_MODE_CUSTOMIZE") {
                                // return <Text style={{ fontSize: 12, color: '#1890ff' }}>已选{(keys.includes('video_id') || keys.includes('short_video1')) ? '1个视频，0张图片' : keys.includes('image_id') ? '0个视频，1张图片' : (keys.includes('image_list') || keys.includes('element_story') ? '1个组图, 0个视频' : '')}</Text>
                                return <>
                                    <div className={style.detail_body_m}>
                                        {(keys.includes('video_id') || keys.includes('short_video1')) ? <>
                                            <Title style={{ fontSize: 12, color: '#1890ff', marginBottom: 0, width: '100%' }}>已选1个视频，0张图片</Title>
                                            <div className={style.video}>
                                                <VideoNews src={dynamicGroup?.video_id?.url || dynamicGroup?.short_video1?.url} />
                                                {dynamicGroup?.cover_id && <div className={style.cover_image} style={{ marginLeft: 4 }}>
                                                    <img src={dynamicGroup?.cover_id?.url} />
                                                </div>}
                                            </div>
                                        </> : keys.includes('image_id') ? <>
                                            <Title style={{ fontSize: 12, color: '#1890ff', marginBottom: 0, width: '100%' }}>已选0个视频，1张图片</Title>
                                            <div className={style.cover_image}>
                                                <img src={dynamicGroup?.image_id?.url} />
                                            </div>
                                        </> : (keys.includes('image_list') || keys.includes('element_story')) ? <>
                                            <Title style={{ fontSize: 12, color: '#1890ff', marginBottom: 0, width: '100%' }}>已选1个组图, 0个视频</Title>
                                            {dynamicGroup?.[keys.includes('image_list') ? 'image_list' : 'element_story']?.map((item: { url: string | undefined; }, index: undefined) => <div className={style.cover_image} key={index} style={{ width: 30, height: 24, minWidth: 32 }}>
                                                <img src={item?.url} />
                                            </div>)}
                                        </> : null}
                                    </div>
                                </>
                            } else {
                                return <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap' }}>
                                    {dynamicGroup?.list?.map((item: any, index: number) => {
                                        if (Array.isArray(item)) {
                                            let length = item.length
                                            return <div className={styles.boxList_body_item} key={index} style={{ width: 30, height: 30 }}>
                                                <div className={styles.content} style={{ width: 30, height: 30 }}>
                                                    {item.map((l, i) => <img src={l?.url} key={i} style={{ width: length === 6 ? 9.999 : 14.999 }} />)}
                                                </div>
                                            </div>
                                        } else if (item?.url?.includes('mp4')) {
                                            return <div className={styles.boxList_body_item} key={index} style={{ width: 30, height: 30 }}>
                                                <div className={styles.content} style={{ width: 30, height: 30 }}>
                                                    <VideoNews src={item?.url} style={{ width: 30, height: 30 }} maskBodyStyle={{ backgroundColor: "rgba(242, 246, 254, 0.1)" }} />
                                                </div>
                                            </div>
                                        } else {
                                            return <div className={styles.boxList_body_item} key={index} style={{ width: 30, height: 30 }}>
                                                <div className={styles.content} style={{ width: 30, height: 30 }}><img src={item?.url} /></div>
                                            </div>
                                        }
                                    })}
                                </div>
                            }
                        } else {
                            return <Text style={{ fontSize: 12 }}>无需配置</Text>
                        }

                    }
                },
                {
                    title: '创意文案',
                    dataIndex: 'textDto',
                    key: 'textDto',
                    width: 200,
                    render: (value, b) => {
                        let deliveryMode = b?.dynamicDto?.deliveryMode
                        if (value && Object.keys(value).length) {
                            if (deliveryMode === "DELIVERY_MODE_CUSTOMIZE") {
                                return <div className={style.detail_body} style={{ height: 'auto' }}>
                                    {Object.keys(value)?.map((key, index: number) => {
                                        return <div key={index}>
                                            {key === 'description' ? <>
                                                <Title level={5} style={{ fontSize: 12 }}>{'文案'}</Title>
                                                <div className={style.text}><Text ellipsis={{ tooltip: true }}>{value['description']?.toString()}</Text></div>
                                            </> : key === 'title' ? <>
                                                <Title level={5} style={{ fontSize: 12 }}>{'标题'}</Title>
                                                <div className={style.text}><Text ellipsis={{ tooltip: true }}>{value['title']?.toString()}</Text></div>
                                            </> : null}
                                        </div>
                                    })}
                                </div>
                            } else {
                                return <div className={style.detail_body} style={{ height: 'auto' }}>
                                    {Object.keys(value)?.map((key, index: number) => {
                                        return <div key={index}>
                                            {key === 'description' ? <>
                                                <Title level={5} style={{ fontSize: 12 }}>{'文案'}</Title>
                                                <div className={style.text}><Text ellipsis={{ tooltip: true }}>{value['description']?.toString()}</Text></div>
                                            </> : key === 'title' ? <>
                                                <Title level={5} style={{ fontSize: 12 }}>{'标题'}</Title>
                                                <div className={style.text}><Text ellipsis={{ tooltip: true }}>{value['title']?.toString()}</Text></div>
                                            </> : null}
                                        </div>
                                    })}
                                </div>
                            }
                        } else {
                            return <Text style={{ fontSize: 12 }}>无需配置</Text>
                        }

                    }
                },
                {
                    title: '跳转类型',
                    dataIndex: 'pageListDto',
                    key: 'pageListDto',
                    width: 200,
                    render: (_, b) => {
                        let pageListDto = b?.pageListDto
                        return <Text style={{ fontSize: 12, wordBreak: 'break-all' }}>原生推广页：{pageListDto?.map((item: { pageName: any; }) => item?.pageName)?.join('，')}</Text>
                    }
                }
            ]
        }
    ]
}

export default columns