import { DownOutlined, ExclamationCircleOutlined, QuestionCircleOutlined, UpOutlined } from "@ant-design/icons";
import { Button, DatePicker, Input, InputNumber, message, Modal, Radio, Select, Space, Tooltip, Checkbox, RadioChangeEvent, Divider } from "antd";
import { CheckboxValueType } from "antd/lib/checkbox/Group";
import moment from "moment";
import React, { useCallback, useEffect, useState } from "react";
import { useModel } from "umi";
import style from './index.less'
import dic from '../Dic'
const CheckboxGroup = Checkbox.Group;
const { Option } = Select;
const ageVal = {
    start: [14, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65],
    end: [18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65]
}
interface Props {
    data?: any,
    visible: boolean,
    hideModel: () => void,
    onChange?: (value: any) => void,
    localtion: number,  // 广告版位
}
function AdBasicConfig(props: Props) {
    const { visible, hideModel, data, onChange, localtion } = props
    const [adName, setAdName] = useState<string>('<当前时间>') // 广告基本信息名称
    const [customName, setCustomName] = useState<string>('')  // 自定义标记
    const [cpm_set, setCpm_set] = useState<string>("1") // 出价方式
    const [date_module, setDate_module] = useState<string>('1')
    const [onShow, setOnShow] = useState<boolean>(false)
    const { state: launState, dispatch: launDispatch } = useModel('useLaunch.useAdAuthorize')
    let { campaign, target_groups, materials } = launState?.first
    let { ctype, end_time, begin_time } = campaign
    let { ad_group, ad_target } = target_groups[0].ad_groups[0]
    let { budget, bid, bid_strategy, strategy_opt, tracking_sourceid } = ad_group
    let { bid_action_type, bid_objective_mode, deep_roi_bid } = JSON.parse(strategy_opt)
    let { crt_size } = materials[0]
    let { gender, age, ad_behavior, education, device_price, device_brand_model, os, connection, telcom } = ad_target
    const [crowdInfo, setCrowdInfo] = useState({
        xl: JSON.parse(education).length === 0 ? false : true,
        czxt: JSON.parse(os).length === 0 ? false : true,
        sjjg: JSON.parse(device_price).length === 0 ? false : true,
        sjpp: JSON.parse(device_brand_model).length === 0 ? 'a' : JSON.parse(device_brand_model)[0] > 0 ? 'z' : 'f',
        yys: JSON.parse(telcom).length === 0 ? false : true,
        lwfs: JSON.parse(connection).length === 0 ? false : true,
        zyx: JSON.parse(ad_behavior)[0].in_action_list.length === 0 ? false : true,
        pcyx: JSON.parse(ad_behavior)[0].not_in_action_list.length === 0 ? false : true
    })

    /** 取消按纽 */
    const hideHandle = useCallback(() => {
        hideModel()
    }, [hideModel])

    /** 确定按妞 */
    const handleOk = useCallback(() => {
        if (date_module === '1' && (!begin_time || !end_time)) { message.error('请选择开始或结束日期！'); return }
        if (date_module === '2' && (!begin_time)) { message.error('请选择开始日期！'); return }
        if (!bid) { message.error('请输入出价！'); return }
        if (!budget) { message.error('每日预算！'); return }
        if (bid_action_type === 6 && bid_objective_mode === 3) {
            if (!deep_roi_bid) { message.error('请输入ROI目标值！'); return }
        }
        // if (!customName) { message.error('输入投放计划名称'); return }
        onChange && onChange({ adName: adName, customName: customName, date_module, cpm_set })
        hideModel()
    }, [date_module, adName, customName, cpm_set, launState, bid_action_type])

    // 不可选择日期
    function disabledDate(current: any) {
        return current && current < moment().subtract(1, 'day') || current > (moment().add(1, 'year').startOf('day'))
    }

    // 结束日期不可选择日期
    const disabledEndDate = useCallback((current: any) => {
        if (begin_time) {
            return current && current < moment(begin_time * 1000) || current < moment().subtract(1, 'day') || current > (moment().add(1, 'year').startOf('day'))
        } else {
            return current && current < moment().subtract(1, 'day') || current > (moment().add(1, 'year').startOf('day'))
        }
    }, [begin_time])

    useEffect(() => {
        if (begin_time && end_time && moment(end_time as number * 1000) < moment(begin_time * 1000)) {
            launDispatch({ type: 'setFirst', params: { ...launState, first: { ...launState.first, campaign: { ...campaign, end_time: 0 }, target_groups: [{ ...target_groups[0], ad_groups: [{ ...target_groups[0].ad_groups[0], ad_group: { ...target_groups[0].ad_groups[0].ad_group, end_time: 0 } }] }] } } })
        }
    }, [begin_time, end_time])
    useEffect(() => {
        if (date_module === '2') {
            launDispatch({ type: 'setFirst', params: { ...launState, first: { ...launState.first, campaign: { ...campaign, end_time: 0 }, target_groups: [{ ...target_groups[0], ad_groups: [{ ...target_groups[0].ad_groups[0], ad_group: { ...target_groups[0].ad_groups[0].ad_group, end_time: 0 } }] }] } } })
        }
    }, [date_module])

    /** 回填 */
    useEffect(() => {
        if (data && Object.keys(data).length > 0) {
            let { adName, customName, cpm_set, date_module } = data
            console.log(adName, customName,)
            adName && setAdName(adName)
            cpm_set && setCpm_set(cpm_set)
            date_module && setDate_module(date_module)
            customName && setCustomName(customName)

            if (begin_time && end_time) {
                setDate_module('1')
            } else if (begin_time) {
                setDate_module('2')
            } else {
                setDate_module('1')
            }
            if (bid_strategy) {
                setCpm_set(() => '2')
            } else {
                setCpm_set(() => '1')
            }
        } else {
            if (begin_time && end_time) {
                setDate_module('1')
            } else if (begin_time) {
                setDate_module('2')
            } else {
                setDate_module('1')
            }
            if (bid_strategy) {
                setCpm_set(() => '2')
            } else {
                setCpm_set(() => '1')
            }
        }
    }, [data])


    /** 设置出价方式 */
    const setCpmHandle = useCallback((value: string) => {
        setCpm_set(value)
        if (value === '1') {
            let { bid_strategy, ...newAd_group } = ad_group
            launDispatch({ type: 'setFirst', params: { ...launState, first: { ...launState.first, target_groups: [{ ...target_groups[0], ad_groups: [{ ...target_groups[0].ad_groups[0], ad_group: { ...newAd_group, strategy_opt: "{\"bid_action_type\":1,\"bid_objective\":2,\"bid_objective_mode\":1}" } }] }] } } })
        } else if (value === '3') {
            let { bid_strategy, ...newAd_group } = ad_group
            launDispatch({ type: 'setFirst', params: { ...launState, first: { ...launState.first, target_groups: [{ ...target_groups[0], ad_groups: [{ ...target_groups[0].ad_groups[0], ad_group: { ...newAd_group, strategy_opt: "{\"bid_action_type\":1,\"bid_objective\":1,\"bid_objective_mode\":1}" } }] }] } } })
        } else {
            launDispatch({ type: 'setFirst', params: { ...launState, first: { ...launState.first, target_groups: [{ ...target_groups[0], ad_groups: [{ ...target_groups[0].ad_groups[0], ad_group: { ...ad_group, strategy_opt: '{"bid_objective":7,"bid_action_type":7,"bid_objective_mode":1}', bid_strategy: 1 } }] }] } } })
        }
    }, [cpm_set, launState])

    const setAgeHandle = useCallback((value: number, type: 'start' | 'end') => {
        let newAge = type === 'start' ? `${value}~${Number(JSON.parse(age)[0]?.split('~')[1])}` : `${Number(JSON.parse(age)[0]?.split('~')[0])}~${value}`
        launDispatch({ type: 'setFirst', params: { ...launState, first: { ...launState.first, target_groups: [{ ...target_groups[0], ad_groups: [{ ...target_groups[0].ad_groups[0], ad_target: { ...target_groups[0].ad_groups[0].ad_target, age: JSON.stringify([newAge]) } }] }] } } });
    }, [launState])
    /**人群信息选项开关*/
    const changeCrowdInfo = useCallback((obj) => {
        setCrowdInfo({ ...crowdInfo, ...obj })
    }, [crowdInfo])
    /**更改人群信息*/
    const changeCrowd = useCallback((obj: { name: any, value: any }) => {
        let { name, value } = obj
        launDispatch({ type: 'setFirst', params: { ...launState, first: { ...launState.first, target_groups: [{ ...target_groups[0], ad_groups: [{ ...target_groups[0].ad_groups[0], ad_target: { ...target_groups[0].ad_groups[0].ad_target, [name]: value } }] }] } } })
    }, [launState])

    /** 设置优化目标 */
    const setGoatHandle = useCallback((value: number) => {
        if (value === 7) { // 下单
            launDispatch({ type: 'setFirst', params: { ...launState, first: { ...launState.first, target_groups: [{ ...target_groups[0], ad_groups: [{ ...target_groups[0].ad_groups[0], ad_group: { ...target_groups[0].ad_groups[0].ad_group, strategy_opt: '{"bid_objective":7,"bid_action_type":7,"bid_objective_mode":1}' } }] }] } } })
        } else if (value === 6) {  // 关注
            launDispatch({ type: 'setFirst', params: { ...launState, first: { ...launState.first, target_groups: [{ ...target_groups[0], ad_groups: [{ ...target_groups[0].ad_groups[0], ad_group: { ...target_groups[0].ad_groups[0].ad_group, strategy_opt: '{"bid_objective":6,"bid_action_type":6,"bid_objective_mode":1}' } }] }] } } })
        }
    }, [launState])

    /** 设置深度优化 */
    const setDepthGoatHandle = useCallback((value: number) => {
        if (value === 1) { // 不启用
            launDispatch({ type: 'setFirst', params: { ...launState, first: { ...launState.first, target_groups: [{ ...target_groups[0], ad_groups: [{ ...target_groups[0].ad_groups[0], ad_group: { ...target_groups[0].ad_groups[0].ad_group, strategy_opt: '{"bid_objective":6,"bid_action_type":6,"bid_objective_mode":1}' } }] }] } } })
        } else if (value === 3) {  // 优化转化价值
            launDispatch({ type: 'setFirst', params: { ...launState, first: { ...launState.first, target_groups: [{ ...target_groups[0], ad_groups: [{ ...target_groups[0].ad_groups[0], ad_group: { ...target_groups[0].ad_groups[0].ad_group, strategy_opt: '{"bid_objective":6,"bid_action_type":6,"deep_conversion_bid":10,"deep_roi_bid":10,"deep_roi_precision":100,"deep_conversion_optimization_goal":7,"bid_objective_mode":3}' } }] }] } } })
        }
    }, [launState])

    /** 设置ROI目标值 */
    const setDeepRoiBid = useCallback((value: number) => {
        let newStrategyOpt = JSON.parse(strategy_opt)
        newStrategyOpt = { ...newStrategyOpt, deep_roi_bid: value * 100, deep_conversion_bid: value * 100 }
        launDispatch({ type: 'setFirst', params: { ...launState, first: { ...launState.first, target_groups: [{ ...target_groups[0], ad_groups: [{ ...target_groups[0].ad_groups[0], ad_group: { ...target_groups[0].ad_groups[0].ad_group, strategy_opt: JSON.stringify(newStrategyOpt) } }] }] } } })
    }, [launState, strategy_opt])

    return <Modal
        bodyStyle={{ height: 600, overflowY: 'auto' }}
        title="广告基本信息"
        visible={visible}
        onCancel={hideHandle}
        width={950}
        className={style.AdBasicConfig}
        footer={<div className={style.footer}>
            <div></div>
            <Space>
                <Button onClick={hideHandle}>取消</Button>
                <Button type="primary" onClick={handleOk}>确定</Button>
            </Space>
        </div>}
    >
        <div className={style.title}>投放计划名称</div>
        <div className={style.form}>
            <div className={style.content}>
                {/* <div className={style.label} style={{ width: 90 }}><label>投放计划名称</label></div> */}
                <div className={style.control}>
                    <div className={style.children}>
                        <div className={style.inputGroup}>
                            <Input className={`${style.input}`} placeholder='自定义标记' value={customName} onChange={(e) => { setCustomName(e.target.value) }} maxLength={16} />
                            <span>{` + ${adName}`}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div className={style.title}>广告投放位置</div>
        <BcForm name="广告版位">
            <Radio.Group value={localtion} onChange={() => { }} className={style.radio}>
                <Radio.Button value={localtion}>{dic.localtion[localtion]}</Radio.Button>
            </Radio.Group>
        </BcForm>
        <div className={style.title}>购买方式</div>
        <BcForm name="购买方式" tips="当前仅支持竞价购买方式">
            <Radio.Group value={ctype} className={style.radio} onChange={(e) => { launDispatch({ type: 'setFirst', params: { ...launState, first: { ...launState.first, campaign: { ...campaign, ctype: e.target.value } } } }) }}>
                <Radio.Button value="CAMPAIGNTYPE_AUCTION">竞价购买</Radio.Button>
                <Radio.Button value="CAMPAIGNTYPE_SCHEDULE" disabled>合约购买</Radio.Button>
            </Radio.Group>
        </BcForm>
        {
            localtion === 0 && <BcForm name="选择素材格式">
                <Radio.Group value={crt_size} className={style.radio} onChange={(e) => {
                    let new_ad_group: any = ad_group
                    new_ad_group.strategy_opt = '{"bid_objective":7,"bid_action_type":7,"bid_objective_mode":1}'
                    // new_ad_group.bid_strategy = 1
                    if (e.target.value === 666) {
                        let { cost_type, ...new1_ad_group } = ad_group
                        new_ad_group = new1_ad_group
                    } else if (e.target.value === 538) {
                        new_ad_group.cost_type = "COSTTYPE_CPM"
                    }
                    let crt_info = { card_info: { head_desc_type: 1, mp_tag_type: 0 }, image_url: '' }
                    setCpm_set('2')
                    launDispatch({ type: 'setFirst', params: { ...launState, first: { ...launState.first, materials: [{ ...materials[0], crt_size: e.target.value }], target_groups: [{ ...target_groups[0], ad_groups: [{ ...target_groups[0].ad_groups[0], ad_group: new_ad_group }] }] } } })
                    launDispatch({ type: 'setSecond', params: { ...launState, second: { ...launState.second, materials: [{ ...launState.second?.materials[0], crt_size: e.target.value, crt_info }] } } })
                }}>
                    <Radio.Button value={666}>图片</Radio.Button>
                    <Radio.Button value={538}>视频</Radio.Button>
                </Radio.Group>
            </BcForm>
        }

        <div className={style.title}>排期与出价</div>
        <BcForm name="投放日期" tips={date_module === '1' ? '竞价购买的朋友圈信息流广告投放时间，可选范围6小时~60天' : ''}>
            <Radio.Group value={date_module} className={style.radio} onChange={(e) => { setDate_module(e.target.value) }}>
                <Radio.Button value="1">选择开始与结束日期</Radio.Button>
                <Radio.Button value="2">长期投放</Radio.Button>
            </Radio.Group>
        </BcForm>
        <BcForm name={date_module === '1' ? '开始与结束日期' : '开始日期'} >
            <div style={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center' }}>
                <DatePicker
                    className={style.picker}
                    disabledDate={disabledDate}
                    value={begin_time ? moment(begin_time * 1000) : null}
                    onChange={(e: moment.Moment | null) => {
                        launDispatch({ type: 'setFirst', params: { ...launState, first: { ...launState.first, campaign: { ...campaign, begin_time: e ? moment(e).startOf('day').unix() : 0 }, target_groups: [{ ...target_groups[0], ad_groups: [{ ...target_groups[0].ad_groups[0], ad_group: { ...target_groups[0].ad_groups[0].ad_group, begin_time: e ? moment(e).startOf('day').unix() : 0 } }] }] } } })
                    }}
                    placeholder="开始日期"
                />
                {date_module === '1' && <>
                    <span style={{ margin: '0 10px' }}>-</span>
                    <DatePicker
                        className={style.picker}
                        disabledDate={disabledEndDate}
                        value={end_time ? moment(end_time as number * 1000) : null}
                        onChange={(e: moment.Moment | null) => {
                            launDispatch({ type: 'setFirst', params: { ...launState, first: { ...launState.first, campaign: { ...campaign, end_time: e ? moment(e).endOf('day').unix() : 0 }, target_groups: [{ ...target_groups[0], ad_groups: [{ ...target_groups[0].ad_groups[0], ad_group: { ...target_groups[0].ad_groups[0].ad_group, end_time: e ? moment(e).endOf('day').unix() : 0 } }] }] } } })
                        }}
                        placeholder="结束日期"
                    />
                </>}
            </div>
        </BcForm>
        <BcForm name="投放时段">
            <Radio.Group value={"1"} className={style.radio} onChange={(e) => { }}>
                <Radio.Button value="1">全天投放</Radio.Button>
            </Radio.Group>
        </BcForm>
        <BcForm
            flex='flex-start'
            name="每日预算"
            tips={ctype === 'CAMPAIGNTYPE_AUCTION' ? '竞价购买可设置计划每日总预算或投放人群日预算；' : '合约购买可查询投放人群可消耗金额灵活分配预算'}
            footTips='每日预算有效范围为50-40,000,000元/天'>
            <Space>
                <InputNumber
                    placeholder="请输入"
                    min={50}
                    className={style.input}
                    value={budget !== 0 ? budget / 100 : 0}
                    onChange={(e) => {
                        launDispatch({ type: 'setFirst', params: { ...launState, first: { ...launState.first, target_groups: [{ ...target_groups[0], ad_groups: [{ ...target_groups[0].ad_groups[0], ad_group: { ...target_groups[0].ad_groups[0].ad_group, day_budget: e !== 0 ? e * 100 : 0, budget: e !== 0 ? e * 100 : 0 } }] }] } } });
                    }}
                />
                <div style={{ width: 40 }}>元/天</div>
            </Space>
        </BcForm>
        <BcForm
            flex='flex-start'
            name="出价"
            footTips={`广告出价，有效范围为0.1-999元/${cpm_set === '1' ? '千次曝光' : '下单'}`}>
            <Space>
                <InputNumber
                    placeholder="请输入"
                    className={style.input}
                    min={0.1}
                    value={bid !== 0 ? bid / 100 : 0}
                    onChange={(e) => {
                        launDispatch({ type: 'setFirst', params: { ...launState, first: { ...launState.first, target_groups: [{ ...target_groups[0], ad_groups: [{ ...target_groups[0].ad_groups[0], ad_group: { ...target_groups[0].ad_groups[0].ad_group, bid: e !== 0 ? e * 100 : 0 } }] }] } } });
                    }}
                />
                <div>元/{cpm_set === '1' ? '千次曝光' : '下单'}</div>
            </Space>
        </BcForm>

        <div className={style.title} style={{ display: 'flex', alignItems: 'center' }}>出价方式
            <Tooltip placement="topLeft" title='广告出价与广告计划设置的购买方式有关。'>
                <ExclamationCircleOutlined style={{ color: '#FA8C16', marginLeft: 8, fontSize: 12 }} />
            </Tooltip>
        </div>
        <BcForm name="出价方式">
            <Radio.Group className={style.radio} value={cpm_set} onChange={(e) => { setCpmHandle(e.target.value) }}>
                {localtion === 0 ? <>
                    {crt_size === 666 ? <Radio.Button value="3">CPC</Radio.Button> : <Radio.Button value="1">CPM</Radio.Button>}
                    <Radio.Button value="2">{crt_size === 666 ? '智能优化(oCPC)' : '智能优化(oCPM)'}</Radio.Button>
                </> : localtion === 101 ? <>
                    <Radio.Button value="1">CPC</Radio.Button>
                </> : <>
                    <Radio.Button value="1">CPM</Radio.Button>
                    <Radio.Button value="2">智能优化(oCPM)</Radio.Button>
                </>}
            </Radio.Group>
        </BcForm>
        {cpm_set === '2' && <>
            <BcForm name="投放模式">
                <Radio.Group className={style.radio} value={bid_strategy} onChange={(e) => { launDispatch({ type: 'setFirst', params: { ...launState, first: { ...launState.first, target_groups: [{ ...target_groups[0], ad_groups: [{ ...target_groups[0].ad_groups[0], ad_group: { ...ad_group, bid_strategy: e.target.value } }] }] } } }) }}>
                    <Radio value={1}>均衡投放</Radio>
                    <Radio value={2}>优先跑量</Radio>
                    <Radio value={3}>优先成本</Radio>
                </Radio.Group>
            </BcForm>
            <BcForm name="优化目标">
                <Radio.Group className={style.radio} value={bid_action_type} onChange={(e) => { setGoatHandle(e.target.value) }}>
                    <Radio value={6}>关注</Radio>
                    <Radio value={7}>下单</Radio>
                </Radio.Group>
            </BcForm>
            {bid_action_type === 6 && <>
                <BcForm name="深度优化">
                    <Radio.Group className={style.radio} value={bid_objective_mode} onChange={(e) => { setDepthGoatHandle(e.target.value) }}>
                        <Radio value={1}>不启用</Radio>
                        <Radio value={3}>
                            优化转化价值
                            <Tooltip title="注意：公众号需要开通《优化转化价值》，没开通不允许选择创建">
                                <QuestionCircleOutlined style={{ color: 'red', marginLeft: 6 }} />
                            </Tooltip>
                        </Radio>
                    </Radio.Group>
                </BcForm>
                {bid_objective_mode === 3 && <>
                    <BcForm name="价值优化目标">
                        <Radio.Group className={style.radio} value={1} onChange={(e) => { }}>
                            <Radio value={1}>首日付费ROI</Radio>
                        </Radio.Group>
                    </BcForm>
                    <BcForm name="ROI目标值" flex='flex-start' footTips={`ROI 目标范围0.001~1000，计算公式： ROI = 广告转化价值/广告消耗。输入0.05，表示ROI目标为5%`}>
                        <InputNumber min={0.001} max={1000} step={1} placeholder="请输入" value={deep_roi_bid / 100} style={{ width: 150 }} onChange={(e) => { setDeepRoiBid(e) }} />
                    </BcForm>
                </>}
            </>}
        </>}

        <div className={style.title}>定向拓展</div>
        <BcForm name="地域">
            <Radio.Group className={style.radio} value={'1'} onChange={(e) => { }}>
                <Radio value="1">常住地</Radio>
                {/* <Radio value="2">差旅出行</Radio> */}
            </Radio.Group>
        </BcForm>
        <BcForm name="地域选择">
            <Radio.Group className={style.radio} value={'1'} onChange={(e) => { }}>
                <Radio value="1">全选</Radio>
            </Radio.Group>
        </BcForm>

        <BcForm name="年龄">
            <div style={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center' }}>
                <Select className={style.select} value={Number(JSON.parse(age)[0]?.split('~')[0])} onChange={(value) => { setAgeHandle(value, 'start') }}>
                    {ageVal.start?.map((item: number) => (<Option value={item} key={`start` + item}>{item}岁</Option>))}
                </Select>
                <span style={{ display: 'inline-block', width: '24px', lineHeight: '32px', textAlign: 'center' }} > - </span>
                <Select className={style.select} value={Number(JSON.parse(age)[0]?.split('~')[1])} onChange={(value) => { setAgeHandle(value, 'end') }}>
                    {ageVal.end?.map((item: number) => (<Option value={item} key={`end` + item}>{item}岁</Option>))}
                    <Option value={66}>65岁以上</Option>
                </Select>
            </div>
        </BcForm>

        <BcForm name="性别">
            <Radio.Group className={style.radio} value={gender === '[]' ? 'All' : gender?.indexOf('FEMALE') !== -1 ? 'FEMALE' : 'MALE'} onChange={(e) => { launDispatch({ type: 'setFirst', params: { ...launState, first: { ...launState.first, target_groups: [{ ...target_groups[0], ad_groups: [{ ...target_groups[0].ad_groups[0], ad_target: { ...target_groups[0].ad_groups[0].ad_target, gender: e.target.value === 'All' ? JSON.stringify([]) : e.target.value === 'MALE' ? JSON.stringify(['MALE']) : JSON.stringify(['FEMALE']) } }] }] } } }); }}>
                <Radio value="All">全选</Radio>
                <Radio value="MALE">男</Radio>
                <Radio value="FEMALE">女</Radio>
            </Radio.Group>
        </BcForm>
        <a onClick={() => setOnShow(!onShow)} style={{ marginBottom: 20, display: 'block' }}>更多人群信息{onShow ? <UpOutlined /> : <DownOutlined />}</a>
        {
            onShow && <>
                <BcForm name="学历">
                    <>
                        <Radio.Group className={style.radio} value={crowdInfo.xl ? 'true' : 'false'} onChange={(e: RadioChangeEvent) => {
                            let v = e.target.value
                            changeCrowdInfo({ xl: v === 'false' ? false : true })
                            if (v === 'false') {
                                changeCrowd({ name: 'education', value: "[]" })
                            }
                        }}>
                            <Radio value="false">全选</Radio>
                            <Radio value="true">自定义</Radio>
                        </Radio.Group>
                        {crowdInfo.xl && <CheckboxGroup
                            options={educations}
                            style={{ marginTop: 5 }}
                            value={JSON.parse(education)}
                            onChange={(checkedValue: CheckboxValueType[]) => {
                                changeCrowd({ name: 'education', value: JSON.stringify(checkedValue) })
                            }} />}
                    </>
                </BcForm>
                <BcForm name="操作系统">
                    <>
                        <Radio.Group className={style.radio} value={crowdInfo.czxt ? 'true' : 'false'} onChange={(e: RadioChangeEvent) => {
                            let v = e.target.value
                            changeCrowdInfo({ czxt: v === 'false' ? false : true })
                            if (v === 'false') {
                                changeCrowd({ name: 'os', value: "[]" })
                            }
                        }}>
                            <Radio value="false">全选</Radio>
                            <Radio value="true">自定义</Radio>
                        </Radio.Group>
                        {crowdInfo.czxt && <CheckboxGroup
                            options={oss}
                            style={{ marginTop: 5 }}
                            value={JSON.parse(os)}
                            onChange={(checkedValue: CheckboxValueType[]) => {
                                changeCrowd({ name: 'os', value: JSON.stringify(checkedValue) })
                            }} />}
                    </>
                </BcForm>
                <BcForm name="手机价格">
                    <>
                        <Radio.Group className={style.radio} value={crowdInfo.sjjg ? 'true' : 'false'} onChange={(e: RadioChangeEvent) => {
                            let v = e.target.value
                            changeCrowdInfo({ sjjg: v === 'false' ? false : true })
                            if (v === 'false') {
                                changeCrowd({ name: 'device_price', value: "[]" })
                            }
                        }}>
                            <Radio value="false">全选</Radio>
                            <Radio value="true">自定义</Radio>
                        </Radio.Group>
                        {crowdInfo.sjjg && <CheckboxGroup
                            options={deviceprices}
                            style={{ marginTop: 5 }}
                            value={JSON.parse(device_price)}
                            onChange={(checkedValue: CheckboxValueType[]) => {
                                changeCrowd({ name: 'device_price', value: JSON.stringify(checkedValue) })
                            }} />}
                    </>
                </BcForm>
                <BcForm name="手机品牌">
                    <>
                        <Radio.Group className={style.radio} value={crowdInfo.sjpp} style={{ marginBottom: 10 }} onChange={(e: RadioChangeEvent) => {
                            let v = e.target.value
                            changeCrowdInfo({ sjpp: v })
                            if (v === 'a') {
                                changeCrowd({ name: 'device_brand_model', value: "[]" })
                            }
                            if (v === 'z') {
                                let value = JSON.parse(device_brand_model)
                                value = value.map((item: any) => (item.replace('-', '')))
                                changeCrowd({ name: 'device_brand_model', value: JSON.stringify(value) })
                            }
                            if (v === 'f') {
                                let value = JSON.parse(device_brand_model)
                                value = value.map((item: any) => ('-' + item))
                                changeCrowd({ name: 'device_brand_model', value: JSON.stringify(value) })
                            }
                        }}>
                            <Radio value="a">全选</Radio>
                            <Radio value="z">定向</Radio>
                            <Radio value="f">排除</Radio>
                        </Radio.Group>
                        {crowdInfo.sjpp !== 'a' && <Select
                            showSearch
                            mode="multiple"
                            placeholder="输入名称可搜索"
                            onChange={(value) => {
                                let newValue: any[] = [...value]
                                if (newValue.some((v: string) => (v == '2' || v == '-2')) && newValue.every((v: string) => (v != '52' && v != '-52'))) {//判断是否存在三星手机那么就假如对应值
                                    newValue = newValue.concat(crowdInfo.sjpp === 'z' ? ['52'] : ['-52'])
                                } else if (newValue.every((v: string) => (v != '2' && v != '-2'))) {
                                    newValue = newValue.filter((v: string) => (v != '52' && v != '-52'))
                                }
                                if (newValue.some((v: string) => (v == '16' || v == '-16')) && newValue.every((v: string) => (v != '25' && v != '-25'))) {//判断是否存在索尼手机那么就假如对应值
                                    newValue = newValue.concat(crowdInfo.sjpp === 'z' ? ['25'] : ['-25'])
                                } else if (newValue.every((v: string) => (v != '16' && v != '-16'))) {
                                    newValue = newValue.filter((v: string) => (v != '25' && v != '-25'))
                                }
                                if (newValue.some((v: string) => (v == '44' || v == '-44')) && newValue.every((v: string) => (v != '69' && v != '-69'))) {//判断是否存在移动手机那么就假如对应值
                                    newValue = newValue.concat(crowdInfo.sjpp === 'z' ? ['69'] : ['-69'])
                                } else if (newValue.every((v: string) => (v != '44' && v != '-44'))) {
                                    newValue = newValue.filter((v: string) => (v != '69' && v != '-69'))
                                }
                                changeCrowd({ name: 'device_brand_model', value: JSON.stringify(newValue) })
                            }}
                            value={JSON.parse(device_brand_model)}
                            filterOption={(input, option: any) => {
                                return option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                            }
                            style={{ width: '100%' }}
                            dropdownRender={menu => (
                                <div>
                                    {menu}
                                    <Divider style={{ margin: '4px 0' }} />
                                    <div style={{ display: 'flex', justifyItems: 'center', justifyContent: 'center' }}>
                                        <Space>
                                            <Button size='small' onClick={() => {
                                                changeCrowd({
                                                    name: 'device_brand_model', value: JSON.stringify(
                                                        Object.keys(phones).map(key => {
                                                            let v = crowdInfo.sjpp === 'z' ? key : '-' + key
                                                            return v
                                                        })
                                                    )
                                                })
                                            }}>全选</Button>
                                            <Button size='small' onClick={() => {
                                                changeCrowd({ name: 'device_brand_model', value: "[]" })
                                            }}>取消全选</Button>
                                        </Space>
                                    </div>
                                </div>
                            )}
                        >
                            {
                                Object.keys(crowdInfo.sjpp === 'z' ? phones : phones1).map((key) => {
                                    return <Select.Option key={key} value={key}>{crowdInfo.sjpp === 'z' ? phones[key] : phones1[key]}</Select.Option>
                                })
                            }
                        </Select>}
                    </>
                </BcForm>
                <BcForm name="运营商">
                    <>
                        <Radio.Group className={style.radio} value={crowdInfo.yys ? 'true' : 'false'} onChange={(e: RadioChangeEvent) => {
                            let v = e.target.value
                            changeCrowdInfo({ yys: v === 'false' ? false : true })
                            if (v === 'false') {
                                changeCrowd({ name: 'telcom', value: "[]" })
                            }
                        }}>
                            <Radio value="false">全选</Radio>
                            <Radio value="true">自定义</Radio>
                        </Radio.Group>
                        {crowdInfo.yys && <CheckboxGroup
                            options={telcoms}
                            style={{ marginTop: 5 }}
                            value={JSON.parse(telcom)}
                            onChange={(checkedValue: CheckboxValueType[]) => {
                                changeCrowd({ name: 'telcom', value: JSON.stringify(checkedValue) })
                            }} />}
                    </>
                </BcForm>
                <BcForm name="联网方式">
                    <>
                        <Radio.Group className={style.radio} value={crowdInfo.lwfs ? 'true' : 'false'} onChange={(e: RadioChangeEvent) => {
                            let v = e.target.value
                            changeCrowdInfo({ lwfs: v === 'false' ? false : true })
                            if (v === 'false') {
                                changeCrowd({ name: 'connection', value: "[]" })
                            }
                        }}>
                            <Radio value="false">全选</Radio>
                            <Radio value="true">自定义</Radio>
                        </Radio.Group>
                        {crowdInfo.lwfs && <CheckboxGroup
                            options={connections}
                            style={{ marginTop: 5 }}
                            value={JSON.parse(connection)}
                            onChange={(checkedValue: CheckboxValueType[]) => {
                                changeCrowd({ name: 'connection', value: JSON.stringify(checkedValue) })
                            }} />}
                    </>
                </BcForm>
                <BcForm name="再营销">
                    <>
                        <Radio.Group className={style.radio} value={crowdInfo.zyx ? 'true' : 'false'} onChange={(e: RadioChangeEvent) => {
                            let v = e.target.value
                            changeCrowdInfo({ zyx: v === 'false' ? false : true })
                            if (v === 'false') {
                                let obj = JSON.parse(ad_behavior)[0]
                                obj['in_action_list'] = []
                                changeCrowd({ name: 'ad_behavior', value: JSON.stringify([obj]) })
                            }
                        }}>
                            <Radio value="false">全选</Radio>
                            <Radio value="true">自定义</Radio>
                        </Radio.Group>
                        {crowdInfo.zyx && <CheckboxGroup
                            options={inactionlist.map((item) => {
                                if (JSON.parse(ad_behavior)[0].not_in_action_list.some((i: any) => i === item.value)) {
                                    return { ...item, disabled: true }
                                }
                                return item
                            })}
                            style={{ marginTop: 5 }}
                            value={JSON.parse(ad_behavior)[0].in_action_list}
                            onChange={(checkedValue: CheckboxValueType[]) => {
                                let obj = JSON.parse(ad_behavior)[0]
                                obj['in_action_list'] = checkedValue
                                changeCrowd({ name: 'ad_behavior', value: JSON.stringify([obj]) })
                            }} />}
                    </>
                </BcForm>
                <BcForm name="排除营销">
                    <>
                        <Radio.Group className={style.radio} value={crowdInfo.pcyx ? 'true' : 'false'} onChange={(e: RadioChangeEvent) => {
                            let v = e.target.value
                            changeCrowdInfo({ pcyx: v === 'false' ? false : true })
                            if (v === 'false') {
                                let obj = typeof ad_behavior === 'string' ? JSON.parse(ad_behavior)[0] : ad_behavior[0]
                                obj['not_in_action_list'] = []
                                changeCrowd({ name: 'ad_behavior', value: JSON.stringify([obj]) })
                            }
                        }}>
                            <Radio value="false">全选</Radio>
                            <Radio value="true">自定义</Radio>
                        </Radio.Group>
                        {crowdInfo.pcyx && <CheckboxGroup
                            options={
                                notinactionlist.map((item) => {
                                    if (JSON.parse(ad_behavior)[0].in_action_list.some((i: any) => i === item.value)) {
                                        return { ...item, disabled: true }
                                    }
                                    return item
                                })
                            }
                            style={{ marginTop: 5 }}
                            value={JSON.parse(ad_behavior)[0].not_in_action_list?.map((s: any) => s.toString())}
                            onChange={(checkedValue: CheckboxValueType[]) => {
                                let obj = JSON.parse(ad_behavior)[0]
                                obj['not_in_action_list'] = checkedValue
                                changeCrowd({ name: 'ad_behavior', value: JSON.stringify([obj]) })
                            }} />}
                    </>
                </BcForm>
            </>
        }
        
    </Modal>
}

interface BcProps {
    name?: string | JSX.Element,
    children?: JSX.Element | string,
    tips?: string,
    footTips?: string,
    flex?: 'flex-start' | 'center' | 'flex-end'
}
export function BcForm(props: BcProps) {
    let { name = '', children = '', tips, footTips, flex = 'center' } = props
    return <div className={style.form}>
        <div className={style.content} style={{ alignItems: flex }}>
            <div className={style.label}><label>{name}</label></div>
            <div className={style.control}>
                <div className={style.children}>
                    {children}
                    {footTips && <div className={style.tips} style={{ margin: '5px 0 0 0' }}>{footTips}</div>}
                </div>
                {tips && <div className={style.tips}><ExclamationCircleOutlined style={{ color: '#FA8C16', marginRight: 10 }} />{tips}</div>}
            </div>
        </div>
    </div>
}

export default React.memo(AdBasicConfig)
//手机列表
let phones = {
    "1": "苹果(iphone)",
    "2": "三星(samsung)",//两个值2和52
    "52": "三星(samsung)1",
    "3": "小米(xiaomi)",
    "4": "vivo(vivo)",
    "5": "华为(huawei)",
    "6": "oppo(oppo)",
    "7": "联想(lenovo)",
    "8": "酷派(coolpad)",
    "9": "荣耀(honor)",
    "10": "魅族(meizu)",
    "11": "金立(gionee)",
    "12": "中兴(zte)",
    "13": "天语(alps)",
    "14": "htc(htc)",
    "15": "诺基亚(nokia)",
    "16": "索尼(semc)",//两个值16和25
    "25": "索尼(semc)1",//两个值16和25
    "17": "黑莓(blackberry)",
    "18": "海信(hisense)",
    "19": "lg(lge)",
    "20": "tcl(tcl)",
    "21": "华硕(asus)",
    "22": "高通(qcom)",
    "24": "朵唯(doov)",
    "28": "摩托罗拉(motorola)",
    "29": "酷派(yulong)",
    "30": "展讯通信(sprd)",
    "31": "乐视(letv)",
    "32": "酷比(koobee)",
    "33": "努比亚(nubia)",
    "34": "htccn(htccn)",
    "35": "语信(yusun)",
    "37": "generic(generic)",
    "38": "谷歌(google)",
    "39": "波导(bird)",
    "40": "TCL(TCL)",
    "41": "亿通(eton)",
    "43": "天语(天语)",
    "44": "中国移动(中国移动)",//两个值44和69
    "69": "中国移动(中国移动)1",//两个值44和69
    "45": "邦华(boway)",
    "46": "黑莓(黑莓)",
    "50": "康佳(konka)",
    "53": "中国移动(cmdc)",
    "54": "smartfren(smartfren)",
    "56": "酷珀(kopo)",
    "57": "长虹(长虹)",
    "59": "优购(uoogou)",
    "61": "唯米(唯米)",
    "65": "一加(oneplus)",
    "66": "乐丰(lephone)",
    "67": "锤子(smartisan)",
    "68": "诺亚信(noain)",
    "70": "广信(kingsun)",
    "72": "贝尔丰(bifer)",
    "73": "美图(meitu)",
    "75": "赛博宇华(赛博宇华)",
    "76": "microsoft(microsoft)",
    "77": "维图(voto)",
    "80": "海信(marvell)",
    "81": "米蓝(mlled)",
    "86": "誉品(yepen)",
    "87": "爱我(爱我)",
    "89": "诺基亚(诺基亚)",
    "91": "步步高(步步高)",
    "92": "酷比魔方(酷比魔方)",
    "97": "至尊宝(bestsonny)",
    "102": "沃普丰(wellphone)",
    "104": "奇酷(qiku)",
    "106": "神舟(神舟)",
    "114": "酷派(酷派)",
    "117": "奥乐迪奥(aoledior)",
    "118": "糯米(糯米)",
    "124": "优米(uimi4)",
    "127": "唯比(唯比)",
    "135": "依偎(ivvi)",
    "215": "金星(jinxing)",
    "317": "青橙(go)",
    "340": "小辣椒(xiaolajiao)",
    "661": "360(360)",
    "675": "乐视(乐视)",
    "687": "首云(shown)",
    "706": "赛博宇华(sop)",
    "707": "移通(ytone)",
    "709": "爱我(lovme)",
    "710": "亿优(eyu)",
    "711": "金豆子(kdoor)",
    "712": "长虹(changhong)",
    "713": "天宏(skyhon)",
    "715": "先科(sast)",
    "719": "世纪星(tetc)",
    "726": "8848(8848)",
    "728": "宇飞来(yufly)",
    "732": "糖果(sugar)",
    "733": "格力(gree)",
    "734": "黑鲨(blackshark)"
}
let phones1 = {
    "-1": "苹果(iphone)",
    "-2": "三星(samsung)",//两个值2和52
    "-52": "三星(samsung)1",
    "-3": "小米(xiaomi)",
    "-4": "vivo(vivo)",
    "-5": "华为(huawei)",
    "-6": "oppo(oppo)",
    "-7": "联想(lenovo)",
    "-8": "酷派(coolpad)",
    "-9": "荣耀(honor)",
    "-10": "魅族(meizu)",
    "-11": "金立(gionee)",
    "-12": "中兴(zte)",
    "-13": "天语(alps)",
    "-14": "htc(htc)",
    "-15": "诺基亚(nokia)",
    "-16": "索尼(semc)",//两个值16和25
    "-25": "索尼(semc)1",//两个值16和25
    "-17": "黑莓(blackberry)",
    "-18": "海信(hisense)",
    "-19": "lg(lge)",
    "-20": "tcl(tcl)",
    "-21": "华硕(asus)",
    "-22": "高通(qcom)",
    "-24": "朵唯(doov)",
    "-28": "摩托罗拉(motorola)",
    "-29": "酷派(yulong)",
    "-30": "展讯通信(sprd)",
    "-31": "乐视(letv)",
    "-32": "酷比(koobee)",
    "-33": "努比亚(nubia)",
    "-34": "htccn(htccn)",
    "-35": "语信(yusun)",
    "-37": "generic(generic)",
    "-38": "谷歌(google)",
    "-39": "波导(bird)",
    "-40": "TCL(TCL)",
    "-41": "亿通(eton)",
    "-43": "天语(天语)",
    "-44": "中国移动(中国移动)",//两个值44和69
    "-69": "中国移动(中国移动)1",//两个值44和69
    "-45": "邦华(boway)",
    "-46": "黑莓(黑莓)",
    "-50": "康佳(konka)",
    "-53": "中国移动(cmdc)",
    "-54": "smartfren(smartfren)",
    "-56": "酷珀(kopo)",
    "-57": "长虹(长虹)",
    "-59": "优购(uoogou)",
    "-61": "唯米(唯米)",
    "-65": "一加(oneplus)",
    "-66": "乐丰(lephone)",
    "-67": "锤子(smartisan)",
    "-68": "诺亚信(noain)",
    "-70": "广信(kingsun)",
    "-72": "贝尔丰(bifer)",
    "-73": "美图(meitu)",
    "-75": "赛博宇华(赛博宇华)",
    "-76": "microsoft(microsoft)",
    "-77": "维图(voto)",
    "-80": "海信(marvell)",
    "-81": "米蓝(mlled)",
    "-86": "誉品(yepen)",
    "-87": "爱我(爱我)",
    "-89": "诺基亚(诺基亚)",
    "-91": "步步高(步步高)",
    "-92": "酷比魔方(酷比魔方)",
    "-97": "至尊宝(bestsonny)",
    "-102": "沃普丰(wellphone)",
    "-104": "奇酷(qiku)",
    "-106": "神舟(神舟)",
    "-114": "酷派(酷派)",
    "-117": "奥乐迪奥(aoledior)",
    "-118": "糯米(糯米)",
    "-124": "优米(uimi4)",
    "-127": "唯比(唯比)",
    "-135": "依偎(ivvi)",
    "-215": "金星(jinxing)",
    "-317": "青橙(go)",
    "-340": "小辣椒(xiaolajiao)",
    "-661": "360(360)",
    "-675": "乐视(乐视)",
    "-687": "首云(shown)",
    "-706": "赛博宇华(sop)",
    "-707": "移通(ytone)",
    "-709": "爱我(lovme)",
    "-710": "亿优(eyu)",
    "-711": "金豆子(kdoor)",
    "-712": "长虹(changhong)",
    "-713": "天宏(skyhon)",
    "-715": "先科(sast)",
    "-719": "世纪星(tetc)",
    "-726": "8848(8848)",
    "-728": "宇飞来(yufly)",
    "-732": "糖果(sugar)",
    "-733": "格力(gree)",
    "-734": "黑鲨(blackshark)"
}
// 学历列表
const educations = [
    { label: '博士', value: 'DOCTOR' },
    { label: '硕士', value: 'MASTER' },
    { label: '本科', value: 'BACHELOR' },
    { label: '专科', value: 'JUNIOR_COLLEGE' },
    { label: '高中', value: 'SENIOR' },
    { label: '初中', value: 'JUNIOR' },
    { label: '小学', value: 'PRIMARY' },
]
// 手机系统
const oss = [
    { label: 'iOS 系统', value: 'IOS' },
    { label: 'Android 系统', value: 'ANDROID' },
]
// 手机价格
const deviceprices = [
    { label: '1500元以下', value: '1~14' },
    { label: '1500~2500元', value: '15~24' },
    { label: '2500~3500元', value: '25~34' },
    { label: '3500~4500元', value: '35~44' },
    { label: '4500元以上', value: '45~100' }
]
//运营商
const telcoms = [
    { label: '电信', value: 'CTC' },
    { label: '移动', value: 'CMC' },
    { label: '联通', value: 'CUC' }
]
//联网方式
const connections = [
    { label: 'Wi-Fi', value: 'WIFI' },
    { label: '4G', value: 'NET4G' },
    { label: '3G', value: 'NET3G' },
    { label: '2G', value: 'NET2G' }
]
//再营销
const inactionlist = [
    { label: '已关注你的公众号', value: '101' },
    { label: '曾领取你的微信卡券', value: '301' },
    { label: '曾对你的公众号广告感兴趣', value: '401' },
    { label: '曾对你的朋友圈广告感兴趣', value: '501' },
]
//排除营销
const notinactionlist = [
    { label: '已关注你的公众号', value: '101' },
    { label: '曾领取你的微信卡券', value: '301' },
    { label: '曾对你的公众号广告感兴趣', value: '401' },
    { label: '曾对你的朋友圈广告感兴趣', value: '501' },
    { label: '已添加过企业微信', value: '801' },
]