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

import React, { useEffect, useState } from "react"
import './index.less'
import { DEVICE_PRICE_ENUM, EDUCATION_ENUM, EXCLUDED_DIMENSION_ENUM, GAME_CONSUMPTION_LEVEL_ENUM, LOCATION_TYPES_ENUM, MARITAL_STATUS_ENUM, NETWORK_ENUM, OPTIMIZATIONGOAL_ENUM, USER_OS_ENUM, WECHAT_AD_NEHAVIOR_ENUM, WECHAT_AD_NEHAVIOR_GAME_ENUM } from "../../tencentAdPutIn/const"

let targetingData = [
    { key: 'geoLocation', name: '地域' },
    { key: 'age', name: '年龄' },
    { key: 'gender', name: '性别' },
    { key: 'education', name: '学历' },
    { key: 'maritalStatus', name: '婚恋' },
    // { key: 'customAudience', name: '定向人群' },
    { key: 'deviceBrandModel', name: '品牌型号' },
    { key: 'wechatAdBehavior', name: '微信再营销' },
    { key: 'networkType', name: '联网方式' },
    { key: 'devicePrice', name: '设备价格' },
    { key: 'userOs', name: '操作系统' },
    { key: 'excludedOs', name: '排除操作系统' },
    { key: 'excludedConvertedAudience', name: '排除已转化用户' }
]
interface Props {
    data: any,
    geoLocationList: any // 所有地域
    modelList: any  // 所有品牌手机
    targetingName?: string
    taskType?: 'NOVEL' | 'GAME'
}
interface ContentProps {
    unlimited?: string,         // 不限
    location?: string[],        // 地点类型
    geoLocation?: any[],        // 地域
    age?: string,               // 年龄
    gender?: string,            // 性别
    education?: string[]        // 学历
    maritalStatus?: string[],   // 婚恋
    deviceBrandModel?: {
        excludedList?: string[], // 品牌型号
        includedList?: string[]  // 排除品牌型号
    },
    wechatAdBehavior?: {
        actions?: string[],      // 再营销
        excludedActions?: string[]// 排除营销
    },
    networkType?: string[]      // 联网方式
    devicePrice?: string[]      // 手机价格
    userOs?: string[]           // 手机系统
    excludedOs?: string[]           // 手机系统
    gameConsumptionLevel?: string[] // 游戏消费能力
    excludedConvertedAudience?: {
        conversionBehaviorList: string[],
        excludedDimension: string
    }
}
/**
 * 定向处理展示
 * @returns 
 */
