<template>
  <div class="newPlan">
    <a-form :form="form">
      <div class="moduler">
        <div class="moduler-title">所属广告组</div>
        <div>
          广告组名称：
          <strong>{{groupInfo.campaignName||groupInfo.name}}</strong>
        </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="['deliveryRange', { initialValue:'DEFAULT' }]">
                  <a-radio-button value="DEFAULT">默认</a-radio-button>
                  <a-radio-button value="UNION">
                    穿山甲
                    <a-tooltip>
                      <template slot="title">基于4亿日活跃用户大数据积累，顶尖AI智能推荐技术，今日头条与最广泛的合作伙伴携手打造全新移动生态联盟</template>
                      <a-icon type="question-circle" />
                    </a-tooltip>
                  </a-radio-button>
                </a-radio-group>
              </a-form-item>
            </div>
          </div>
          <div class="row-item" v-if="getFormData('deliveryRange')=='UNION'">
            <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="['unionVideoType', { initialValue:'REWARDED_VIDEO' }]">
                  <a-radio-button value="REWARDED_VIDEO">
                    激励视频
                    <a-tooltip>
                      <template slot="title">特定场景下用户通过观看视频广告以换取游戏/应用内虚拟奖励的广告</template>
                      <a-icon type="question-circle" />
                    </a-tooltip>
                  </a-radio-button>
                  <a-radio-button value="ORIGINAL_VIDEO">原生</a-radio-button>
                  <a-radio-button value="SPLASH_VIDEO">开屏</a-radio-button>
                </a-radio-group>
              </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">
              <a-tooltip>
                <template slot="title">
                  <span>选择投放目标后，系统会向最有可能发生该目标行为的用户展示你的广告。</span>
                  <span>转化量：将广告投放给转化意愿高的用户</span>
                  <span>点击量：将广告投放给点击意愿高的用户</span>
                  <span>展示量：让更多的用户看见广告</span>
                </template>
                <a-icon type="question-circle" />
              </a-tooltip>
            </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="['launchTarget', { initialValue:'CONVERT_AMOUNT' }]" @change="launchTargetChange">
                  <a-radio-button value="CONVERT_AMOUNT">转化量</a-radio-button>
                  <a-radio-button value="CLICK_AMOUNT">点击量</a-radio-button>
                  <a-radio-button value="SHOW_AMOUNT">展示量</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="['appType', { initialValue:'APP_ANDROID' }]">
                  <a-radio-button value="APP_ANDROID">安卓</a-radio-button>
                  <a-radio-button value="APP_IOS">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" v-if="groupInfo.landingType=='APP'">下载方式</div>
              <div class="text-item" v-if="groupInfo.landingType=='LINK'">投放内容</div>
              <div class="required-item"></div>
            </div>
            <div class="input-item">
              <a-form-item>
                <a-radio-group
                  v-decorator="['downloadType',{ initialValue:'DOWNLOAD_URL' }]"
                  @change="downloadTypeChange"
                  v-show="groupInfo.landingType=='APP'"
           
                >
                  <a-radio-button value="DOWNLOAD_URL">下载链接</a-radio-button>
                  <a-radio-button value="EXTERNAL_URL">落地页</a-radio-button>
                </a-radio-group>
                <a-radio-group
                  v-decorator="['promotionContent',{ initialValue:'EXTERNAL_URL' }]"
                  @change="downloadTypeChange"
                  v-show="groupInfo.landingType=='LINK'"
                >
                  <a-radio-button value="EXTERNAL_URL">落地页</a-radio-button>
                  <!-- <a-radio-button value="MICRO_APP">小程序</a-radio-button> -->
                </a-radio-group>
              </a-form-item>
            </div>
          </div>
          <!-- <div class="row-item" v-if="groupInfo.landingType=='LINK'">
            <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="['downloadType', { initialValue:'EXTERNAL_URL' }]">
                  <a-radio-button value="EXTERNAL_URL">落地页</a-radio-button>
                  <a-radio-button value="MICRO_APP">小程序</a-radio-button>
                </a-radio-group>
              </a-form-item>
            </div>
          </div>-->
          <!-- {{getFormData('downloadType')}} -->
          <!-- {{IsURL(getFormData('downloadUrl'))}} -->
          <div class="row-item" v-if="getFormData('downloadType')=='DOWNLOAD_URL'">
            <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="['downloadUrl', {rules:validationRules.url}]" />
              </a-form-item>
              <span style="display:inline-block;margin-top:15px">
                <a-checkbox
                  @change="downloadModeChange"
                  value="APP_STORE_DELIVERY"
                  v-if="getFormData('appType')=='APP_ANDROID'"
                >优先从系统应用商店下载（请确保应用已在应用商店内上架）</a-checkbox>
              </span>
            </div>
          </div>
          <div class="row-item" v-if="getFormData('downloadType')=='EXTERNAL_URL'">
            <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="['externalUrl', {rules:validationRules.url}]" />
              </a-form-item>
            </div>
          </div>
          <div class="row-item" v-if="getFormData('downloadType')=='QUICK_APP_URL'">
            <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="['appSchema', {rules:validationRules.url}]" />
              </a-form-item>
            </div>
          </div>
          <div class="row-item" v-if="getFormData('downloadType')=='QUICK_APP_URL'">
            <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="['downloadUrl', {rules:validationRules.url}]" />
              </a-form-item>
            </div>
          </div>
          <div class="row-item" v-show="getFormData('launchTarget')=='CONVERT_AMOUNT'">
            <div class="hint-item">
              <a-tooltip>
                <template slot="title">
                  <span>转化用于追踪广告投放效果，当用户完成广告主设定的转化事件时会记录一次转化，您可以在“资产-转化跟踪”创建和查看转化相关数据。</span>
                </template>
                <a-icon type="question-circle" />
              </a-tooltip>
            </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="['convertTarget', { initialValue: 1}]">
                  <a-radio-button
                    value="SelectConversionTarget"
                    v-if="getFormData('downloadType')=='DOWNLOAD_URL'"
                    @click="SelectConversionTarget"
                    :disabled="!IsURL(getFormData('downloadUrl'))"
                  >选择转化目标</a-radio-button>
                  <a-radio-button
                    value="SelectConversionTarget"
                    v-if="getFormData('downloadType')=='EXTERNAL_URL'"
                    @click="SelectConversionTarget"
                    :disabled="!IsURL(getFormData('externalUrl'))"
                  >选择转化目标</a-radio-button>
                  
                </a-radio-group>
              </a-form-item>
              

              <div >
                
              </div>
             
              
              
            </div>
          </div>
          <!-- 应用推广下的转化目标 -->
          <div class="row-item" v-if="isShowConversionTarget&&groupInfo.landingType=='APP'&&getFormData('launchTarget')=='CONVERT_AMOUNT'">
            <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="convertType"   @change="convertTypeChange">
                  <a-radio-button v-for="item in convertList" :key="item.convert_type" v-show="item.external_actions.length>0" :value='item.convert_type' >
                    {{item.name}}</a-radio-button>
                </a-radio-group>                     
              </a-form-item>
            </div>
          </div>
          <div class="row-item"  v-if="isShowConversionTarget&&groupInfo.landingType=='APP'&&convertType&&getFormData('launchTarget')=='CONVERT_AMOUNT'">
            <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-show="convertType=='AD_CONVERT_SOURCE_TYPE_NORMAL_APP_DOWNLOAD'"
                  @change="externalActionsChange"
                > 
                  <a-radio-button v-for="item in currentConvertType.external_actions" :key="item.external_action" :value="item.external_action">
                    {{item.external_name}}</a-radio-button>
                </a-radio-group>
                <a-select  style="width: 335px" v-show="convertType=='AD_CONVERT_SOURCE_TYPE_APP_DOWNLOAD'"  @change="APIChange">
                  <a-select-option v-for="item in currentConvertType.external_actions" :key="item.external_action" :value='item.external_action'>
                    {{item.external_name}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </div>
          </div>
           <!--  线索收集下的转化目标 -->
          
          <div class="row-item" v-if="isShowConversionTarget&&groupInfo.landingType=='LINK'&&getFormData('launchTarget')=='CONVERT_AMOUNT'">
            <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="convertType"   @change="convertTypeChange">
                  <a-radio-button v-for="item in convertList" :key="item.convert_type" :value='item.convert_type' >
                    {{item.name}}</a-radio-button>
                </a-radio-group>                     
              </a-form-item>
            </div>
          </div>
          <div class="row-item"  v-if="isShowConversionTarget&&groupInfo.landingType=='LINK'&&convertType&&getFormData('launchTarget')=='CONVERT_AMOUNT'">
            <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-show="convertType=='AD_CONVERT_SOURCE_TYPE_NORMAL_APP_DOWNLOAD'"
                  @change="externalActionsChange"
                > 
                  <a-radio-button v-for="item in currentConvertType.external_a
                  ctions" :key="item.external_action" :value="item.external_action">
                    {{item.external_name}}</a-radio-button>
                </a-radio-group> -->
                <a-select  style="width: 335px" v-show="convertType=='AD_CONVERT_SOURCE_TYPE_INTERNAL'&&currentConvertType.external_actions.length>0"  @change="APIChange" placeholder="请选择转化目标">
                  <a-select-option v-for="item in currentConvertType.external_actions"   :key="item.external_action" :value='item.external_action'>
                    {{item.external_name}}
                  </a-select-option>
                </a-select>
                <span v-show="currentConvertType.external_actions.length==0">暂无数据，可去后台新建</span>
              </a-form-item>
            </div>
          </div>
         
          <div class="row-item" v-if="getFormData('downloadType')=='DOWNLOAD_URL'">
            <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="['toutiaoPackage', {rules:validationRules.name}]" />
              </a-form-item>
            </div>
          </div>
          <div class="row-item" v-show="getFormData('downloadType')!='DOWNLOAD_URL'">
            <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="['useOpenUrl', { initialValue:'NO' }]" @change="useOpenUrlChange">
                  <a-radio-button value="NO">不启用</a-radio-button>
                  <a-radio-button value="YES">启用</a-radio-button>
                </a-radio-group>
              </a-form-item>
            </div>
          </div>
          <div class="row-item" v-show="getFormData('downloadType')!='DOWNLOAD_URL'&&getFormData('useOpenUrl')=='YES'">
            <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-input v-decorator="['openUrl']" />
              </a-form-item>
            </div>
          </div>
        </div>
      </div>
      <!-- 用户定向 -->
      <div class="moduler">
        <div class="moduler-title">用户定向</div>
        <div>
          <a-button type="link" style="margin-right:15px" @click="createNewDirecte">新建定向模板</a-button>
          <a-button type="link" @click="selectedExist">选择已有定向</a-button>
        </div>
        <div class="ad-range">
          <div class="row-item" v-if="isSelectedExist">
            <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 style="width: 200px" @change="directeChange">
                  <a-select-option
                    v-for="(item,index) in directeArr"
                    :key="index"
                    :value="item.id"
                  >{{item.name}}</a-select-option>
                </a-select>
              </a-form-item>
            </div>
          </div>
        </div>
        <div v-if="visible" class="directedBody">
          <newDirectedPackage :isNewPlan="true" :id="selectedId" ref="directedPackage" @getDirectedValue='getDirectedValue' />
        </div>
        <!-- <div v-if="visible">
          <a-button type="link" @click="()=>visible=false" >收起定向内容</a-button>
          <a-button type="link" @click="()=>visible=true" >展开定向内容</a-button>
        </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="['smartBidType', { initialValue:'SMART_BID_CUSTOM' }]"
                  @change="smartBidTypeChange"
                >
                  <a-radio-button value="SMART_BID_CUSTOM">手动</a-radio-button>
                  <a-tooltip>
                    <template slot="title">
                      <span>自动出价暂不支持点击、展示投放目标</span>
                    </template>
                    <a-radio-button
                      value="SMART_BID_CONSERVATIVE"
                      :disabled="getFormData('launchTarget')!='CONVERT_AMOUNT'"
                    >自动</a-radio-button>
                  </a-tooltip>
                </a-radio-group>
              </a-form-item>
            </div>
          </div>
          <div class="row-item">
            <div class="hint-item">
              <a-tooltip>
                <template slot="title">
                  <span>计划投放初期可能有一定的波动性，在积累适当转化数后效果将会逐渐稳定。</span>
                </template>
                <a-icon type="question-circle" />
              </a-tooltip>
            </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="['flowControlMode', { initialValue:'FLOW_CONTROL_MODE_FAST' }]"
                >
                  <a-radio-button
                    value="FLOW_CONTROL_MODE_FAST"
                    v-if="getFormData('launchTarget')=='CONVERT_AMOUNT'"
                  >优先跑量</a-radio-button>
                  <a-radio-button
                    value="FLOW_CONTROL_MODE_BALANCE"
                    v-if="getFormData('launchTarget')=='CONVERT_AMOUNT'"
                  >均衡投放</a-radio-button>
                  <a-radio-button
                    value="FLOW_CONTROL_MODE_SMOOTH"
                    v-if="getFormData('launchTarget')=='CONVERT_AMOUNT'"
                  >优先低成本</a-radio-button>
                  <a-radio-button
                    value="FLOW_CONTROL_MODE_FAST"
                    v-if="getFormData('launchTarget')!='CONVERT_AMOUNT'"
                  >标准投放（推荐）</a-radio-button>
                  <a-radio-button
                    value="FLOW_CONTROL_MODE_BALANCE"
                    v-if="getFormData('launchTarget')!='CONVERT_AMOUNT'"
                  >加速投放</a-radio-button>
                </a-radio-group>
              </a-form-item>
            </div>
          </div>
          <div class="row-item">
            <div class="hint-item">
              <a-tooltip>
                <template slot="title">
                  <span>单次预算修改幅度不小于100元,日修改预算不超过20次。如果是总预算广告，且设了起始日期，将要求您预算设置需要大于或等于[投放天数 * 100]，即满足每日最低预算300的要求</span>
                </template>
                <a-icon type="question-circle" />
              </a-tooltip>
            </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-group compact>
                  <a-select v-decorator="['budgetMode', { initialValue:'BUDGET_MODE_DAY' }]">
                    <a-select-option value="BUDGET_MODE_DAY">日预算</a-select-option>
                    <a-select-option
                      value="BUDGET_MODE_TOTAL"
                      v-if="getFormData('smartBidType')=='SMART_BID_CUSTOM'"
                    >总预算</a-select-option>
                  </a-select>
                  <a-input style="width: 50%" 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 class="row-item" v-if="getFormData('smartBidType')=='SMART_BID_CUSTOM'">
            <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' }]">
                  <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"
                    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="['scheduleTime', { initialValue:'' }]">
                  <a-radio-button value=''>不限</a-radio-button>
                  <a-radio-button value="SpecifiedTImePeriod">指定时间段</a-radio-button>
                </a-radio-group>
                <div
                  v-show="getFormData('scheduleTime')=='SpecifiedTImePeriod'"
                  style="margin-top:15px"
                >
                  <selectCheckAll
                    style="width:100%"
                    :scheduleTime.sync="scheduleTimeData"
                    ref="selectCheck"
                  />
                </div>
              </a-form-item>
            </div>
          </div>
          <div class="row-item" v-show="getFormData('smartBidType')=='SMART_BID_CUSTOM'">
            <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="['pricing', { initialValue:'PRICING_OCPM' }]">
                  <a-radio-button value="PRICING_OCPM" v-if="getFormData('launchTarget')=='CONVERT_AMOUNT'">按展示付费（oCPM）</a-radio-button>
                  <a-radio-button value="PRICING_CPC" v-if="getFormData('launchTarget')=='CLICK_AMOUNT'">按点击付费（CPC）</a-radio-button>
                  <a-radio-button value="PRICING_CPM" v-if="getFormData('launchTarget')=='SHOW_AMOUNT'">按展示付费（CPM）</a-radio-button>
                  <a-radio-button
                    value="PRICING_CPA"
                    v-if="groupInfo.landingType=='LINK'&&getFormData('launchTarget')=='CONVERT_AMOUNT'"
                  >按转化付费（CPA）</a-radio-button>
                  <a-radio-button
                    value="PRICING_OCPC"
                    v-if="getFormData('deliveryRange')=='UNION'"
                  >按点击付费（oCPC）</a-radio-button>
                </a-radio-group>
              </a-form-item>
            </div>
          </div>

          <div class="row-item" v-if="getFormData('smartBidType')=='SMART_BID_CUSTOM'&&getFormData('launchTarget')=='CONVERT_AMOUNT'">
            <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="1500"
                  :step="0.1"
                  v-decorator="['cpaBid', {rules:validationRules.bid} ]"                 
                />
 
                <span style="margin-left:5px">元</span>
                <!-- <span style="margin-left:20px">请填入必填字段，获取建议出价</span> -->
                <!-- <a-tooltip>
                  <template slot="title">
                    <span style="font-weight:600">建议出价获取方式：</span>
                    <span>请填入本页面所有必填信息（除出价外），即可查看建议出价</span>
                  </template>
                  <a-icon type="question-circle" />
                </a-tooltip> -->
              </a-form-item>
              <span
                class="tip"
                v-if="getFormData('pricing')=='PRICING_CPA'&&getFormData('cpaBid')<1"
              >请输入目标转化出价，不少于1元，不超过1500元</span>
              <span
                class="tip"
                v-if="getFormData('pricing')!='PRICING_CPA'&&getFormData('cpaBid')<0.1"
              >请输入目标转化出价，不少于0.1元，不超过10000元</span>
            </div>
          </div>
          <div class="row-item" v-if="getFormData('smartBidType')=='SMART_BID_CUSTOM'&&getFormData('launchTarget')=='SHOW_AMOUNT'">
            <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 :min='4' :max="10000" :step="0.1" v-decorator="['bid', ]"  style="width:200px"/>
                <span style="margin-left:5px">元</span>
                <!-- <span style="margin-left:20px">请填入必填字段，获取建议出价</span> -->
                <a-tooltip>
                  <template slot="title">
                    <span style="font-weight:600">建议出价获取方式：</span>
                    <span>请填入本页面所有必填信息（除出价外），即可查看建议出价</span>
                  </template>
                  <a-icon type="question-circle" />
                </a-tooltip>
              </a-form-item>
              <span
                class="tip"
                v-if="getFormData('pricing')=='PRICING_CPM'&&getFormData('bid')<4"
              >请输入出价，不少于4元，不超过100元</span>
            </div>
          </div>
          <div class="row-item" v-if="getFormData('smartBidType')=='SMART_BID_CUSTOM'&&getFormData('launchTarget')=='CLICK_AMOUNT'">
            <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 :min='4' :max="10000" :step="0.1" v-decorator="['bid', ]" style="width:200px" />
                <span style="margin-left:5px">元</span>
                <!-- <span style="margin-left:20px">请填入必填字段，获取建议出价</span> -->
                <a-tooltip>
                  <template slot="title">
                    <span style="font-weight:600">建议出价获取方式：</span>
                    <span>请填入本页面所有必填信息（除出价外），即可查看建议出价</span>
                  </template>
                  <a-icon type="question-circle" />
                </a-tooltip>
              </a-form-item>
              <span
                class="tip"
                v-if="getFormData('pricing')=='PRICING_CPM'&&getFormData('bid')<4"
              >请输入出价，不少于4元，不超过100元</span>
            </div>
          </div>

          <div class="row-item" v-if="getFormData('smartBidType')=='SMART_BID_CONSERVATIVE'">
            <div class="hint-item">
              <a-tooltip>
                <template slot="title">
                  <span>请填入您当前预算下，每个转化事件的真实预期成本，预期成本过低可能影响模型的优化能力。此成本仅作为投放参考，实际扣费仍以后台展示为准。</span>
                </template>
                <a-icon type="question-circle" />
              </a-tooltip>
            </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="1500"
                  :step="0.1"
                  v-decorator="['cpaBid', ]"
                  v-if="getFormData('pricing')=='PRICING_CPA'"
                />
                <a-input-number :max="10000" :step="0.1" v-decorator="['cpaBid', ]" v-else />
                <span style="margin-left:5px">元</span>
                <!-- <span style="margin-left:20px">请填入必填字段，获取建议出价</span> -->
                <a-tooltip>
                  <template slot="title">
                    <span style="font-weight:600">建议出价获取方式：</span>
                    <span>请填入本页面所有必填信息（除出价外），即可查看建议出价</span>
                  </template>
                  <a-icon type="question-circle" />
                </a-tooltip>
              </a-form-item>
              <span
                class="tip"
                v-if="getFormData('pricing')=='PRICING_CPA'&&getFormData('cpaBid')<1"
              >请输入目标转化出价，不少于1元，不超过1500元</span>
              <span
                class="tip"
                v-if="getFormData('pricing')!='PRICING_CPA'&&getFormData('cpaBid')<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-input-number :min="1" :max="10" v-model="plansNum" @change="plansNumChange" />
              </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>
                <div v-for="(item,index) in plansNum" :key="index">
                  <a-input v-model="names[index]" allow-clear />
                </div>
              </a-form-item>
            </div>
          </div>
        </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" style="margin-right:15px" @click="goPlanShow" :loading="goPlanShowloading">保存并关闭</a-button>
          <a-button type="danger"  @click="goNext"  :loading="goNextloading">保存并新建创意</a-button>
        </div>
      </div>
    </a-form>
    
  </div>
</template>

<script>
import moment from 'moment'
import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
import qs from 'qs'
import selectCheckAll from './toutiaoTime'
import newDirectedPackage from './newDirectedPackage'
var str = ""
for (let i = 0; i < 7*48; i++) {
 str+='0'
  
}
export default {
  components: {
    selectCheckAll,
    newDirectedPackage,
  },
  data() {
    return {
      goNextloading:false,
      goPlanShowloading:false,
      groupInfo: {},
      accountInfo:{},
      form: this.$form.createForm(this),
      dateRange: [moment(), moment()],
      scheduleTime: '',
      scheduleTimeData:str,
      plansNum: 1,
      names: [],
      isSelectedExist: false,
      validationRules: {
        url: [
         
          {          
            required: true,
            validator: this.validateURL,
          },
        ],
        name:[{
          required: true,
          validator: this.validateName,
        }],
        bid:[{
          required: true,
          message:'出价信息必须填写',
          // validator: this.validateBid,
        }]
      },
      isShowConversionTarget: false,
      downloadMode: '',
      directeArr: [], //定向包的数组
      directPackageValue:{},//从定向包里获取的定向包的值
      visible: false,
      selectedId: undefined,
      currentDirectId: null,
      convertList:[],
      convertType:'',
      currentConvertType:{},
      convertId:undefined,
      externalAction:'',
    }
  },
  watch: {
    currentDirectId(n, o) {
      console.log(n != o)
      this.selectedId = n
      this.visible = true
    },
  },
  methods: {
    // 
 
    // 直达链接是否启用
    useOpenUrlChange(){
      this.form.setFieldsValue({
        openUrl:''
      })
    },
    // 
    launchTargetChange(val){
      console.log(val)
      if(val.target.value=='CLICK_AMOUNT'){
          this.form.setFieldsValue({
             pricing:'PRICING_CPC'
          })
      }else if(val.target.value=='SHOW_AMOUNT'){
        this.form.setFieldsValue({
             pricing:'PRICING_CPM'
          })
      }else if(val.target.value=='CONVERT_AMOUNT'){
        this.form.setFieldsValue({
             pricing:'PRICING_OCPM'
          })
      }
    },
    //普通下载
    externalActionsChange(val){
      console.log(val,this.currentConvertType);
      this.currentConvertType.external_actions.forEach(item=>{
        if(item.external_action==val.target.value){
          this.convertId=item.convert_id         
        }
      });
      this.externalAction=val.target.value

    },
    // 转化目标类型
    convertTypeChange(e){
      // console.log(e.target.value,);
      this.convertList.forEach((item)=>{
        if(item.convert_type==e.target.value){
          this.currentConvertType=item
        }
      })
    },  
    // 应用下载API
    APIChange(val){
      console.log(val,this.currentConvertType);
      this.currentConvertType.external_actions.forEach(item=>{
        if(item.external_action==val){
          this.convertId=item.convert_id;
          
        }
      })
      this.externalAction=val
    },
    //  转化目标显示
    SelectConversionTarget() {
        // console.log(this.groupInfo)
        let downloadType=this.getFormData('downloadType');
        let downloadUrl=this.getFormData('downloadUrl');
        let externalUrl=this.getFormData('externalUrl');
        let toutiaoPackage=this.getFormData('toutiaoPackage');
        let appType=this.getFormData('appType')
        if(toutiaoPackage || externalUrl){
          postAction('/ctop/queryTool/queryConvert',qs.stringify({
            accountId:this.groupInfo.accountId,
            landingType:this.groupInfo.landingType,
            downloadType,
            downloadUrl,
            externalUrl,
            toutiaoPackage,
            appType,
            
          })).then(res=>{
            // console.log(res)
            if(res.success){
              // if(res.result.data){
              //     res.result.data.list.forEach((item)=>{
              //       if(item.convert_type=='AD_CONVERT_SOURCE_TYPE_NORMAL_APP_DOWNLOAD'){
              //         item.convert_name='普通应用下载'
              //       }
              //       if(item.convert_type=='AD_CONVERT_SOURCE_TYPE_SDK'){
              //         item.convert_name='应用下载SDK'
              //       }
              //       if(item.convert_type=='AD_CONVERT_SOURCE_TYPE_APP_DOWNLOAD'){
              //         item.convert_name='应用下载API'
              //       }
              //       if(item.convert_type=='AD_CONVERT_SOURCE_TYPE_INTERNAL'){
              //         item.convert_name='线索通'
              //       }
              //     })
              // }
              this.convertList=[];
              this.convertList=res.result.data.list;
              this.isShowConversionTarget = true
              
            }
          })
        }else{
          this.$message.error('请先输入应用包名称！')
        }
      
      
    },
    //获取表单的某一个属性值
    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'),
      })
    },
    smartBidTypeChange() {
      this.form.setFieldsValue({
        budgetMode: 'BUDGET_MODE_DAY',
      })
    },
    // 点击获取定向
    selectedExist() {
      this.isSelectedExist = true;
      this.visible=false
      let userId = JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.id
      getAction('/ctop/audiencePackage/list', {
        userId,
      }).then((res) => {
        // console.log(res)
        if (res.success) {
          this.directeArr = res.result.records
        }
      })
    },
    // 定向包改变
    directeChange(val) {
      // console.log(val)
      // let currentDirect=this.directeArr.filter((item)=>{
      //   return item.id==val
      // });
      // console.log(currentDirect)

      this.currentDirectId = val
    },
    // 新建定向包
    createNewDirecte() {
      this.visible = false;
      this.isSelectedExist=false;
      setTimeout(() => {
        this.visible = true
        this.selectedId = null
      }, 1)
    },
    handleOk(e) {
      // console.log(e)
      this.visible = false
    },
    // 验证网址
    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('出价必须填写')
        }
    },

    downloadTypeChange() {
      this.isShowConversionTarget = false
    },
    plansNumChange(e) {
      let namePart = this.getFormData('pricing')
      this.names = []
      for (let index = 0; index < this.plansNum; index++) {
        this.names[index] = namePart + moment().format('MM_DD_hh:mm') + '_' + (index + 1)
      }
    },
    downloadModeChange(e) {
      console.log(e)
      if (e.target.checked) {
        this.form.getFieldDecorator('downloadMode')
        this.form.setFieldsValue({
          downloadMode: e.target.value,
        })
        // console.log(this.form.getFieldsValue())
      }
    },
    goBack() {
      this.$router.replace('/modules/BatchCreate/TouTiaoBatch')
      this.$bus.$emit('remove', '/modules/BatchCreate/newPlan')
    },
    // 保存并关闭
    goPlanShow() {
      this.$nextTick(()=>{
        console.log(this.$refs.directedPackage)
        if(this.visible){
          this.$refs.directedPackage.getValuehandle()
        }
        if (this.validatorName()) {
          this.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
              this.goPlanShowloading=true;
              // console.log('Received values of form: ', values)
              // console.log(this.names)
              values.accountId = this.groupInfo.accountId
              values.campaignId = this.groupInfo.id;
              values.convertId = this.convertId;
              values.appType=this.getFormData('appType')
              values.externalAction=this.externalAction
              values.startTime=this.dateRange[0].format('YYYY-MM-DD HH:mm');
              values.endTime= this.dateRange[1].format('YYYY-MM-DD HH:mm');
               if(this.getFormData('launchTarget')=='CLICK_AMOUNT'){                
                    values.pricing='PRICING_CPC'
              }else if(val.target.value=='SHOW_AMOUNT'){               
                    values.pricing='PRICING_CPM'
              }else if(val.target.value=='CONVERT_AMOUNT'){             
                    values.pricing='PRICING_OCPM'                 
              }
              postAction('/ctop/byteDanceAdvertisePlan/add', {
                names: this.names,
                landingType: this.groupInfo.landingType,
                ...values,
                ...this.directPackageValue
              }).then((res) => {
                console.log(res)
                if (res.success) {
                  this.goPlanShowloading=false;
                  if(res.code==0){
                     this.$message.success('广告计划创建成功，2s后将跳转到头条批量页面')
                    let planInfo=JSON.stringify({...values,...this.directPackageValue,names:this.names,landingType: this.groupInfo.landingType,})
                    localStorage.setItem('planInfo',planInfo) ;
                    setTimeout(()=>{
                       this.$router.replace(`/modules/BatchCreate/TouTiaoBatch`)
                    },2000)
                  }else{
                    if(res.message='convert_id is required'){
                        this.$message.error('转化方式必须选择！')
                    }else{
                      this.$message.error(res.message)
                    }
                  }
                 
                } else {
                   this.goPlanShowloading=false;
                  this.$message.error('网络开小差了，等会再试试')
                }
              })
            }else{
              console.log(err)
            }
          })
        }
      })
     
    },
    // 保存并新建创意
    goNext() {
      this.$nextTick(()=>{
        
        if(this.visible){
          this.$refs.directedPackage.getValuehandle()
          console.log(this.$refs.directedPackage)
        }
        if (this.validatorName()) {
          this.form.validateFieldsAndScroll((err, values) => {
            if (!err) {

              console.log('Received values of form: ', values)
              // console.log(this.names)
              this.goNextloading=true;
              values.accountId = this.groupInfo.accountId
              values.campaignId = this.groupInfo.id;
              values.convertId = this.convertId;
              values.appType=this.getFormData('appType')
              values.externalAction=this.externalAction
              values.startTime=this.dateRange[0].format('YYYY-MM-DD HH:mm');
              values.endTime= this.dateRange[1].format('YYYY-MM-DD HH:mm');
              if(this.getFormData('scheduleTime')!=''){
                  values.scheduleTime=this.scheduleTimeData
              }

              if(this.getFormData('launchTarget')=='CLICK_AMOUNT'){               
                  values.pricing='PRICING_CPC'
              }else if(this.getFormData('launchTarget')=='SHOW_AMOUNT'){               
                  values.pricing='PRICING_CPM'
              }else if(this.getFormData('launchTarget')=='CONVERT_AMOUNT'){             
                  values.pricing='PRICING_OCPM'                 
              }


              postAction('/ctop/byteDanceAdvertisePlan/add', {
                names: this.names,
                landingType: this.groupInfo.landingType,
                ...values,
                ...this.directPackageValue
              }).then((res) => {
                console.log(res)
                if (res.success) {
                  this.goNextloading=false;
                  if(res.code==0){
                     this.$message.success('广告计划创建成功，2s后将跳转到新建创意页面')
                    let planInfo=JSON.stringify(res.result)
                    localStorage.setItem('planInfo',planInfo);
                    setTimeout(()=>{
                      this.$router.replace(`/modules/BatchCreate/newCreate`)
                    },2000)
                  }else{
                    if(res.message=='convert_id is required'){
                        this.$message.error('转化方式必须选择！')
                    }else{
                      this.$message.error(res.message)
                    }
                    
                  }
                 
                } else {
                   this.goNextloading=false;
                  this.$message.error('网络开小差了，等会再试试')
                }
              })
            }else{
              console.log(err)
              // this.$message.error(err)
            }
          })
        }
      })
      
    },
    // 验证名字是否有只
    validatorName() {
      if (this.names.length) {
        this.names.forEach((item) => {
          if (!item) {
            return false
          }
        })
        return true
      }
    },

    // h获取定向包的值
    getDirectedValue(val){
      console.log(val);
      this.directPackageValue={};
      this.directPackageValue=val;
    },
    goHttp() {
      // console.log(this.validatorName())
      this.$nextTick(()=>{
        console.log(this.$refs.directedPackage)
        if(this.visible){
          this.$refs.directedPackage.getValuehandle()
        }
        if (this.validatorName()) {
          this.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
              console.log('Received values of form: ', values)
              console.log(this.names)
              values.accountId = this.groupInfo.accountId
              values.campaignId = this.groupInfo.id;
              values.convertId = this.convertId;
              values.appType=this.getFormData('appType')
              values.externalAction=this.externalAction
              
              postAction('/ctop/byteDanceAdvertisePlan/add', {
                names: this.names,
                landingType: this.groupInfo.landingType,
                ...values,
                ...this.directPackageValue
              }).then((res) => {
                console.log(res)
                if (res.success) {
                  if(res.code==0){
                     this.$message.success('广告计划创建成功，2s后将跳转到新建计划页面')
                    let planInfo=JSON.stringify({...values,...this.directPackageValue,names:this.names,landingType: this.groupInfo.landingType,})
                    localStorage.setItem('planInfo',planInfo) 
                  }else{
                    this.$message.error(res.message)
                  }
                 
                } else {
                  this.$message.error('网络开小差了，等会再试试')
                }
              })
            }else{
              console.log(err)
            }
          })
        }
      })
    },
  },
  created() {},
  beforeMount() {},
  mounted() {
    this.$bus.$emit('remove', '/modules/BatchCreate/newGroup')

    let groupInfo = localStorage.getItem('groupInfo')
    console.log(groupInfo)
    if (groupInfo) {
      this.groupInfo = JSON.parse(groupInfo)
    }
    let accountInfo = localStorage.getItem('accountInfo')
      // console.log(groupInfo)
    if (accountInfo) {
      this.accountInfo = JSON.parse(accountInfo)
    }
    console.log(this.accountInfo)
    console.log(this.form.getFieldsValue())

    if (this.groupInfo.landingType == 'LINK') {
      this.form.setFieldsValue({
        downloadType: 'EXTERNAL_URL',
      })
    } else if (this.groupInfo.landingType == 'APP') {
      this.form.setFieldsValue({
        downloadType: 'DOWNLOAD_URL',
      })
    }

    let namePart = this.getFormData('pricing')
    // console.log(this.getFormData('pricing'))
    this.names[0] = namePart + moment().format('MM_DD_hh:mm') + '_' + 1;

    
  },
}
</script>
<style lang="scss">
.newPlan{
  .ant-btn-danger {
    background-color: #ff4d4f !important; 
  }
}


.ant-tooltip-inner,
.ant-tooltip,
.ant-tooltip-arrow::before {
  background-color: #fff;
  color: #333;
}
.ant-tooltip-inner {
  span {
    display: block;
  }
}
.ant-tooltip {
  max-width: 450px;
}
.newPlan {
  .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;
    }
  }
}
</style>
<style lang="scss" scoped>
.newPlan {
  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);
    .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: 5px;
    }
    .row-item .label-item {
      position: relative;
      align-items: flex-start;
      align-self: flex-start;
      line-height: 20px;
      height: 20px;
      margin-top: 7px;
      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: 480px;
      position: relative;
      // height: 35px;
      .tip {
        font-size: 12px;
        color: tomato;
      }
    }
  }
  .opt {
    text-align: right;
  }
}
</style>