ad-manage/src/pages/launchSystemNew/components/targetingTooltip/index.tsx

import { DevicePriceEnum, EducationEnum, ExcludedDimensionEnum, MaritalStatusEnum, NetworkEnum, OptimizationGoalEnum, UserOsEnum, WechatAdBehaviorEnum } from "@/services/launchAdq/enum"
import React, { useEffect, useState } from "react"
import './index.less'

const 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: 'excludedConvertedAudience', name: '排除已转化用户' }
]
interface Props {
    data: any,
    geoLocationList: any // 所有地域
    modelList: any  // 所有品牌手机
}
interface ContentProps {
    unlimited?: 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[]           // 手机系统
    excludedConvertedAudience?: {
        conversionBehaviorList: string[],
        excludedDimension: string
    }
}
/**
 * 定向处理展示
 * @returns 
 */
const TargetingTooltip: React.FC<Props> = (props) => {

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

    useEffect(() => {
        if (data && geoLocationList) {
            targetingData.forEach(item => {
                if (Object.keys(data?.targeting)?.includes(item.key)) {

                }
            })
            let newConten: ContentProps = {}
            newConten.unlimited = targetingData.filter((item: any) => !Object.keys(data?.targeting).includes(item.key))?.map((item: any) => item?.name)?.toString()
            Object.keys(data?.targeting)?.forEach((item: any) => {
                switch (item) {
                    case 'geoLocation': // 地域
                        if (data?.targeting[item]?.regions && data?.targeting[item]?.regions?.length > 0) {
                            newConten.geoLocation = data?.targeting[item]?.regions?.map((item: any) => geoLocationList[item]?.name)
                        }
                        break
                    case 'age':
                        let newAge = data?.targeting[item][0]
                        newConten.age = `${newAge.min}至${newAge.max > 65 ? '66岁及以上' : newAge.max + '岁'}`
                        break
                    case 'gender':
                        newConten.gender = data?.targeting[item][0]
                        break
                    case 'education':
                        newConten.education = data?.targeting[item]
                        break
                    case 'maritalStatus':
                        newConten.maritalStatus = data?.targeting[item]
                        break
                    case 'deviceBrandModel': // 品牌型号
                        let newData = data?.targeting[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?.targeting[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?.targeting[item]
                        break
                    case 'devicePrice':
                        newConten.devicePrice = data?.targeting[item]
                        break
                    case 'userOs':
                        newConten.userOs = data?.targeting[item]
                        break
                    case 'excludedConvertedAudience':
                        newConten.excludedConvertedAudience = data?.targeting[item]
                        break
                }
                setContent(newConten)
            })
            
        }
    }, [data, geoLocationList])



    return <div className='targetingTooltip'>
        {content?.geoLocation && <div>
            地域：<span>{content?.geoLocation?.toString()}</span>
        </div>}
        {content?.age && <div>
            年龄：<span>{content?.age}</span>
        </div>}
        {content?.gender && <div>
            性别：<span>{content?.gender === 'MALE' ? '男' : '女'}</span>
        </div>}
        {(content?.education && content?.education?.length > 0) && <div>
            学历：<span>{content?.education?.map((key: string) => EducationEnum[key]).toString()}</span>
        </div>}
        {(content?.networkType && content?.networkType?.length > 0) && <div>
            联网方式：<span>{content?.networkType?.map((key: string) => NetworkEnum[key]).toString()}</span>
        </div>}
        {(content?.devicePrice && content?.devicePrice?.length > 0) && <div>
            手机价格：<span>{content?.devicePrice?.map((key: string) => DevicePriceEnum[key]).toString()}</span>
        </div>}
        {(content?.userOs && content?.userOs?.length > 0) && <div>
            手机系统：<span>{content?.userOs?.map((key: string) => UserOsEnum[key]).toString()}</span>
        </div>}
        {(content?.maritalStatus && content?.maritalStatus?.length > 0) && <div>
            婚恋：<span>{content?.maritalStatus?.map((key: string) => MaritalStatusEnum[key]).toString()}</span>
        </div>}
        {content?.deviceBrandModel && <>
            {(content?.deviceBrandModel?.includedList && content?.deviceBrandModel?.includedList?.length > 0) && <div>
                排除品牌型号：<span>{content?.deviceBrandModel?.includedList?.toString()}</span>
            </div>}
            {(content?.deviceBrandModel?.excludedList && content?.deviceBrandModel?.excludedList?.length > 0) && <div>
                品牌型号：<span>{content?.deviceBrandModel?.excludedList?.toString()}</span>
            </div>}
        </>}
        {content?.wechatAdBehavior && <>
            {(content?.wechatAdBehavior?.actions && content?.wechatAdBehavior?.actions?.length > 0) && <div>
                再营销：<span>{content?.wechatAdBehavior?.actions?.map((key: string) => WechatAdBehaviorEnum[key]).toString()}</span>
            </div>}
            {(content?.wechatAdBehavior?.excludedActions && content?.wechatAdBehavior?.excludedActions?.length > 0) && <div>
                排除营销：<span>{content?.wechatAdBehavior?.excludedActions?.map((key: string) => WechatAdBehaviorEnum[key]).toString()}</span>
            </div>}
        </>}
        {content?.excludedConvertedAudience && <div>
            排除已转化用户：<span>{ExcludedDimensionEnum[content?.excludedConvertedAudience?.excludedDimension]}{`（自定义转化行为：${OptimizationGoalEnum[content?.excludedConvertedAudience?.conversionBehaviorList[0]]}）`}</span>
        </div>}
        {content?.unlimited && <div>
            不限：<span>{!content?.geoLocation && '地域,'}{content?.unlimited}</span>
        </div>}
    </div>
}

export default React.memo(TargetingTooltip)