import { Button, Card, Checkbox, Form, Input, Modal, Radio, Select, Space, Spin, Tooltip, TreeSelect, Typography, message } from "antd"
import React, { useEffect, useState } from "react"
import style from '../index.less'
import { DEVICE_PRICE_ENUM, EDUCATION_ENUM, EXCLUDED_DAY_ENUM, EXCLUDED_DIMENSION_ENUM, GAME_CONSUMPTION_LEVEL_ENUM, GENDER_ENUM, LOCATION_TYPES_ENUM, MARITAL_STATUS_ENUM, NETWORK_ENUM, OPTIMIZATIONGOAL_ENUM, USER_OS_ENUM, WECHAT_AD_NEHAVIOR_ENUM, WECHAT_AD_NEHAVIOR_GAME_ENUM } from "../../const"
import { DeleteOutlined, PlusOutlined, QuestionCircleFilled } from "@ant-design/icons"
import { getTargetingGagsApi } from "@/services/adqV3/global"
import { useAjax } from "@/Hook/useAjax"
import { DefaultOptionType } from "antd/lib/select"
import InputName from "@/components/InputName"
import moment from "moment"
import { txtLength } from "@/utils/utils"
import { addTargetingApi, checkTargetingApi, updateTargetingApi } from "@/services/adqV3"
import { useModel } from "umi"
import { SelectCorpWechatCorpId } from "@/pages/launchSystemV3/tencenTasset/corpWechat/manage"
const { Title, Paragraph } = Typography;

interface Props {
    isBackVal?: boolean
    putInType?: 'NOVEL' | 'GAME'
    value?: any,
    visible?: boolean
    onClose?: () => void
    onChange?: (targeting?: any) => void
    targetRules?: PULLIN.TargetingRulesProps
}

