<template>
  <div class="setProjectDirectional">
    
    <div class="moduler">
        <div v-if="accountInfo.value">
         <span style="margin-right:8px"> 当前广告账户：<strong>{{accountInfo.title||''}}</strong></span>
         
        </div>
    </div>
   
        <a-form :form="form">
        
        <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-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="strategyInfo.marketingGoal=='2'||strategyInfo.marketingGoal=='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="['appIds', { rules: [{ required: true, message: '请选择目标应用' }] }]" showSearch allowClear
                                    placeholder="选择应用目标" optionFilterProp="children" style="width: 500px"  mode='multiple' :maxTagCount='1'
                                   :filterOption="filterOption" @change="appIdChange">
                                    <!-- <a-select-option value="0">请选择目标应用</a-select-option> -->
                                    <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-form-item>
                        
                        </div>
                    </div>
                    <div class="row-item" v-if="strategyInfo.marketingGoal == '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="strategyInfo.marketingGoal == '3'||strategyInfo.marketingGoal == '4'||strategyInfo.marketingGoal == '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="strategyInfo.marketingGoal != 2" :class="{ 'else-label': strategyInfo.marketingGoal == 3 }">
                                <a-input placeholder="请填写链接" v-decorator="['url', { rules: [{ required: true,message:'链接不能为空'}] }]" />
                            </a-form-item>
                        
                        </div>
                    </div>

                    <div class="row-item" v-if="strategyInfo.marketingGoal == 2||strategyInfo.marketingGoal == 4||strategyInfo.marketingGoal == 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">
            <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='[]' :maxLayers='2' :listUrl='regionCityListUrl' @getSelectedArr='getSelectedCityArr'/>
                                </div>
                                <!-- 区县 -->
                                <div class="district" v-else-if="district=='COUNTY'">                                    
                                    <linkMultiSelect title='省份' :listArr='[]' :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 :checkArr='ageArr' @getSonValue='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:0 }]"  >
                                    <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>
                    </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-tabs>
                                    
                                </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="['scheduleTimes', { initialValue:'' }]" >
                              <a-radio-button value=''>不限</a-radio-button>
                              <a-radio-button value="SpecifiedTImePeriod">指定时间段</a-radio-button>
                            </a-radio-group>
                            <div
                            v-show="getFormData('scheduleTimes')=='SpecifiedTImePeriod'"
                            style="margin-top:15px"
                            >
                            <scheduleTime
                                style="width:100%"
                                :scheduleTime.sync="scheduleTimeData"
                                ref="selectCheck"
                            />
                            </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="['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>
                                <a-select-option :value="180"
                                v-if=" groupTypeData.isActivate == '1'">激活</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="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.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">
                                {{ 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&&strategyInfo.scenes=='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="['cpaBid', {rules:validationRules.bid} ]"
                                />
                                <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('bidType')==10&&strategyInfo.scenes=='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:150px"
                                    :max="10000"
                                    :step="0.1"
                                    v-decorator="['cpaBidMin', {rules:validationRules.bid} ]"
                                />
                                <span style="margin-left:5px">元</span>
                                <span style="margin:0 15px;"> — </span>
                                <a-input-number
                                    style="width:150px"
                                    :max="10000"
                                    :step="0.1"
                                    v-decorator="['cpaBidMax', {rules:validationRules.bid} ]"
                                />
                                <span style="margin-left:5px">元</span>
                            </a-form-item>
                               
                        </div>    
                    </div>
                    <div class="row-item" v-if="getFormData('bidType')==10&&strategyInfo.scenes=='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:150px"
                                    :max="getFormData('cpaBidMax')"
                                    :step="0.1"
                                    :min='0.1'
                                    v-decorator="['stepSize', {rules:validationRules.bid} ]"
                                />
                                <span style="margin-left:5px">元</span>
                               
                            </a-form-item>
                               
                        </div>    
                    </div>
                    <div class="row-item" v-if="(getFormData('ocpxActionType') == 180 || getFormData('ocpxActionType') == 53) &&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-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-model="adposition" @change="adpositionChange">
                                <a-radio-button :value='1'>优选广告位</a-radio-button>
                                <a-radio-button value="inventoryTypes">按媒体指定位置</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" :options="plainOptions" @change="onChange" />
                            </div>
                        </div>
                        
                        </div>
                    </div>
                    <div class="row-item" v-if="siteList.length">
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">下载详情</div>
                        <!-- <div class="required-item"></div> -->
                        </div>
                        <div class="input-item" >
                            <div  v-for="(item,index) in siteList" :key="index" :style="index==(siteList.length-1)?{'margin-bottom':'0px'}:{'margin-bottom':'20px'}">
                                <a-form-item>
                                <a-select
                                    v-model="item.siteId"
                                    showSearch
                                    allowClear
                                    placeholder="选择应用下载详情页"
                                    optionFilterProp="children"
                                    :filterOption="filterOption"
                                    style="width:400px"
                                    >
                                    <a-select-option v-for="appModel in item.siteList" :key="appModel.siteId" :value="appModel.siteId">
                                        {{ appModel.name }}
                                    </a-select-option>
                                    
                                </a-select>
                                <span style="margin-left:30px;display:inline-block">
                                        {{'appId:'+item.appId}}
                                </span>
                                </a-form-item>
                            </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> -->
                        <!-- http://ptd.yoyuan.com.cn/apk/download/1119929/YouYuan_1119929.apk -->
                        </div>
                        <div class="input-item">
                        <a-form-item>
                            <a-input v-decorator="['clickTrackUrl']" />
                        </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="['impressionUrl']" />
                        </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="['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-cascader
                                :options="createOptions"
                                v-decorator="['creativeCategory']"
                                :fieldNames="fieldNames"
                                placeholder="请选择创意分类"
                                style="width:300px"
                            />
                        </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
                            mode="tags"
                            style="width: 100%"
                            placeholder="按回车生成标签"
                            v-decorator="['creativeTag', { 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>
             
        </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> -->

        </a-form>    
            
            <!-- 操作 -->
            <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>
        
      <!-- 投放链接 -->
    
    <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="convert=false">
            确定
          </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="strategyInfo.marketingGoal == 4||strategyInfo.marketingGoal == 5">JS布玛</a-radio-button>
            <a-radio-button value="2" v-show="strategyInfo.marketingGoal == 4||strategyInfo.marketingGoal == 5">Xpath</a-radio-button>
            <a-radio-button value="3"
              v-show="strategyInfo.marketingGoal == 2">应用-SDK
            </a-radio-button>
            <a-radio-button value="7" v-show="strategyInfo.marketingGoal == 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>

  </div>
</template>

<script>
import moment from 'moment'
import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
import radioCheck from './components/radioCheck';
import linkMultiSelect from './components/linkMultiSelect'
import singleLayersSelecte from './components/singleLayerSelecte'
import scheduleTime from '@/components/formComponents/toutiaoTime'
import qs from 'qs'
// import { filter } from 'vue/types/umd';
var str = ""
for (let i = 0; i < 7*24; i++) {
 str+='0'
  
}

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

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: 'accountName',
        sorter: true,
        width: '40%',
        scopedSlots: { customRender: 'accountName' },
    },
    
]

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

