ad-manage/src/pages/launchSystemV3/components/AdgroupTooltip/index.tsx

import React from "react"
import style from '../../tencentAdPutIn/create/index.less'
import { AD_STATUS_ENUM, BID_ALL_OCATION_MODE, BID_MODE_ENUM, BID_SCENE_NORMAL_ENUM, DEEP_CONVERSION_ENUM, GOAL_ROAS_ENUM, MARKETING_CARRIER_TYPE_ENUM, MARKETING_GOAL_ENUM, MARKETING_SUB_GOAL_ENUM, MARKETING_TARGET_TYPE_ENUM, MARKETING_TARGET_TYPE_GAME_ENUM, OPTIMIZATIONGOAL_ENUM, ROI_ALL_OCATION_MODE, SITE_SET_ENUM, SMART_BID_TYPE_ENUM } from "../../tencentAdPutIn/const"
import { Typography } from "antd"
import TimeSeriesLook from "@/pages/launchSystemNew/adq/ad/timeSeriesLook"
import { ShowApplication } from "../../tencenTasset/application"


interface Props {
    data: any
    taskType?: 'GAME' | 'NOVEL'
}

/**
 * 广告详情
 * @param param0 
 * @returns 
 */
const AdgroupTooltip: React.FC<Props> = ({ data: adgroups, taskType }) => {

    /************************************/
    const {
        marketingGoal, marketingSubGoal, marketingAssetOuterSpec, marketingCarrierType, automaticSiteEnabled, explorationStrategy, siteSet, prioritySiteSet, searchExpandTargetingSwitch, bidMode, smartBidType, bidScene, bidAmount, optimizationGoal,
        deepConversionSpec, autoAcquisitionEnabled, autoAcquisitionBudget, dailyBudget, endDate, beginDate, timeSeries, firstDayBeginTime, configuredStatus, adgroupName, promoteApplicationId, rtaId, rtaTargetId, bidAmountMin, bidAllocationMode, bidAmountMax,

    } = adgroups
    /************************************/

    return <div className={style.detail_body} style={{ height: 'auto' }}>
        {(adgroups && Object.keys(adgroups).length > 0) && <>
            {taskType === 'NOVEL' ? <>
                <p>营销目的：{MARKETING_GOAL_ENUM[marketingGoal as keyof typeof MARKETING_GOAL_ENUM]}</p>
                <p style={{ fontWeight: 'bold', color: '#000' }}>推广产品类型：{MARKETING_TARGET_TYPE_ENUM[marketingAssetOuterSpec?.marketingTargetType as keyof typeof MARKETING_TARGET_TYPE_ENUM]}</p>
            </> : <>
                <p>营销目的：{MARKETING_SUB_GOAL_ENUM[marketingSubGoal as keyof typeof MARKETING_SUB_GOAL_ENUM]}</p>
                <p style={{ fontWeight: 'bold', color: '#000' }}>推广产品类型：{MARKETING_TARGET_TYPE_GAME_ENUM[marketingAssetOuterSpec?.marketingTargetType as keyof typeof MARKETING_TARGET_TYPE_GAME_ENUM]}</p>
            </>}
            <p>营销载体类型：{MARKETING_CARRIER_TYPE_ENUM[marketingCarrierType as keyof typeof MARKETING_CARRIER_TYPE_ENUM]}</p>
            {['MARKETING_CARRIER_TYPE_APP_ANDROID', 'MARKETING_CARRIER_TYPE_APP_IOS'].includes(marketingCarrierType) && <ShowApplication id={promoteApplicationId} />}
            <p>版位选择：{automaticSiteEnabled ? '自动版位' : '选择特定版位'}</p>
            {!automaticSiteEnabled && <Typography.Paragraph className={style.tpP} style={{ marginBottom: 0 }} ellipsis={{ tooltip: true, rows: 2 }}>广告版位：{siteSet.map((item: string | number) => SITE_SET_ENUM[item as keyof typeof SITE_SET_ENUM]).toString()}</Typography.Paragraph>}
            {automaticSiteEnabled && <>
                <p>探索策略：{explorationStrategy === 'STEADY_EXPLORATION' ? '稳步探索' : '自动探索'}</p>
                {prioritySiteSet?.length > 0 && <Typography.Paragraph className={style.tpP} style={{ marginBottom: 0 }} ellipsis={{ tooltip: true, rows: 2 }}>优先探索版位：{prioritySiteSet.map((item: string | number) => SITE_SET_ENUM[item as keyof typeof SITE_SET_ENUM]).toString()}</Typography.Paragraph>}
            </>}
            <p>搜索场景扩量：{searchExpandTargetingSwitch === 'SEARCH_EXPAND_TARGETING_SWITCH_OPEN' ? '开启' : '关闭'}</p>
            {rtaId && <p>RTA ID：{rtaId}</p>}
            {rtaTargetId && <p>策略 ID：{rtaTargetId}</p>}
            <p>计费方式：{BID_MODE_ENUM[bidMode as keyof typeof BID_MODE_ENUM]}</p>
            {taskType === 'GAME' ? <>
                <p>出价场景：{BID_SCENE_NORMAL_ENUM[bidScene as keyof typeof BID_SCENE_NORMAL_ENUM]}</p>
            </> : <p>出价类型：{SMART_BID_TYPE_ENUM[smartBidType as keyof typeof SMART_BID_TYPE_ENUM]}</p>}
            <p style={{ fontWeight: 'bold', color: '#000' }}>出价分配方式：{BID_ALL_OCATION_MODE.find(item => item.value === bidAllocationMode)?.label}</p>
            {[2, 3].includes(bidAllocationMode)
                ?
                <p style={{ fontWeight: 'bold', color: '#000' }}>出价：{bidAmountMin}-{bidAmountMax} 元/{optimizationGoal ? OPTIMIZATIONGOAL_ENUM[optimizationGoal as keyof typeof OPTIMIZATIONGOAL_ENUM] : ['BID_MODE_OCPM', 'BID_MODE_OCPC'].includes(bidMode) ? '千次曝光' : '点击'}</p>
                :
                <p style={{ fontWeight: 'bold', color: '#000' }}>出价：{bidAmount} 元/{optimizationGoal ? OPTIMIZATIONGOAL_ENUM[optimizationGoal as keyof typeof OPTIMIZATIONGOAL_ENUM] : ['BID_MODE_OCPM', 'BID_MODE_OCPC'].includes(bidMode) ? '千次曝光' : '点击'}</p>
            }
            {optimizationGoal && <p style={{ fontWeight: 'bold', color: '#000' }}>优化目标：{OPTIMIZATIONGOAL_ENUM[optimizationGoal as keyof typeof OPTIMIZATIONGOAL_ENUM]}</p>}
            {deepConversionSpec && <>
                <p style={{ fontWeight: 'bold', color: '#000' }}>深度转化优化：开启</p>
                <p style={{ fontWeight: 'bold', color: '#000' }}>深度优化类型：{DEEP_CONVERSION_ENUM[deepConversionSpec?.deepConversionType as keyof typeof DEEP_CONVERSION_ENUM]}</p>
                {deepConversionSpec.deepConversionType === 'DEEP_CONVERSION_BEHAVIOR' ? <>
                    <p style={{ fontWeight: 'bold', color: '#000' }}>深度优化目标：{OPTIMIZATIONGOAL_ENUM[deepConversionSpec.deepConversionBehaviorSpec.goal as keyof typeof OPTIMIZATIONGOAL_ENUM]}</p>
                    <p style={{ fontWeight: 'bold', color: '#000' }}>深度目标出价：{deepConversionSpec.deepConversionBehaviorSpec.bidAmount}元/{OPTIMIZATIONGOAL_ENUM[deepConversionSpec.deepConversionBehaviorSpec.goal as keyof typeof OPTIMIZATIONGOAL_ENUM] || '优化目标'}</p>
                </> : <>
                    <p style={{ fontWeight: 'bold', color: '#000' }}>深度优化目标：{GOAL_ROAS_ENUM[deepConversionSpec.deepConversionWorthSpec.goal as keyof typeof GOAL_ROAS_ENUM]}</p>
                    <p style={{ fontWeight: 'bold', color: '#000' }}>ROI分配方式：{ROI_ALL_OCATION_MODE.find(item => item.value === deepConversionSpec?.deepConversionWorthSpec?.roiAllocationMode)?.label}</p>
                    {[2, 3].includes(deepConversionSpec?.deepConversionWorthSpec?.roiAllocationMode)
                        ?
                        <p style={{ fontWeight: 'bold', color: '#000' }}>期望ROI：{deepConversionSpec.deepConversionWorthSpec.expectedRoiMin}-{deepConversionSpec.deepConversionWorthSpec.expectedRoiMax}</p>
                        :
                        <p style={{ fontWeight: 'bold', color: '#000' }}>期望ROI：{deepConversionSpec.deepConversionWorthSpec.expectedRoi}</p>
                    }
                </>}
            </>}
            <p>一键起量：{autoAcquisitionEnabled ? '开启' : '关闭'}</p>
            {autoAcquisitionEnabled && <p>起量预算：{autoAcquisitionBudget}元/天</p>}
            <p>广告日预算：{dailyBudget ? dailyBudget + '元/天' : '不限'}</p>
            <p style={{ fontWeight: 'bold', color: '#000' }}>投放日期：{beginDate} 至 {endDate}</p>
            <p>投放时段：{timeSeries.includes('0') ? <TimeSeriesLook timeSeries={timeSeries} /> : '全天'}</p>
            <p>首日开始时间：{firstDayBeginTime ? firstDayBeginTime : '关闭'}</p>
            <p>广告状态：{AD_STATUS_ENUM[configuredStatus as keyof typeof AD_STATUS_ENUM]}</p>
            <p>广告名称：{adgroupName}</p>
        </>}
    </div>
}


export default React.memo(AdgroupTooltip)