const TargetingTooltip: React.FC<Props> = (props) => {

    /**********************/
    const { data, geoLocationList, modelList, targetingName, taskType } = props
    const [content, setContent] = useState<ContentProps>({})
    /**********************/

    if (taskType == 'GAME') {
        targetingData = [...targetingData, { key: 'gameConsumptionLevel', name: '游戏消费能力' }]
    }

    useEffect(() => {
        if (data && geoLocationList) {
            let newConten: ContentProps = {}
            newConten.unlimited = targetingData.filter((item: any) => !Object.keys(data).includes(item.key))?.map((item: any) => item?.name)?.toString()
            Object.keys(data)?.forEach((item: any) => {
                switch (item) {
                    case 'geoLocation': // 地域
                        newConten.location = data[item]?.locationTypes || []
                        if (data[item]?.regions && data[item]?.regions?.length > 0) {
                            newConten.geoLocation = data[item]?.regions?.map((item: any) => geoLocationList[item]?.name)
                        }
                        break
                    case 'age':
                        let newAge = data[item][0]
                        newConten.age = `${newAge.min}至${newAge.max > 65 ? '66岁及以上' : newAge.max + '岁'}`
                        break
                    case 'gender':
                        newConten.gender = data[item][0]
                        break
                    case 'education':
                        newConten.education = data[item]
                        break
                    case 'maritalStatus':
                        newConten.maritalStatus = data[item]
                        break
                    case 'deviceBrandModel': // 品牌型号
                        let newData = data[item]
                        let deviceBrandModel: { excludedList?: string[], includedList?: string[] } = {}
                        if (newData?.excludedList) {
                            deviceBrandModel.excludedList = newData?.excludedList?.map((key: any) => modelList[key]?.name)
                        }
                        if (newData?.includedList) {  // 排除
                            deviceBrandModel.includedList = newData?.includedList?.map((key: any) => modelList[key]?.name)
                        }
                        newConten.deviceBrandModel = deviceBrandModel
                        break
                    case 'wechatAdBehavior': // 微信再营销
                        let wechatAdBehaviorData = data[item]
                        let wechatAdBehavior: {
                            actions?: string[],      // 再营销
                            excludedActions?: string[]// 排除营销
                        } = {}
                        if (wechatAdBehaviorData?.actions) {
                            wechatAdBehavior.actions = wechatAdBehaviorData?.actions
                        }
                        if (wechatAdBehaviorData?.excludedActions) {  // 排除
                            wechatAdBehavior.excludedActions = wechatAdBehaviorData?.excludedActions
                        }
                        newConten.wechatAdBehavior = wechatAdBehavior
                        break
                    case 'networkType':
                        newConten.networkType = data[item]
                        break
                    case 'devicePrice':
                        newConten.devicePrice = data[item]
                        break
                    case 'gameConsumptionLevel':
                        newConten.gameConsumptionLevel = data[item]
                        break
                    case 'userOs':
                        newConten.userOs = data[item]
                        break
                    case 'excludedOs':
                        newConten.excludedOs = data[item]
                        break
                    case 'excludedConvertedAudience':
                        newConten.excludedConvertedAudience = data[item]
                        break
                }
            })
            setContent(newConten)
        } else {
            setContent({ unlimited: targetingData?.map((item: any) => item?.name)?.toString() })
        }
    }, [data, geoLocationList])



    return <div className='targetingTooltip'>
        {targetingName && <div style={{ fontWeight: 'bold', marginBottom: 4 }}>{targetingName}</div>}
        {content?.geoLocation && <div>
            <strong>地域：</strong><span>{(content?.location && content?.location?.length > 0) && `（${content?.location?.map((key: string) => LOCATION_TYPES_ENUM[key as keyof typeof LOCATION_TYPES_ENUM]).toString()}）`}{content?.geoLocation?.toString()}</span>
        </div>}
        {content?.age && <div>
            <strong>年龄：</strong><span>{content?.age}</span>
        </div>}
        {content?.gender && <div>
            <strong> 性别：</strong><span>{content?.gender === 'MALE' ? '男' : '女'}</span>
        </div>}
        {(content?.education && content?.education?.length > 0) && <div>
            <strong>学历：</strong><span>{content?.education?.map((key: string) => EDUCATION_ENUM[key as keyof typeof EDUCATION_ENUM]).toString()}</span>
        </div>}
        {(content?.networkType && content?.networkType?.length > 0) && <div>
            <strong>联网方式：</strong><span>{content?.networkType?.map((key: string) => NETWORK_ENUM[key as keyof typeof NETWORK_ENUM]).toString()}</span>
        </div>}
        {(content?.devicePrice && content?.devicePrice?.length > 0) && <div>
            <strong>手机价格：</strong><span>{content?.devicePrice?.map((key: string) => DEVICE_PRICE_ENUM[key as keyof typeof DEVICE_PRICE_ENUM]).toString()}</span>
        </div>}
        {(content?.gameConsumptionLevel && content?.gameConsumptionLevel?.length > 0) && <div>
            <strong>游戏消费能力：</strong><span>{content?.gameConsumptionLevel?.map((key: string) => GAME_CONSUMPTION_LEVEL_ENUM[key as keyof typeof GAME_CONSUMPTION_LEVEL_ENUM]).toString()}</span>
        </div>}
        {(content?.userOs && content?.userOs?.length > 0) && <div>
            <strong>操作系统：</strong><span>{content?.userOs?.map((key: string) => USER_OS_ENUM[key as keyof typeof USER_OS_ENUM]).toString()}</span>
        </div>}
        {(content?.excludedOs && content?.excludedOs?.length > 0) && <div>
            <strong>排除操作系统：</strong><span>{content?.excludedOs?.map((key: string) => USER_OS_ENUM[key as keyof typeof USER_OS_ENUM]).toString()}</span>
        </div>}
        {(content?.maritalStatus && content?.maritalStatus?.length > 0) && <div>
            <strong>婚恋：</strong><span>{content?.maritalStatus?.map((key: string) => MARITAL_STATUS_ENUM[key as keyof typeof MARITAL_STATUS_ENUM]).toString()}</span>
        </div>}
        {content?.deviceBrandModel && <>
            {(content?.deviceBrandModel?.includedList && content?.deviceBrandModel?.includedList?.length > 0) && <div>
                <strong>品牌型号：</strong><span>{content?.deviceBrandModel?.includedList?.toString()}</span>
            </div>}
            {(content?.deviceBrandModel?.excludedList && content?.deviceBrandModel?.excludedList?.length > 0) && <div>
                <strong>排除品牌型号：</strong><span>{content?.deviceBrandModel?.excludedList?.toString()}</span>
            </div>}
        </>}
        {content?.wechatAdBehavior && taskType === 'GAME' ? <>
            {(content?.wechatAdBehavior?.actions && content?.wechatAdBehavior?.actions?.length > 0) && <div>
                <strong>再营销：</strong><span>{content?.wechatAdBehavior?.actions?.map((key: string) => WECHAT_AD_NEHAVIOR_GAME_ENUM[key as keyof typeof WECHAT_AD_NEHAVIOR_GAME_ENUM]).toString()}</span>
            </div>}
            {(content?.wechatAdBehavior?.excludedActions && content?.wechatAdBehavior?.excludedActions?.length > 0) && <div>
                <strong>排除营销：</strong><span>{content?.wechatAdBehavior?.excludedActions?.map((key: string) => WECHAT_AD_NEHAVIOR_GAME_ENUM[key as keyof typeof WECHAT_AD_NEHAVIOR_GAME_ENUM]).toString()}</span>
            </div>}
        </> : <>
            {(content?.wechatAdBehavior?.actions && content?.wechatAdBehavior?.actions?.length > 0) && <div>
                <strong>再营销：</strong><span>{content?.wechatAdBehavior?.actions?.map((key: string) => WECHAT_AD_NEHAVIOR_ENUM[key as keyof typeof WECHAT_AD_NEHAVIOR_ENUM]).toString()}</span>
            </div>}
            {(content?.wechatAdBehavior?.excludedActions && content?.wechatAdBehavior?.excludedActions?.length > 0) && <div>
                <strong>排除营销：</strong><span>{content?.wechatAdBehavior?.excludedActions?.map((key: string) => WECHAT_AD_NEHAVIOR_ENUM[key as keyof typeof WECHAT_AD_NEHAVIOR_ENUM]).toString()}</span>
            </div>}
        </>}
        {content?.excludedConvertedAudience && <div>
            <strong>排除已转化用户：</strong><span>{EXCLUDED_DIMENSION_ENUM[content?.excludedConvertedAudience?.excludedDimension as keyof typeof EXCLUDED_DIMENSION_ENUM]}{`（自定义转化行为：${content?.excludedConvertedAudience?.conversionBehaviorList?.map(item => OPTIMIZATIONGOAL_ENUM[item as keyof typeof OPTIMIZATIONGOAL_ENUM])?.toString()}）`}</span>
        </div>}
        {content?.unlimited && <div>
            <strong>不限：</strong><span>{!content?.geoLocation && '地域,'}{content?.unlimited}</span>
        </div>}
    </div>
}

export default React.memo(TargetingTooltip)