<template>
  <div class="configLaunchInfo">
    <a-spin :spinning="spinning">
    <a-form :form="form">
         <!-- 投放范围 -->
        <div class="moduler">
            <div class="moduler-title">选择账户</div>
            <div>
            <div class="row-item">
                <div class="hint-item"></div>
                <div class="label-item">
                <div class="text-item">账户</div>
                <div class="required-item"></div>
                </div>
                <div class="input-item">                
                    <Treeselect :appId.sync="accountId" :multiple="false"  request="2,4"   ref="treeSelect" style="margin-bottom:8px;width:600px " />               
                    <!-- <Treeselect :appId.sync="accountId" :multiple="false" request="2" reqUrl='/ctop/projectMember/getProjectAccountByUserId'  ref="treeSelect" style="margin-bottom:8px;width:580px " /> -->
                </div>
            </div>
            </div>
        </div>
     
        <!-- 推广目的 -->
        <div class="moduler">
            <div class="moduler-title">请选择营销目标</div>
            
            <div class="row-item">
                <div class="hint-item">
                </div>
                <div class="label-item">
                <div class="text-item">营销目标</div>
                <div class="required-item"></div>
                </div>
                <div class="input-item">
                    <a-form-item >
                        <a-radio-group   v-decorator="['campaignType',{initialValue:2 }]" @change="campaignTypeChange">
                            <a-radio-button :value="2" :disabled="editRecordId!==''">提升应用安装</a-radio-button>
                            <a-radio-button :value="3" :disabled='true'>获取电商下单</a-radio-button>                                   
                            <a-radio-button :value="4" :disabled='true'>推广品牌活动</a-radio-button>                                   
                            <a-radio-button :value="5" :disabled="editRecordId!==''">收集销售线索</a-radio-button>                                   
                            <a-radio-button :value="7" :disabled="editRecordId!==''">提高应用活跃</a-radio-button>                                   
                        </a-radio-group>
                    </a-form-item>
                </div>
            </div>        
           
        </div>
    
        <!-- 基础信息 -->
        <div class="moduler">
            <div class="moduler-title">请设置基本信息</div>
            
            <!-- <div class="row-item">
                <div class="hint-item"> </div>
                <div class="label-item">
                <div class="text-item">模板名称</div>
                <div class="required-item"></div>
                </div>
                <div class="input-item">
                <a-form-item>                
                    <a-input v-model="strategyName"   allow-clear />
                </a-form-item>
                </div>
            </div>   -->
            <div class="row-item">
                <div class="hint-item"> </div>
                <div class="label-item">
                <div class="text-item">计划命名规范</div>
                <div class="required-item"></div>
                </div>
                <div class="input-item">
                <a-form-item>                
                    <a-input v-decorator="['campaignName',{ rules: [{ required: true, message: '请填写计划的命名规则' }] }]"  allow-clear  id="campaignName"/>
                </a-form-item>
                </div>
            </div>  
            <div class="row-item">
                <div class="hint-item"> </div>
                <div class="label-item">
                <div class="text-item"></div>
                </div>
                <div class="input-item">
                <a-form-item>                
                   <a-tag color="#2db7f5" @click="getChangeAll('日期', 'form', 'campaignName')"
                >+日期</a-tag
              >
              <a-tag color="#2db7f5" @click="getChangeAll('渠道号', 'form', 'campaignName')"
                >+渠道号</a-tag
              >
              <a-tag color="#2db7f5" @click="getChangeAll('渠道号名称', 'form', 'campaignName')"
                >+渠道号名称</a-tag
              >
                </a-form-item>
                </div>
            </div>  
            <div class="row-item">
                <div class="hint-item"> </div>
                <div class="label-item">
                <div class="text-item">广告计划状态</div>
                <div class="required-item"></div>
                </div>
                <div class="input-item">
                <a-form-item>                
                <a-radio-group v-decorator="['campaignStatus', {initialValue:1 }]">
                    <a-radio-button :value="1">投放</a-radio-button>
                    <a-radio-button :value="2">暂停</a-radio-button>
                </a-radio-group>
                </a-form-item>
                </div>
            </div>  

            <div class="row-item">
                <div class="hint-item"> </div>
                <div class="label-item">
                <div class="text-item">广告计划单日预算</div>
                <div class="required-item"></div>
                </div>
                <div class="input-item">
                <a-form-item>                
                <a-radio-group v-model="budgetType">
                    <a-radio-button value="1">不限</a-radio-button>
                    <a-radio-button value="2">统一预算</a-radio-button>
                </a-radio-group>
                </a-form-item>
                </div>
            </div>  

            <div class="row-item" v-if="budgetType == '2'">
                <div class="hint-item"> </div>
                <div class="label-item">
                <div class="text-item"></div>
                <div class="required-item"></div>
                </div>
                <div class="input-item">
                <a-form-item>                
                    <a-input-number
                        v-decorator="[
                        'campaignDayBudget',
                        {
                            rules: [{ required: true, message: '不小于500， 不超过100000000，仅支持输入自然数' }],
                        },
                        ]"
                        :min="500"
                        :precision="0"
                        :max="100000000"
                        style="width: 100%"
                        placeholder="不小于500， 不超过100000000，仅支持输入自然数"
                    />
                </a-form-item>
                </div>
            </div>  


            <div class="row-item">
                <div class="hint-item"> </div>
                <div class="label-item">
                <div class="text-item">组命名规范</div>
                <div class="required-item"></div>
                </div>
                <div class="input-item">
                <a-form-item>                
                    <a-input v-decorator="['groupName',{ rules: [{ required: true, message: '请填写组的命名规则' }] }]"  allow-clear id="groupName"/>
                </a-form-item>
                </div>
            </div>  
            <div class="row-item">
                <div class="hint-item"> </div>
                <div class="label-item">
                <div class="text-item"></div>
                </div>
                <div class="input-item">
                <a-form-item>            
                <a-tag color="#2db7f5" @click="getChangeAll('日期', 'form', 'groupName')">+日期</a-tag>
                <a-tag color="#2db7f5" @click="getChangeAll('素材名称', 'form', 'groupName')">+素材名称</a-tag>    
                   <!-- <a-tag color="#2db7f5" @click="getChangeAll('定向包', 'form', 'groupName')"
                >+定向包</a-tag
              > -->
              <a-tag color="#2db7f5" @click="getChangeAll('应用名称', 'form', 'groupName')">+应用名称</a-tag>
              <a-tag color="#2db7f5" @click="getChangeAll('应用标记', 'form', 'groupName')">+应用标记</a-tag>
              <!-- <a-tag color="#2db7f5" @click="getChangeAll('应用包名', 'form', 'groupName')"
                >+应用包名</a-tag
              > -->
               <a-tag color="#2db7f5" @click="getChangeAll('创意制作方式', 'form', 'groupName')"
                >+创意制作方式</a-tag
              >
               <a-tag color="#2db7f5" @click="getChangeAll('广告位置', 'form', 'groupName')"
                >+广告位置</a-tag
              >
              <a-tag color="#2db7f5" @click="getChangeAll('渠道号', 'form', 'groupName')"
                >+渠道号</a-tag
              >
              <a-tag color="#2db7f5" @click="getChangeAll('渠道号名称', 'form', 'groupName')"
                >+渠道号名称</a-tag
              >
                </a-form-item>
                </div>
            </div>  
            <div class="row-item">
                <div class="hint-item"> </div>
                <div class="label-item">
                <div class="text-item">广告组状态</div>
                <div class="required-item"></div>
                </div>
                <div class="input-item">
                <a-form-item>                
                <a-radio-group v-decorator="['groupStatus', {initialValue:-1 }]">
                    <a-radio-button :value="-1">投放</a-radio-button>
                    <a-radio-button :value="2">暂停</a-radio-button>
                </a-radio-group>
                </a-form-item>
                </div>
            </div>  
            <div class="row-item">
                <div class="hint-item"> </div>
                <div class="label-item">
                <div class="text-item">广告组单日预算</div>
                <div class="required-item"></div>
                </div>
                <div class="input-item">
                <a-form-item>                
                    <a-radio-group v-model="dayBudgetType">
                        <a-radio-button value="1">不限</a-radio-button>
                        <a-radio-button value="2">统一预算</a-radio-button>
                    </a-radio-group>
                </a-form-item>
                </div>
            </div>
            <div class="row-item" v-if="dayBudgetType=='2'">
                <div class="hint-item"> </div>
                <div class="label-item">
                <div class="text-item"></div>
                <div class="required-item"></div>
                </div>
                <div class="input-item">
                <a-form-item>                
                    <a-input-number
                        v-decorator="[
                        'unitDayBudget',
                        {
                            rules: [{ required: true, message: '不小于500， 不超过100000000，仅支持输入自然数' }],
                        },
                        ]"
                        style="width: 100%"
                        placeholder="不小于500， 不超过100000000，仅支持输入自然数"
                        :min="500"
                        :precision="0"
                    />
                </a-form-item>
                </div>
            </div>

            
        </div>
        <div class="moduler" v-if="getData('campaignType') === 2">
                <div class="moduler-title">目标应用</div>
                <div class="ad-range">
                    <div class="row-item" >
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">是否单一应用</div>
                        <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                            <a-form-item  >
                                <a-radio-group  v-decorator="['singleAppid', {initialValue:1 }]" @change="singleAppidChange">
                                <a-radio-button :value="1">是</a-radio-button>
                                <a-radio-button :value="0">否</a-radio-button>
                                </a-radio-group>
                            </a-form-item>                       
                        </div>
                    </div>
                    <div class="row-item" >
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">系统类型</div>
                        <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                            <a-form-item   >
                                <a-radio-group  v-model="sysType" @change="sysTypeChange" >
                                <a-radio-button :value="1">安卓</a-radio-button>
                                <a-radio-button :value="2">IOS</a-radio-button>
                                </a-radio-group>
                            </a-form-item>
                        
                        </div>
                    </div>
                    <div class="row-item" v-if="getFormData('campaignType')==2||getFormData('campaignType')==7">
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">选择应用</div>
                        <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                            <a-form-item>
                                <a-select v-decorator="['appId', { rules: [{ required: true, message: '请选择目标应用' }] }]" showSearch allowClear
                                    placeholder="选择应用目标" optionFilterProp="children" style="width: 500px"  
                                   :filterOption="filterOption" @change="appIdChange" :mode="getFormData('singleAppid')==1?'defalut':'multiple'" :maxTagCount='1' 
                                   :labelInValue="true">
                                    <a-select-option v-if="getFormData('singleAppid')==0" :value='0' @click="selectAllAppId">选择以下全部</a-select-option>
                                    <a-select-option v-for="appModel in appList" :key="appModel.appId" :value="appModel.appId">
                                        {{
                                        appModel.platform | platform
                                        }}&#12288;&#12288;&#12288;{{ appModel.appName }}&#12288;&nbsp;&#12288; {{ appModel.appVersion }}
                                    </a-select-option>
                                </a-select>
                                <a-button type="primary" @click="addApplication" style="margin-left:10px" :loading="tongbuLoading">刷新应用</a-button>
                            </a-form-item>
                        
                        </div>
                    </div>
                    <div class="row-item">
                        <div class="hint-item"></div>
                        <div class="label-item">
                            <div class="text-item">调起链接</div>
                        </div>
                        <div class="input-item">
                            <a-form-item>
                                <a-switch default-checked v-model="uriCheck"/>
                                <span style="color:red"> 需加白使用</span>
                                <div v-if="uriCheck">
                                    <a-input placeholder="请填写链接" v-decorator="['schemaUri', { rules: [{ message:'链接不能为空'}] }]" />
                                
                                </div>
                                
                            </a-form-item>
                        </div>
                    </div>

                    <div class="row-item">
                        <div class="hint-item"></div>
                        <div class="label-item">
                            <div class="text-item">是否使用渠道号</div>
                            <div class="required-item"></div>
                        </div>
                        
                        <div class="input-item">
                            <a-form-item>
                                <a-switch default-checked v-model="useChannel" @change="changeChannel"/>
                            </a-form-item>
                        </div>
                    </div>
                    <div class="row-item" v-if="channelData&&channelData.channel.isHaveItem">
                        <div class="hint-item"></div>
                        <div class="label-item">
                            <div class="text-item">是否使用单品</div>
                            <div class="required-item"></div>
                        </div>
                        
                        <div class="input-item">
                            <a-form-item>
                                <a-radio-group v-model="channelData.channel.isHaveItem" disabled>
                                    <a-radio-button :value="1">是</a-radio-button>
                                    <a-radio-button :value="0">否</a-radio-button>
                                </a-radio-group>
                            </a-form-item>
                        </div>
                    </div>
                    <div class="row-item" v-if="channelData&&channelData.channel.usageLevel">
                        <div class="hint-item"></div>
                        <div class="label-item">
                            <div class="text-item">渠道号作用维度</div>
                            <div class="required-item"></div>
                        </div>
                        
                        <div class="input-item">
                            <a-form-item>
                               <a-radio-group
                                    button-style="solid"
                                    v-model="channelData.channel.usageLevel"
                                    disabled
                                >
                                    <a-radio-button value="account">账户</a-radio-button>
                                    <a-radio-button value="plan">计划</a-radio-button>
                                    <a-radio-button value="group">组</a-radio-button>
                                </a-radio-group>
                            </a-form-item>
                        </div>
                    </div>

                    <div class="row-item" v-if="channelData&&channelData.channel.usageLevel&&channelData.list&&channelData.list.length>0">
                        <div class="hint-item"></div>
                        <div class="label-item">
                            <div class="text-item">渠道号选择</div>
                            <div class="required-item"></div>
                        </div>
                        
                        <div class="input-item">
                            <a-form-item>
                                <a-collapse accordion ref="collapse">
                                    <template v-for="(item, index) in channelData.list">
                                        <a-collapse-panel
                                            :forceRender="true"
                                            :header="item.appName+'(应用标记)'"
                                            style="background: #f9f9fa;border-radius: 4px;margin-bottom:15px;overflow: hidden;border: 1px solid #d9d9d9;"
                                        >
                                            <a-form-item
                                                label="渠道号"
                                                v-bind="formItemLayout"
                                            >
                                                {{item.channelCode}}
                                            </a-form-item>
                                           <a-form-item
                                                label="素材关键字"
                                                v-bind="formItemLayout"
                                            >
                                                {{item.keyword}}
                                            </a-form-item>
                                        </a-collapse-panel>
                                    </template>
                                </a-collapse>
                            </a-form-item>
                        </div>
                    </div>


                    <div class="row-item" v-if="getFormData('singleAppid')==0">
                    <div class="hint-item"></div>
                    <div class="label-item">
                        <div class="text-item">是否多应用分别出价</div>
                        </div>
                        <div class="input-item">
                            <a-form-item  >
                                <a-radio-group  v-decorator="['multipleBids', {initialValue:0 }]">
                                    <a-radio-button :value="0">否</a-radio-button>
                                    <a-radio-button :value="1">是</a-radio-button>
                                </a-radio-group>
                            </a-form-item>         
                        </div>
                    </div>
                    <div class="row-item" v-if="getFormData('multipleBids')==1">
                    <div class="hint-item"></div>
                    <div class="label-item">
                        <div class="text-item">分别出价</div>
                        </div>
                        <div class="input-item">
                            <div style="width:120vh;height:300px;overflow:auto;border:1px solid #f2f2f2;padding:10px">
                                <p v-for="(item,index) in multipleBidData" :key="index" style="display:flex">
                                   
                                   
                                    <span style="white-space:nowrap;line-height: 30px;margin-right: 10px;">OCPM出价</span>
                                    <a-input-number
                                        style="width:150px"
                                        :max="10000"
                                        :step="0.1"
                                        v-model="item.cpaBid"
                                    />
                                    <span style="white-space:nowrap;line-height: 30px;margin-right: 10px;">深度转化出价</span>
                                    <a-input-number
                                        style="width:150px"
                                        :max="10000"
                                        :step="0.1"
                                        v-model="item.deepConversionBid"
                                    />
                                    <span style="margin-left:20px;white-space:nowrap;line-height: 30px;margin-right: 10px;">渠道号</span>
                                    <a-input style="width:150px" placeholder="请填写渠道号" v-model="item.channelCode" />
                                    <a-icon 
                                    @click="checkOneBid(item)"
                                    type="check" style="margin-left:20px;white-space:nowrap;line-height: 30px;margin-right: 10px;cursor:pointer;color:green" />
                                    <span  style="margin:5px;width:50%">{{item.label}}</span>
                                   
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="row-item" v-if="getFormData('campaignType') == 3">
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">转化类型</div>
                        <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                            <a-form-item   >
                                <a-radio-group buttonStyle="solid"
                                v-decorator="['urlType', { rules: [{ required: true, message: '请选择目标应用' }], initialValue: '1' }]">
                                <a-radio-button value="1">淘宝商品</a-radio-button>
                                <a-radio-button value="2">淘客商品</a-radio-button>
                                </a-radio-group>
                            </a-form-item>
                        
                        </div>
                    </div>
                    <div class="row-item" v-if="getFormData('campaignType') == 3||getFormData('campaignType') == 4||getFormData('campaignType') == 5">
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">链接</div>
                        <!-- <div class="required-item"></div> -->
                        </div>
                        <div class="input-item">
                            <a-form-item v-if="getFormData('campaignType') != 2" :class="{ 'else-label': getFormData('campaignType') == 3 }">
                                <a-input placeholder="请填写链接" v-decorator="['url', { rules: [{ required: true,message:'链接不能为空'}] }]" />
                            </a-form-item>
                        
                        </div>
                    </div>

                    <div class="row-item" v-if="getFormData('campaignType') == 2||getFormData('campaignType') == 4||getFormData('campaignType') == 5">
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">转化追踪</div>
                        <!-- <div class="required-item"></div> -->
                        </div>
                        <div class="input-item">
                            <a-form-item  >
                                <span v-if="convertId&&!convert" style="display:block;font-size:16px">已选择转化目标: {{convertId.label}}</span>
                                <a-button type="primary" @click="showConvert">{{convertId?'更换转化目标':'选择转化目标'}}</a-button>
                            </a-form-item>
                            <div style="margin-top:10px">
                                <a-form-item v-if="sysType==1" >

                                    <a-checkbox v-decorator="[
                                    'useAppMarket',
                                    {
                                        valuePropName: 'checked',
                                        initialValue: false,
                                    },
                                    ]">
                                    优先从系统应用商店下载
                                    </a-checkbox>
                                </a-form-item>
                                <a-form-item  v-if="sysType==1&&getData('useAppMarket')">
                                    请勾选投放应用已上架的应用商店（默认全选）
                                    <a-checkbox-group v-model="appStore">
                                    <a-checkbox value="huawei">华为</a-checkbox>
                                    <a-checkbox value="oppo">OPPO</a-checkbox>
                                    <a-checkbox value="vivo">VIVO</a-checkbox>
                                    <a-checkbox value="xiaomi">小米</a-checkbox>
                                    <a-checkbox value="meizu">魅族</a-checkbox>
                                    <a-checkbox value="smartisan">锤子</a-checkbox>
                                    </a-checkbox-group>
                                </a-form-item>
                            </div>
                        </div>
                    </div>

                </div>        
             
        </div>
        <div class="moduler" v-if="getData('campaignType') === 5">
                <div class="moduler-title">链接</div>
                <div class="ad-range">
                    <div class="row-item">
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">链接</div>
                        <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                            <a-form-item>
                                <a-input placeholder="请填写链接" v-decorator="['url', { rules: [{ required: true,message:'链接不能为空'}] }]" />
                            </a-form-item>
                        
                        </div>
                    </div>

                    <div class="row-item" v-if="getFormData('campaignType') == 2||getFormData('campaignType') == 4||getFormData('campaignType') == 5">
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">转化追踪</div>
                        <!-- <div class="required-item"></div> -->
                        </div>
                        <div class="input-item">
                            <a-form-item  >
                                <span v-if="convertId&&!convert" style="display:block;font-size:16px">已选择转化目标: {{convertId.label}}</span>
                                <a-button type="primary" @click="showConvert">{{convertId?'更换转化目标':'选择转化目标'}}</a-button>
                            </a-form-item>
                        </div>
                    </div>

                </div>        
             
        </div>
        <div class="moduler" v-if="getData('campaignType') === 7">
            <div class="moduler-title">链接</div>
            <div class="row-item">
                <div class="hint-item"></div>
                <div class="label-item">
                <div class="text-item">选择应用</div>
                <div class="required-item"></div>
                </div>
                <div class="input-item">
                    <a-form-item>
                        <a-select v-decorator="['appId', { rules: [{ required: true, message: '请选择目标应用' }] }]" showSearch allowClear
                            placeholder="选择应用目标" optionFilterProp="children" style="width: 500px"  
                            :filterOption="filterOption" @change="appIdChange" :labelInValue="true">
                            <a-select-option v-for="appModel in appList" :key="appModel.appId" :value="appModel.appId">
                                {{ appModel.appName }}&#12288;&nbsp;&#12288; {{ appModel.appVersion }}&#12288;&#12288;&#12288;{{
                                appModel.platform | platform
                                }}
                            </a-select-option>
                        </a-select>
                        <a-button type="primary" @click="addApplication" style="margin-left:10px" :loading="tongbuLoading">刷新应用</a-button>
                    </a-form-item>
                
                </div>
            </div>


                <div class="row-item">
                    <div class="hint-item"></div>
                    <div class="label-item">
                    <div class="text-item">调起链接</div>
                    <div class="required-item"></div>
                    </div>
                    <div class="input-item">
                        <a-form-item>
                            <a-input placeholder="请填写链接" v-decorator="['schemaUri', { rules: [{ required: true,message:'链接不能为空'}] }]" />
                        </a-form-item>
                    </div>
                </div>


                <div class="row-item">
                    <div class="hint-item"></div>
                    <div class="label-item">
                    <div class="text-item">H5链接</div>
                    <div class="required-item"></div>
                    </div>
                    <div class="input-item">
                        <a-form-item>
                            <a-input placeholder="请填写H5链接" v-decorator="['url', { rules: [{ required: true,message:'H5链接不能为空'}] }]" />
                        </a-form-item>
                    
                    </div>
                </div>

      
             
        </div>
        <div class="moduler">
            <div class="moduler-title">用户定向
            <!-- <div style="margin-left:30px;position:relative;top:-2px">
                <a-radio-group v-model="useDirectional" @change="useDirectionalChange">
                    <a-radio :value="1">
                        不使用定向
                    </a-radio>
                    <a-radio :value="0">
                        使用定向包
                    </a-radio>
                </a-radio-group>
            </div> -->
            </div>
            <div class="ad-range" v-if="useDirectional==1">
                    <div class="row-item">
                        <div class="hint-item"></div>
                            <div class="label-item">
                            <div class="text-item">地域</div>
                            <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                            <a-form-item>
                                <a-radio-group   v-model="district" @change="cityChange">
                                    <a-radio-button value="NONE">不限</a-radio-button>
                                    <a-radio-button value="CITY">按省市</a-radio-button>
                                    <!-- <a-radio-button value="COUNTY">按区县</a-radio-button> -->
                                    
                                </a-radio-group>
                            </a-form-item>
                            <div class="region" style="margin-top:20px" v-show="district!='NONE'">
                                <!-- 省市 -->
                                <div class="provincyCity" v-if="district=='CITY'">                                                                 
                                    <!-- <linkMultiSelect title='省份' :listArr='regionList' :maxLayers='2' :listUrl='regionCityListUrl' @getSelectedArr='getSelectedCityArr'/> -->
                                     <select-region :checkData.sync="regionList" :dataValue="regionList" />
                                </div>
                                <!-- 区县 -->
                                <!-- <div class="district" v-else-if="district=='COUNTY'">                                    
                                    <linkMultiSelect title='省份' :listArr='regionList' :maxLayers='3' :listUrl='regionCityListUrl'  @getSelectedArr='getSelectedCountyArr'/>
                                </div> -->

                            </div> 
                        </div>
                    </div>
                    <div class="row-item">
                        <div class="hint-item"></div>
                            <div class="label-item">
                            <div class="text-item">性别</div>
                            <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                            <a-form-item>
                                 <a-radio-group  v-decorator="['gender', {initialValue:0 }]"  >
                                    <a-radio-button :value="0">不限</a-radio-button>
                                    <a-radio-button :value="2">男</a-radio-button>
                                    <a-radio-button :value="1">女</a-radio-button>
                                </a-radio-group>
                            </a-form-item>
                        </div>
                    </div>
                    <div class="row-item">
                        <div class="hint-item"></div>
                            <div class="label-item">
                            <div class="text-item">年龄</div>
                            <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                            <a-form-item>
                                <radioCheck v-model="agesRange"  :options="ageArr" @change='getAgeSelect'   />
                            </a-form-item>
                        </div>
                    </div>
                    <div class="row-item">
                        <div class="hint-item"></div>
                            <div class="label-item">
                            <div class="text-item">操作系统</div>
                            <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                            <a-form-item>
                                 <a-radio-group  v-decorator="['platformOs', {initialValue:1 }]" @change="platformOsChange">
                                    <!-- <a-radio-button :value="0">不限</a-radio-button> -->
                                    <a-radio-button :value="1">Android</a-radio-button>
                                    <a-radio-button :value="2">IOS</a-radio-button>
                                </a-radio-group>
                            </a-form-item>

                            <div style="margin-top:24px"  v-if="getFormData('platformOs')!=0">
                                <div v-if="getFormData('platformOs')==1">
                                    <a-form-item>
                                    <a-radio-group v-decorator="['androidOsv',{initialValue: 3,}]">
                                        <a-radio :value="3">不限</a-radio>
                                        <a-radio :value="4">4x+</a-radio>
                                        <a-radio :value="5">5x+</a-radio>
                                        <a-radio :value="6">6x+</a-radio>
                                        <a-radio :value="7">7x+</a-radio>
                                    </a-radio-group>
                                    </a-form-item>
                                </div>
                                <div v-if="getFormData('platformOs')==2">
                                    <a-form-item>
                                    <a-radio-group  v-decorator="['iosOsv',{initialValue: 6,}]">
                                        <a-radio :value="6">不限</a-radio>
                                        <a-radio :value="7">7x+</a-radio>
                                        <a-radio :value="8">8x+</a-radio>
                                        <a-radio :value="9">9x+</a-radio>
                                        <a-radio :value="10">10x+</a-radio>
                                    </a-radio-group>
                                    </a-form-item>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                    <div class="row-item" v-if="getFormData('platformOs')!=2">
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">设备品牌</div>
                        <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                        <a-form-item>
                            <a-radio-group v-model="deviceBrand">
                                <a-radio-button :value="0">不限</a-radio-button>
                                <a-radio-button :value="1">选择品牌</a-radio-button>                      
                            </a-radio-group>
                        </a-form-item>
                        <div style="width: 400px; margin-top: 24px;" class="inventoryTypes" v-if="deviceBrand==1">
                            <div class="inventory-tags-lists-header" style="padding-left:15px">
                                
                            <div class="inventory-tags-lists-name"><strong>品牌名称</strong></div>
                            </div>
                            <div class="inventory-tags-lists-container" >
                                <a-form-item>
                                <a-checkbox-group
                                    v-decorator="['deviceBrand', { rules: [{ required: true, message: '请选择设备品牌' }] }]"
                                >
                                <a-checkbox :value="1" style="margin-bottom: 8px">OPPO</a-checkbox>
                                <a-checkbox :value="2" style="margin-bottom: 8px">VIVO</a-checkbox>
                                <a-checkbox :value="3" style="margin-bottom: 8px">华为</a-checkbox>
                                <a-checkbox :value="4" style="margin-bottom: 8px">小米</a-checkbox>
                                <a-checkbox :value="5" style="margin-bottom: 8px">荣耀</a-checkbox>
                                <a-checkbox :value="6" style="margin-bottom: 8px">三星</a-checkbox>
                                <a-checkbox :value="7" style="margin-bottom: 8px">金立</a-checkbox>
                                <a-checkbox :value="8" style="margin: 0 0 8px 0">魅族</a-checkbox>
                                <a-checkbox :value="9" style="margin-bottom: 8px">乐视</a-checkbox>
                                <a-checkbox :value="10" style="margin-bottom: 8px">其他</a-checkbox>
                                <a-checkbox :value="11" v-if="getFormData('platformOs') == 0" style="margin-bottom: 8px">苹果</a-checkbox>
                                </a-checkbox-group>
                                 </a-form-item>
                            </div>
                        </div>                  
                        
                        </div>
                    </div>
                    <div class="row-item">
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">设备价格</div>
                        <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                        <a-form-item>
                            <a-radio-group v-model="devicePrice">
                                <a-radio-button :value="0">不限</a-radio-button>
                                <a-radio-button :value="1">选择价格</a-radio-button>                      
                            </a-radio-group>
                        </a-form-item>
                        <div style="width: 400px; margin-top: 24px;" class="inventoryTypes" v-if="devicePrice==1">
                            <div class="inventory-tags-lists-header" style="padding-left:15px">
                                
                            <div class="inventory-tags-lists-name"><strong>价格区间</strong></div>
                            </div>
                            <div class="inventory-tags-lists-container" >
                                 <a-form-item>
                                <a-checkbox-group
                                v-decorator="['devicePrice', { rules: [{ required: true, message: '请选择设备价格' }] }]"
                                style="width: 120%"
                                >
                                <a-checkbox :value="1" style="margin-bottom: 8px">1500以下</a-checkbox>
                                <a-checkbox :value="2" style="margin-bottom: 8px">1501~2000</a-checkbox>
                                <a-checkbox :value="3" style="margin-bottom: 8px">2001~2500</a-checkbox>
                                <a-checkbox :value="4" style="margin-bottom: 8px">2501~3000</a-checkbox>
                                <a-checkbox :value="5" style="margin-left: 0; margin-bottom: 8px">3001~3500</a-checkbox>
                                <a-checkbox :value="6" style="margin-bottom: 8px">3501~4000</a-checkbox>
                                <a-checkbox :value="7" style="margin-bottom: 8px">4001~4500</a-checkbox>
                                <a-checkbox :value="8" style="margin-bottom: 8px">4501~5000</a-checkbox>
                                <a-checkbox :value="9" style="margin-left: 0; margin-bottom: 8px">5001~5500</a-checkbox>
                                <a-checkbox :value="10" style="margin-bottom: 8px">5500以上</a-checkbox>
                                </a-checkbox-group>
                                 </a-form-item>
                            </div>
                        </div>                  
                        
                        </div>
                    </div>

                    <div class="row-item">
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">投放时段</div>
                        <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                        <a-form-item>
                            <a-radio-group v-model="scheduleTimeType" >
                                <a-radio-button value=''>不限</a-radio-button>
                                <a-radio-button value="SpecifiedTImePeriod">指定时间段</a-radio-button>
                            </a-radio-group>
                            <div
                            v-show="scheduleTimeType=='SpecifiedTImePeriod'"
                            style="margin-top:15px"
                            >
                            <scheduleTime
                                style="width:100%"
                                :scheduleTime.sync="scheduleTimeData"
                                ref="selectCheck"
                            />
                            </div>
                        </a-form-item>
                        </div>
                    </div>


                    <div class="row-item" v-if="getFormData('platformOs')==1">
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">APP行为</div>
                        <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                            <a-form-item>
                                <a-radio-group v-model="appType" @change="getAppType">
                                    <a-radio-button value="0">不限</a-radio-button>
                                    <a-radio-button value="1">按分类</a-radio-button>
                                    <a-radio-button value="2">按APP名称</a-radio-button>    
                                </a-radio-group>
                            </a-form-item>
                            <a-form-item v-if="appType==='1'">
                                <a-select
                                    mode="multiple"
                                    style="width: 100%"
                                    optionFilterProp="children"
                                    showSearch
                                    :filterOption="filterOption"
                                    v-decorator="['appInterest', { rules: [{ required: true, message: '请选择APP行为' }] }]"
                                >
                                    <a-select-option v-for="item in optionsAppActive" :key="item.tagId" :value="item.tagId">{{
                                    item.tagName
                                    }}</a-select-option>
                                </a-select>
                            </a-form-item>
                            <a-form-item v-if="appType==='2'">
                                <div style="position: relative" v-clickoutside="handleClose">
                                    <a-input
                                    placeholder="请输入搜索内容"
                                    @change="getAppAll"
                                    @focus="getAppAllElse"
                                    style="width: 100%; position: relative"
                                    v-model="appListValue"
                                    />
                                    <div
                                    style="
                                        width: 100%;
                                        position: absolute;
                                        z-index: 10;
                                        height: 200px;
                                        background: white;
                                        overflow: auto;
                                        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
                                    "
                                    v-if="closeDialog"
                                    >
                                    <ul>
                                        <li style="padding: 0 10px">
                                        <a-checkbox
                                            style="float: left; margin: 0 5px"
                                            @change="onCheckAllChangeApp"
                                            :indeterminate="indeterminateApp"
                                            :checked="checkAllApp"
                                        ></a-checkbox
                                        >全选
                                        </li>
                                        <a-checkbox-group @change="onChangeApp" v-model="checkArr" class="home-card" style="width: 100%">
                                        <li style="padding: 0 10px; width: 100%" v-for="item of optionsApp" :key="item.appId">
                                            <a-checkbox :value="item.appId" style="float: left; margin: 0 5px"></a-checkbox>{{ item.appName }}
                                        </li>
                                        </a-checkbox-group>
                                    </ul>
                                    </div>
                                    <div style="width: 100%" v-if="optionsAll.length > 0">
                                        <a-tag v-for="item of optionsAll" :key="item" closable :afterClose="() => log(item)">
                                            {{ showAppName(item) ? showAppName(item) : item }}
                                        </a-tag>
                                    </div>
                                </div>
                            </a-form-item>
               
                        
                        </div>
                    </div>


                    <div class="row-item">
                        <div class="hint-item"></div>
                            <div class="label-item">
                            <div class="text-item">自定义人群</div>
                            <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                            <a-form-item>
                                 <a-radio-group   v-decorator="['customCrowd', {initialValue:'0' }]"  @change="customCrowdChange">
                                    <a-radio-button value="0">不限</a-radio-button>
                                    <a-radio-button value="1">定向</a-radio-button>                           
                                    <a-radio-button value="2">排除</a-radio-button>                           
                                    <a-radio-button value="3">同时定向排除</a-radio-button>                           
                                </a-radio-group>
                            </a-form-item>
                            <div class="dingxiang_paichu" v-if="getFormData('customCrowd')&&getFormData('customCrowd')!='0'" style="width:60%">
                                    <a-tabs v-model="tabKey" @change="retargetTabChange"  >
                                        <a-tab-pane key="1" tab="定向池" v-if="getFormData('customCrowd')!='2'">
                                            <a-table
                                                :columns="retargetColumns"
                                                :row-key="record => record.key"
                                                :data-source="retargetDataAll"                                        
                                                :loading="loading"
                                                style="width:100%;margin:15px 0"
                                                :pagination='false'
                                                @change="retargetTableChange"
                                                :scroll="{ y: 250 }"
                                                :row-selection="rowSelection"
                                                bordered
                                            >
                                                <template slot="name" slot-scope="name"> {{ name }} </template>
                                                <template slot="populationType" slot-scope="populationType"> {{ populationType | customCrowdHandler}} </template>
                                            </a-table>
                                        </a-tab-pane>
                                        <a-tab-pane key="2" tab="排除池" v-if="getFormData('customCrowd')!='1'">
                                            <a-table
                                                :columns="retargetColumns"
                                                :row-key="record => record.key"
                                                :data-source="retargetDataAll"                                        
                                                :loading="loading"
                                                style="width:100%;margin:15px 0"
                                                :pagination='false'
                                                @change="retargetTableChange"
                                                :scroll="{ y: 250 }"
                                                :row-selection="rowSelection2"
                                                bordered
                                            >
                                                <template slot="name" slot-scope="name"> {{ name }} </template>
                                                <template slot="populationType" slot-scope="populationType"> {{ populationType |customCrowdHandler}} </template>
                                            </a-table>
                                        </a-tab-pane>
                                        <a-button slot="tabBarExtraContent" type='primary' @click="refreshPopulation" :loading='refreshPopulationLoading'>刷新人群包</a-button>
                                    </a-tabs>
                                    
                            </div>  
                        </div>
                    </div>
                    <div class="row-item">
                        <div class="hint-item"></div>
                            <div class="label-item">
                            <div class="text-item">过滤已转化用户</div>
                            <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                            <a-form-item>
                                <a-radio-group  v-decorator="['filterConvertedLevel', { initialValue: 0 }]">
                                    <a-radio-button :value="0">不限</a-radio-button>
                                    <a-radio-button :value="1">广告组</a-radio-button>
                                    <a-radio-button :value="2">广告计划</a-radio-button>
                                    <a-radio-button :value="3">本账户</a-radio-button>
                                    <a-radio-button :value="4">公司主体</a-radio-button>
                                    <a-radio-button :value="5" :disabled="getData('campaignType')===5||getData('campaignType')===7">APP</a-radio-button>
                                </a-radio-group>
                            </a-form-item>
                        </div>
                    </div>
                    
                    <div class="row-item" >
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">是否开启智能扩量</div>
                        <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                        <a-form-item>
                            <a-radio-group v-decorator="['isOpen', { initialValue: 0 }]" @change="isOpenChange">
                                <a-radio-button :value='0'>关闭</a-radio-button>
                                <a-radio-button :value="1">开启</a-radio-button>                            
                            </a-radio-group>
                        </a-form-item>
                        <div style="width: 400px; margin-top: 24px;" class="inventoryTypes" v-show="getFormData('isOpen')==1">
                            <div class="inventory-tags-lists-container">
                                <a-checkbox v-model="noAgeBreak">不可突破年龄</a-checkbox>
                                <a-checkbox v-model="noGenderBreak">不可突破性别</a-checkbox>
                                <a-checkbox v-model="noAreaBreak">不可突破地域</a-checkbox>
                            </div>
                        </div>                  
                        </div>
                    </div>
            </div>
            <div class="ad-range2" v-if="useDirectional==0">
                <div style="position:relative" class="ad-range2-title">
                    <span>当前选择模板数量：{{directionalCheckedList.length}}</span>
                    <a-checkbox :indeterminate="indeterminateDirectional" :checked="checkAllDirectional" @change="onCheckAllDirectionalChange" class="quanxuanDirectional">
                    <span>点击全选</span>
                    </a-checkbox>   
                </div>
                
                <a-spin :spinning="directionalSpinning">   
                <div class="title-list"> 
                        
                    <a-checkbox-group v-model="directionalCheckedList" @change="directionalChange">
                        <div class="title-item" v-for="(item,index) in directionalList" :key='index'>
                        <label>
                            <a-checkbox :value='item.id'>
                                {{item.templateName+'_('+item.id+')'}}
                            </a-checkbox>
                        </label>
                        </div>
                    </a-checkbox-group>             
                </div>
                </a-spin>
            </div>
        </div>

        <!-- <div class="moduler">
            <div class="moduler-title">预算和排期</div>
            <div class="ad-range">
                <div class="row-item" >
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">投放时间</div>
                        <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                        <a-form-item>
                            <a-radio-group v-decorator="['scheduleType', { initialValue:'SCHEDULE_FROM_NOW' }]" @change="scheduleTypeChange">
                            <a-radio-button value="SCHEDULE_FROM_NOW">从今天起长期投放</a-radio-button>
                            <a-radio-button value="SCHEDULE_START_END">设置开始和结束时间</a-radio-button>
                            </a-radio-group>
                            <p style="margin-top:15px">
                            <a-range-picker
                                @change="dateChange"
                                v-model="dateRange"
                                :disabled-date="disabledDate" 
                                v-if="getFormData('scheduleType')=='SCHEDULE_START_END'"
                            />
                            </p>
                        </a-form-item>
                        </div>
                    </div>

                    <div class="row-item">
                      <div class="hint-item">
                      </div>
                      <div class="label-item">
                        <div class="text-item">策略预算</div>
                        <div class="required-item"></div>
                      </div>
                      <div class="input-item">
                        <a-form-item>
                            <a-radio-group v-decorator="['strategyBudget', { initialValue:'' }]" >
                                <a-radio-button value=''>不限</a-radio-button>
                                <a-radio-button value="unifiedBudget">统一预算</a-radio-button>
                            </a-radio-group>
                            <a-input-group compact v-if="getFormData('strategyBudget')=='unifiedBudget'" style="margin-top:20px">
                                <a-select :disabled="true" v-decorator="['budgetMode', { initialValue:'TOTAL' }]">
                                <a-select-option value="TOTAL" >总预算</a-select-option>
                                <a-select-option
                                    value="TOTAL"
                                    v-if="getFormData('smartBidType')=='SMART_BID_CUSTOM'"
                                >总预算</a-select-option>
                                </a-select>
                                <a-input style="width: 25%" v-decorator="['budget', { initialValue:300 }]" />
                            </a-input-group>
                            <span class="tip" v-if="getFormData('budget')<300">请输入预算，不少于300元，不超过9999999.99元</span>
                        </a-form-item>
                      </div>
                    </div>
  
            </div>
        </div> -->


        <div class="moduler">
            <div class="moduler-title">优化目标和付费</div>
            <div class="ad-range">
                    <div class="row-item" >
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">优化目标</div>
                        <!-- <div class="required-item"></div> -->
                        </div>
                        <div class="input-item">
                            <a-form-item>
                                <a-radio-group v-decorator="['bidType', { initialValue:10 }]" @change="bidTypeChange">
                                    <!-- <a-radio-button :value="2">封面点击数</a-radio-button> -->
                                    <a-radio-button :value="10">转化数</a-radio-button>
                                </a-radio-group>
                            
                            </a-form-item>
                        </div>
                    </div>
                    <div class="row-item" v-if="getFormData('bidType')==10">
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">转化目标</div>
                        <!-- <div class="required-item"></div> -->
                        </div>
                        <div class="input-item">
                        <a-form-item>
                            <a-select size="default" v-decorator="['ocpxActionType']" style="width: 200px" @change="handleChange">
                            

                                <a-select-option :value="2">行为数</a-select-option>
                                <!-- v-if="getFormData('campaignType') == 2 && groupTypeData.isActivate == 1 -->
                                <a-select-option :value="180" >激活</a-select-option>
                                <a-select-option :value="53" v-if="
                                    groupTypeData.isFormSubmit == '1'
                                ">表单提交</a-select-option>

                                <a-select-option :value="394" v-if="
                                    groupTypeData.isOrderSubmit == '1'
                                ">订单提交</a-select-option>
                                <a-select-option :value="348" v-if="
                                    groupTypeData.isValidClue == '1'
                                ">使用有效线索</a-select-option>
                                <a-select-option :value="383" v-if="
                                    groupTypeData.isCreditGrant == '1'
                                ">授信出价</a-select-option>
                                <a-select-option :value="384" v-if="
                                    groupTypeData.isWanJian == '1'
                                ">完件出价</a-select-option>
                                <a-select-option :value="190" v-if="
                                    groupTypeData.isPurchase == '1'
                                ">付费出价</a-select-option>
                                <a-select-option :value="191" v-if="
                                    groupTypeData.isFirstdayRoi == '1'
                                ">首日ROI</a-select-option>
                                <a-select-option :value="396" v-if="
                                    groupTypeData.isRegister == '1'
                                ">注册优化目标</a-select-option>


                                <a-select-option :value="324" v-if="
                                    groupTypeData.isAppInvoked == '1'
                                ">唤起应用</a-select-option>
                                <a-select-option :value="715" v-if="
                                    groupTypeData.isAddWechat == '1'
                                ">微信复制优化目标</a-select-option>
                                <a-select-option :value="716" v-if="
                                    groupTypeData.isMultiConversion == '1'
                                ">多转化事件</a-select-option>
                                <a-select-option :value="717" v-if="
                                    groupTypeData.isAdWatchTimes == '1'
                                ">广告观看次数</a-select-option>
                                
                                
                                <a-select-option :value="773" v-if="
                                    groupTypeData.isKeyAction == '1'
                                ">关键行为</a-select-option>
                            </a-select>

                           
                        </a-form-item>
                        </div>
                    </div>
                    <div class="row-item" v-if="(getFormData('ocpxActionType') == 180 || getFormData('ocpxActionType') == 53) && groupTypeData.deepConversionTypes && groupTypeData.deepConversionTypes.length > 0 ">
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">深度转化目标</div>
                        <!-- <div class="required-item"></div> -->
                        </div>
                        <div class="input-item">
                        <a-form-item>
                            <a-select v-decorator="['deepConversionType']" allowClear style="width: 200px">
                                <a-select-option v-for="(items, index) of groupTypeData.deepConversionTypes" :key="index" :value='items.deepConversionType'>
                                {{ items.desc }}</a-select-option>
                            </a-select>
                        </a-form-item>
                        </div>
                    </div>
                    
                    <div class="row-item" >
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">计费方式</div>
                        <!-- <div class="required-item"></div> -->
                        </div>
                        <div class="input-item">
                            <a-form-item>
                                <a-radio-group v-model="chargeMethods">
                                    <a-radio-button v-if="getFormData('bidType')==2" value="CPC">点击计费（CPC）</a-radio-button>
                                    <a-radio-button v-if="getFormData('bidType')==10" value="OCPM">按展示付费（oCPM）</a-radio-button>
                                </a-radio-group>
                            
                            </a-form-item>
                        </div>
                    </div>

                    <div class="row-item" v-if="getFormData('bidType')==2">
                        <div class="hint-item">
                        </div>
                        <div class="label-item">
                            <div class="text-item">点击出价</div>
                            <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                            <a-form-item>
                                <a-input-number
                                    style="width:200px"
                                    :max="10000"
                                    :step="0.1"
                                    v-decorator="['bid', {rules:validationRules.bid} ]"
                                />
                                <span style="margin-left:5px">元</span>
                                <!-- <span    style="margin-left:20px">请填入必填字段，获取建议出价</span> -->
                            </a-form-item>
                                <span
                                class="tip"
                                v-if="getFormData('bid')<0.1"
                                >请输入点击出价，不少于0.1元，不超过10000元</span>
                        </div>    
                    </div>
                    
                    <div class="row-item" v-if="getFormData('bidType')==10&&getFormData('ocpxActionType')!= 191&&getFormData('multipleBids')!==1">
                        <div class="hint-item">
                        </div>
                        <div class="label-item">
                            <div class="text-item">转化目标出价</div>
                            <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                            <a-form-item>
                                <!-- <a-input-number
                                    style="width:200px"
                                    :max="10000"
                                    :step="0.1"
                                    v-decorator="['cpaBid', {rules:validationRules.bid} ]"
                                /> -->
                                <a-input style="width:200px;ime-mode:disabled" v-decorator="['cpaBid', {rules:validationRules.bid} ]" @blur="checkCpaBid"
                                @keypress="keyDown">
                                    
                                </a-input>
                                <span style="margin-left:5px">元</span>
                                <br>
                                <span style="color:red">单出价请输入单数字，阶梯出价请用/隔开</span>
                            </a-form-item>
                                <span
                                class="tip"
                                v-if="checkCpaBidBloon"
                                >不允许出现除"-"和"/"之外的所有字符，并且二者不可同时出现</span>
                        </div>    
                    </div>
                    <div class="row-item" v-if="getFormData('bidType')==10&&getFormData('ocpxActionType') == 191">
                        <div class="hint-item">
                        </div>
                        <div class="label-item">
                            <div class="text-item">ROI系数</div>
                            <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                            <a-form-item>
                                <a-input-number
                                    style="width:200px"
                                    :max="100"
                                    :min="0"
                                    :step="0.01"
                                    v-decorator="['roiRatio', { rules: [{ required: true, message: 'ROI系数必填' }] }]"
                                />
                                <span style="margin-left:5px">元</span>
                              
                            </a-form-item>
                                <span
                                class="tip"
                                v-if="getFormData('cpaBid')<0.1"
                                >请输入点击出价，不少于0.1元，不超过10000元</span>
                        </div>    
                    </div>
                    
                    <div class="row-item" v-if="(getFormData('ocpxActionType') == 180 || getFormData('ocpxActionType') == 53) 
                    && groupTypeData.deepConversionTypes && groupTypeData.deepConversionTypes.length > 0 && getFormData('multipleBids')!==1 ">
                        <div class="hint-item">
                        </div>
                        <div class="label-item">
                            <div class="text-item">深度转化目标出价</div>
                            <!-- <div class="required-item"></div> -->
                            <!-- {{getFormData('deepConversionBid')}} -->
                        </div>
                        <div class="input-item">
                            <a-form-item>
                                <a-input-number
                                    style="width:200px"
                                    :max="10000"
                                    :step="0.1"
                                    v-decorator="['deepConversionBid' ]"
                                />
                                <span style="margin-left:5px">元</span>
                                <!-- <span    style="margin-left:20px">请填入必填字段，获取建议出价</span> -->
                            </a-form-item>
                                <!-- <span
                                class="tip"
                                v-if="getFormData('deepConversionBid')<0.1"
                                >请输入点击出价，不少于0.1元，不超过10000元</span> -->
                        </div>    
                    </div>
                    
                    
  
            </div>
        </div>
        
        <div class="moduler">
            <div class="moduler-title">创意信息</div>
                <div class="ad-range">



                    <div class="row-item">
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">创意制作方式</div>
                        <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                        <a-form-item>
                            <a-radio-group v-decorator="['openProgramCreate', { initialValue:2 }]" @change="adposition=1;checkedList=[];checkAll=false">
                                <a-radio-button :value='2'>不限</a-radio-button>
                                <a-radio-button :value="0">自定义</a-radio-button>                            
                                <a-radio-button :value="1">程序化</a-radio-button>                            
                            </a-radio-group>
                        </a-form-item>                       
                        </div>
                    </div>
                    <div class="row-item">
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">广告位置</div>
                        <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                        <a-form-item>
                            <a-radio-group v-model="adposition" @change="adpositionChange">
                                <a-radio-button :value='1'>优选广告位</a-radio-button>
                                <a-radio-button value="inventoryTypes">按媒体指定位置</a-radio-button>    
                                <a-radio-button :value='5'>联盟广告</a-radio-button>
                            </a-radio-group>
                        </a-form-item>
                        <div style="width: 400px; margin-top: 24px;" class="inventoryTypes" v-show="adposition=='inventoryTypes'">
                            <div class="inventory-tags-lists-header">
                                <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
                                </a-checkbox>
                            <div class="inventory-tags-lists-name"><strong>APP名称</strong></div>
                            </div>
                            <div class="inventory-tags-lists-container">
                                <a-checkbox-group v-model="checkedList" @change="onChange" >

                                    <a-checkbox :value="item.value" v-for="(item,index) in plainOptions" :key="index" :disabled="item.value==3&&getData('openProgramCreate')==1">
                                        {{item.label}}
                                    </a-checkbox>

                                </a-checkbox-group>
                            </div>
                        </div>
                        
                        </div>
                    </div>

                    <div class="row-item">
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">关联封面数</div>
                        <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                            <a-form-item >
                                <a-input-number
                                    style="width:200px"
                                    :max="15"
                                    :step="1"
                                    :min='1'
                                    v-decorator="['imageCnt',{ initialValue:5, rules: [{ required: true, message: '请填写关联封面数' }] } ]"
                                    @change="setImageCnt"
                                />
                          </a-form-item>
                                
                        </div>
                    </div>

                    <div class="row-item" v-if="getData('openProgramCreate')!=1">
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">自定义组上限</div>
                        <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                        <a-form-item>
                            <a-input-number
                                v-decorator="['customUnitCnt',{ initialValue:400, rules: [{ required: true, message: '请填写自定义组上限' }] } ]"
                                style="width: 100%"
                                placeholder="仅支持输入自然数"
                                :max="customUnitCntMax"
                                :precision="0"
                            />
                        </a-form-item>                       
                        </div>
                    </div>


                    <div class="row-item" v-if="getData('openProgramCreate')!=0">
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">程序化组上限</div>
                        <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                        <a-form-item>
                            <a-input-number
                                v-decorator="['programUnitCnt',{ initialValue:300, rules: [{ required: true, message: '请填写程序化组上限' }] } ]"
                                style="width: 100%"
                                placeholder="仅支持输入自然数"
                                :max="300"
                                :precision="0"
                            />
                        </a-form-item>                       
                        </div>
                    </div>

                    <div class="row-item">
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">素材类型</div>
                        <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                        <a-form-item>
                            <a-radio-group v-decorator="['channelType', { initialValue:2 }]">
                                <a-radio-button :value='2'>不限</a-radio-button>
                                <a-radio-button :value="0">内部</a-radio-button>                            
                                <a-radio-button :value="1">素造</a-radio-button>                            
                            </a-radio-group>
                        </a-form-item>                       
                        </div>
                    </div>
                    <div class="row-item">
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">是否开启历史素材挖掘</div>
                        <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                        <a-form-item>
                            <a-radio-group v-decorator="['assetMining', { initialValue:0 }]">
                                <a-radio-button :value='1'>是</a-radio-button>
                                <a-radio-button :value="0">否</a-radio-button>                            
                            </a-radio-group>
                        </a-form-item>                       
                        </div>
                    </div>
                    <div class="row-item" >
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">是否开启智能抽帧</div>
                        <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                        <a-form-item>
                            <a-radio-group v-decorator="['smartCover', { initialValue:0 }]">
                                <a-radio-button :value='1'>是</a-radio-button>
                                <a-radio-button :value="0">否</a-radio-button>                            
                            </a-radio-group>
                        </a-form-item>                       
                        </div>
                    </div>
                    <div class="row-item" v-if="getData('singleAppid') == 1">
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">下载详情</div>
                        <!-- <div class="required-item"></div> -->
                        </div>
                        <div class="input-item" >
                            
                                <a-form-item>
                                <a-select
                                    v-decorator="['siteId']"
                                    showSearch
                                    allowClear
                                    placeholder="选择应用下载详情页"
                                    optionFilterProp="children"
                                    :filterOption="filterOption"
                                    style="width:400px"
                                    >
                                    <a-select-option v-for="appModel in siteList" :key="appModel.siteId" :value="appModel.siteId">
                                        {{ appModel.name }}
                                    </a-select-option>
                                    
                                </a-select>                               
                                </a-form-item>
                        </div>
                    </div>
                     <div class="row-item" >
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">监测链接选择</div>
                        <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                        <a-form-item>
                            <a-radio-group v-decorator="['generalTrack', { initialValue: 1 }]">
                                <a-radio-button :value="1">通用</a-radio-button>
                                <a-radio-button :value="0">非通用</a-radio-button>                            
                            </a-radio-group>
                        </a-form-item>                       
                        </div>
                    </div>

                    <div class="row-item" v-if="getFormData('generalTrack')==1">
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">第三方点击监测链接</div>
                        </div>
                        <div class="input-item">
                        <a-form-item>
                            <a-input v-decorator="['clickTrackUrl']"  @focus="clickTrackUrlFocus"  @blur="clickTrackUrlBlur"/>
                            <span v-show="clickTrackUrlTip" style="font-size:14px;color:red;">填写点击检测连接的话，开始播放链接必须填写</span>
                        </a-form-item>
                        </div>
                    </div>
                    <!-- <div class="row-item" v-if="getFormData('generalTrack')==1">
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">第三方开始播放监测链接</div>
                        </div>
                        <div class="input-item">
                        <a-form-item>
                            <a-input v-decorator="['impressionUrl']" />
                        </a-form-item>
                        </div>
                    </div> -->
                    <div class="row-item" v-if="whiteList.actionbar_click_url_switch==1&&getFormData('generalTrack')==1">
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">第三方actionBar监测链接</div>
                        <!-- <div class="required-item"></div> -->
                        </div>
                        <div class="input-item">
                        <a-form-item>
                            <a-input v-decorator="['actionbarClickUrl']" />
                        </a-form-item>
                        </div>
                    </div>
                    <!-- <div class="row-item">
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">下载详情</div>
                        <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                            <a-form-item  >
                                <a-select
                                    v-decorator="['siteId']"
                                    showSearch
                                    allowClear
                                    placeholder="选择应用下载详情页"
                                    optionFilterProp="children"
                                    :filterOption="filterOption"
                                    >
                                    <a-select-option v-for="appModel in siteList" :key="appModel.siteId" :value="appModel.siteId">
                                        {{ appModel.name }}
                                    </a-select-option>
                                </a-select>
                            </a-form-item>        
                        </div>
                    </div> -->
                    <div class="row-item" v-if="whiteList.creative_category_switch==1">
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">创意分类</div>
                        <div class="required-item" ></div>
                        </div>
                        <div class="input-item">
                        <a-form-item >
                            <a-cascader
                                :options="createOptions"
                                v-decorator="['creativeCategory',{ initialValue:[],rules: [{ required: whiteList.creative_category_switch==1, message: '创意分类必填' }] }]"
                                :fieldNames="fieldNames"
                                placeholder="请选择创意分类"
                                
                            />
                        </a-form-item>
                        </div>
                    </div>
                    <div class="row-item" v-if="whiteList.creative_category_switch==1">
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">创意标签</div>
                        <div class="required-item" ></div>
                        </div>
                        <div class="input-item">
                        <a-form-item>
                            <a-select
                            mode="tags"
                            style="width: 100%"
                            placeholder="按回车生成标签"
                            v-decorator="['creativeTag',{initialValue:[],rules: [ {required: whiteList.creative_category_switch==1, validator: creativeTagValid }]}]"
                            dropdownClassName="display-none-selset"
                            :token-separators="[',', ' ', '，']"
                            >
                            </a-select>
                            <span v-if="getData('creativeTag')&&getData('creativeTag').length > 10" style="color:red">创意标签最多填写10个，请删减</span>
                        </a-form-item>
                        </div>
                    </div>
                    <div class="row-item">
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">行动号召</div>
                        <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                            <a-form-item >
                                <a-select
                                v-decorator="['actionBarText', { rules: [{ required: true, message: '请选择行动号召按钮文案' }] }]"
                                showSearch
                                allowClear
                                placeholder="选择行动号召按钮文案"
                                optionFilterProp="children"
                                :filterOption="filterOption"
                                >
                                <a-select-option v-for="appModel in actionBarTextList" :key="appModel.id" :value="appModel.actionBarText">
                                    {{ appModel.actionBarText }}
                                </a-select-option>
                                </a-select>
                            </a-form-item>
                        
                        </div>
                    </div>

                    <div class="row-item">
                        <div class="hint-item"> </div>
                        <div class="label-item">
                        <div class="text-item">广告语</div>
                        <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                        <a-form-item v-for="(item,index) in descriptionList" :key="index">  
                            <div style="position:relative">              
                            <a-textarea
                                class="rending"
                                placeholder="请输入广告语"
                                @change="descriptionchange(item.value,index)"
                                v-model.trim="item.value"
                                :autosize="{ minRows: 2, maxRows: 6 }"
                                :max-length="30"
                            ></a-textarea>
                            <p
                              style="
                                font-size: 12px;
                                color: #b6bbc7;
                                letter-spacing: 0.3px;
                                text-align: right;
                                line-height: 30px;
                                position: absolute;
                                bottom: 0;
                                right: 6px;
                                width: 100%;
                                margin-bottom: 0;
                              "
                            >
                              {{ item.value.length  }}/30
                              <!-- {{ getFormData('description').length  }}/30 -->
                            </p>
                           <div style="position:absolute;right:-50px;top:-10px">
                                <a-icon type="plus" @click="addDescription()" style="margin-right:15px"/>
                                <a-icon type="minus" @click="removeDescription(index)" v-if="descriptionList.length>1"/>
                           </div>
                            </div>

                        </a-form-item>

                        </div>
                    </div>  
                    <div class="row-item">
                        <div class="hint-item"> </div>
                        <div class="label-item">
                        <div class="text-item">素材关键字</div>
                        </div>
                        <div class="input-item">
                        <a-form-item>  
                            <div style="position:relative">              
                            <a-textarea
                                class="rending"
                                placeholder="请输入素材关键字"
                                v-decorator="['materialKeyword']"
                                :autosize="{ minRows: 2, maxRows: 6 }"
                            ></a-textarea>
                            </div>
                        </a-form-item>
                        </div>
                    </div>  
                    <div class="row-item">
                        <div class="hint-item"> </div>
                        <div class="label-item">
                        <div class="text-item">是否高质量素材复建</div>
                        </div>
                        <div class="input-item">
                        <a-form-item>  
                            <a-radio-group v-decorator="['historyTop', { initialValue: 0 }]">
                                <a-radio-button :value="0">是</a-radio-button>
                                <a-radio-button :value="1">否</a-radio-button>                            
                            </a-radio-group>
                        </a-form-item>
                        </div>
                    </div>
                    <div class="row-item">
                        <div class="hint-item"> </div>
                        <div class="label-item">
                        <div class="text-item">是否开启系统优选</div>
                        </div>
                        <div class="input-item">
                        <a-form-item>  
                            <a-radio-group v-decorator="['systemOptimization', { initialValue: 0 }]" :disabled="getProjectIdAccount !== 458">
                                <a-radio-button :value="0">否</a-radio-button>
                                <a-radio-button :value="1">是</a-radio-button>                            
                            </a-radio-group>
                        </a-form-item>
                        </div>
                    </div> 
                </div>
             
        </div>
      <!-- <div class="moduler">
        <div class="opt">
          <a-button type="default" style="margin-right:15px" @click="goBack">取消</a-button>
         
          <a-button type="primary" @click="goNext"  :loading="goNextloading">下一步</a-button>
          
        </div>
      </div> -->
      <div class="moduler">
                <!-- <div class="moduler-title">计划名称</div> -->
                <div class="opt">
                <a-button type="default" style="margin-right:15px" @click="goBack">取消</a-button>
                <!--  -->
                <a-button type="primary" @click="goNext"  :loading="goNextloading">确定</a-button>
                </div>
            </div>
    </a-form>
    <div class="infoModal">
         <a-modal v-model="visible" title="提示"  @ok="handleOk" :keyboard='false' :maskClosable='false'>
            <ul>
              <li v-for="(item,index) in errorInfo" :key="index">
                  <span>账户{{LHKaccountInfo[index].title}}：</span>{{item.message || '定向设置成功'}}
              </li>
            </ul>
            <template slot="footer">
              <a-button key="back" @click="handleCancel">
                返回本页
              </a-button>
              <a-button key="submit" type="primary"  @click="handleOk">
                下一步
              </a-button>
            </template>
          </a-modal>
    </div>
    <a-modal v-model="convert" title="选择转化目标">
        <template slot="footer">
          <a-button key="back" @click="convert=false">取消</a-button>
          <a-button key="submit" type="primary" @click="convertOk">
            确定
          </a-button>
        </template>
        <a-form-item label="追踪方式" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }">
          <a-radio-group buttonStyle="solid" v-model="convertType" @change="convertChange">
            <a-radio-button value="1" v-show="getFormData('campaignType') == 4||getFormData('campaignType') == 5">JS布玛</a-radio-button>
            <a-radio-button value="2" v-show="getFormData('campaignType') == 4||getFormData('campaignType') == 5">Xpath</a-radio-button>
            <a-radio-button value="3"
              v-show="getFormData('campaignType') == 2">应用-SDK
            </a-radio-button>
            <a-radio-button value="7" v-show="getFormData('campaignType') == 2">应用-API</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="选择转化" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }">
          <a-select allowClear labelInValue style="width:100%" v-model="convertId" @focus="getConvertList">
            <a-select-option :value="item.convert_id" v-for="item in convertList" :key="item.convert_id">
              {{item.convert_name}}</a-select-option>
          </a-select>
        </a-form-item>
    </a-modal>

    <a-modal v-model="useDirectionalVisible" title="选择定向包" @ok="selectDirectionalOk" width='600px' height='500px'>
        <div style="position:relative">
            <span>当前选择模板数量：{{directionalCheckedList.length}}</span>
            <a-checkbox :indeterminate="indeterminateDirectional" :checked="checkAllDirectional" @change="onCheckAllDirectionalChange" class="quanxuanDirectional">
               <span>点击全选</span>
            </a-checkbox>   
        </div>
        
        <a-spin :spinning="directionalSpinning">   
        <div class="title-list"> 
                  
            <a-checkbox-group v-model="directionalCheckedList" @change="directionalChange">
                <div class="title-item" v-for="(item,index) in directionalList" :key='index'>
                <label>
                    <a-checkbox :value='item.id'>
                        {{item.templateName+'_('+item.id+')'}}
                    </a-checkbox>
                </label>
                </div>
            </a-checkbox-group>             
        </div>
        </a-spin>
    </a-modal>
    </a-spin>
  </div>