export default {
    components: {
            radioCheck,
            linkMultiSelect,
            singleLayersSelecte,
            scheduleTime
    },
    data() {
        return {
            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()],
            scheduleTime: '',
            scheduleTimeData:str,
            projectInfo:[],
        
            chargeMethods:'CPC',
            
            form: this.$form.createForm(this),
            
            unionVideoType:'REWARDED_VIDEO',
            district:'NONE',
            sceneInventory:'',
            checkedList: [],
            indeterminate: false,
            checkAll: false,
            plainOptions,
            // 定向的参数
            regionValue:'NONE',
            ageArr,//受众年龄
            region:[],
            agesRange:[],
            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,
                }],
            },

            useDirectionalVisible:false,
        }
    },
    watch: {
        
    },
    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,
                        },
                    }),
                };
            },
            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,
                        },
                    }),
                };
            },
    },
    methods: {
        creativeTagValid(rule, value, callback) {
            if (value.length > 10) {
                callback('创意标签最多填写10个，请删减')
            } else {
                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.accountInfo.value
            }).then(res=>{
                console.log(res);
                this.directionalList=res.result
            })
        },
        appIdChange(val){
            console.log(val)
            this.siteList=[]
            if(val.length){
                val.forEach(item=>{
                    this.siteList.push({
                        siteList:[], 
                        appId:item,
                        siteId:''
                    })

                })
                this.getPageList(val)
            }
        },
        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=[];

            },
            onChange(checkedList) {
                this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;
                this.checkAll = checkedList.length === plainOptions.length;
            },
            onCheckAllChange(e) {
                let valueOption = [];
                this.plainOptions.forEach((item) => {
                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.accountInfo.value
                    }).then((res)=>{
                        // console.log(res)
                        this.loading=false;
                        if(res.success){
                            res.result.forEach((ele)=>{
                                ele.key=this.accountInfo.value+'_'+ele.orientationId   
                                ele.id= ele.orientationId 
                                ele.name=ele.orientationName+"("+ele.orientationId+")"
                                ele.accountName=this.accountInfo.title
                                ele.accountId=this.accountInfo.value               
                            })
                            // this.retargetData=res.data;
                            this.retargetDataAll=[...this.retargetDataAll,...res.result];
                            
                        }
                    })
            },
            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(val){
                // 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('出价必须填写')
            }
        },

    
        
        goBack() {
            // this.$router.replace('/autoLaunch/autoLaunchList')
            // this.$bus.$emit('remove', '/autoLaunch/newStrategy')
            this.$parent.currentTabComponent='createStrategy'
        },
        
        // 保存并新建创意
        goNext() {

        this.$nextTick(()=>{

            if((!this.getFormData('creativeCategory')&&this.getFormData('creativeTag')) ||  (this.getFormData('creativeCategory')&&!this.getFormData('creativeTag')) ){
                this.$message.error('创意分类和标签必须同时填写或者同时不填写')
                return 
            }
            

            this.form.validateFields((err, values) => {
                if (!err) {
                    
                    this.goNextloading=true;
                    if(this.district!='NONE'){
                        values.district=this.district
                    }
                    
                    console.log(this.excludeSelectedKeys,this.incluedSelectedKeys)
                    this.goNextloading=true;
                    // 设置广告位值
                    if(this.adposition!='inventoryTypes'){
                        this.checkedList=[];
                        values.sceneId=[this.adposition]
                    }else{
                        values.sceneId=this.checkedList
                    }
                    // 时间段值
                    if(this.getFormData('scheduleTime')!=''){
                        values.scheduleTime=this.scheduleTimeData
                    }else{
                        values.scheduleTime=''
                    }

                    values.siteId=this.siteList.map(item=>{
                        return {
                            appId:item.appId,
                            siteId:item.siteId
                        }
                    })
                    // 投放时间的值
                    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');
                    }
                    
                    values.agesRange=this.agesRange
                    values.region=this.region
                    values.convertId=this.convertId
                    values.excludePopulation=this.excludeSelectedKeys.map(item=>{
                        return item.id
                    })
                    values.population=this.incluedSelectedKeys.map(item=>{
                        return item.id
                    })
                    values.strategyState='1'
                    values.useAppMarket=values.useAppMarket?'1':'0'
                    console.log('Received values of form: ', values)
                    
                    if(this.useDirectional==0){
                        values.templateId=this.directionalCheckedList
                    }
                    if(this.sysType==1&&this.getData('useAppMarket')){
                        values.appStore=this.appStore
                    }
                    if(values.cpaBid){
                        values.cpaBid=parseInt(values.cpaBid*1000)
                    }
                    if(values.bid){
                        values.bid=parseInt(values.bid*1000)
                    }
                    if(values.cpaBidMin){
                        values.cpaBidMin=parseInt(values.cpaBidMin*1000)
                    }
                    if(values.cpaBidMax){
                        values.cpaBidMax=parseInt(values.cpaBidMax*1000)
                    }
                    if(values.stepSize){
                        values.stepSize=parseInt(values.stepSize*1000)
                    }
                    if(values.creativeCategory&&values.creativeCategory.length>0){
                        values.creativeCategory=values.creativeCategory[values.creativeCategory.length-1]
                    }else{
                         values.creativeCategory=null
                    }
                    // this.$parent.currentTabComponent='previewStrategy'
                    // this.$parent.strategyInfo={
                    //     ...this.$parent.strategyInfo,
                    //     ...values,
                    // }
                    let params={
                        ...values,
                        ...this.strategyInfo
                    }
                    postAction('/kuaishouStrategy/add',params).then(res=>{
                        console.log(res)
                        this.goNextloading=false
                        if(res.success){                            
                            this.$parent.strategyInfo={}
                            this.$router.replace('/autoLaunch/autoLaunchList')
                            this.$bus.$emit('remove', '/autoLaunch/newStrategy')                            
                        }else{
                            this.$messgae.error(res.message)
                            this.$parent.strategyInfo={}
                            this.$router.replace('/autoLaunch/autoLaunchList')
                            this.$bus.$emit('remove', '/autoLaunch/newStrategy')
                        }
                    })

                
                }else{
                    this.$message.error('请正确填写必填项目')
                }
            })
            
        })
        
        },
        
        // 获取applist
        getAppList() {
            let params = {}
            params.accountId = this.accountInfo.value
            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.accountInfo.value
            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({
                appIds:[],
            })
            this.appIdChange()
            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.strategyInfo.marketingGoal == 2) {
                if (this.getData('appIds')) {
                    this.convert = true;

                    if (this.getPlatForm(this.getData('appId')) == 1 || this.getPlatForm(this.getData('appId')) == 2) {
                        this.convertType = '3'
                    } else {
                        this.convertType = '7'
                    }

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

        getPageList(appId) {
            if(appId.length){
                appId.forEach((item,index)=>{
                    getAction('/kuaishou/batch/getPageList', {
                        accountId: this.accountInfo.value,
                        appId: item,
                        viewComp: 7,
                    }).then((res) => {
                        if (res.success) {
                            this.siteList[index].siteList = res.result
                        }
                    })
                })
                
            }
            
        },
       
    },
    
    mounted() {
            this.accountInfo=this.$parent.accountInfo   
            this.strategyInfo=this.$parent.strategyInfo
            console.log(this.$parent.strategyInfo)
            this.getAppList()
            getAction('/kuaishou/batch/getIsActivate', {
                accountId: this.accountInfo.value
            }).then(res => {
                if (res.success) {
                 this.groupTypeData = res.result
                }
            })

             getAction('/kuaishou/batch/getCreativeCategory', {
                accountId:this.accountInfo.value,
            }).then((res) => {
                if (res.success) {
                    console.log(res)
                    this.createOptions = res.result
                }
            })
    },
    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">
.setProjectDirectional{
    .ant-btn-danger {
        background-color: #ff4d4f !important; 
    }
    .ant-checkbox-group{
        width: 100%;
    }
    .display-none-selset {
        display: none !important;
    }
}

// 标题选择
    // .title-list {
    //     width: calc(100% + 48px);
    //     margin: 16px -24px;
    //     margin-bottom: 0;
    //     padding: 10px  30px;
    //     background: #f9f9f9;
    //     height: 363px;
    //     border: 1px solid #eaeaea;
    //     overflow: scroll;
    //     overflow-x: hidden;
    //     margin-top: 10px;
    // }
    // .title-list .title-item{
    //     height: 32px;
    //     line-height: 32px;
    // }
.ant-tooltip-inner,
.ant-tooltip-arrow::before {
  background-color: #fff;
  color: #333;
}
.ant-tooltip-inner {
  span {
    display: block;
  }
}
.ant-tooltip {
  max-width: 450px;
}
.setProjectDirectional {
  .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;
    }
  }
  .ant-checkbox-group-item {
        display: block;
        padding: 5px 15px;
    }
    
    .inventoryTypes{
    .ant-checkbox-wrapper,
    .ant-checkbox-group-item {
        display: block;
        padding: 5px 15px;
    }

    .ant-checkbox-wrapper:first-child {
        padding: 0 15px 5px;
    }
  }
  .singleLayersSelecte .selectBox .selectBox1 .selectLists{
      padding: 5px 15px;
  }
    .singleLayersSelecte .selectBox .title{
        background-color: #F8F9FA;
        
        height: 36px;
        line-height: 33px;
        border-radius: 4px 4px 0 0;
        font-weight: bold;
        display: -webkit-box;
    }
    .singleLayersSelecte .selectBox .title .clearAllBtn[data-v-ce06bf4a] {
        position: absolute;
        top: 1px;
        right: 0;
    }
    .singleLayersSelecte .selectBox .selectRight[data-v-ce06bf4a] {
        width: 35%;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
    .singleLayersSelecte .selectBox .selectLeft[data-v-ce06bf4a] {
        width: 65%;
        margin-right: 2%;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
    .linkMultiSel[data-v-dc40dba0] {
        width: 100%;
        height: 310px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-top: 15px;
    }
}
</style>
<style lang="scss" scoped>
.setProjectDirectional {
  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: 80px;
      min-width: 80px;
      .text-item {
        font-size: 14px;
        width: 60px;
      }
    }
    .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: 670px;
      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;
        }
    }
    .adName{
      display: flex;
      .nameList{
        width: 90%;
      }
      .item{
        display: inline-block;
        width: 30%;
        margin-left: 15px;
        margin-bottom: 10px;
      }
    }
  }
  .opt {
    text-align: right;
  }
}
</style>