const AddTarget: React.FC<Props> = ({ isBackVal, putInType, value, visible, onChange, onClose, targetRules }) => {

    /******************************/
    const [form] = Form.useForm();
    const geoLocationType = Form.useWatch('geoLocationType', form);
    const maritalStatusType = Form.useWatch('maritalStatusType', form);
    const deviceBrandModelType = Form.useWatch('deviceBrandModelType', form);
    const wechatAdBehaviorType = Form.useWatch('wechatAdBehaviorType', form);
    const userOsType = Form.useWatch('userOsType', form);
    const ageType = Form.useWatch('ageType', form);
    const age = Form.useWatch('age', form);
    const education = Form.useWatch('education', form);
    const networkType = Form.useWatch('networkType', form);
    const devicePrice = Form.useWatch('devicePrice', form);
    const gameConsumptionLevel = Form.useWatch('gameConsumptionLevel', form);
    const conversionBehaviorType = Form.useWatch('conversionBehaviorType', form);
    const excludedDimension = Form.useWatch(['excludedConvertedAudience', 'excludedDimension'], form);
    const conversionBehaviorList = Form.useWatch(['excludedConvertedAudience', 'conversionBehaviorList'], form);
    const actions = Form.useWatch(['wechatAdBehavior', 'actions'], form);
    const excludedActions = Form.useWatch(['wechatAdBehavior', 'excludedActions'], form);
    const taskType: 'NOVEL' | 'GAME' = Form.useWatch('taskType', form) || putInType

    const [regionsList, setRegionsList] = useState<any[]>([])
    const [modelList, setModelList] = useState([])
    const [osList, setOsList] = useState<DefaultOptionType[]>([])
    const [isAdd, setIsAdd] = useState<boolean>(false)

    const getTargetingGags = useAjax((params) => getTargetingGagsApi(params))
    const checkTargeting = useAjax((params) => checkTargetingApi(params))
    const updateTargeting = useAjax((params) => updateTargetingApi(params))
    const addTargeting = useAjax((params) => addTargetingApi(params))
    const { getAllUserAccount } = useModel('useLaunchAdq.useAdAuthorize')
    /******************************/

    // 地址 手机
    useEffect(() => {
        getTargetingGags.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 !== '国外'))
            let gw = parentList.filter((item: { title: string }) => item.title === '国外')
            let earth = [
                { ...zg[0], children: zg_children },
                // { ...gw[0], disabled: true }
            ]
            setRegionsList(earth)
        })

        // 获取手机
        getTargetingGags.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)
        })
        // 获取账户列表
        getAllUserAccount.run()
    }, [])

    // 系统处理
    useEffect(() => {
        let iosChildren: DefaultOptionType[] = []
        let androidChildren: DefaultOptionType[] = []
        let harmonyChildren: DefaultOptionType[] = []
        Object.keys(USER_OS_ENUM).forEach(key => {
            if (key !== 'ANDROID' && key !== 'IOS' && key !== 'HARMONY') {
                if (key.includes('ANDROID')) {
                    androidChildren.push({
                        label: USER_OS_ENUM[key as keyof typeof USER_OS_ENUM],
                        value: key
                    })
                }
                if (key.includes('IOS')) {
                    iosChildren.push({
                        label: USER_OS_ENUM[key as keyof typeof USER_OS_ENUM],
                        value: key
                    })
                }
                if (key.includes('HARMONY')) {
                    harmonyChildren.push({
                        label: USER_OS_ENUM[key as keyof typeof USER_OS_ENUM],
                        value: key
                    })
                }
            }
        })
        let newOsList = [{ label: 'iOS系统', value: 'IOS', children: iosChildren }, { label: 'Android系统', value: 'ANDROID', children: androidChildren }, { label: 'Harmony', value: 'HARMONY', children: harmonyChildren }]
        if (taskType === 'GAME') {
            newOsList.push({ label: 'Windows系统', value: 'WINDOWS', children: [] })
            newOsList.push({ label: 'Mac系统', value: 'MAC', children: [] })
        }
        setOsList(newOsList)
    }, [USER_OS_ENUM, taskType])

    const handleOk = async (values: any) => {
        console.log(values)
        const {
            targetingName,
            description,
            accountId,
            geoLocationType,
            ageType,
            geoLocation,
            age,
            gender,
            education,
            networkType,
            maritalStatusType,
            excludedConvertedAudience,
            conversionBehaviorType,
            deviceBrandModelType,
            deviceBrandModelList,
            isExcludedDeviceBrandModel,
            userOsType,
            os,
            isExcludedOs,
            devicePrice,
            gameConsumptionLevel,
            wechatAdBehaviorType,
            taskType,
            ...surplusValues
        } = values

        let targetValues: any = {
            ...surplusValues,
        }
        if (geoLocationType === '1') {
            targetValues.geoLocation = {
                ...geoLocation,
                regions: geoLocation.regions[0] === 1156 ? regionsList[0]?.children?.filter((item: any) => !item.disabled)?.map((item: { value: any }) => item.value) : geoLocation.regions
            }
        }
        // 性别
        if (gender !== '0') {
            targetValues.gender = [gender]
        }
        // 学历
        if (!education?.includes('0')) {
            targetValues.education = education
        }
        // 联网方式
        if (!networkType?.includes('0')) {
            targetValues.networkType = networkType
        }
        // 年龄
        if (ageType !== '0' && ageType !== '1') {
            let [min, max] = ageType.split('_')
            targetValues.age = [{ min: Number(min), max: Number(max) }]
        } else if (ageType === '1') {
            targetValues.age = age
        }
        // 排除已转化用户
        if (excludedConvertedAudience?.excludedDimension !== '0') {
            targetValues.excludedConvertedAudience = excludedConvertedAudience
        }
        // 设备品牌型号 deviceBrandModelList, isExcludedDeviceBrandModel,
        if (deviceBrandModelType === '1') {
            if (isExcludedDeviceBrandModel) { // 排除
                targetValues.deviceBrandModel = {
                    excludedList: deviceBrandModelList
                }
            } else {
                targetValues.deviceBrandModel = {
                    includedList: deviceBrandModelList
                }
            }
        }
        // 操作系统 userOsType, os, isExcludedOs,
        if (userOsType === '1') {
            if (isExcludedOs) {
                targetValues.excludedOs = os
            } else {
                targetValues.userOs = os
            }
        }
        // 设备价格
        if (!devicePrice?.includes('0')) {
            targetValues.devicePrice = devicePrice
        }
        // 游戏消费能力
        if (!gameConsumptionLevel?.includes('0')) {
            targetValues.gameConsumptionLevel = gameConsumptionLevel
        }
        let targetingDTO = {
            taskType: taskType || putInType,
            targetingName,
            description,
            accountId,
            targeting: targetValues
        }

        if (isBackVal && !isAdd) {
            delete targetingDTO.accountId
            delete targetingDTO.description
            onChange?.(targetingDTO)
            return
        }

        let checkData = await checkTargeting.run(value?.id ? { ...targetingDTO, id: value?.id } : targetingDTO)
        if (checkData?.[0]?.isSame) {
            message.error('存在相同模板名称或内容，请修改')
            return
        }
        if (value?.id) {
            updateTargeting.run({ ...targetingDTO, id: value?.id }).then(res => {
                message.success('修改成功')
                onChange?.()
            })
        } else {
            addTargeting.run(targetingDTO).then(res => {
                message.success('新增成功')
                if (isBackVal && isAdd) {
                    delete targetingDTO.accountId
                    delete targetingDTO.description
                    onChange?.(targetingDTO)
                } else {
                    onChange?.()
                }
            })
        }
    }

    // 回填数据
    useEffect(() => {
        if (value && Object.keys(value).length > 0 && regionsList.length) {
            let regionsAll = regionsList[0]?.children?.filter((item: any) => !item.disabled)?.map((item: { value: any }) => item.value)//全选省列表
            const {
                geoLocation,
                age,
                gender,
                education,
                networkType,
                maritalStatus,
                excludedConvertedAudience,
                deviceBrandModel,
                excludedOs,
                userOs,
                devicePrice,
                gameConsumptionLevel,
                wechatAdBehavior,
                ...surplusValues
            } = JSON.parse(JSON.stringify(value))
            let targetValues: any = {
                ...surplusValues,
                age: age?.length > 0 ? age : undefined,
                gender: gender?.[0] || '0',
                education: education || '0',
                networkType: networkType || '0',
                excludedConvertedAudience: excludedConvertedAudience || { excludedDimension: '0' },
                devicePrice: devicePrice || '0',
                gameConsumptionLevel: gameConsumptionLevel || '0',
                wechatAdBehavior,
                maritalStatus
            }
            if (excludedConvertedAudience) {
                if (excludedConvertedAudience?.conversionBehaviorList?.length) {
                    targetValues.conversionBehaviorType = 'customize'
                } else {
                    targetValues.conversionBehaviorType = 'optimization'
                }
            }
            if (geoLocation && Object.keys(geoLocation).length > 0) {
                targetValues.geoLocationType = '1'
                targetValues.geoLocation = {
                    ...geoLocation,
                    regions: JSON.stringify(geoLocation.regions) === JSON.stringify(regionsAll) ? [1156] : geoLocation.regions
                }
            } else {
                targetValues.geoLocationType = '0'
                targetValues.geoLocation = {
                    locationTypes: ['LIVE_IN']
                }
            }
            if (age?.length > 0) {
                const g = age?.[0]?.min + '_' + age?.[0]?.max
                if (age?.length === 1 && ['14_18', '19_24', '25_29', '30_39', '40_49', '50_66'].includes(g)) {
                    targetValues.ageType = g
                } else {
                    targetValues.ageType = '1'
                }
            } else {
                targetValues.ageType = '0'
            }
            if (maritalStatus?.length > 0) {
                targetValues.maritalStatusType = '1'
            } else {
                targetValues.maritalStatusType = '0'
            }
            if (deviceBrandModel?.includedList) {
                targetValues.deviceBrandModelType = '1'
                targetValues.deviceBrandModelList = deviceBrandModel?.includedList
            } else if (deviceBrandModel?.excludedList) {
                targetValues.deviceBrandModelType = '1'
                targetValues.deviceBrandModelList = deviceBrandModel?.excludedList
                targetValues.isExcludedDeviceBrandModel = true
            } else {
                targetValues.deviceBrandModelType = '0'
            }
            if (excludedOs?.length > 0) {
                targetValues.isExcludedOs = true
                targetValues.os = excludedOs
                targetValues.userOsType = '1'
            } else if (userOs?.length > 0) {
                targetValues.os = userOs
                targetValues.userOsType = '1'
            } else {
                targetValues.userOsType = '0'
            }
            let wechatAdBehaviorType = []
            if (wechatAdBehavior?.actions) {
                wechatAdBehaviorType.push('actions')
            }
            if (wechatAdBehavior?.excludedActions) {
                wechatAdBehaviorType.push('excludedActions')
            }
            targetValues.wechatAdBehaviorType = wechatAdBehaviorType.length > 0 ? wechatAdBehaviorType : ['0']

            form.setFieldsValue({ ...targetValues })
        }
    }, [value, regionsList])

    /** 判断数组是否重叠 */
    const hasOverlap = (intervals: any[]) => {
        intervals = intervals.filter(item => item)
        for (let i = 0; i < intervals.length; i++) {
            for (let j = i + 1; j < intervals.length; j++) {
                const a = intervals[i], b = intervals[j];
                if (a?.min < b?.max && a?.max > b?.min) return true;
            }
        }
        return false;
    }

    // 智能投放 判断是否展示可添加定向
    const isShow = (field: string) => {
        return (targetRules?.rules && targetRules?.rules?.length > 0) ? targetRules?.rules?.includes(field) : true
    }

    return <Modal
        title={isBackVal ? <strong style={{ fontSize: 20 }}>
            {(value && Object.keys(value).length > 0) ? `修改定向` : `新增定向`}
        </strong> : <strong style={{ fontSize: 20 }}>{value?.id ? `修改定向模板` : value?.isCopy ? `复制定向模板` : `新增定向模板`}</strong>}
        open={visible}
        onCancel={onClose}
        footer={null}
        width={920}
        className={`modalResetCss`}
        bodyStyle={{ padding: 0, position: 'relative', borderRadius: '0 0 8px 8px' }}
        maskClosable={false}
    >
        <Spin spinning={getTargetingGags.loading}>
            <div style={{ width: '100%', position: 'relative', padding: '0 0 40px' }}>
                <Form
                    form={form}
                    name="newAdTarget"
                    labelAlign='left'
                    labelCol={{ span: 4 }}
                    colon={false}
                    style={{ backgroundColor: '#f1f4fc', maxHeight: 600, overflow: 'hidden', overflowY: 'auto', padding: '10px 10px 10px', borderRadius: '0 0 8px 8px' }}
                    scrollToFirstError
                    onFinishFailed={({ errorFields }) => {
                        message.error(errorFields?.[0]?.errors?.[0])
                    }}
                    onFinish={handleOk}
                    initialValues={{
                        taskType: 'NOVEL',
                        geoLocationType: '0',
                        maritalStatusType: '0',
                        deviceBrandModelType: '0',
                        userOsType: '0',
                        ageType: '0',
                        wechatAdBehaviorType: ['0'],
                        age: [{}],
                        gender: '0',
                        education: ['0'],
                        networkType: ['0'],
                        devicePrice: ['0'],
                        gameConsumptionLevel: ['0'],
                        excludedConvertedAudience: {
                            excludedDimension: '0'
                        },
                        conversionBehaviorType: 'optimization',
                        geoLocation: {
                            locationTypes: ['LIVE_IN']
                        },
                        targetingName: (isBackVal ? '定向' : '定向模板') + '_' + localStorage.getItem('userId') + '_' + moment().format('MM_DD_HH:mm:ss')
                    }}
                >
                    {!putInType && <Card
                        title={<strong style={{ fontSize: 18 }}>定向类型</strong>}
                        className="cardResetCss newCss"
                        bodyStyle={{ padding: '4px 6px' }}
                        style={{ marginBottom: 8 }}
                    >
                        <div className={style.newSpace}>
                            <Form.Item name="taskType" label={<strong>投放类型</strong>} style={{ marginBottom: 0 }} rules={[{ required: true, message: '请选择定向类型' }]}>
                                <Radio.Group onChange={(e) => {
                                    form.setFieldsValue({
                                        excludedConvertedAudience: {
                                            excludedDimension: '0'
                                        },
                                        userOsType: '0',
                                        wechatAdBehaviorType: ['0']
                                    })
                                }}>
                                    <Radio value="NOVEL">小说</Radio>
                                    <Radio value="GAME">游戏</Radio>
                                </Radio.Group>
                            </Form.Item>
                        </div>
                    </Card>}
                    <Card
                        title={<strong style={{ fontSize: 18 }}>定向选择</strong>}
                        className="cardResetCss newCss"
                        bodyStyle={{ padding: '4px 6px' }}
                        style={{ marginBottom: 8 }}
                    >
                        {isShow('geoLocation') && <div className={style.newSpace}>
                            <Form.Item name="geoLocationType" label={<strong>地理位置</strong>} style={{ marginBottom: 0 }}>
                                <Radio.Group>
                                    <Radio value="0">不限</Radio>
                                    <Radio value="1">按区域</Radio>
                                </Radio.Group>
                            </Form.Item>
                            {geoLocationType === '1' && <div className={style.newSpace_bottom}>
                                {/* <Title level={5} style={{ fontSize: 14 }}>微信流量（除视频号/搜一搜）暂时仅支持 “常住地”或“旅行到访”。按法务合规要求，“常住地”暂不支持国内港澳台及国外地区，“旅行到访”仅支持部分国外地区。</Title> */}
                                <Form.Item
                                    name={['geoLocation', 'regions']}
                                    rules={[
                                        { required: true, message: '请选择区域' },
                                        { type: 'array', max: 1000, message: '地理位置最多选择1000' },
                                    ]}
                                >
                                    <TreeSelect
                                        placeholder="请选择"
                                        showSearch={true}
                                        maxTagCount={50}
                                        treeCheckable={true}
                                        showCheckedStrategy={TreeSelect.SHOW_PARENT}
                                        treeData={regionsList}
                                        loading={getTargetingGags.loading}
                                        style={{ width: '100%' }}
                                        allowClear
                                        filterTreeNode={(inputValue: string, treeNode: any) => {
                                            if (treeNode.title.includes(inputValue)) {
                                                return true
                                            } else {
                                                return false
                                            }
                                        }}
                                    />
                                </Form.Item>
                                <Form.Item
                                    name={['geoLocation', 'locationTypes']}
                                    rules={[{ required: true, message: '请选择地点类型' }]}
                                >
                                    <Checkbox.Group
                                        disabled
                                        options={Object.keys(LOCATION_TYPES_ENUM)?.map(key => ({ label: LOCATION_TYPES_ENUM[key as keyof typeof LOCATION_TYPES_ENUM], value: key }))}
                                    />
                                </Form.Item>
                            </div>}
                        </div>}

                        {isShow('age') && <div className={style.newSpace}>
                            <Form.Item name="ageType" label={<strong>年龄</strong>} style={{ marginBottom: 0 }}>
                                <Radio.Group>
                                    <Radio value="0">不限</Radio>
                                    <Radio value="14_18">14~18岁</Radio>
                                    <Radio value="19_24">19~24岁</Radio>
                                    <Radio value="25_29">25~29岁</Radio>
                                    <Radio value="30_39">30~39岁</Radio>
                                    <Radio value="40_49">40~49岁</Radio>
                                    <Radio value="50_66">50岁及以上</Radio>
                                    <Radio value="1">自定义</Radio>
                                </Radio.Group>
                            </Form.Item>
                            {ageType === '1' && <Form.List
                                name='age'
                                rules={[
                                    {
                                        validator: (_, ranges) => {
                                            if (hasOverlap(ranges)) {
                                                return Promise.reject('年龄存在区间重叠，请修改');
                                            }
                                            return Promise.resolve();
                                        }
                                    }
                                ]}
                            >
                                {(fields, { add, remove }) => {
                                    return <>
                                        {fields.map(({ key, name, ...restField }, index) => {
                                            const ag = age?.[index]
                                            return <div className={`${style.newSpace_bottom} flexStart`} key={key} style={{ '--g': '5px', padding: '10px 16px' } as React.CSSProperties}>
                                                <Form.Item
                                                    {...restField}
                                                    name={[name, 'min']}
                                                    style={{ marginBottom: 0 }}
                                                    rules={[
                                                        { required: true, message: '请选择最小年龄!' },
                                                        ({ getFieldValue }) => ({
                                                            validator(_, min) {
                                                                const max = getFieldValue(['age', name, 'max']);
                                                                if (min && max && max - min < 4) {
                                                                    return Promise.reject('年龄跨度需≥4岁');
                                                                }
                                                                return Promise.resolve();
                                                            }
                                                        })
                                                    ]}
                                                >
                                                    <Select style={{ width: 185 }} placeholder="请选择">
                                                        {Array(66 - 13).fill('').map((_, i) => i + 14).filter(i => i !== 15 && i !== 16 && i !== 17).map(i => {
                                                            return <Select.Option disabled={i > ag?.max} value={i} key={i}>{i === 66 ? '66 岁及以上' : i + ' 岁'}</Select.Option>
                                                        })}
                                                    </Select>
                                                </Form.Item>
                                                <span>-</span>
                                                <Form.Item
                                                    {...restField}
                                                    name={[name, 'max']}
                                                    style={{ marginBottom: 0 }}
                                                    rules={[
                                                        { required: true, message: '请选择最大年龄!' },
                                                        ({ getFieldValue }) => ({
                                                            validator(_, max) {
                                                                const min = getFieldValue(['age', name, 'min']);
                                                                if (min && max && max - min < 4) {
                                                                    return Promise.reject('年龄跨度需≥4岁');
                                                                }
                                                                return Promise.resolve();
                                                            }
                                                        })
                                                    ]}
                                                >
                                                    <Select style={{ width: 185 }} placeholder="请选择">
                                                        {Array(66 - 18).fill('').map((_, i) => {
                                                            return <Select.Option disabled={i + 19 < ag?.min + 4} value={i + 19} key={i + 19}>{i + 19 === 66 ? '66 岁及以上' : i + 19 + ' 岁'}</Select.Option>
                                                        })}
                                                    </Select>
                                                </Form.Item>
                                                {age?.length > 1 && <Button danger onClick={() => remove(name)}><DeleteOutlined /></Button>}
                                            </div>
                                        })}
                                        {age?.length < 5 && <Form.Item noStyle>
                                            <Button type="dashed" onClick={() => add()} style={{ width: '100%' }} icon={<PlusOutlined />}>
                                                新增年龄段
                                            </Button>
                                        </Form.Item>}
                                    </>
                                }}
                            </Form.List>}
                        </div>}

                        {isShow('gender') && <div className={style.newSpace}>
                            <Form.Item name="gender" label={<strong>性别</strong>} style={{ marginBottom: 0 }}>
                                <Radio.Group>
                                    <Radio value="0">不限</Radio>
                                    {Object.keys(GENDER_ENUM).map(key => {
                                        return <Radio value={key} key={key}>{GENDER_ENUM[key as keyof typeof GENDER_ENUM]}</Radio>
                                    })}
                                </Radio.Group>
                            </Form.Item>
                        </div>}

                        {isShow('education') && <div className={style.newSpace}>
                            <Form.Item
                                name="education"
                                label={<Space>
                                    <strong>学历</strong>
                                    <Tooltip title="用户的最高学历">
                                        <QuestionCircleFilled />
                                    </Tooltip>
                                </Space>}
                                style={{ marginBottom: 0 }}
                                getValueFromEvent={(e: string[]) => {
                                    if (e.length > 1 && !education.includes('0') && e.includes('0')) {
                                        return ['0'];
                                    }
                                    return e.length > 0 ? (e.length > 1 && e.includes('0') ? e.filter(item => item !== '0') : e) : ['0'];
                                }}
                            >
                                <Checkbox.Group
                                    options={[
                                        { label: '不限', value: '0' },
                                        ...Object.keys(EDUCATION_ENUM)?.map(key => ({ label: EDUCATION_ENUM[key as keyof typeof EDUCATION_ENUM], value: key }))
                                    ]}
                                />
                            </Form.Item>
                        </div>}

                        {isShow('networkType') && <div className={style.newSpace}>
                            <Form.Item
                                name="networkType"
                                label={<strong>联网方式</strong>}
                                style={{ marginBottom: 0 }}
                                getValueFromEvent={(e: string[]) => {
                                    if (e.length > 1 && !networkType.includes('0') && e.includes('0')) {
                                        return ['0'];
                                    }
                                    return e.length > 0 ? (e.length > 1 && e.includes('0') ? e.filter(item => item !== '0') : e) : ['0'];
                                }}
                            >
                                <Checkbox.Group
                                    options={[
                                        { label: '不限', value: '0' },
                                        ...Object.keys(NETWORK_ENUM)?.map(key => ({ label: NETWORK_ENUM[key as keyof typeof NETWORK_ENUM], value: key }))
                                    ]}
                                />
                            </Form.Item>
                        </div>}

                        {(isShow('excludedCustomAudience')) && <div className={style.newSpace}>
                            <Form.Item
                                label={<Space>
                                    <strong>自定义人群</strong>
                                    <Tooltip title={<span>
                                        自定义人群是指客户通过腾讯广告知数（原DMP）创建和管理自己定义类人群，包括您自行上传的号码包人群等。仅当出价方式选择CPC、 CPM或oCPM（且优化目标为“点击”）时，你可以“二方人群”进行投放。
                                        <a href="https://e.qq.com/ads/helpcenter/detail/?cid=3161&pid=8995" target="__blank">了解更多</a>
                                    </span>}>
                                        <QuestionCircleFilled />
                                    </Tooltip>
                                </Space>}
                                style={{ marginBottom: 0 }}
                            >
                                <Space>
                                    <Checkbox.Group
                                        defaultValue={['0']}
                                        options={[
                                            { label: '不限', value: '0' }
                                        ]}
                                    />
                                    <span style={{ color: '#FAAD14' }}>自定义人群必须关联指定账户，当前关联账户为不限</span>
                                </Space>
                            </Form.Item>
                        </div>}

                        <div className={style.newSpace}>
                            {isShow('maritalStatus') && <Form.Item name="maritalStatusType" label={<strong>婚恋育儿状态</strong>} style={{ marginBottom: maritalStatusType === '1' ? 4 : 12 }}>
                                <Radio.Group>
                                    <Radio value="0">不限</Radio>
                                    <Radio value="1">自定义</Radio>
                                </Radio.Group>
                            </Form.Item>}
                            {maritalStatusType === '1' && <div className={`${style.newSpace_bottom}`} style={{ marginBottom: 6 }}>
                                <Form.Item name={'maritalStatus'} rules={[{ required: true, message: '请选择婚恋育儿状态' }]}>
                                    <Checkbox.Group options={Object.keys(MARITAL_STATUS_ENUM).map(key => ({ label: MARITAL_STATUS_ENUM[key as keyof typeof MARITAL_STATUS_ENUM], value: key }))} />
                                </Form.Item>
                            </div>}
                            {isShow('excludedConvertedAudience') && <>
                                <Form.Item
                                    name={['excludedConvertedAudience', 'excludedDimension']}
                                    label={<Space>
                                        <strong>排除已转化用户</strong>
                                        <Tooltip title={<>
                                            <Paragraph>
                                                设置排除已转化定向，广告不会曝光给所选范围内已转化的用户；
                                                系统将自动以当前广告选择的优化目标作为此定向的转化行为（不支持“点击”、“次留率”优化目标）；
                                                该定向仅可选择oCPC、oCPM、oCPA出价方式，若勾选自定义转化行为则不限制出价方式 。
                                            </Paragraph>
                                            <a href="https://e.qq.com/ads/helpcenter/detail/?cid=3531&pid=2612" target="__blank">了解更多</a>
                                        </>}>
                                            <QuestionCircleFilled />
                                        </Tooltip>
                                    </Space>}
                                    style={{ marginBottom: excludedDimension === '0' ? 12 : 4 }}
                                >
                                    <Radio.Group>
                                        <Radio value="0">不限</Radio>
                                        {Object.keys(EXCLUDED_DIMENSION_ENUM).filter(key => taskType === 'GAME' ? ['EXCLUDED_DIMENSION_UID', 'EXCLUDED_DIMENSION_BUSINESS_MANAGER', 'EXCLUDED_DIMENSION_COMPANY_ACCOUNT', 'EXCLUDED_DIMENSION_APP'].includes(key) : true).map(key => {
                                            return <Radio value={key} key={key}>{EXCLUDED_DIMENSION_ENUM[key as keyof typeof EXCLUDED_DIMENSION_ENUM]}</Radio>
                                        })}
                                    </Radio.Group>
                                </Form.Item>
                                {excludedDimension !== '0' && <div className={`${style.newSpace_bottom}`} style={{ marginBottom: 6 }}>
                                    <Title level={5} style={{ fontSize: 14 }}>系统自动依照当前广告选择的优化目标作为此定向的转化行为</Title>
                                    <Form.Item label="转化行为" name={'conversionBehaviorType'} rules={[{ required: true, message: '请选择自定义转化行为' }]} style={{ marginBottom: 10 }}>
                                        <Radio.Group>
                                            <Radio value="optimization">优化目标</Radio>
                                            <Radio value="customize">自定义</Radio>
                                        </Radio.Group>
                                    </Form.Item>
                                    {conversionBehaviorType === 'customize' && <Form.Item name={['excludedConvertedAudience', 'conversionBehaviorList']} rules={[{ required: true, message: '请选择自定义转化行为' }]} style={{ marginBottom: 10 }}>
                                        <Select
                                            showSearch
                                            filterOption={(input, option) =>
                                                (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
                                            }
                                            allowClear
                                            placeholder='请选择自定义转化行为'
                                            mode="multiple"
                                            style={{ width: 480 }}
                                        >
                                            {Object.keys(OPTIMIZATIONGOAL_ENUM).filter(key => key !== 'OPTIMIZATIONGOAL_NONE').map(key => {
                                                return <Select.Option value={key} key={key} disabled={conversionBehaviorList?.length >= 2 && !conversionBehaviorList.includes(key)}>{OPTIMIZATIONGOAL_ENUM[key as keyof typeof OPTIMIZATIONGOAL_ENUM]}</Select.Option>
                                            })}
                                        </Select>
                                    </Form.Item>}
                                    <Form.Item label="转化时间区间" name={['excludedConvertedAudience', 'excludedDay']}>
                                        <Radio.Group>
                                            {Object.keys(EXCLUDED_DAY_ENUM).map(key => <Radio value={key} key={key}>{EXCLUDED_DAY_ENUM[key as keyof typeof EXCLUDED_DAY_ENUM]}</Radio>)}
                                        </Radio.Group>
                                    </Form.Item>
                                </div>}
                            </>}

                            {isShow('deviceBrandModel') && <Form.Item name="deviceBrandModelType" label={<strong>设备品牌型号</strong>} style={{ marginBottom: deviceBrandModelType === '0' ? 0 : 4 }}>
                                <Radio.Group>
                                    <Radio value="0">不限</Radio>
                                    <Radio value="1">自定义</Radio>
                                </Radio.Group>
                            </Form.Item>}
                            {deviceBrandModelType === '1' && <div className={`${style.newSpace_bottom}`} style={{ marginBottom: 6 }}>
                                <Form.Item
                                    name={'deviceBrandModelList'}
                                    rules={[
                                        { required: true, message: '请选择设备品牌' },
                                        { type: 'array', max: 400, message: '设备品牌最多选择400个设备型号' }
                                    ]}
                                    style={{ marginBottom: 10 }}
                                >
                                    <TreeSelect
                                        placeholder="请选择"
                                        showSearch={true}
                                        maxTagCount={20}
                                        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='isExcludedDeviceBrandModel' valuePropName="checked">
                                    <Checkbox>排除所选设备的用户</Checkbox>
                                </Form.Item>
                            </div>}
                        </div>

                        {taskType === 'GAME' && <div className={style.newSpace}>
                            <Form.Item
                                name="gameConsumptionLevel"
                                label={<strong>游戏消费能力</strong>}
                                style={{ marginBottom: 0 }}
                                getValueFromEvent={(e: string[]) => {
                                    if (e.length > 1 && !gameConsumptionLevel.includes('0') && e.includes('0')) {
                                        return ['0'];
                                    }
                                    return e.length > 0 ? (e.length > 1 && e.includes('0') ? e.filter(item => item !== '0') : e) : ['0'];
                                }}
                            >
                                <Checkbox.Group
                                    options={[
                                        { label: '不限', value: '0' },
                                        ...Object.keys(GAME_CONSUMPTION_LEVEL_ENUM)?.map(key => ({ label: GAME_CONSUMPTION_LEVEL_ENUM[key as keyof typeof GAME_CONSUMPTION_LEVEL_ENUM], value: key }))
                                    ]}
                                />
                            </Form.Item>
                        </div>}


                        {isShow('userOs') && <div className={style.newSpace}>
                            <Form.Item name="userOsType" label={<strong>操作系统版本</strong>} style={{ marginBottom: 0 }}>
                                <Radio.Group>
                                    <Radio value="0">不限</Radio>
                                    <Radio value="1">自定义</Radio>
                                </Radio.Group>
                            </Form.Item>
                            {userOsType === '1' && <div className={`${style.newSpace_bottom}`}>
                                <Form.Item
                                    name={'os'}
                                    style={{ marginBottom: 10 }}
                                    rules={[
                                        { required: true, message: '请选择操作系统版本' },
                                        { type: 'array', max: 100, message: '操作系统版本最多选择100个设备型号' }
                                    ]}
                                >
                                    <TreeSelect
                                        placeholder="请选择"
                                        showSearch={true}
                                        maxTagCount={10}
                                        treeCheckable={true}
                                        showCheckedStrategy={TreeSelect.SHOW_PARENT}
                                        treeData={osList}
                                        style={{ width: '100%' }}
                                        allowClear
                                        filterTreeNode={(inputValue: string, treeNode: any) => {
                                            if (treeNode.title.includes(inputValue)) {
                                                return true
                                            } else {
                                                return false
                                            }
                                        }}
                                    />
                                </Form.Item>
                                <Form.Item name='isExcludedOs' valuePropName="checked">
                                    <Checkbox>排除所选操作系统版本的用户</Checkbox>
                                </Form.Item>
                            </div>}
                        </div>}

                        {isShow('devicePrice') && <div className={style.newSpace}>
                            <Form.Item
                                name="devicePrice"
                                label={<strong>设备价格</strong>}
                                style={{ marginBottom: 0 }}
                                getValueFromEvent={(e: string[]) => {
                                    if (e.length > 1 && !devicePrice.includes('0') && e.includes('0')) {
                                        return ['0'];
                                    }
                                    return e.length > 0 ? (e.length > 1 && e.includes('0') ? e.filter(item => item !== '0') : e) : ['0'];
                                }}
                            >
                                <Checkbox.Group
                                    options={[
                                        { label: '不限', value: '0' },
                                        ...Object.keys(DEVICE_PRICE_ENUM)?.map(key => ({ label: DEVICE_PRICE_ENUM[key as keyof typeof DEVICE_PRICE_ENUM], value: key }))
                                    ]}
                                />
                            </Form.Item>
                        </div>}

                        {isShow('wechatAdBehavior') && <div className={style.newSpace}>
                            <Form.Item
                                name="wechatAdBehaviorType"
                                label={<strong>微信再营销</strong>}
                                style={{ marginBottom: 0 }}
                                getValueFromEvent={(e: string[]) => {
                                    if (e.length > 1 && !wechatAdBehaviorType.includes('0') && e.includes('0')) {
                                        return ['0'];
                                    }
                                    return e.length > 0 ? (e.length > 1 && e.includes('0') ? e.filter(item => item !== '0') : e) : ['0'];
                                }}
                            >
                                <Checkbox.Group
                                    options={[
                                        { label: '不限', value: '0' },
                                        { label: '再营销', value: 'actions' },
                                        { label: '排除营销', value: 'excludedActions' }
                                    ]}
                                />
                            </Form.Item>
                            {(wechatAdBehaviorType && !wechatAdBehaviorType?.includes('0')) && <div className={`${style.newSpace_bottom}`}>
                                {wechatAdBehaviorType.includes('actions') && <>
                                    <Title level={5} style={{ fontSize: 14 }}>再营销</Title>
                                    <Form.Item style={{ marginBottom: 10 }} name={['wechatAdBehavior', 'actions']}>
                                        {taskType === 'GAME' ?
                                            <Checkbox.Group options={Object.keys(WECHAT_AD_NEHAVIOR_GAME_ENUM).filter(item => !['WE_COM_CORP_ID_ADDED', 'WECHAT_WORK_CONTACTS_ADDED'].includes(item)).map(key => ({ label: WECHAT_AD_NEHAVIOR_GAME_ENUM[key as keyof typeof WECHAT_AD_NEHAVIOR_GAME_ENUM], value: key, disabled: excludedActions?.some((k: string) => k === key) }))} />
                                            :
                                            <Checkbox.Group options={Object.keys(WECHAT_AD_NEHAVIOR_ENUM).filter(item => !['WE_COM_CORP_ID_ADDED', 'WECHAT_WORK_CONTACTS_ADDED'].includes(item)).map(key => ({ label: WECHAT_AD_NEHAVIOR_ENUM[key as keyof typeof WECHAT_AD_NEHAVIOR_ENUM], value: key, disabled: excludedActions?.some((k: string) => k === key) }))} />
                                        }
                                    </Form.Item>
                                </>}
                                {wechatAdBehaviorType.includes('excludedActions') && <>
                                    <Title level={5} style={{ fontSize: 14 }}>排除营销</Title>
                                    <Form.Item name={['wechatAdBehavior', 'excludedActions']}>
                                        {taskType === 'GAME' ?
                                            <Checkbox.Group options={Object.keys(WECHAT_AD_NEHAVIOR_GAME_ENUM).map(key => ({ label: WECHAT_AD_NEHAVIOR_GAME_ENUM[key as keyof typeof WECHAT_AD_NEHAVIOR_GAME_ENUM], value: key, disabled: actions?.some((k: string) => k === key) }))} />
                                            :
                                            <Checkbox.Group options={Object.keys(WECHAT_AD_NEHAVIOR_ENUM).map(key => ({ label: WECHAT_AD_NEHAVIOR_ENUM[key as keyof typeof WECHAT_AD_NEHAVIOR_ENUM], value: key, disabled: actions?.some((k: string) => k === key) }))} />
                                        }
                                    </Form.Item>
                                </>}
                                {excludedActions?.includes('WE_COM_CORP_ID_ADDED') && <>
                                    <Form.Item label={<strong>企业微信</strong>} name={['wechatAdBehavior', 'corpId']} rules={[{ required: true, message: '请选择微信小程序' }]}>
                                        <SelectCorpWechatCorpId />
                                    </Form.Item>
                                </>}
                            </div>}
                        </div>}
                    </Card>
                    <Card
                        title={<strong style={{ fontSize: 18 }}>定向设置</strong>}
                        className="cardResetCss"
                    >
                        <Form.Item
                            label={<strong>定向模板名称</strong>}
                            name='targetingName'
                            // tooltip="下标、日期时分秒、广告账户创建时默认自带"
                            rules={[
                                { required: true, message: '请输入定向模板名称!' },
                                {
                                    required: true, message: '定向模板名称不能包含特殊字符：< > & ‘ ” / 以及TAB、换行、回车键，请修改', validator(_, value) {
                                        let reg = /[&‘’“”/\n\t\f]/ig
                                        if (value && reg.test(value)) {
                                            return Promise.reject()
                                        }
                                        return Promise.resolve()
                                    }
                                },
                                {
                                    required: true, message: '请确保定向模板名称长度不超过30个字（1个汉字等于2个字符)', validator(_, value) {
                                        if (value && txtLength(value) > 30) {
                                            return Promise.reject()
                                        }
                                        return Promise.resolve()
                                    }
                                }
                            ]}
                        >
                            <InputName placeholder='定向模板名称' style={{ width: 480 }} length={30} />
                        </Form.Item>
                        {!isBackVal && <>
                            <Form.Item
                                label={<strong>定向模板描述</strong>}
                                name='description'
                            >
                                <Input.TextArea style={{ width: 480 }} placeholder="定向模板描述" />
                            </Form.Item>
                            <Form.Item
                                label={<strong>关联账户</strong>}
                                name='accountId'
                            >
                                <Select
                                    style={{ width: 480 }}
                                    showSearch
                                    filterOption={(input, option) =>
                                        (option!.children as unknown as string)?.toLowerCase()?.includes(input?.toLowerCase())
                                    }
                                    allowClear
                                    placeholder='请选择媒体账户'
                                >
                                    {getAllUserAccount?.data?.data?.map((item: any) => <Select.Option value={item.accountId} key={item.id}>{item.remark ? item.accountId + '_' + item.remark : item.accountId}</Select.Option>)}
                                </Select>
                            </Form.Item>
                        </>}
                    </Card>
                    <Form.Item className="submit_pull">
                        <Space>
                            {isBackVal && !(value && Object.keys(value).length > 0) && <Checkbox checked={isAdd} onChange={(e) => setIsAdd(e.target.checked)}>是否保存到定向模板</Checkbox>}
                            <Button onClick={onClose}>取消</Button>
                            <Button type="primary" htmlType="submit" className="modalResetCss" loading={checkTargeting.loading || updateTargeting.loading || addTargeting.loading}>
                                确定
                            </Button>
                        </Space>
                    </Form.Item>
                </Form>
            </div>
        </Spin>
    </Modal>
}

export default React.memo(AddTarget)