</template>

<script>
import moment from 'moment'
import {mapGetters} from 'vuex';

import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
import { TreeSelect } from 'ant-design-vue';
import qs from 'qs'
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
// import selectCheckAll from './toutiaoTime'
// import radioCheck from './components/radioCheck';
import radioCheck from '@/components/formComponents/checkBoxGroup'
import linkMultiSelect from './components/linkMultiSelect'
import singleLayersSelecte from './components/singleLayerSelecte'
import scheduleTime from '@/components/formComponents/toutiaoTime'
import selectRegion from '@/views/modules/kuaishouapp/account/stepForm/stepModule/selectRegion'
import $ from "jquery"
// import { filter } from 'vue/types/umd';
var str = ""
for (let i = 0; i < 7*24; i++) {
 str+='0'
  
}


let ageArr=[
    {
        value:1,
        label:'不限',
       
    },
    {
        value:18,
        label:'	18-23岁'
    },
    {
        value:24,
        label:'24-30岁',
    },
    {
        value:31,
        label:'31-40岁',
    },
    {
        value:41,
        label:'41-49岁',
    },
    {
        value:50,
        label:'50岁+',
        
    },
]

let autoExtendOptions=[
    {
        label:'地域',
        value:'REGION',
        
    },
    {
        label:'性别',
        value:'GENDER',
        
    },
    {
        label:'年龄',
        value:'AGE',
       
    },
    {
        label:'行为兴趣',
        value:'INTEREST_ACTION',
        
    },
    {
        label:'自定义人群',
        value:'CUSTOM_AUDIENCE',
       
    },
]

