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

import React from "react"
import { Badge, Popover, Space, TableProps, Tag, Typography } from "antd"
import { AD_STATUS_ENUM, DELIVERY_MODE_ENUM, DYNAMIC_CREATIVE_TYPE_ENUM, MARKETING_GOAL_ENUM } from "../const"
import TargetingTooltip from "../../components/TargetingTooltip"
import { QuestionCircleFilled } from "@ant-design/icons"
import AdgroupTooltip from "../../components/AdgroupTooltip"
import DynamicTooltip from "../../components/DynamicTooltip"
import { copy } from "@/utils/utils"


const columns = (geoLocationList: any, modelList: any, callback: (data: any, type: 'log' | 'page' | 'copy' | 'zxLog', allData?: any) => void): TableProps<any>['columns'] => {

    return [
        {
            title: '操作',
            dataIndex: 'cz',
            key: 'cz',
            width: 130,
            fixed: 'left',
            render: (_, records) => {
                return <Space>
                    <a style={{ color: '#1890ff', fontSize: 12 }} onClick={() => { callback(records, 'log', records) }}>日志</a>
                    <a style={{ color: '#1890ff', fontSize: 12 }} onClick={() => { callback(records, 'copy') }}>复制</a>
                    {records?.submitRule && <>
                        <a style={{ color: '#1890ff', fontSize: 12 }} onClick={() => { callback(records, 'zxLog') }}>执行记录</a>
                    </>}
                </Space>
            }
        },
        {
            title: '任务类型',
            dataIndex: 'taskType',
            key: 'taskType',
            width: 50,
            align: 'center',
            fixed: 'left',
            render(value) {
                return value === 'GAME' ? '游戏' : '小说'
            },
        },
        {
            title: '任务广告状态',
            dataIndex: 'status',
            key: 'status',
            width: 80,
            align: 'center',
            fixed: 'left',
            render(value) {
                let a = { 
                    0: <Badge status="processing" text={<span style={{ fontSize: 12 }} >执行中</span>} />, 
                    1: <Badge style={{ fontSize: 12 }} status="error" text={<span style={{ fontSize: 12 }} >全部失败</span>} />, 
                    2: <Badge style={{ fontSize: 12 }} status="warning" text={<span style={{ fontSize: 12 }} >部分成功</span>} />, 
                    100: <Badge style={{ fontSize: 12 }} status="success" text={<span style={{ fontSize: 12 }} >全部成功</span>} />,
                    '-2': <Badge style={{ fontSize: 12 }} status="error" text={<span style={{ fontSize: 12 }} >任务终止</span>} />,
                }
                return a[value as keyof typeof a]
            },
        },
        {
            title: '任务名称',
            dataIndex: 'taskName',
            key: 'taskName',
            width: 120,
            ellipsis: true,
            fixed: 'left',
            render(value) {
                return <span style={{ fontSize: 12 }}>{value}</span>
            }
        },
        {
            title: '任务提交规则',
            dataIndex: 'submitRule',
            key: 'submitRule',
            width: 80,
            align: 'center',
            render(value) {
                let a = { 0: <Tag color="#108ee9"><span style={{ fontSize: 12 }} >默认</span></Tag>, 1: <Tag color="#f50"><span style={{ fontSize: 12 }} >立即提交</span></Tag>, 2: <Tag color="#2db7f5"><span style={{ fontSize: 12 }} >定时提交</span></Tag>, 3: <Tag color="#87d068"><span style={{ fontSize: 12 }} >分批提交</span></Tag> }
                return a[value as keyof typeof a] || '--'
            },
        },
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
            align: 'center',
            width: 70,
            ellipsis: true,
            render(value) {
                return <span style={{ fontSize: 12 }}>{value}</span>
            }
        },
        {
            title: '广告状态',
            dataIndex: 'configuredStatus',
            key: 'configuredStatus',
            align: 'center',
            width: 50,
            render: (_, b) => {
                let configuredStatus = b?.adgroupDTO?.configuredStatus
                if (configuredStatus) {
                    return <span style={{ fontSize: "12px" }}>{AD_STATUS_ENUM[configuredStatus as keyof typeof AD_STATUS_ENUM]}</span>
                } else {
                    return <span>--</span>
                }
            }
        },
        {
            title: '广告详情',
            dataIndex: 'adgroupDTO',
            key: 'adgroupDTO',
            width: 200,
            ellipsis: true,
            render(value, records) {
                return <div style={{ width: '100%', display: 'flex', alignItems: 'center' }}>
                    <div style={{ width: 'calc(100% - 20px)' }}><Typography.Text style={{ fontSize: 12 }} ellipsis={{ tooltip: true }}>{value?.adgroupName}</Typography.Text></div>
                    <Popover
                        placement="right"
                        overlayInnerStyle={{ maxWidth: 350, maxHeight: 350, overflow: 'hidden', overflowY: 'auto' }}
                        mouseEnterDelay={0.5}
                        content={<AdgroupTooltip
                            taskType={records?.taskType}
                            data={value}
                        />}
                    >
                        <QuestionCircleFilled style={{ fontSize: 12 }} />
                    </Popover>
                </div>
            }
        },
        {
            title: '定向详情',
            dataIndex: 'targetings',
            key: 'targetings',
            width: 300,
            render(value, records) {
                return <div style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 10, overflow: 'hidden', overflowX: 'auto' }}>
                    {value?.map((item: any, index: number) => <Popover
                        key={index}
                        placement="right"
                        overlayInnerStyle={{ maxWidth: 350, maxHeight: 350, overflow: 'hidden', overflowY: 'auto' }}
                        mouseEnterDelay={1}
                        content={<TargetingTooltip
                            data={item}
                            geoLocationList={geoLocationList}
                            modelList={modelList}
                            taskType={records?.taskType}
                        />}
                    >
                        <div style={{ width: 80, cursor: 'help' }}><Typography.Text style={{ fontSize: 12 }} ellipsis>{index + 1}、{item?.targetingName || '--'}</Typography.Text></div>
                    </Popover>)}
                </div>
            }
        },
        {
            title: '创意详情',
            dataIndex: 'dynamicCreativesDTO',
            key: 'dynamicCreativesDTO',
            width: 200,
            ellipsis: true,
            render(value) {
                return <div style={{ width: '100%', display: 'flex', alignItems: 'center' }}>
                    <div style={{ width: 'calc(100% - 20px)' }}><Typography.Text style={{ fontSize: 12 }} ellipsis={{ tooltip: true }}>{value?.dynamicCreativeName}</Typography.Text></div>
                    <Popover
                        placement="right"
                        overlayInnerStyle={{ maxWidth: 350, maxHeight: 350, overflow: 'hidden', overflowY: 'auto' }}
                        mouseEnterDelay={0.5}
                        content={<DynamicTooltip
                            data={value}
                        />}
                    >
                        <QuestionCircleFilled style={{ fontSize: 12 }} />
                    </Popover>
                </div>
            }
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            align: 'center',
            width: 125,
            ellipsis: true,
            render: (value) => {
                return <span style={{ fontSize: "12px" }}>{value || '--'}</span>
            }
        },
        {
            title: <span style={{ marginLeft: 10 }}>任务反馈</span>,
            dataIndex: 'total',
            key: 'total',
            width: 480,
            render: (value, records) => {
                return <Space style={{ fontSize: "12px", marginLeft: 10 }} size={10}>
                    <span style={{ fontSize: 12 }}><Badge status="processing" />广告总数：<span style={{ fontWeight: 'bold', color: '#1890ff' }}>{value}</span>条</span>
                    {<span style={{ fontSize: 12, fontWeight: 'bold' }}><Badge status="success" />广告成功数：<span style={{ fontWeight: 'bold', color: '#52c41a' }}>{records?.successCount || 0}</span>条</span>}
                    <span style={{ fontSize: 12, fontWeight: 'bold' }}><Badge status="processing" />创意总数：<span style={{ fontWeight: 'bold', color: '#1890ff' }}>{records?.dynamicCreativeCount || 0}</span>条</span>
                    {<span style={{ fontSize: 12, fontWeight: 'bold' }}><Badge status="success" />创意成功数：<span style={{ fontWeight: 'bold', color: '#52c41a' }}>{records?.dynamicCreativeSuccessCount || 0}</span>条</span>}
                </Space>
            }
        }
    ]
}

