ad-manage/src/pages/launchSystemNew/launchManage/localAd/targeting/modal.tsx

import React, { useCallback, useState, useEffect } from 'react'
import { Modal, Form, Input, Divider, Select, Radio, Checkbox, TreeSelect } from 'antd'
import { GenderEnum, EducationEnum, ExcludedDimensionEnum, MaritalStatusEnum, OptimizationGoalEnum, UserOsEnum, DevicePriceEnum, NetworkEnum, WechatAdBehaviorEnum } from '@/services/launchAdq/enum'
import { ModalConfig } from '.'
import { useAjax } from '@/Hook/useAjax'
import { getTagsList } from '@/services/launchAdq/global'
interface Props {
    title?: string,
    visible: boolean,
    PupFn: (arg: ModalConfig) => void,
    callback: (params: any) => void,
    confirmLoading: boolean,
    type?: 'add' | 'look' | 'edit',//新增，查看，编辑
    dataInfo?: any
}
const ios_os = Object.keys(UserOsEnum).filter(key => key.includes('IOS'))
const android_os = Object.keys(UserOsEnum).filter(key => key.includes('ANDROID'))
/**创意模板*/
function AdModal(props: Props) {
    let { visible, confirmLoading, PupFn, callback, type, dataInfo } = props
    let arg = type === 'look' ? { footer: null } : {}
    const tagsList_REGION = useAjax((params) => getTagsList(params))
    const tagsList_MODEL = useAjax((params) => getTagsList(params))
    const [form] = Form.useForm();
    const [indeterminateIos, setIndeterminateIos] = useState(false);
    const [indeterminateAndroid, setIndeterminateAndroid] = useState(false);
    const [modelList, setModelList] = useState([])
    const [regionsList, setRegionsList] = useState<any[]>([])
    let educationType = Form.useWatch('educationType', form)
    let ageType = Form.useWatch('ageType', form)
    let age_min = Form.useWatch('age_min', form)
    let age_max = Form.useWatch('age_max', form)
    let maritalStatusType = Form.useWatch('maritalStatusType', form)
    let excludedDimension = Form.useWatch('excludedDimension', form)
    let userOsType = Form.useWatch('userOsType', form)
    let userOsIos = Form.useWatch('userOsIos', form)
    let userOsAndroid = Form.useWatch('userOsAndroid', form)
    let devicePriceType = Form.useWatch('devicePriceType', form)
    let networkType = Form.useWatch('networkType', form)
    let wechatAdBehaviorType = Form.useWatch('wechatAdBehaviorType', form)
    let actions = Form.useWatch('actions', form)
    let excludedActions = Form.useWatch('excludedActions', form)
    let deviceBrandModelType = Form.useWatch('deviceBrandModelType', form)
    let deviceBrandModelList = Form.useWatch('deviceBrandModelList', form)
    let geoLocationType = Form.useWatch('geoLocationType', form)

    // 确定事件
    const handleOk = useCallback(() => {
        form.validateFields().then(values => {
            let newValues = JSON.parse(JSON.stringify(values))
            newValues.targeting = {}
            Object.keys(newValues).forEach(key => {
                switch (key) {
                    case 'geoLocationType':
                        if (newValues[key] === '1') {
                            newValues.targeting.geoLocation = {
                                locationTypes: ['LIVE_IN'],//对于微信流量（site_set=SITE_SET_WECHAT、SITE_SET_MOMENTS、SITE_SET_MINI_GAME_WECHAT），仅能选择"LIVE_IN"（常住）；
                                regions: newValues.regions && newValues.regions[0] === 1156 ? regionsList[0]?.children?.filter((item: any) => !item.disabled)?.map((item: { value: any }) => item.value) : newValues.regions
                            }
                        }
                        delete newValues[key]
                        delete newValues.regions
                        break;
                    case 'ageType'://年龄处理
                        if (newValues[key] === '1') {
                            newValues.targeting.age = [{
                                min: newValues.age_min,
                                max: newValues.age_max
                            }]
                        }
                        delete newValues[key]
                        delete newValues.age_min
                        delete newValues.age_max
                        break;
                    case 'gender'://性别
                        newValues[key] !== '0' && (newValues.targeting.gender = [newValues[key]])
                        delete newValues[key]
                        break;
                    case 'educationType'://学历
                        newValues[key] === '1' && (newValues.targeting.education = newValues.education)
                        delete newValues[key]
                        delete newValues['education']
                        break;
                    case 'maritalStatusType'://婚恋
                        newValues[key] === '1' && (newValues.targeting.maritalStatus = newValues.maritalStatus)
                        delete newValues[key]
                        delete newValues['maritalStatus']
                        break;
                    case 'customAudienceType'://定向人群
                        break;
                    case 'deviceBrandModelType'://品牌型号
                        if (newValues[key] === '1') {
                            newValues.targeting.deviceBrandModel = {}
                            if (newValues.isexcluded) {
                                newValues.targeting.deviceBrandModel.excludedList = newValues.deviceBrandModelList
                                delete newValues.targeting.deviceBrandModel.includedList
                            } else {
                                newValues.targeting.deviceBrandModel.includedList = newValues.deviceBrandModelList
                                delete newValues.targeting.deviceBrandModel.excludedList
                            }
                            if (!newValues.targeting.deviceBrandModel.excludedList && !newValues.targeting.deviceBrandModel.includedList) {
                                delete newValues.targeting.deviceBrandModel
                            }
                        }
                        delete newValues[key]
                        delete newValues.deviceBrandModelList
                        delete newValues.isexcluded
                        break;
                    case 'wechatAdBehaviorType'://微信再营销
                        if (newValues[key] === '1') {
                            newValues.targeting.wechatAdBehavior = {}
                            if (newValues.actions) {
                                newValues.targeting.wechatAdBehavior = { ...newValues.targeting.wechatAdBehavior, actions: newValues.actions }
                            }
                            if (newValues.excludedActions) {
                                newValues.targeting.wechatAdBehavior = { ...newValues.targeting.wechatAdBehavior, excludedActions: newValues.excludedActions }
                            }
                            // 去除空值的参数
                            Object.keys(newValues.targeting.wechatAdBehavior).forEach(key => {
                                if (!newValues.targeting.wechatAdBehavior[key] || newValues.targeting.wechatAdBehavior[key]?.length === 0) {
                                    delete newValues.targeting.wechatAdBehavior[key]
                                }
                            })
                            // 什么都没删除参数
                            if (!newValues.targeting.wechatAdBehavior.actions && !newValues.targeting.wechatAdBehavior.excludedActions) {
                                delete newValues.targeting.wechatAdBehavior
                            }
                        }
                        delete newValues[key]
                        delete newValues.actions
                        delete newValues.excludedActions
                        break;
                    case 'networkType'://联网方式
                        newValues[key] === '1' && (newValues.targeting.networkType = newValues.network)
                        delete newValues[key]
                        delete newValues.network
                        break;
                    case 'devicePriceType'://手机价格
                        newValues[key] === '1' && (newValues.targeting.devicePrice = newValues.devicePrice)
                        delete newValues[key]
                        delete newValues.devicePrice
                        break;
                    case 'userOsType'://手机系统
                        if (newValues[key] === '1') {
                            newValues.targeting.userOs = []
                            if (newValues.userOsIos) {
                                newValues.targeting.userOs = [...newValues.targeting.userOs, ...newValues.userOsIos]
                            }
                            if (newValues.userOsAndroid) {
                                newValues.targeting.userOs = [...newValues.targeting.userOs, ...newValues.userOsAndroid]
                            }
                            if (newValues.targeting.userOs.length === 0) {
                                delete newValues.targeting.userOs
                            }
                        }
                        delete newValues[key]
                        delete newValues.userOsIosAll
                        delete newValues.userOsAndroidAll
                        delete newValues.userOsIos
                        delete newValues.userOsAndroid
                        break;
                    case 'excludedDimension'://排除已转化用户
                        if (newValues[key] !== '0') {
                            newValues.targeting.excludedConvertedAudience = newValues.conversionBehaviorList ? {
                                excludedDimension: newValues.excludedDimension,
                                conversionBehaviorList: [newValues.conversionBehaviorList]
                            } : {
                                excludedDimension: newValues.excludedDimension,
                            }
                        }
                        delete newValues[key]
                        delete newValues.conversionBehaviorList
                        break;
                }
            })
            // console.log(JSON.stringify(newValues))
            callback(newValues)
        })
    }, [form, regionsList])

    // 监听ios系统全选事件
    useEffect(() => {
        setIndeterminateIos(!!userOsIos?.length && userOsIos?.length < ios_os.length)
        form.setFieldsValue({ userOsIosAll: userOsIos?.length === ios_os.length })
    }, [userOsIos])
    // 监听android系统全选事件
    useEffect(() => {
        setIndeterminateAndroid(!!userOsAndroid?.length && userOsAndroid?.length < android_os.length)
        form.setFieldsValue({ userOsAndroidAll: userOsAndroid?.length === android_os.length })
    }, [userOsAndroid])
    // 获取定向标签
    useEffect(() => {
        // 获取地域
        tagsList_REGION.run({ type: 'REGION' }).then(res => {
            let arr: any = Object.values(res).filter(v => typeof v !== 'string')
            let parentList = arr.filter((item: { parentName: any }) => !item.parentName)
            let childrenList = arr.filter((item: { parentName: any }) => item.parentName)
            parentList = parentList.map((item: { name: any; id: any, parentId: any }) => {
                let children = childrenList?.filter((c: { parentId: any }) => {
                    return item.id === c.parentId
                })
                let obj = {
                    title: item.name,
                    value: item.id,
                    key: item.id,
                    parentId: item.parentId,
                    disabled: item.id === 710000 || item.id === 810000 || item.id === 820000,
                    children: children.map((item: { name: any; id: any, parentId: any }) => ({
                        title: item.name,
                        value: item.id,
                        key: item.id,
                        parentId: item.parentId,
                        disabled: item.parentId === 710000 || item.parentId === 810000 || item.parentId === 820000
                    }))
                }
                return obj
            })
            parentList = parentList.map((item: any) => {
                let itemArr = item?.children?.map((c: any) => {
                    let arr = childrenList.filter((d: { parentId: any }) => {
                        return d.parentId === c.value
                    })
                    arr = arr.map((i: { name: any; id: any }) => ({
                        title: i.name,
                        value: i.id,
                        key: i.id,
                    }))
                    return { ...c, children: arr }
                })
                return { ...item, children: itemArr }
            })
            let zg = parentList.filter((item: { title: string }) => item.title === '中国')
            let zg_children = parentList.filter((item: { title: string }) => (item.title !== '中国' && item.title !== '国外'))
            zg[0].children = zg_children
            setRegionsList(zg)
        })
        // 获取手机
        tagsList_MODEL.run({ type: 'DEVICE_BRAND_MODEL' }).then(res => {
            let arr: any = Object.values(res).filter(v => typeof v !== 'string')
            let parentList = arr.filter((item: { parentName: any }) => !item.parentName)
            let childrenList = arr.filter((item: { parentName: any }) => item.parentName)
            parentList = parentList.map((item: { name: any; id: any }) => {
                let children = childrenList?.filter((c: { parentId: any }) => {
                    return item.id === c.parentId
                })
                let obj = {
                    title: item.name,
                    value: item.id,
                    key: item.id,
                    children: children.map((item: { name: any; id: any }) => ({
                        title: item.name,
                        value: item.id,
                        key: item.id,
                    }))
                }
                return obj
            })
            setModelList(parentList)
        })
    }, [])
    // 回填数据
    useEffect(() => {
        if (regionsList.length > 0 && dataInfo) {
            let newArr = regionsList[0]?.children?.filter((item: any) => !item.disabled)?.map((item: { value: any }) => item.value)//全选省列表
            let { description, targetingName, targeting } = dataInfo
            let { age, deviceBrandModel, devicePrice, education, excludedConvertedAudience, gender, geoLocation, maritalStatus, networkType, userOs, wechatAdBehavior } = targeting
            form.setFieldsValue({
                targetingName,//定向名称
                description,//定向描述
                geoLocationType: geoLocation?.regions ? '1' : '0',//地域选项
                regions: geoLocation?.regions && JSON.stringify(geoLocation?.regions) === JSON.stringify(newArr) ? [1156] : geoLocation?.regions,//地域回填
                ageType: age ? '1' : '0',//年龄选项
                age_min: age ? age[0].min : 14,//年龄
                age_max: age ? age[0].max : 66,//年龄
                gender: gender ? gender?.join() : '0',//性别
                educationType: education ? '1' : '0',//学历
                education,//学历
                maritalStatusType: maritalStatus ? '1' : '0',//婚恋
                maritalStatus,//婚恋
                excludedDimension: excludedConvertedAudience ? excludedConvertedAudience?.excludedDimension : '0',//排除已转化
                conversionBehaviorList: excludedConvertedAudience ? excludedConvertedAudience?.conversionBehaviorList[0] : undefined,//排除已转化
                deviceBrandModelType: deviceBrandModel ? '1' : '0',//设备品牌型号
                deviceBrandModelList: deviceBrandModel?.excludedList || deviceBrandModel?.includedList,//设备品牌型号
                isexcluded: deviceBrandModel && deviceBrandModel?.excludedList,//设备品牌型号
                userOsType:userOs?'1':'0',//操作系统
                userOsIos:userOs?.filter((os:string)=>os.includes('IOS')),//操作系统
                userOsAndroid:userOs?.filter((os:string)=>os.includes('ANDROID')),//操作系统
                networkType:networkType?'1':'0',//联网方式
                network:networkType,//联网方式
                devicePriceType:devicePrice?'1':'0',//设备价格
                devicePrice,//设备价格
                wechatAdBehaviorType:wechatAdBehavior?'1':'0',//微信再营销
                actions:wechatAdBehavior?.actions,//再营销
                excludedActions:wechatAdBehavior?.excludedActions,//排除再营销
            })
        }
    }, [regionsList, dataInfo])
    return <Modal
        visible={visible}
        title={type === 'add' ? '新建定向' : type === 'look' ? '定向详情' : '编辑定向'}
        onCancel={() => { PupFn({ visible: false ,dataInfo:null,type:'add'}) }}
        onOk={handleOk}
        width={900}
        confirmLoading={confirmLoading}
        {...arg}
    >
        <Form
            form={form}
            labelCol={{ span: 3 }}
            initialValues={
                {
                    geoLocationType: '0',
                    educationType: '0',
                    ageType: '0',
                    gender: '0',
                    maritalStatusType: '0',
                    age_min: 14,
                    age_max: 66,
                    targetingName: '',
                    excludedDimension: '0',
                    userOsType: '0',
                    devicePriceType: '0',
                    networkType: '0',
                    wechatAdBehaviorType: '0',
                    deviceBrandModelType: '0'
                }
            }
        >
            {/* ============================================================基本信息============================================================= */}
            <Divider orientation='left'><h3>基本信息</h3></Divider>
            {/* ====================定向名称========================= */}
            <Form.Item label={<strong>定向名称</strong>} name='targetingName' rules={[{ required: true, message: '请输入定向名称!' }]}>
                <Input placeholder='定向名称' style={{ width: 300 }} />
            </Form.Item>
            {/* ====================定向描述========================= */}
            <Form.Item label={<strong>定向描述</strong>} name='description' >
                <Input.TextArea placeholder='定向名称' style={{ width: 300 }} rows={2} />
            </Form.Item>
            {/* ============================================================排期与出价============================================================= */}
            <Divider orientation='left'>人口学数学</Divider>
            {/* ====================地理位置========================= */}
            <Form.Item label={<strong>地理位置</strong>} name='geoLocationType' style={geoLocationType === '1' ? { marginBottom: 5 } : {}}>
                <Radio.Group >
                    <Radio.Button value="0">不限</Radio.Button>
                    <Radio.Button value="1">按区域</Radio.Button>
                </Radio.Group>
            </Form.Item>
            {
                geoLocationType === '1' && <Form.Item
                    style={{ marginLeft: 107, marginBottom: 10 }}
                    name='regions'
                    rules={[{ type: 'array', max: 1000, message: '最多选择1000' }]}
                >
                    <TreeSelect
                        showSearch={true}
                        maxTagCount={50}
                        treeCheckable={true}
                        showCheckedStrategy={TreeSelect.SHOW_PARENT}
                        treeData={regionsList}
                        style={{ width: '100%' }}
                        allowClear
                        filterTreeNode={(inputValue: string, treeNode: any) => {
                            if (treeNode.title.includes(inputValue)) {
                                return true
                            } else {
                                return false
                            }
                        }}
                    />
                </Form.Item>
            }
            {/* ====================年龄========================= */}
            <Form.Item label={<strong>年龄</strong>} name='ageType' style={ageType === '1' ? { marginBottom: 5 } : {}}>
                <Radio.Group >
                    <Radio.Button value="0">不限</Radio.Button>
                    <Radio.Button value="1">自定义</Radio.Button>
                </Radio.Group>
            </Form.Item>
            {
                ageType === '1' && <div style={{ display: 'flex', justifyContent: 'left', alignItems: 'center' }}>
                    <Form.Item style={{ marginLeft: 107 }} name='age_min'>
                        <Select style={{ width: 120 }} >
                            {
                                Array(66 - 13).fill('').map((n, i) => i + 14).filter(i => i !== 15 && i !== 16 && i !== 17).map(i => {
                                    return <Select.Option disabled={i > age_max} value={i} key={i}>{i === 66 ? '66 岁及以上' : i + ' 岁'}</Select.Option>
                                })

                            }

                        </Select>
                    </Form.Item>
                    <Form.Item style={{ marginLeft: 10 }} name='age_max'>
                        <Select style={{ width: 120 }}>
                            {
                                Array(66 - 17).fill('').map((n, i) => {
                                    return <Select.Option disabled={i + 18 < age_min} value={i + 18} key={i + 18}>{i + 18 === 66 ? '66 岁及以上' : i + 18 + ' 岁'}</Select.Option>
                                })
                            }

                        </Select>
                    </Form.Item>
                </div>
            }
            {/* ====================性别========================= */}
            <Form.Item label={<strong>性别</strong>} name='gender'>
                <Radio.Group >
                    <Radio.Button value="0">不限</Radio.Button>
                    {
                        Object.keys(GenderEnum).map(key => {
                            return <Radio.Button value={key} key={key}>{GenderEnum[key]}</Radio.Button>
                        })
                    }

                </Radio.Group>
            </Form.Item>
            {/* ====================学历========================= */}
            <Form.Item label={<strong>学历</strong>} name='educationType' style={educationType === '1' ? { marginBottom: 5 } : {}}>
                <Radio.Group >
                    <Radio.Button value="0">不限</Radio.Button>
                    <Radio.Button value="1">自定义</Radio.Button>
                </Radio.Group>
            </Form.Item>
            {
                educationType === '1' && <Form.Item style={{ marginLeft: 107 }} name='education'>
                    <Checkbox.Group options={Object.keys(EducationEnum).map(key => ({ label: EducationEnum[key], value: key }))} />
                </Form.Item>
            }
            {/* ====================婚恋育儿状态========================= */}
            <Form.Item label={<strong>婚恋育儿状态</strong>} name='maritalStatusType' style={maritalStatusType === '1' ? { marginBottom: 5 } : {}}>
                <Radio.Group >
                    <Radio.Button value="0">不限</Radio.Button>
                    <Radio.Button value="1">自定义</Radio.Button>
                </Radio.Group>
            </Form.Item>
            {
                maritalStatusType === '1' && <Form.Item style={{ marginLeft: 107 }} name='maritalStatus'>
                    <Checkbox.Group options={Object.keys(MaritalStatusEnum).map(key => ({ label: MaritalStatusEnum[key], value: key }))} />
                </Form.Item>
            }

            {/* ============================================================用户行为============================================================= */}
            <Divider orientation='left'>用户行为</Divider>
            {/* <Form.Item label={<strong>行为兴趣意向</strong>} name='behaviorOrInterestType'>
                <Radio.Group >
                    <Radio.Button value="0">不限</Radio.Button>
                    <Radio.Button value="1">自定义</Radio.Button>
                </Radio.Group>
            </Form.Item> */}
            {/* ====================排除已转化用户========================= */}
            <Form.Item label={<strong>排除已转化用户</strong>} name='excludedDimension' style={excludedDimension !== '0' ? { marginBottom: 5 } : {}}>
                <Radio.Group >
                    <Radio.Button value="0">不限</Radio.Button>
                    {
                        Object.keys(ExcludedDimensionEnum).map(key => {
                            return <Radio.Button value={key} key={key}>{ExcludedDimensionEnum[key]}</Radio.Button>
                        })
                    }
                </Radio.Group>
            </Form.Item>
            {
                excludedDimension !== '0' && <Form.Item style={{ marginLeft: 107 }} name='conversionBehaviorList'>
                    <Select style={{ width: 300 }} showSearch filterOption={(input, option) =>
                        (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
                    } allowClear placeholder='转化行为,不选为默认行为'>
                        {
                            Object.keys(OptimizationGoalEnum).map(key => {
                                return <Select.Option value={key} key={key}>{OptimizationGoalEnum[key]}</Select.Option>
                            })
                        }
                    </Select>
                </Form.Item>
            }
            {/* ============================================================自定义人群============================================================= */}
            {/* <Divider orientation='left'>自定义人群</Divider> */}
            {/* ====================自定义人群========================= */}
            {/* <Form.Item label={<strong>自定义人群</strong>} name='customAudienceType'>
                <Radio.Group >
                    <Radio.Button value="0">不限</Radio.Button>
                    <Radio.Button value="1">自定义</Radio.Button>
                </Radio.Group>
            </Form.Item> */}

            {/* ============================================================设备定向============================================================= */}
            <Divider orientation='left'>设备定向</Divider>
            {/* ====================设备品牌型号========================= */}
            <Form.Item label={<strong>设备品牌型号</strong>} name='deviceBrandModelType' style={deviceBrandModelType === '1' ? { marginBottom: 5 } : {}}>
                <Radio.Group >
                    <Radio.Button value="0">不限</Radio.Button>
                    <Radio.Button value="1">自定义</Radio.Button>
                </Radio.Group>
            </Form.Item>
            {
                deviceBrandModelType === '1' && <>
                    <Form.Item style={{ marginLeft: 107, marginBottom: 10 }}
                        name='deviceBrandModelList'
                        rules={[{ type: 'array', max: 400, message: '最多选择400个设备型号' }]}
                    >
                        <TreeSelect
                            showSearch={true}
                            maxTagCount={50}
                            treeCheckable={true}
                            showCheckedStrategy={TreeSelect.SHOW_CHILD}
                            treeData={modelList}
                            style={{ width: '100%' }}
                            allowClear
                            filterTreeNode={(inputValue: string, treeNode: any) => {
                                if (treeNode.title.includes(inputValue)) {
                                    return true
                                } else {
                                    return false
                                }
                            }}
                        />
                    </Form.Item>
                    <Form.Item name='isexcluded' valuePropName="checked" style={{ marginLeft: 107, marginBottom: 10 }} >
                        <Checkbox ><p style={{
                            position: 'absolute',
                            width: '95%',
                            top: '50%',
                            transform: 'translate(0, -50%)'
                        }}>排除所选设备的用户 <span style={{ float: 'right' }}>已选 <span style={deviceBrandModelList?.length > 400 ? { color: 'red' } : {}}>{deviceBrandModelList?.length ?? 0}</span>/400</span></p></Checkbox>
                    </Form.Item>
                </>
            }
            {/* ====================操作系统版本========================= */}
            <Form.Item label={<strong>操作系统版本</strong>} name='userOsType' style={userOsType === '1' ? { marginBottom: 5 } : {}}>
                <Radio.Group >
                    <Radio.Button value="0">不限</Radio.Button>
                    <Radio.Button value="1">自定义</Radio.Button>
                </Radio.Group>
            </Form.Item>
            {
                userOsType === '1' && <>
                    <Form.Item style={{ marginLeft: 107, marginBottom: 0 }} name='userOsIosAll' valuePropName="checked" getValueFromEvent={(e) => {
                        let checked = e.target.checked
                        form.setFieldsValue({ userOsIos: checked ? ios_os : [] })
                        setIndeterminateIos(false)
                    }}>
                        <Checkbox indeterminate={indeterminateIos} >
                            IOS全选
                        </Checkbox>
                    </Form.Item>
                    <Form.Item style={{ marginLeft: 107 }} name='userOsIos' >
                        <Checkbox.Group
                            options={
                                ios_os.map(key => {
                                    return { label: UserOsEnum[key], value: key }
                                })
                            }
                        />
                    </Form.Item>
                    <Form.Item style={{ marginLeft: 107, marginBottom: 0 }} name='userOsAndroidAll' valuePropName="checked" getValueFromEvent={(e) => {
                        let checked = e.target.checked
                        form.setFieldsValue({ userOsAndroid: checked ? android_os : [] })
                        setIndeterminateAndroid(false)
                    }}>
                        <Checkbox indeterminate={indeterminateAndroid}>
                            Android全选
                        </Checkbox>
                    </Form.Item>
                    <Form.Item style={{ marginLeft: 107 }} name='userOsAndroid'>
                        <Checkbox.Group
                            options={
                                android_os.map(key => {
                                    return { label: UserOsEnum[key], value: key }
                                })
                            }
                        />
                    </Form.Item>
                </>
            }
            {/* ====================联网方式========================= */}
            <Form.Item label={<strong>联网方式</strong>} name='networkType' style={networkType === '1' ? { marginBottom: 5 } : {}}>
                <Radio.Group >
                    <Radio.Button value="0">不限</Radio.Button>
                    <Radio.Button value="1">自定义</Radio.Button>
                </Radio.Group>
            </Form.Item>
            {
                networkType === '1' && <Form.Item style={{ marginLeft: 107 }} name='network'>
                    <Checkbox.Group options={Object.keys(NetworkEnum).map(key => ({ label: NetworkEnum[key], value: key }))} />
                </Form.Item>
            }
            {/* ====================设备价格========================= */}
            <Form.Item label={<strong>设备价格</strong>} name='devicePriceType' style={devicePriceType === '1' ? { marginBottom: 5 } : {}}>
                <Radio.Group >
                    <Radio.Button value="0">不限</Radio.Button>
                    <Radio.Button value="1">自定义</Radio.Button>
                </Radio.Group>
            </Form.Item>
            {
                devicePriceType === '1' && <Form.Item style={{ marginLeft: 107 }} name='devicePrice'>
                    <Checkbox.Group options={Object.keys(DevicePriceEnum).map(key => ({ label: DevicePriceEnum[key], value: key }))} />
                </Form.Item>
            }
            {/* ============================================================流量方数学============================================================= */}
            <Divider orientation='left'>流量方数学</Divider>
            {/* ====================微信再营销========================= */}
            <Form.Item label={<strong>微信再营销</strong>} name='wechatAdBehaviorType' style={wechatAdBehaviorType === '1' ? { marginBottom: 5 } : {}}>
                <Radio.Group >
                    <Radio.Button value="0">不限</Radio.Button>
                    <Radio.Button value="1">自定义</Radio.Button>
                </Radio.Group>
            </Form.Item>
            {
                wechatAdBehaviorType === '1' && <>
                    <p style={{ marginBottom: 5, marginLeft: 107 }}><strong style={{ marginRight: 20 }}>再营销</strong></p>
                    <Form.Item style={{ marginLeft: 107, marginBottom: 10 }} name='actions'>
                        <Checkbox.Group options={Object.keys(WechatAdBehaviorEnum).map(key => ({ label: WechatAdBehaviorEnum[key], value: key, disabled: excludedActions?.some((k: string) => k === key) }))} />
                    </Form.Item>
                    <p style={{ marginBottom: 5, marginLeft: 107 }}><strong style={{ marginRight: 20 }}>排除营销</strong></p>
                    <Form.Item style={{ marginLeft: 107 }} name='excludedActions'>
                        <Checkbox.Group options={Object.keys(WechatAdBehaviorEnum).map(key => ({ label: WechatAdBehaviorEnum[key], value: key, disabled: actions?.some((k: string) => k === key) }))} />
                    </Form.Item>
                </>
            }
        </Form>
    </Modal >
}
export default AdModal