let retargetColumns=[
    {
        title: '人群包',
        dataIndex: 'name',
        sorter: true,
        width: '40%',
        scopedSlots: { customRender: 'name' },
    },
    {
    title: '属性',
      dataIndex: 'populationType',
      scopedSlots: {
        customRender: 'populationType'
      },
      width: 200
    },
    {
        title: '所属账号',
        dataIndex: 'accountId',
        sorter: true,
        width: '40%',
        scopedSlots: { customRender: 'accountId' },
    },
    
]

const plainOptions = [
    {
      value: 6,
      label: '上下滑大屏广告'
    },
    // {
    //   value: 7,
    //   label: '信息流广告'
    // },
    {
      value: 3,
      label: '视频播放页广告'
    },
    {
      value: 24,
      label: '激励视频广告'
    },
    
];

export default {
    components: {
        // selectCheckAll,
        // newDirectedPackage,
        Treeselect,
        radioCheck,
            linkMultiSelect,
            singleLayersSelecte,
            scheduleTime,
            selectRegion
    },
    data() {
        return {
            formItemLayout: {
                labelCol: { span: 5 },
                wrapperCol: { span: 19 }
            },
            getProjectIdAccount: '',
            checkCpaBidBloon:false,
            appType: '0',
            uriCheck: false,
            useChannel:false,
            programUnitCnt:300,
            customUnitCnt:400,
            customUnitCntMax:400,
            budgetType:'1',
            dayBudgetType:'1',
            clickTrackUrlTip:false,
            deviceBrand:0,
            devicePrice:0,
            tongbuLoading:false,
            refreshPopulationLoading:false,
            noAreaBreak:false,
            noGenderBreak:false,
            noAgeBreak:false,
            regionList:[],
            editRecordId:'',
            spinning:false,

            description:'',
            whiteList:{},
            actionBarTextList:[],
            treeData:[],
            accountId:undefined,
            strategyName: '',
            form: this.$form.createForm(this),

            goNextloading:false,
            goPlanShowloading:false,
            
            
            dateRange: [moment(), moment()],

            visible:false,
            errorInfo:[],
            fieldNames: {
                label: 'category_name',
                value: 'category_id',
                children: 'child',
            },
            createOptions: [],
            appStore: ["huawei", "oppo", "vivo", "xiaomi", "meizu", "smartisan"],
            sysType:1,
            indeterminateDirectional:false,
            checkAllDirectional:false,

            directionalList:[],
            directionalSpinning:false,
            directionalCheckedList:[],
            useDirectional:1,
            siteList:[],
            tabKey:'1',
            adposition:1,
            groupTypeData:{},
            convert: false,
            convertId: "",
            convertList: [],
            convertType: '1',

            strategyInfo:{},
            accountInfo:{},
            appList: [],
            appListAll:[],
            dateRange: [moment(), moment()],
            scheduleTimeType: '',
            scheduleTimeData:str,
            projectInfo:[],
        
            chargeMethods:'CPC',

            
            unionVideoType:'REWARDED_VIDEO',
            district:'NONE',
            sceneInventory:'',
            checkedList: [],
            indeterminate: false,
            checkAll: false,
            plainOptions,
            // 定向的参数
            regionValue:'NONE',
            ageArr,//受众年龄
            region:[],
            agesRange:[1],
            regionCityListUrl:'/kuaishou/batch/getRegion',
            regionCountyListUrl:'/kuaishou/batch/getRegion',

            // 自定义人群
            // 自定义人群参数
            retargetColumns,
            retargetData:[],
            retargetDataAll:[],
            loading:false,
            customCrowd:'NONE',//自定义人群 选择的值
            selectedRowKeys:[],
            incluedSelectedRowKeys:[],
            incluedSelectedKeys:[],
            excludeSelectedKeys:[],
            excludeSelectedRowKeys:[],
            
            autoExtendEnabled:0,//智能放量是否开启
            autoExtendOptions,//智能投放可选定向数组
            autoExtendTargets:[],//智能放量开启后的选择数据----------需传递的参数
            autoExtendTargetsChecked:[],

            radioStyle: {
                display: 'block',
                height: '30px',
                lineHeight: '30px',
                padding: '0 15px'
            },
            

            goNextloading:false,
            goPlanShowloading:false,
            
            
            dateRange: [moment(), moment()],

            visible:false,
            errorInfo:[],
        
            validationRules: {
                url: [   
                    {          
                        required: true,
                        validator: this.validateURL,
                    },
                ],
                name:[{
                required: true,
                validator: this.validateName,
                }],
                bid:[{
                required: true,
                message:'出价信息必须填写',
                // validator: this.validateBid,
                }],
                roi:[{
                required: true,
                message:'ROI系数必须填写',
                // validator: this.validateBid,
                }],
            },
            optionsApp: [],
            optionsAppActive: [],
            checkArr: [],
            closeDialog: false,
            indeterminateApp: false,
            useDirectionalVisible:false,
            appListValue: '',
            checkOptions: [],
            checkAllApp: false,
            optionsAll: [],
            multipleBidData:[],
            descriptionList:[{value:""}],
            channelData:null
           
            
        }
    },
    watch: {
        checkArr(n, o) {
            this.optionsAll.push(...n)
            this.optionsAll = [...new Set(this.optionsAll)]
            if (n.length != o.length) {
                if (n.length < o.length) {
                var a = new Set(n)
                var b = new Set(o)
                var c = new Set([...b].filter((item) => !a.has(item))) // {1}
                var d = this.optionsAll.indexOf(...c)
                if (d > 0) {
                    this.optionsAll.splice(d, 1)
                }
                }
            }
        },
        accountId(newValue,oldValue){
            setTimeout(()=>{
                 this.form.setFieldsValue({
                    appId:undefined,
                    ocpxActionType:undefined
                })
            },0)
            if(newValue){
                // this.treeData.forEach(item=>{
                //     if(item.children){
                //         item.children.forEach(ele=>{
                //             if(ele.value==newValue){
                //                 this.$parent.accountInfo=ele
                //             }
                //         })
                //     }
                // })
                this.handleGetAcoountId(newValue);
                this.getAppList()
                let editRecordId=this.$route.query.id;
                if(editRecordId){

                }else{
                    getAction('/kuaishou/batch/getIsActivate', {
                        accountId: this.accountId
                    }).then(res => {
                        if (res.success) {
                            this.groupTypeData = res.result
                            
                        }
                    })
                }
               
               

                getAction('/kuaishou/batch/getCreativeCategory', {
                    accountId:this.accountId,
                }).then((res) => {
                    if (res.success) {
                        //console.log(res)
                        this.createOptions = res.result
                    }
                })
                this.getWhiteList()
                this.getpopulationlist()
            }else{

            }
        },
        
    },
    computed: {
            
            hasSelected() {
                return this.selectedRowKeys.length > 0;
            },
            rowSelection() {
                return {
                    // selectedRowKeys: this.incluedSelectedRowKeys,
                    onChange: (selectedRowKeys, selectedRows) => {
                        //console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
                        this.incluedSelectedRowKeys = selectedRowKeys;
                        this.incluedSelectedKeys=selectedRows
                    },
                    getCheckboxProps: record => ({
                        props: {
                            disabled: this.excludeSelectedRowKeys.indexOf(record.key)>-1,  // Column configuration not to be checked
                            name: record.name,
                            defaultChecked:this.incluedSelectedRowKeys.indexOf(record.key)>-1
                        },
                    }),
                };
            },
            rowSelection2() {
                return {
                    // selectedRowKeys: this.excludeSelectedRowKeys,
                    onChange: (selectedRowKeys, selectedRows) => {
                        // //console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
                        // this.selectedRowKeys = selectedRowKeys;
                        this.excludeSelectedRowKeys = selectedRowKeys;
                        this.excludeSelectedKeys=selectedRows
                    },
                    getCheckboxProps: record => ({
                        props: {
                            disabled: this.incluedSelectedRowKeys.indexOf(record.key)>-1, // Column configuration not to be checked
                            name: record.name,
                            defaultChecked:this.excludeSelectedRowKeys.indexOf(record.key)>-1
                        },
                    }),
                };
            },
    },
    methods: {
        ...mapGetters(['userInfo']),
        changeChannel(checked) {
            if(checked){
                if(!!this.accountId){
                    if(!!this.getFormData('appId')){
                        var paramsData = {}
                        paramsData.appIdArray = this.getFormData('appId') instanceof Array?this.getFormData('appId').map(item=>{return item.key}):[this.getFormData('appId').key]
                        postAction('/kuaishou/kuaiShouAppList/getAppNames',paramsData).then(result=>{
                            var params = {}
                            params.appNameArray = result.result.map(item=>{
                                return item.appName
                            })
                            params.accountId = this.accountId
                            postAction('/channel/queryChannelLevel', params).then(res=>{
                                console.log(res)
                                if(res.code === 200) {
                                    if(res.result){
                                        this.channelData = res.result
                                    }else{
                                        this.useChannel = false
                                        this.$message.error(res.message) 
                                    }
                                    
                                }else{
                                    this.useChannel = false
                                    this.$message.error('该账户不能使用渠道号')
                                }
                            })
                        })
                       
                    }else{
                        this.useChannel = false
                        this.$message.error('未选择应用不可开启')
                    }
                    
                  
                }else{
                    this.useChannel = false
                    this.$message.error('未选择账户不可开启')
                }
               
            }else{
                this.channelData = null
            }
        },
        handleGetAcoountId(list) {
            getAction('/estimatePeopleNumber/getProjectId', {accountId: list}).then(result => {
                if (result.code === 0) {
                    this.getProjectIdAccount = result.result && Number(result.result);
                }
                else {
                    this.$message.error(result.message);
                }
            }).catch(error => {
                console.log(error, 'eeee');
            });
        },
        keyDown(event){
            if((event.keyCode>=96&&event.keyCode<=105)||(event.keyCode>=109&&event.keyCode<=111)||event.keyCode==46||event.keyCode==45||(event.keyCode>=48&&event.keyCode<=57)){
                
            }else{
                event.returnValue = false;
            }
        },
        checkCpaBid(e) {
            let z = /-/g;
            let a = /\//g;
            let d = /\./g;
            if(e.target.value.startsWith("-")||e.target.value.endsWith("-")){
                this.checkCpaBidBloon = true
                return
            }else if(e.target.value.startsWith(".")||e.target.value.endsWith(".")){
                this.checkCpaBidBloon = true
                return
            }
            if(e.target.value.match(a)&&e.target.value.match(z)){
                this.checkCpaBidBloon = true
            }else {
                if(e.target.value.match(z)&&e.target.value.match(z).length>1){
                    this.checkCpaBidBloon = true
                }else if(e.target.value.match(a)&&e.target.value.match(a)){
                    var arr = e.target.value.split('/')
                    var arrary = []
                    for (let i = 0; i < arr.length; i++) {
                        if(arr[i].match(d)&&arr[i].match(d).length>1){
                            arrary.push(true)
                        }
                    }
                    if(arrary.length>0){
                        this.checkCpaBidBloon = true
                    }else{
                        this.checkCpaBidBloon = false
                    }
                    
                }else{
                    this.checkCpaBidBloon = false
                }
            }

            
        },
        checkOneBid(item) {
            console.log(item)
            let params = {...item}
            params.cpaBid = params.cpaBid*1000
            params.deepConversionBid = params.deepConversionBid*1000
            postAction('/adsp/kuaiShouAppMultipleBids/saveOrUpdate',params).then(res=>{
                if(res.success){
                    this.$message.success('添加成功')
                }else{
                    this.$message.error('新增失败')
                }
            })
        },
        convertOk() {
            var dataLink = []
            dataLink = this.convertList.filter((item) => {
                return item.convert_id == this.convertId.key
            })
            if (dataLink.length > 0) {
                this.form.setFieldsValue({ clickTrackUrl: dataLink[0].click_url })
                this.convert = false
            }
        },
        getDataType(type, dataList) {
            getAction('/kuaishou/batch/getTargetList', { tagType: type }).then((res) => {
                if (res.success) {
                    this[dataList] = res.result
                }
            })
        },
        clearAll() {
            this.$nextTick(()=>{
                this.checkArr = []
                this.optionsAll = []
                this.indeterminateApp = false
                this.checkAllApp = false
            })
            
        },
        log(appId) {
            var index = this.optionsAll.findIndex((item) => item === appId)
            this.optionsAll.splice(index, 1)
            if (this.optionsAll.length == 0) {
                this.indeterminateApp = false
                this.checkAllApp = false
            }
        },
        getAppType(e) {
            this.optionsApp = []
            this.form.setFieldsValue({ appInterest: [] })
            this.checkArr = []
            if (e.target.value == '1') {
                getAction('/kuaishou/batch/getTargetList', { tagType: 'APP_INTEREST' }).then((res) => {
                    if (res.success) {
                        this.optionsApp = res.result
                    }
                })
            }
        },
        handleClose(e) {
            this.closeDialog = false
        },
        showAppName(appId) {
            if (this.checkOptions.length > 0) {
                var data = this.checkOptions.filter((item) => {
                    return item.appId == appId
                })
                if (data[0]) {
                    return data[0].appName
                } else {
                    return null
                }
            } else {
                return null
            }
        },
        getAppAllElse(e) {
            this.checkArr = this.optionsAll

            if (this.appListValue != '') {
                getAction('/kuaishou/batch/getAppSearch', {
                accountId: this.accountId,
                appName: e.target.value,
                }).then((res) => {
                if (res.result) {
                    this.optionsApp = res.result
                    this.checkOptions.push(...res.result)
                    this.closeDialog = true
                } else {
                    this.optionsApp = []
                    this.closeDialog = false
                }
                })
            } else {
                this.optionsApp = []
                this.closeDialog = false
            }
        },
        getAppAll(e) {
            if (e.target.value !== '') {
                getAction('/kuaishou/batch/getAppSearch', {
                    accountId:this.accountId,
                    appName: e.target.value,
                }).then((res) => {
                if (res.result) {
                    this.optionsApp = res.result
                    this.checkOptions.push(...res.result)
                    this.closeDialog = true
                } else {
                    this.optionsApp = []
                    this.closeDialog = false
                }
                })
            } else {
                this.optionsApp = []
                this.closeDialog = false
            }
        },
        onCheckAllChangeApp(e) {
            Object.assign(this, {
                checkArr: e.target.checked
                ? this.optionsApp.map((item) => {
                    return item.appId
                    })
                : [],
                indeterminateApp: false,
                checkAllApp: e.target.checked,
            })
            this.$nextTick(()=>{
                if (this.optionsAll.length > 20) {
                    this.$message.error('最多选择20个APP行为')
                    this.checkArr = []
                    this.optionsAll = []
                    this.indeterminateApp = false
                    this.checkAllApp = false
                }
            })
           
        },
        onChangeApp(checkedList) {
            this.indeterminateApp =
                !!checkedList.length &&
                checkedList.length <
                this.optionsApp.map((item) => {
                    return item.appId
                }).length
            this.checkAllApp =
                checkedList.length ===
                this.optionsApp.map((item) => {
                    return item.appId
                }).length
        },
        setImageCnt(e){
            this.customUnitCntMax = e?Math.floor(2000/e):2000
        },
        platformOsChange(e){
            //console.log(e);
            this.deviceBrand=0;
            this.sysType=e.target.value;
            this.sysTypeChange(e)
        },
        refreshPopulation(){
            if(this.accountId){
                this.refreshPopulationLoading = true
                // this.$refs.application.showApplication()
                getAction('/kuaishou/batch/pullPopulationList', {
                    accountId: this.accountId
                }).then(res => {
                    if (res.success) {
                        this.refreshPopulationLoading = false
                        this.excludeSelectedRowKeys = []
                        this.excludeSelectedKeys=[]
                        this.incluedSelectedRowKeys = []
                        this.incluedSelectedKeys=[]
                        this.$message.success(res.message)
                        this.retargetTabChange()
                    } else {
                        this.refreshPopulationLoading = false
                        this.$message.error(res.message)
                    }
                })
            }else{
                this.$message.error('请先选择账户')
            }
        },
        addApplication() {
            if(this.accountId){
                this.tongbuLoading = true
                // this.$refs.application.showApplication()
                getAction('/kuaishou/batch/syncAppList', {
                accountId: this.accountId
                }).then(res => {
                if (res.success) {
                    this.tongbuLoading = false
                    this.$message.success(res.message)
                    this.getAppList()
                } else {
                    this.tongbuLoading = false
                    this.$message.error(res.message)
                }
                })
            }else{
                this.$message.error('请先选择账户')
            }
            
        },
        getIsActivate(val){
            let params={};
                params.accountId=this.accountId;
                params.campaignType=this.getFormData('campaignType');
                params.appId=val
                
                getAction('/kuaishou/batch/getIsActivate',params).then(res => {
                    if (res.success) {
                        this.groupTypeData = res.result
                    }
                })
        },

        isOpenChange(e){
            this.noAreaBreak=false;
            this.noGenderBreak=false;
            this.noAgeBreak=false;
        },
        selectAllAppId(){
           
            //console.log(this.getFormData('appId'))
        },
        singleAppidChange(e){
            // //console.log(e.target.value,this.getFormData('appId'));
            this.form.setFieldsValue({
                appId:undefined
            })
        },
        addDescription(){
            this.descriptionList.push({value:""})
        },
        removeDescription(index){
            this.descriptionList.splice(index,1)
        },
        descriptionchange(val,index){
            let data = val;
            this.$nextTick(()=>{
                this.descriptionList[index].value = data.replace(/\s/g,'')
            })
            // if(this.getData('description')){
            //     this.$nextTick(()=>{
            //         this.form.setFieldsValue({
            //             description: this.getData('description').replace(/\s/g,'')
            //         })
            //     })
            // }
            // this.description=e.target.value.replace(/\s/g,'')

           
        },

        //获取表单的某一个属性值
        getFormData(className) {
            return this.form.getFieldValue(className)
        },
        dateChange(date, dateString) {
        // //console.log(date,dateString)
            this.form.getFieldDecorator('startTime')
            this.form.getFieldDecorator('endTime')
            this.form.setFieldsValue({
                startTime: date[0].format('YYYY-MM-DD HH:mm'),
                endTime:  date[1].format('YYYY-MM-DD HH:mm'),
            })
        },
    
        //推广目的改变
        campaignTypeChange(e){
            //console.log(e.target)
            let strategyNamepart=this.campaignTypeHandle(e.target.value);
            this.strategyName ='[策略]_'+ strategyNamepart+'_' + moment().format('MM_DD_hh:mm') ;
            this.getActionBarText()
        },
    
        
    
        goBack() {
            this.$router.replace('/autoLaunch/configLaunchList')
            this.$bus.$emit('remove', '/autoLaunch/configLaunchInfo')  
            this.$bus.$emit('remove', `/autoLaunch/configLaunchInfo?id=${this.editRecordId}`)  
            
        },
    
       
        //请求项目和账户内容
        accountHttp(){
            this.treeData=[];
            this.accountIds=[];
            getAction('/ctop/projectMember/getProjectAccountByUserId?mediaType=2&userId=' + this.userInfo().id, {}).then(res => {
            if(res.success){
                    // //console.log(res);
                    if(res.result){
                        res.result.forEach((element,index) => {
                        if(element){                  
                            this.treeData.push({});                    
                            this.treeData[index].title=element.project.projectName +'_('+ element.project.advertiserName +')';
                            this.treeData[index].value='project'+element.project.projectId;
                            this.treeData[index].key=element.project.projectId;
                            this.treeData[index].mediaId=element.project.mediaId;
                            this.treeData[index].children=[];
                                                
                            if(element.account.length){
                            element.account.forEach((ele,i)=>{
                                this.treeData[index].children.push({});
                                this.treeData[index].children[i].title=ele.userName+'_'+ele.authName+'_'+element.project.projectName;
                                this.treeData[index].children[i].value=ele.accountId;
                                this.treeData[index].children[i].key=ele.accountId;
                            })
                                
                            }                           
                        }      
                        });
                        // //console.log(this.treeData)
                        
                    }
            }
            })
        },


        campaignTypeHandle(val){
            let str='';
            switch (val) {
                case '2':
                    str='应用安装'
                    break;
                case '3':
                    str='电商下单'
                    break;
                case '4':
                    str='推广品牌'
                    break;
                case '5':
                    str='营销线索'
                    break;
                case '7':
                    str='应用活跃'
                    break;
            
                default:
                    str='转化错误'
                    break;
            }
            return str
        },


        creativeTagValid(rule, value, callback) {
            //console.log(rule, value, callback)
            if(value.length == 0 || value==undefined){
                // //console.log(1)
                   callback('创意标签必须填写') 
                
            }else if (value.length > 10) {
                callback('创意标签最多填写10个，请删减')
            }else{
                // //console.log(2)
                callback()
            }
        },
        directionalChange(checkedList) {
            // //console.log(checkedList)
            this.indeterminateDirectional = !!checkedList.length && checkedList.length < this.directionalList.length;
            this.checkAllDirectional = checkedList.length === this.directionalList.length;
        },
        onCheckAllDirectionalChange(e) {
            //console.log(e)
            let valueOption=[];
            valueOption=this.directionalList.map(item=>{
                return item.id
            })
            Object.assign(this, {
                directionalCheckedList: e.target.checked ? valueOption : [],
                indeterminateDirectional: false,
                checkAllDirectional: e.target.checked,
            });
        },
        selectDirectionalOk(e){
            this.useDirectionalVisible=false 
        },
        useDirectionalChange(e){
            //console.log(e);
            if(e.target.value==0){
                // this.useDirectionalVisible=true;
                this.getUserDirectional()
            }
        },  
        // 获取定向包
        getUserDirectional(){
            getAction('/kuaishou/batch/getDirectionalTemplate',{
                accountId:this.accountId
            }).then(res=>{
                //console.log(res);
                this.directionalList=res.result
            })
        },
        appIdChange(val){
            console.log(val)
            this.siteList=[]

            if(this.getFormData('singleAppid')==0){
                if(val&&val.findIndex(item=>item.key===0)>-1){
                    let appidArr=this.appList.map(item=>{
                        return {key:item.appId,label:`${item.platform === 1?'Android应用下载':item.platform === 2?'Android网页游戏':item.platform === 3?'iOS应用下载':'iOS网页游戏'}`
                                +'\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'+
                                item.appName+'\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'+item.appVersion}
                    })
                    //  if(val!=undefined && (val&&val.length>1)){
                            this.getIsActivate(appidArr[0].key)
                        // }
                    // setTimeout(()=>{
                        
                    //     this.form.setFieldsValue({
                    //         appId:appidArr
                    //     })
                    // },0)
                    this.$nextTick(()=>{
                        this.form.setFieldsValue({
                            appId:appidArr
                        })
                        this.multipleBidData = appidArr.map(item=>{
                            return {
                                ...item,
                                cpaBid:null,
                                trackUrl:'',
                                channelCode:'',
                                appId:item.key,
                                accountId:this.accountId,
                                deepConversionBid:null

                            }
                        })
                    })
                    
                
                }else{
                    this.$nextTick(()=>{
                        this.multipleBidData = val.map(item=>{
                            return {
                                ...item,
                                cpaBid:null,
                                trackUrl:'',
                                channelCode:'',
                                appId:item.key,
                                accountId:this.accountId,
                                deepConversionBid:null

                            }
                        })
                    })
                }
            }
           if(val!=undefined &&val){
                if(this.getFormData('campaignType')==2){
                    
                    if(this.getFormData('singleAppid')==1){
                        this.getPageList(val.key)
                        this.getIsActivate(val.key)
                    }else{
                       
                        
                    }
                    
                }
               
           }else{
               this.useChannel = false
               this.channelData = null
           }
        },
        disabledDate(current) {
           
            return current && current < moment().subtract(1, 'day')
        },
        bidTypeChange(e){
            //console.log(e);
            this.chargeMethods=e.target.value==10?"OCPM":'CPC'
        },
        getData(className) {
            return this.form.getFieldValue(className)
        },
        handleChange(val){
            //console.log(val)
        },
        // 投放日期改变
        scheduleTypeChange(val){
            //console.log(val)
            if(val=='SCHEDULE_FROM_NOW'){
                this.dateRange=[moment(),moment().add(10,'years')]
                
            }else{
                this.dateRange=[moment(),moment().add(10,'days')]
            }
        },
        filterOption(input, option) {
            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        },
            adpositionChange(){
                if(this.adposition!='inventoryTypes'){
                    this.checkedList=[];
                    this.indeterminate=false;
                    this.checkAll=false;
                }
            },
            cityChange(){
                this.region=[];
                this.regionList=[];

            },
            onChange(checkedList) {
                this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;
                this.checkAll = checkedList.length === plainOptions.length;
            },
            onCheckAllChange(e) {
                let valueOption = [];
                this.plainOptions.forEach((item) => {
                    if(this.getData('openProgramCreate')==1){
                        if(item.value!=3){
                            valueOption.push(item.value)
                        }
                        
                    }else{
                        valueOption.push(item.value)
                    }
                
                })
                Object.assign(this, {
                checkedList: e.target.checked ? valueOption : [],
                indeterminate: false,
                checkAll: e.target.checked,
                });
            },


            customCrowdChange(e){
                //console.log(e);
                if(e.target.value=='1' || e.target.value=='2'){
                    this.retargetTabChange();
                    this.tabKey=e.target.value
                }else if(e.target.value=='3'){
                    this.retargetTabChange();
                    this.tabKey='1'
                }
            },

            // 自定义人群的--同时定向排除tab切换事件
            retargetTabChange(){
                //console.log()
                this.retargetDataAll=[];
                this.loading=true;
                
                    getAction('/kuaishou/batch/getPopulationList',{
                        accountId:this.accountId
                    }).then((res)=>{
                        // //console.log(res)
                        this.loading=false;
                        if(res.success){
                            res.result.forEach((ele)=>{
                               
                                    ele.key=ele.orientationId   
                                    ele.id= ele.orientationId 
                                    ele.name=ele.orientationName+"("+ele.orientationId+")"
                                    // ele.accountName=this.accountInfo.title
                                    ele.accountId=this.accountId            
                            })
                            // this.retargetData=res.data;
                            this.retargetDataAll=[...this.retargetDataAll,...res.result];
                            this.retargetDataAll = this.retargetDataAll.filter(item=>{
                                return item.populationType !== 7
                            })
                            
                        }
                    })
            },
            onSelectChange(selectedRowKeys) {
                // //console.log('selectedRowKeys changed: ', selectedRowKeys);
                this.selectedRowKeys = selectedRowKeys;
            },
            // 自定义人群的改变
            retargetTableChange(pagination, filters, sorter){
                // //console.log(pagination);
            },

            //获取选中的城市
            getSelectedCityArr(val){
                //console.log(val);
                this.region=[];
                this.region=val;
            },
            // 获取选中的区县
            getSelectedCountyArr(val){
                // //console.log(val)
                this.region=[];
                this.region=val;
            },
            //获取选中的年龄段
            getAgeSelect(data){

                if (data.length > 1 && data.findIndex((item) => item == 1) == 0) {
                    data.splice(data.findIndex((item) => item == 1),1)
                } else if (data.length > 1 && data.findIndex((item) => item == 1) == data.length - 1) {
                    data.splice(0, data.length - 1)
                } else if (data.length == 0) {
                    data.push(1)
                }
                // //console.log(val)
                // if(val.length==1&&val[0]==""){
                //     this.agesRange=[]
                // }else{
                //     this.agesRange=val;
                // }
                
            },
            //获取智能放量定向的值
            getAutoExtendEnabled(val){
                // //console.log(val)
                this.autoExtendTargets=[];
                this.autoExtendTargets.push(...val)
            },
            callback(val) {
                //console.log(val);
            },

        
        
        handleOk(e) {
            this.visible=false;
            this.$router.push({path:'/LaunchHousekeeper/setProjectCreate'})

        },
        handleCancel(e) {
            this.visible = false;
        },
        // 直达链接是否启用
        useOpenUrlChange(){
            this.form.setFieldsValue({
                openUrl:''
            })
        },
        
        //获取表单的某一个属性值
        getFormData(className) {
            return this.form.getFieldValue(className)
        },
        dateChange(date, dateString) {
        // //console.log(date,dateString)
            this.form.getFieldDecorator('beginTime')
            this.form.getFieldDecorator('endTime')
            this.form.setFieldsValue({
                beginTime: date[0].format('YYYY-MM-DD HH:mm'),
                endTime:  date[1].format('YYYY-MM-DD HH:mm'),
            })
        },
        
        
        
        
        // 验证网址
        IsURL(res) {
        //   var strRegex = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/|www\.)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/
            var strRegex = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+(.+[A-Za-z0-9-~\/])+$/
            var re = new RegExp(strRegex)
            // //console.log(re.test(res))
            if (re.test(res)) {
                return true
            } else {
                return false
            }
        },
        validateURL(rule, value, callback) {
            // //console.log(rule, value, callback);

            if (this.IsURL(value)) {
                callback()
            } else if (value && !this.IsURL(value)) {
                callback('链接地址无法访问，请正确输入')
            } else {
                callback('链接必须填写')
            }
        },
        validateName(rule, value, callback){
        // //console.log(rule, value, callback);

            if (value) {
            callback()
            } else {
                callback('应用包名称必须填写')
            }
        },
        validateBid(rule, value, callback){
        // //console.log(rule, value, callback);
            if (value) {
            callback()
            } else {
                callback('出价必须填写')
            }
        },

    
        
        
        
        // 保存并新建创意
        goNext() {

        this.$nextTick(()=>{

            if(this.checkCpaBidBloon){
                 this.$message.error('请正确填写必填项目')
                 return 
            }
            this.getAction('/auto/aiKuaishouAccountAutoStrategy/checkStrategy', {
                accountId: this.accountId,
                type: 0
            }).then(res => {
                if(res.success){
                    this.form.validateFields((err, values) => {
                //console.log(values) 
                if (!err) {  
                    let isNotComplete = this.descriptionList.findIndex(item => {
                        return item.value === ''
                    })
                    if (isNotComplete > -1) {
                        this.$message.error('请正确填写必填项目,广告语未填')
                        return
                    } 


                    if(values.multipleBids === 1) {
                        let multipleBidData = this.multipleBidData.findIndex(item => {
                            return item.cpaBid === null
                        })
                        if (multipleBidData > -1) {
                            this.$message.error('请正确填写必填项目,广告语未填')
                            return
                        } 
                    }
                   
                    // console.log(values)              
                    this.goNextloading=true;
                   
                    // //console.log(this.excludeSelectedKeys,this.incluedSelectedKeys)
                    
                    // 设置广告位值
                    if(this.adposition!='inventoryTypes'){
                        this.checkedList=[];
                        values.sceneId=JSON.stringify([this.adposition])
                    }else{
                        values.sceneId=JSON.stringify(this.checkedList)
                    }
                    // 时间段值
                    
                    if(this.scheduleTimeType!=''){
                        values.scheduleTime=this.scheduleTimeData
                    }else{
                        values.scheduleTime=str
                    }

                    // 投放时间的值
                    // if(this.getFormData('scheduleType')=='SCHEDULE_FROM_NOW'){
                    //     values.beginTime=this.dateRange[0].format('YYYY-MM-DD');
                    //     values.endTime= this.dateRange[1].add(10,"years").format('YYYY-MM-DD');
                    
                    // }else{
                    //     values.beginTime=this.dateRange[0].format('YYYY-MM-DD');
                    //     values.endTime= this.dateRange[1].format('YYYY-MM-DD');
                    // }



                    if(this.getData('campaignType') === 2 ) {
                        values.appIdArray=values.appId instanceof Array?JSON.stringify(values.appId.map(item=>{return item.key})):JSON.stringify([values.appId.key])
                        values.appId=undefined;
                    }else if(this.getData('campaignType') === 7){
                        values.appIdArray=values.appId instanceof Array?JSON.stringify(values.appId.map(item=>{return item.key})):JSON.stringify([values.appId.key])
                        values.appId=undefined;
                        values.singleAppid = 1
                    }else {
                        values.singleAppid = 1
                        values.appIdArray=JSON.stringify([])
                    }
                    values.appId = undefined
                    values.agesRange=this.agesRange[0]==1?JSON.stringify([]):JSON.stringify(this.agesRange)
                    values.region=JSON.stringify(this.regionList.map(item=>{return item.value}));
                    if(this.district!='NONE'){
                        values.district=this.district
                    }else{
                        values.region="[]"
                    }
                    values.convertId=this.convertId==''?undefined:this.convertId.key;
                    values.appInterest = JSON.stringify(values.appInterest)
                    
                    if (this.appType == '2') {
                        values.appIds = JSON.stringify(this.optionsAll)
                        values.appInterest = JSON.stringify([])
                    }else if(this.appType == '0'){
                        values.appIds = JSON.stringify([])
                        values.appInterest = JSON.stringify([])
                    }else {
                        values.appIds = JSON.stringify([])
                    }
                    
                    // let excludePopulation=this.excludeSelectedKeys.map(item=>{
                    //     return item.id
                    // })
                    // //console.log(this.excludeSelectedKeys)
                    // let population=this.incluedSelectedKeys.map(item=>{
                    //     return item.id
                    // })
                    if(values.customCrowd==0){
                        values.excludePopulation='[]';
                        values.population='[]';
                    }else{
                        values.excludePopulation=this.excludeSelectedRowKeys.length>0?JSON.stringify(this.excludeSelectedRowKeys):'[]';
                        values.population=this.incluedSelectedRowKeys.length>0?JSON.stringify(this.incluedSelectedRowKeys):'[]';
                    }
                    
                    values.description = JSON.stringify(this.descriptionList.map(item=>{
                        return item.value
                    }))
                    
                    values.useAppMarket=values.useAppMarket?'1':'0'
                    
                    
                    if(this.useDirectional==0){
                        values.templateId=this.directionalCheckedList
                    }
                    if(this.sysType==1&&this.getData('useAppMarket')){
                        values.appStore=JSON.stringify(this.appStore)
                    }else if(this.sysType==1&&!this.getData('useAppMarket')){
                        values.appStore="[]"
                    }

                   
                    if(values.cpaBid){
                        if((values.cpaBid+'').includes('/')){
                            let bidArr =  values.cpaBid.split('/')
                            for (let index = 0; index < bidArr.length; index++) {
                                bidArr[index] = bidArr[index]*1000
                                
                            }
                            values.cpaBid = bidArr.join('/')
                        }else if((values.cpaBid+'').includes('-')){
                            let bidArr =  values.cpaBid.split('-')
                            for (let index = 0; index < bidArr.length; index++) {
                                bidArr[index] = bidArr[index]*1000
                                
                            }
                            values.cpaBid = bidArr.join('-')
                        }else{
                            values.cpaBid = values.cpaBid*1000
                        }
                    }else{
                        values.cpaBid=0
                    }



                    if(values.deepConversionBid){
                        values.deepConversionBid=parseInt(values.deepConversionBid*1000)
                    }else{
                        values.deepConversionBid=0
                    }
                 
                    if(values.creativeCategory&&values.creativeCategory.length>0){
                        
                        values.creativeCategory=values.creativeCategory[values.creativeCategory.length-1]
                    }else{
                         values.creativeCategory=undefined
                    }
                    
                    values.deviceBrand=this.deviceBrand==0?'[]':JSON.stringify(values.deviceBrand)
                    values.devicePrice=this.devicePrice==0?'[]':JSON.stringify(values.devicePrice)
                    values.accountId = this.accountId
                   
                    values.creativeTag=values.creativeTag?JSON.stringify(values.creativeTag):undefined

                    values.noAreaBreak=this.noAreaBreak?1:0
                    values.noGenderBreak=this.noGenderBreak?1:0
                    values.noAgeBreak=this.noAgeBreak?1:0

                    values.campaignDayBudget = this.budgetType =='1'?0: values.campaignDayBudget*1000
                    values.unitDayBudget = this.dayBudgetType =='1'?0: values.unitDayBudget*1000

                    values.usageLevel = this.channelData&&this.channelData.channel?this.channelData.channel.usageLevel:null
                    values.useChannel = this.useChannel?1:0
                    let url=''
                    if(this.editRecordId){
                        url='/ctop/aiKuaishouAdvertiserStrategy/edit';
                        values.id=this.editRecordId
                    }else{
                        url='/ctop/aiKuaishouAdvertiserStrategy/add'
                    }
                    postAction(url,values).then(res=>{
                        //console.log(res)
                        this.goNextloading=false
                        if(res.success){                            
                            
                            this.$router.replace('/autoLaunch/configLaunchList')
                            this.$bus.$emit('remove', '/autoLaunch/configLaunchInfo') 
                            this.$bus.$emit('remove', `/autoLaunch/configLaunchInfo?id=${this.editRecordId}`)                               
                        }else{
                            this.$message.error(res.message)
                            
                            // this.$router.replace('/autoLaunch/configLaunchList')
                            // this.$bus.$emit('remove', '/autoLaunch/configLaunchInfo')
                            // this.$bus.$emit('remove', `/autoLaunch/configLaunchInfo?id=${this.editRecordId}`)  
                        }
                    })

                    // $.ajax({
                    //     url:'http://192.168.1.193:31012/add_advertiser_strategy',
                    //     type:"POST",
                    //     data:JSON.stringify(values), 
                    //     crossDomain:true,
                    //     contentType:"application/json; charset=utf-8;",
                    //     dataType:'json',
                    //     success:(res)=>{
                    //         this.goNextloading=false
                    //         //console.log(res)
                    //         let result=JSON.parse(res)
                    //         if(result.code==0){                            
                    //             this.$router.replace('/autoLaunch/configLaunchList')
                    //             this.$bus.$emit('remove', '/autoLaunch/configLaunchInfo')                            
                    //         }else{
                    //             this.$message.error(result.message)
                    //             this.$router.replace('/autoLaunch/configLaunchList')
                    //             this.$bus.$emit('remove', '/autoLaunch/configLaunchInfo')
                    //         }
                    //     },
                    //     error:(res)=>{
                    //         //console.log(res)
                    //     }
                    // })


                
                }else{
                    this.$message.error('请正确填写必填项目')
                }
            })
                }else{
                    this.$message.error(res.message)
                }
            })

            
        })
        
        },
        
        // 获取applist
        getAppList() {
            let params = {}
            params.accountId = this.accountId
            getAction('/kuaishou/batch/getAppList', params).then(res => {
            if (res.success) {
                this.appListAll = res.result.map((item, index) => {
                    return {
                        ...item,
                        key: index
                    }
                })
                if(this.sysType==1){
                    this.appList=this.appListAll.filter(item=>{
                        return  item.platform==1||item.platform==2
                    })
                }else if(this.sysType==2){
                     this.appList=this.appListAll.filter(item=>{
                        return  item.platform==3||item.platform==4
                    })
                }
            }
            })
        },


        convertChange() {
            this.convertId = ""
        },
        getConvertList() {
            var params = {}
            params.accountId = this.accountId
            params.type = this.convertType
            getAction('/kuaishou/batch/getConvertList', params).then(res => {
            //console.log(res)
            if (res.success) {
                this.convertList = res.result.map(item => {
                return {
                    ...item,
                    convert_id: item.convert_id + ""
                }
                })
            }
            })
        },
        sysTypeChange(e){
            //console.log(e.target.value);
            this.form.setFieldsValue({
                appId:undefined,
                platformOs:e.target.value
            })
            // if(this.getFormData('campaignType')==2 || this.getFormData('campaignType')==7){
            //     this.appIdChange(this.getFormData('appId'))
            // }
            
            if(this.sysType==1){
                this.appList=this.appListAll.filter(item=>{
                    return  (item.platform==1 || item.platform==2)
                })
            }else if(this.sysType==2){
                    this.appList=this.appListAll.filter(item=>{
                    return  (item.platform==3||item.platform==4)
                })
            }
            
        },
        getPlatForm(appId) {
            if (appId) {
                var data = this.appList.filter(item => {
                    return item.appId == appId
                })
                return data[0].platform
            }
        },
        showConvert() {
            this.convertChange()
            if (this.getFormData('campaignType') == 2) {
                if (this.getData('appId')) {
                    this.convert = true;
                    let appIdvalue=this.getData('appId');
                    
                    if (this.getPlatForm(appIdvalue instanceof Array?appIdvalue[0]:appIdvalue) == 1 || this.getPlatForm(appIdvalue instanceof Array?appIdvalue[0]:appIdvalue) == 2) {
                        this.convertType = '3'
                    } else {
                        this.convertType = '7'
                    }

                } else {
                    this.$message.error('请选择应用')
                }
            } else {
                this.convert = true
                this.convertType = '1'
            }
            this.getConvertList()
        },

        getPageList(appId) {
            
            getAction('/kuaishou/batch/getPageList', {
                accountId: this.accountId,
                appId: appId,
                viewComp: 7,
            }).then((res) => {
                if (res.success) {
                    this.siteList = res.result
                }
            })
                

        },

        // 获取行动号召按钮
        getActionBarText(){
            this.actionBarTextList=[]
            let that = this
            setTimeout(()=>{
                getAction('/kuaishou/batch/getActionBarTextByType', {
                type:that.getFormData('campaignType')
                }).then((res) => {
                if (res.success) {
                    that.actionBarTextList = res.result
                }
                })
            })
            

            
        },

        // 获取创意分类创意标签白名单
        getWhiteList(){
            this.whiteList={}
             getAction('/kuaishou/batch/getWhiteList', {
                accountId: this.accountId,
            }).then((res) => {
                if (res.success) {
                    // //console.log(res)
                    if (res.result) {
                        this.whiteList=res.result
                    }
                }
            })
        },

        editEchoPage(){
            this.spinning=true;
            
            if(this.editRecordId){
                getAction('/ctop/aiKuaishouAdvertiserStrategy/queryById',{
                    id:this.editRecordId
                }).then(res=>{
                    //console.log(res);
                    
                    this.accountId=res.result.accountId;
                    this.description=res.result.description
                    this.appType = res.result.appInterest ? '1' : res.result.appIds ? '2' : '0'
                    // if(this.appType === '2') {
                    //     postAction('/kuaishou/batch/getAppNames',{accountId:this.accountId,appIds:res.result.appIds}).then((result) => {
                    //         if (result.success) {
                    //             this.checkOptions = result.result.map(i=>{
                    //                 return {
                    //                     appId: i.id,
                    //                     appName: i.name
                    //                 }
                    //             })
                    //         }
                    //     })
                    // }
                    
                    //  res.result.creativeTag=res.result.creativeTag?res.result.creativeTag:[]
                    this.sysType=res.result.platformOs
                    let fngetIsActivate=new Promise((resolve,reject)=>{
                        getAction('/kuaishou/batch/getIsActivate', {
                            accountId: this.accountId,
                            campaignType: res.result.campaignType,
                            appId:res.result.appIdArray?JSON.parse(res.result.appIdArray)[0]:null
                            
                        }).then(res => {
                            if (res.success) {
                                this.groupTypeData = res.result
                                resolve()
                            }
                        })
                    })

                    let fngetWhite=new Promise((resolve,reject)=>{
                        getAction('/kuaishou/batch/getWhiteList', {
                            accountId: this.accountId,
                        }).then((res) => {
                            if (res.success) {
                                    this.whiteList=res.result
                                    resolve()
                            }
                        })
                    })

                    Promise.all([fngetIsActivate,fngetWhite]).then(r=>{

                    
                    // this.form.setFieldsValue({
                    //     ...res.result,
                    //     creativeTag:res.result.creativeTag?JSON.parse(res.result.creativeTag):[],
                    //     useAppMarket:res.result.useAppMarket==1?true:false,
                    //     isOpen:res.result.isOpen?res.result.isOpen:0,
                    //     cpaBid:res.result.cpaBid/1000,
                    //     appId:res.singleAppid?JSON.parse(res.result.appIdArray)[0]:JSON.parse(res.result.appIdArray)
                    // })
              
                    if(res.result.creativeCategory){
                        // let arr=[];
                        if(res.result.creativeCategory>10000){
                            res.result.creativeCategory=res.result.creativeCategory?[parseInt(res.result.creativeCategory/10000),parseInt(res.result.creativeCategory/100),res.result.creativeCategory]:[];
                        }else if(res.result.creativeCategory>100){
                            res.result.creativeCategory=res.result.creativeCategory?[parseInt(res.result.creativeCategory/100),res.result.creativeCategory]:[];
                        }else{
                            res.result.creativeCategory=res.result.creativeCategory?[res.result.creativeCategory]:[];
                        }
                    }
                    
                    let cpaBid = "";
                    if(res.result.cpaBid.includes('/')){
                        let bidArr =  res.result.cpaBid.split('/')
                        for (let index = 0; index < bidArr.length; index++) {
                            bidArr[index] = bidArr[index]/1000
                            
                        }
                        cpaBid = bidArr.join('/')
                    }else if(res.result.cpaBid.includes('-')){
                        let bidArr =  res.result.cpaBid.split('-')
                        for (let index = 0; index < bidArr.length; index++) {
                            bidArr[index] = bidArr[index]/1000
                            
                        }
                        cpaBid = bidArr.join('-')
                    }else{
                        cpaBid = res.result.cpaBid/1000
                    }
                        
                    this.deviceBrand=res.result.deviceBrand?JSON.parse(res.result.deviceBrand).length>0?1:0:0;
                    
                    
                    this.devicePrice=res.result.devicePrice?JSON.parse(res.result.devicePrice).length>0?1:0:0
                    

                    this.budgetType = res.result.campaignDayBudget?res.result.campaignDayBudget>0?'2':'1':'1'
                    this.dayBudgetType = res.result.unitDayBudget?res.result.unitDayBudget>0?'2':'1':'1'
                    this.customUnitCnt = res.result.customUnitCnt
                    this.programUnitCnt = res.result.programUnitCnt
                    this.customUnitCntMax = Math.floor(2000/res.result.imageCnt)
                    this.uriCheck = res.result.schemaUri ? true : false
                    this.appType = res.result.appInterest&&JSON.parse(res.result.appInterest).length>0 ? '1' : res.result.appIds&&JSON.parse(res.result.appIds).length>0 ? '2' : '0'
                    this.checkArr = this.appType === '2' ? JSON.parse(res.result.appIds) : []
                    this.optionsAll =  res.result.appIds ? (typeof  res.result.appIds == 'string' ? JSON.parse(res.result.appIds) : res.result.appIds) : []
                    this.checkAllApp = false
                    res.result.appInterest = res.result.appInterest?eval(res.result.appInterest):undefined
                    this.descriptionList = res.result.description.charAt(0) === '['?eval(res.result.description).map(item=>{
                        return {value:item}
                    }):[{value:res.result.description}]
                   
                   if(res.result.scheduleTime&&res.result.scheduleTime != str) {
                        this.scheduleTimeType='SpecifiedTImePeriod'
                        this.scheduleTimeData = res.result.scheduleTime
                       
                   }else{
                        this.scheduleTimeType = ''
                        this.scheduleTimeData = str
                   }

                    this.multipleBidData = res.result.appInfoList ? res.result.appInfoList.map(item=>{
                        
                        return {
                            appId:item.app_id,
                            accountId:item.account_id,
                            label:`${item.platform === 1?'Android应用下载':item.platform === 2?'Android网页游戏':item.platform === 3?'iOS应用下载':'iOS网页游戏'}`
                                +'\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'+
                                item.app_name+'\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'+item.app_version,
                            cpaBid:item.cpa_bid?item.cpa_bid/1000:null,
                            trackUrl:item.track_url,
                            channelCode:item.channel_code,
                            deepConversionBid:item.deep_conversion_bid?item.deep_conversion_bid/1000:null,
                        }
                    }):[]
                    if(res.result.singleAppid){
                        this.getPageList(JSON.parse(res.result.appIdArray)[0]) 
                    }
                    setTimeout(()=>{                       
                        this.form.setFieldsValue({
                             ...res.result,
                            appId:[],
                            creativeTag:res.result.creativeTag?JSON.parse(res.result.creativeTag):[],
                            isOpen:res.result.isOpen?res.result.isOpen:0,
                            
                            
                            deviceBrand:res.result.deviceBrand?JSON.parse(res.result.deviceBrand):[],
                            devicePrice:res.result.devicePrice?JSON.parse(res.result.devicePrice):[],
                            useAppMarket:res.result.useAppMarket==1?true:false,
                            campaignDayBudget:res.result.campaignDayBudget?res.result.campaignDayBudget/1000:null,
                            unitDayBudget:res.result.unitDayBudget?res.result.unitDayBudget/1000:null,
                            
                           
                        })
                    },0)
                    setTimeout(()=>{
                         this.form.setFieldsValue({
                            androidOsv:res.result.androidOsv?res.result.androidOsv:3,
                            iosOsv:res.result.iosOsv?res.result.iosOsv:6,
                            url:res.result.url,
                            schemaUri:res.result.schemaUri,
                            appId:res.result.singleAppid?JSON.parse(res.result.appIdArray).map(item=>{return {key:item}})[0]:JSON.parse(res.result.appIdArray).map(item=>{return {key:item}}),
                            
                            appInterest:res.result.appInterest,
                            roiRatio:res.result.roiRatio?res.result.roiRatio:null,
                            multipleBids:res.result.multipleBids,
                            cpaBid:cpaBid,
                            siteId:res.result.siteId,
                        })
                        
                        this.useChannel = res.result.useChannel?res.result.useChannel==1?true:false:false

                        if(this.useChannel){
                            this.changeChannel(this.useChannel)
                        }
                    },100)

                    
                    if((res.result.ocpxActionType == 180 || res.result.ocpxActionType == 53) && this.groupTypeData.deepConversionTypes&&this.groupTypeData.deepConversionTypes.length > 0){
                        // //console.log(1)
                        setTimeout(()=>{
                        this.form.setFieldsValue({
                            deepConversionType:res.result.deepConversionType,
                        })
                        if(res.result.deepConversionBid!=null){
                            this.form.setFieldsValue({
                                deepConversionBid:res.result.deepConversionBid/1000,  
                            }) 
                        }
                    },0)
                    }
                    
                    // //console.log(this.getFormData('deepConversionBid'))
                    this.noAreaBreak=res.result.noAreaBreak?true:false
                    this.noGenderBreak=res.result.noGenderBreak?true:false
                    this.noAgeBreak=res.result.noAgeBreak?true:false
                    this.appStore=res.result.appStore?JSON.parse(res.result.appStore):[]
                    this.ageArr=[];
                    this.ageArr=JSON.parse(JSON.stringify(ageArr))
                    
                    this.agesRange=res.result.agesRange?JSON.parse(res.result.agesRange).length>0?JSON.parse(res.result.agesRange):[1]:[1]
                    // if(agesRange.length>0){
                    //     agesRange.forEach((item,index)=>{                   
                    //         this.ageArr.forEach((ele)=>{
                    //             if(ele.value==item){
                    //                 ele.checked=true;
                    //             }
                    //         })                   
                    //     });
                    // }
                    let sceneId=res.result.sceneId?JSON.parse(res.result.sceneId):[]
                    if(sceneId.length==1&&sceneId[0]==1){
                        this.adposition=1
                    }else if(sceneId.length==1&&sceneId[0]==5){
                        this.adposition=5
                        
                    }else{
                        this.adposition='inventoryTypes';
                        this.checkedList=sceneId
                    }
                    
                    let population=res.result.population?JSON.parse(res.result.population):[]
                    let excludePopulation=res.result.excludePopulation?JSON.parse(res.result.excludePopulation):[]
                    if(population.length&&excludePopulation.length){
                        this.form.setFieldsValue({
                            customCrowd:'3'
                        })
                    }else if(population.length&&!excludePopulation.length){
                        this.form.setFieldsValue({
                            customCrowd:'1'
                        })
                    }else if(!population.length&&!excludePopulation.length){
                        this.form.setFieldsValue({
                            customCrowd:'0'
                        })
                    }else{
                        this.form.setFieldsValue({
                            customCrowd:'2'
                        })
                    }
                    
            
                    
                    this.incluedSelectedRowKeys=res.result.population?JSON.parse(res.result.population):[]
                    this.excludeSelectedRowKeys=res.result.excludePopulation?JSON.parse(res.result.excludePopulation):[]
                    
                    let region=res.result.region&&eval(res.result.region).length>0?JSON.parse(res.result.region):[]
                    if(region.length==0){
                        this.district='NONE'
                    }else{
                        this.district='CITY';
                        this.regionList=region
                    }

                    if(this.getFormData('customCrowd')=='1' || this.getFormData('customCrowd')=='2'){
                        
                        this.tabKey=this.getFormData('customCrowd')
                    }else if(this.getFormData('customCrowd')=='3'){
                        
                        this.tabKey='1'
                    }
                    

                    
                    this.spinning=false;
                                                     
               
                    })
                })
            }
        },

        getpopulationlist(){
            this.retargetDataAll=[]
            getAction('/kuaishou/batch/getPopulationList',{
                accountId:this.accountId
            }).then((res)=>{
                // //console.log(res)
                this.loading=false;
                if(res.success){
                    res.result.forEach((ele)=>{
                            ele.key=ele.orientationId   
                            ele.id= ele.orientationId 
                            ele.name=ele.orientationName+"("+ele.orientationId+")"
                            ele.accountName=this.accountInfo.title
                            ele.accountId=this.accountId    
                                  
                    })
                    // this.retargetData=res.data;
                    // this.retargetDataAll=[...this.retargetDataAll,...res.result];
                     this.retargetDataAll=[...res.result];
                    this.retargetDataAll = this.retargetDataAll.filter(item=>{
                        return item.populationType !== 7
                    })
                    
                }
            })
        },
        clickTrackUrlFocus(){
            // //console.log('focus')
            this.clickTrackUrlTip=true;
        },
        clickTrackUrlBlur(){
            // //console.log('blur')
            this.clickTrackUrlTip=false;
        },
        getChangeAll(type, form, field) {
            var node = document.getElementById(field)
            var v = '-{{' + type + '}}-'
            if (document.selection) {
                //IE
                node.focus()
                var sel = document.selection.createRange()
                sel.text = v
                sel.select()
                if (field == 'campaignName') {
                this[form].setFieldsValue({ campaignName: sel.text })
                } else if (field == 'groupName') {
                this[form].setFieldsValue({ groupName: sel.text })
                }
            } else if (node.selectionStart || node.selectionStart == '0') {
                //MOZILLA/GOOGLE
                var startPos = node.selectionStart
                var endPos = node.selectionEnd
                var restoreTop = node.scrollTop
                node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
                if (restoreTop > 0) {
                node.scrollTop = restoreTop
                }
                if (field == 'campaignName') {
                this[form].setFieldsValue({ campaignName: node.value })
                } else if (field == 'groupName') {
                this[form].setFieldsValue({ groupName: node.value })
                }
                node.focus()
                node.selectionStart = startPos + v.length
                node.selectionEnd = startPos + v.length
                // this.campaignName = node.value
            } else {
                //OTHER
                node.value += v
                // console.log(node.value)
                if (field == 'campaignName') {
                this[form].setFieldsValue({ campaignName: node.value })
                } else if (field == 'groupName') {
                this[form].setFieldsValue({ groupName: node.value })
                }
                node.focus()
                // this.campaignName = node.value
            }
        },
    },
    created() {
        //  this.postDataAction(process.env.VUE_APP_BASE_REPORT_URL+'/account/report/getProjectAccountByUserId',{type:'bytedance',userId:this.userInfo().id}).then(res=>{

        // })
        if(this.$route){
            let editRecordId=this.$route.query.id;
            if(editRecordId){
                this.$nextTick(()=>{
                    this.editRecordId=editRecordId;
                    this.editEchoPage()
                })
               
            }
        }
    },
    mounted() {
        this.accountHttp()
        this.getDataType('APP_INTEREST', 'optionsAppActive')
        // this.$bus.$emit('remove', '/modules/BatchCreate/newGroup')
        let strategyNamepart=this.campaignTypeHandle(this.getFormData('campaignType'));
        
        
        this.strategyName ='[预设]_'+ strategyNamepart+'_' + moment().format('MM_DD_hh:mm') ;
        this.getActionBarText()
    },

    filters: {
      getDate(value) {
        let date = new Date(value)
        let y = date.getFullYear()
        let MM = date.getMonth() + 1
        MM = MM < 10 ? '0' + MM : MM
        let d = date.getDate()
        d = d < 10 ? '0' + d : d
        return y + '-' + MM + '-' + d
      },
      platform(str) {
        var data = {
          1: 'Android应用下载',
          2: 'Android网页游戏',
          3: 'iOS应用下载',
          4: 'iOS网页游戏'
        }
        return data[str]
      },
        customCrowdHandler(val){
            let str=''
            switch (val) {
                case 1:
                    str='上传人群'
                    break;
                case 2:
                    str='广告人群'
                    break;
                case 3:
                    str='主题专区'
                    break;
                case 4:
                    str='逻辑规则'
                    break;
                case 5:
                    str='人群扩展'
                    break;
                case 6:
                    str='平台定制'
                    break;
                case 7:
                    str='定制付费'
                    break;
                case 8:
                    str='网红粉丝类别'
                    break;
                case 9:
                    str='内容付费行为'
                    break;
                case 10:
                    str='移动应用安装'
                    break;
                case 11:
                    str='快手使用活跃度'
                    break;
                case 12:
                    str='行业分类'
                    break;
                case 13:
                    str='商业兴趣'
                    break;
                case 14:
                    str='固化标签'
                    break;
                case 15:
                    str='行业偏好'
                    break;
                case 16:
                    str='第三方标签'
                    break;
                case 17:
                    str='产品关键词'
                    break;
            
                default:
                    break;
            }
            return str
      }
    },
}
</script>
<style lang="scss">
.configLaunchInfo{
.display-none-selset {
  display: none !important;
}
  .ant-btn-danger {
    background-color: #ff4d4f !important; 
  }
}