export default columns

export const columnsLog = (sync: (value: any) => void): TableProps<any>['columns'] => {
    return [
        {
            title: '广告账号',
            dataIndex: 'accountId',
            key: 'accountId',
            width: 100,
            ellipsis: true,
            align: 'center',
            render(value) {
                return <span style={{ fontSize: 12 }}>{value}</span>
            }
        },
        {
            title: '广告名称',
            dataIndex: 'adgroupName',
            key: 'adgroupName',
            width: 160,
            ellipsis: true,
            render(value) {
                return <span style={{ fontSize: 12 }}>{value}</span>
            }
        },
        {
            title: '定向名称',
            dataIndex: 'targetingsName',
            key: 'targetingsName',
            width: 150,
            ellipsis: true,
            render(value) {
                return <span style={{ fontSize: 12 }}>{value}</span>
            }
        },
        {
            title: '营销目的',
            dataIndex: 'marketingGoal',
            key: 'marketingGoal',
            width: 100,
            ellipsis: true,
            align: 'center',
            render(value) {
                return <span style={{ fontSize: 12 }}>{MARKETING_GOAL_ENUM[value as keyof typeof MARKETING_GOAL_ENUM]}</span>
            },
        },
        {
            title: '出价',
            dataIndex: 'bidAmount',
            key: 'bidAmount',
            width: 90,
            align: 'center',
            render(value) {
                return <span style={{ fontSize: 12 }}>{value}</span>
            }
        },
        {
            title: '广告创建状态',
            dataIndex: 'adgroupStatus',
            key: 'adgroupStatus',
            width: 90,
            align: 'center',
            render(value) {
                const a = { 0: <Badge status="processing" text={<span style={{ fontSize: 12 }}>执行中</span>} />, 1: <Badge status="error" text={<span style={{ fontSize: 12 }}>失败</span>} />, 101: <Badge status="warning" text={<span style={{ fontSize: 12 }}>同步异常</span>} />, 100: <Badge status="success" text={<span style={{ fontSize: 12 }}>成功</span>} /> }
                return a[value as keyof typeof a]
            },
        },
        {
            title: <span style={{ marginLeft: 10 }}>任务反馈</span>,
            dataIndex: 'dynamicCreativeCount',
            key: 'dynamicCreativeCount',
            width: 280,
            render: (value, records) => {
                return <Space style={{ fontSize: "12px", marginLeft: 10 }} size={10}>
                    <span style={{ fontSize: 12, fontWeight: 'bold' }}><Badge status="processing" />创意总数：<span style={{ fontWeight: 'bold', color: '#1890ff' }}>{records?.dynamicCreativeCount || 0}</span>条</span>
                    {<span style={{ fontSize: 12, fontWeight: 'bold' }}><Badge status="success" />创意成功数：<span style={{ fontWeight: 'bold', color: '#52c41a' }}>{records?.dynamicCreativeSuccessCount || 0}</span>条</span>}
                </Space>
            }
        },
        {
            title: '错误信息',
            dataIndex: 'failMsg',
            key: 'failMsg',
            width: 180,
            ellipsis: true,
            render(value) {
                return <span style={{ fontSize: 12 }}>{value}</span>
            }
        },
        {
            title: '操作',
            dataIndex: 'cz',
            key: 'cz',
            width: 70,
            align: 'center',
            render(_, records) {
                return records?.adgroupStatus === 101 ? <a style={{ fontSize: 12 }} onClick={() => sync(records)}>同步</a> : '--'
            }
        }
    ]
}

export const columnsDynamicLog = (): TableProps<any>['columns'] => {
    return [
        {
            title: '创意名称',
            dataIndex: 'dynamicCreativeName',
            key: 'dynamicCreativeName',
            width: 150,
            ellipsis: true,
            render(value) {
                return <span style={{ fontSize: 12 }}>{value}</span>
            }
        },
        {
            title: '创意ID',
            dataIndex: 'dynamicCreativeId',
            key: 'dynamicCreativeId',
            width: 80,
            ellipsis: true,
            align: 'center',
            render(value) {
                return <span style={{ fontSize: 12 }}>{value}</span>
            }
        },
        {
            title: '投放模式',
            dataIndex: 'deliveryMode',
            key: 'deliveryMode',
            width: 80,
            ellipsis: true,
            align: 'center',
            render(value) {
                return <span style={{ fontSize: 12 }}>{DELIVERY_MODE_ENUM[value as keyof typeof DELIVERY_MODE_ENUM]}</span>
            }
        },
        {
            title: '动态创意类型',
            dataIndex: 'dynamicCreativeType',
            key: 'dynamicCreativeType',
            width: 80,
            ellipsis: true,
            align: 'center',
            render(value) {
                return <span style={{ fontSize: 12 }}>{DYNAMIC_CREATIVE_TYPE_ENUM[value as keyof typeof DYNAMIC_CREATIVE_TYPE_ENUM]}</span>
            }
        },
        {
            title: '任务ID',
            dataIndex: 'taskId',
            key: 'taskId',
            width: 70,
            ellipsis: true,
            align: 'center',
            render(value) {
                return <span style={{ fontSize: 12 }}>{value}</span>
            }
        },
        {
            title: '广告组ID',
            dataIndex: 'adgroupId',
            key: 'adgroupId',
            width: 80,
            ellipsis: true,
            align: 'center',
            render(value) {
                return <span style={{ fontSize: 12 }}>{value}</span>
            }
        },
        {
            title: '创意模板ID',
            dataIndex: 'creativeTemplateId',
            key: 'creativeTemplateId',
            width: 75,
            ellipsis: true,
            align: 'center',
            render(value) {
                return <span style={{ fontSize: 12 }}>{value}</span>
            }
        },
        {
            title: '创意创建状态',
            dataIndex: 'creativeStatus',
            key: 'creativeStatus',
            width: 80,
            align: 'center',
            render(value) {
                const a = { 0: <Badge status="processing" text={<span style={{ fontSize: 12 }}>执行中</span>} />, 1: <Badge status="error" style={{ fontSize: 12 }} text={<span>失败</span>} />, 100: <Badge style={{ fontSize: 12 }} status="success" text={<span>成功</span>} /> }
                return a[value as keyof typeof a]
            },
        },
        {
            title: '失败信息',
            dataIndex: 'failMsg',
            key: 'failMsg',
            width: 280,
            render: (value) => {
                return value ? <span style={{ fontSize: 12 }} onClick={() => copy(value)}>{value}</span> : '--'
            }
        }
    ]
}