.ant-tooltip-inner,
.ant-tooltip-arrow::before {
  background-color: #fff;
  color: #333;
}
.ant-tooltip-inner {
  span {
    display: block;
  }
}
.ant-tooltip {
  max-width: 450px;
}
.configLaunchInfo {
  .ant-radio-button-wrapper {
    min-width: 80px;
    text-align: center;
  }
  .ant-form-item {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    -webkit-font-feature-settings: 'tnum';
    font-feature-settings: 'tnum';
    vertical-align: top;
  }
  .directedBody {
    .ant-form-item {
      margin-bottom: 20px;
    }
  }
  .inventoryTypes{
    .ant-checkbox-wrapper,
    .ant-checkbox-group-item {
        display: block;
        padding: 5px 15px;
    }

    .ant-checkbox-wrapper:first-child {
        padding: 0 15px 5px;
    }
    .ant-checkbox-wrapper + .ant-checkbox-wrapper {
        margin-left: 0px; 
    }
  }
}
</style>
<style lang="scss" scoped>
.configLaunchInfo {
    .region{
        width: 100%;
    }
  font-family: PingFangSC-Regular, tahoma, arial, 'Hiragino Sans GB', 'Microsoft yahei', sans-serif;
  color: #333;
  ul,
  li {
    margin: 0;
    padding: 0;
    
  }
  .moduler {
    background: #fff;
    margin-bottom: 16px;
    position: relative;
    padding: 32px 24px 48px 32px;
    border-radius: 4px;
    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
    .ad-range2{
        width: 680px;
        padding: 5px 32px;
        .ad-range2-title{
            background: #f9f9f9;
            // line-height: 32px;
            // height: 32px;
            padding: 15px 15px;
            border: 1px solid #eaeaea;
            border-bottom: 0;
        }
        .quanxuanDirectional{
            // padding: 0 8px;
            position: absolute;
            right: 10px;
            top: 15px;
            color: #1890ff;
        }
         .title-list {
            // width: calc(100% + 48px);
            width: 100%;
            margin: 0;
            margin-bottom: 0;
            padding: 0;
            background: #fff;
            height: 363px;
            border: 1px solid #eaeaea;
            overflow: scroll;
            overflow-x: hidden;
            // margin-top: 10px;
        }
        .title-list .title-item{
            padding: 10px  30px;
            width: 100%;
            // height: 32px;
            // line-height: 32px;
            // border-bottom: 1px solid #eaeaea;
        }
    }
    .moduler-title {
      display: flex;
      align-items: center;
      font-size: 22px;
      margin-bottom: 20px;
    }
    .row-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 32px;
    }
    .row-item:last-of-type {
      margin-bottom: 0;
    }
    .row-item .hint-item {
      width: 24px;
      min-width: 24px;
      align-self: flex-start;
      line-height: 20px;
      height: 20px;
      margin-top: 9px;
    }
    .row-item .label-item {
      position: relative;
      align-items: flex-start;
      align-self: flex-start;
      line-height: 20px;
      height: 20px;
      margin-top: 10px;
      width: 120px;
    //   min-width: 80px;
      .text-item {
        font-size: 14px;
        width: 100px;
      }
    }
    .row-item .required-item {
      width: 4px;
      height: 4px;
      border-radius: 2px;
      background: #f45858;
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
    }
    .row-item .input-item {
      min-width: 480px;
      position: relative;
      // height: 35px;
      .tip {
        font-size: 12px;
        color: tomato;
      }
      .inventory-tags-lists-header {
          background-color: #F8F9FA;
          border: 1px solid #E4E9ED;
          height: 36px;
          line-height: 33px;
          border-radius: 4px 4px 0 0;
          font-weight: bold;
          display: flex;
        }

        .inventory-tags-lists-container {
          border: 1px solid #E4E9ED;
          margin-top: -1px;
          height: 100%;
          padding: 4px 0px;
          border-radius: 0 0 4px 4px;
        }

        .inventory-tags-lists-item {
          width: 100%;
          height: 37px;
          line-height: 37px;
          padding-left: 12px;
          padding-right: 12px;
          display: flex;
          font-size: 14px;
          color: #333;
        }
    }
  }
  .opt {
    text-align: right;
  }
}
</style>