export const columnsExecuteLog = (): TableProps<any>['columns'] => {
    return [
        {
            title: '执行时间',
            dataIndex: 'nextTime',
            key: 'nextTime',
            width: 145,
            ellipsis: true,
            align: 'center',
            render(value) {
                return <span style={{ fontSize: 12 }}>{value}</span>
            }
        },
        {
            title: '提交广告数量',
            dataIndex: 'submitAdCount',
            key: 'submitAdCount',
            width: 110,
            align: 'center',
            render(value) {
                return <span style={{ fontSize: 12 }}>{value}</span>
            }
        },
        {
            title: '提交创意总数',
            dataIndex: 'submitCreativeCount',
            key: 'submitCreativeCount',
            width: 110,
            align: 'center',
            render(value) {
                return <span style={{ fontSize: 12 }}>{value}</span>
            }
        },
        {
            title: '提交状态',
            dataIndex: 'submitStatus',
            key: 'submitStatus',
            render(value) {
                const a = { 2: <Badge status="processing" text={<span style={{ fontSize: 12 }}>执行中</span>} />, 0: <Badge status="error" text={<span style={{ fontSize: 12 }}>已终止</span>} />, 1: <Badge status="default" text={<span style={{ fontSize: 12 }}>待执行</span>} />, 3: <Badge status="success" text={<span style={{ fontSize: 12 }}>完成</span>} /> }
                return a[value as keyof typeof a]
            },
        }
    ]
}