<style>
  #table_time_selected1 tr {
    border: 1px solid rgb(102, 162, 243);
  }

  .plug-timer-grid th {
    line-height: 25px;
  }

  .group-creat .ant-form-item-required::before {
    display: inline-block;
    margin-right: 4px;
    color: #f5222d;
    font-size: 14px;
    font-family: SimSun, sans-serif;
    line-height: 1;
    content: '';
  }

  .else-label .ant-form-item-label label::after {
    content: '';
    position: relative;
    top: -0.5px;
    margin: 0 8px 0 2px;
  }
</style>
<template>
  <a-card :body-style="{ padding: '24px 32px' }" :bordered="false" class="group-creat">
    <a-form @submit="handleSubmit" :form="form">
      <a-form-item label="目标应用" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }" v-if="campaignType == '2'">
        <a-select v-decorator="['appId', { rules: [{ required: true, message: '请选择目标应用' }] }]" showSearch allowClear
          placeholder="选择应用目标" optionFilterProp="children" style="width: 500px" @focus="handleFocus" @blur="handleBlur"
          @change="handleChange" :filterOption="filterOption">
          <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 @click="addApplication" style="margin-left:10px">刷新应用</a> -->
        <a-button type="primary" @click="addApplication" :loading="tongbuLoading">
          刷新应用</a-button>
        <creat-application ref="application" />
      </a-form-item>
      <a-form-item label="转化类型" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }" v-if="campaignType == 3">
        <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>
      <a-form-item :label="campaignType == 3 ? ' ' : '链接'" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }" v-if="campaignType != 2"
        :class="{ 'else-label': campaignType == 3 }">
        <a-input placeholder="请填写链接" v-decorator="['url', { rules: [{ required: true,message:'链接不能为空'}] }]" />
      </a-form-item>

      <a-form-item label="转化目标" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        v-if="campaignType == 2||campaignType == 4||campaignType == 5">
        <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>

      <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="campaignType == 4||campaignType == 5">JS布玛</a-radio-button>
            <a-radio-button value="2" v-show="campaignType == 4||campaignType == 5">Xpath</a-radio-button>
            <a-radio-button value="3"
              v-show="campaignType == 2&&(getPlatForm(getData('appId'))==1||getPlatForm(getData('appId'))==2)">应用-SDK
            </a-radio-button>
            <a-radio-button value="7" v-show="campaignType == 2">应用-API</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="选择转化" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }">
          <a-select allowClear labelInValue style="width:100%" v-model="convertId" @focus="getConvertList">
            <a-select-option :value="item.convert_id" v-for="(item) in convertList" :key="item.convert_id">
              {{item.convert_name}}</a-select-option>
          </a-select>
        </a-form-item>
      </a-modal>

      <a-form-item label=" " :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }" class="else-label"
        v-if="campaignType == '2'&&(getPlatForm(getData('appId'))=='1'||getPlatForm(getData('appId'))=='2')">

        <a-checkbox v-decorator="[
          'useAppMarket',
          {
            valuePropName: 'checked',
            initialValue: false,
          },
        ]">
          优先从系统应用商店下载
        </a-checkbox>
      </a-form-item>
      <a-form-item label=" " :labelCol="{ lg: { span: 7}, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 16 } }" class="else-label" v-if="getData('useAppMarket')&&campaignType == '2'&&(getPlatForm(getData('appId'))=='1'||getPlatForm(getData('appId'))=='2')">
        请勾选投放应用已上架的应用商店（默认全选）
        <a-checkbox-group v-model="allForm.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>

      <a-form-item label="投放范围" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        v-if="allianceAccount">
        <a-radio-group buttonStyle="solid" v-model="allForm.allianceAccount">
          <a-radio-button value="1">默认</a-radio-button>
          <a-radio-button value="2">联盟广告</a-radio-button>
        </a-radio-group>
      </a-form-item>


      <div style="text-align:center;font-size:16px;margin-bottom:10px">
        目标人群
      </div>
      <a-form-item label="选择模板" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }">
        <a-select showSearch allowClear placeholder="选择模板" optionFilterProp="children" style="width: 500px"
          @change="handleChangeMould" :filterOption="filterOption">
          <a-select-option v-for="(appModel, index) in dataList" :key="index" :value="appModel.id">
            {{ appModel.templateName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <targeted-population ref="population" :populationData.sync="populationData"
        :platform="getPlatForm(getData('appId'))" :lol="allForm.allianceAccount"/>
      <a-form-item label=" " :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }" class="else-label">
        <div style="display:flex;">
          <a-checkbox :checked="checkedTrue" @change="getCheck">
            是否设置为模板
          </a-checkbox>
          <a-input v-model="nameValue" v-if="checkedTrue" placeholder="请输入模板名称" style="width:70%" />
        </div>
      </a-form-item>

      <div style="text-align:center;font-size:16px">
        预算和排期
      </div>

      <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="allForm.dayBudget">
          <a-radio-button value="0">不限</a-radio-button>
          <a-radio-button value="1">统一预算</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 } }" class="else-label" v-if="allForm.dayBudget == '1'">
        <a-input-number placeholder="不小于100，不超过100000000，仅支持输入自然数" style="width:100%" v-decorator="[
            'dayBudget',
            {
              rules: [{ required: true, message: '请填写预算' }, { validator: budgetValue }]
            }
          ]" />
      </a-form-item>
      <a-form-item label="投放方式" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }">
        <a-radio-group buttonStyle="solid" v-decorator="['speed', { initialValue: '1' }]">
          <a-radio-button value="1">正常投放</a-radio-button>
          <a-radio-button value="2">平滑投放</a-radio-button>
        </a-radio-group>
        <br />
        <span>
          {{ getData('speed') == '2' ? '平滑匀速投放' : '尽快展示广告消耗预算' }}
        </span>
      </a-form-item>
      <a-form-item label="排期" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }">
        <!-- v-decorator="['speed', { initialValue: '1' }]" -->
        <a-radio-group buttonStyle="solid" v-model="allForm.time" @change="setTime">
          <a-radio-button value="1">从今天开始长期投放</a-radio-button>
          <a-radio-button value="2">设置开始和结束日期</a-radio-button>
        </a-radio-group>
        <br />
        <a-range-picker v-if="allForm.time == '2'" v-model="timeRange" format="YYYY-MM-DD" :allowClear="false" />
      </a-form-item>
      <a-form-item label="投放时段" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }">
        <!-- v-decorator="['speed', { initialValue: '1' }]" -->
        <a-radio-group buttonStyle="solid" v-model="allForm.scheduleTime" @change="setTimeAll">
          <a-radio-button value="1">全天</a-radio-button>
          <a-radio-button value="2">特定时间</a-radio-button>
        </a-radio-group>
        <br />
        <selectCheckAll style="width:100%" v-show="allForm.scheduleTime == '2'"
          :scheduleTime.sync="allForm.scheduleTimeData" ref="selectCheck" />
      </a-form-item>
      <a-form-item label="创意展现方式" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }">
        <!-- v-decorator="['speed', { initialValue: '1' }]" -->
        <a-radio-group buttonStyle="solid" v-decorator="['showMode', { initialValue: '2' }]">
          <a-radio-button value="2">智能优选</a-radio-button>
          <a-radio-button value="1">随机轮播</a-radio-button>
        </a-radio-group>
        <br />
        <span>
          {{
            getData('showMode') == '1'
              ? '广告组包含的广告创意将随机展现'
              : '每一次展现的时候，系统会进行CTR预估，预估CTR高的会得到展现机会'
          }}
        </span>
      </a-form-item>
      <a-form-item label="场景广告位" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }" v-if="allForm.allianceAccount == '1'">
        <!-- v-decorator="['speed', { initialValue: '1' }]" -->
        <a-radio-group buttonStyle="solid" v-decorator="['sceneId', { initialValue: '1' }]">
          <a-radio-button value="1">优选广告位</a-radio-button>
          <a-radio-button value="2">按场景选择广告位</a-radio-button>
        </a-radio-group>
        <!-- getData('speed') == '2' -->
        <br>

      </a-form-item>
      <a-form-item label=" " :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }" class="else-label" v-if="getData('sceneId') == '2'">
        <a-checkbox-group :defaultValue="[7]" v-model="allForm.sceneId">
          <a-checkbox :value="7">信息流广告</a-checkbox>
          <a-checkbox :value="6">上下滑大屏广告</a-checkbox>
          <a-checkbox :value="3">视频播放页广告</a-checkbox>
        </a-checkbox-group>
      </a-form-item>
       <a-form-item label="创意制作方式" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }">
         <a-radio-group buttonStyle="solid" v-decorator="['unitType', { initialValue: '4' }]">
          <a-radio-button value="4">自定义</a-radio-button>
          <a-radio-button value="7" :disabled="allForm.allianceAccount=='2'">程序化创意2.0</a-radio-button>
        </a-radio-group>
       </a-form-item>
      <div style="text-align:center;font-size:16px">优化目标和计费</div>
      <a-form-item label=" " :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
        :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }" class="else-label">
        <div style="width:100%">
          <a-layout>
            <a-layout-content style="padding:10px;">
              <div :style="{ marginBottom: '16px' }">
                <a-button @click="addGroup" :disabled="allForm.group.length > 10">添加广告组</a-button>
              </div>
              <a-row>
                <a-col :sm="24" :md="24" :xl="24" :xxl="12" v-for="(item, index) of allForm.group" :key="index">
                  <a-card title :ref="item" style="height:435px">
                    {{ index + 1 }}
                    <a-icon type="close" style="float:right;cursor: pointer;" @click="removeGroup(index)" />
                    <div style="clear:both"></div>
                    <a-form-item label="优化目标" :labelCol="{ lg: { span: 6 }, sm: { span: 7 } }"
                      :wrapperCol="{ lg: { span: 18 }, sm: { span: 17 } }">

                      <a-radio-group buttonStyle="solid" v-model="item.bidType" @change="resData(index)">
                        <a-radio-button :value="1">点击数</a-radio-button>

                        <a-radio-button :value="10">转化数</a-radio-button>
                      </a-radio-group>

                              <!-- //   isOrderSubmit: 0   //订单提交优化目标
        //   isValidClue: 0    //使用有效线索
        //   isCreditGrant: 0  //授信出价
        //   deepConversionTypes: [{deepConversionType: 3, desc: "付费"}]
        //   isWanJian: 0     //完件出价
        //   isPurchase: 1   //付费出价
        //   isFirstdayRoi: 0  //首日ROI
        //   isActivate: 0   //激活出价
        //   isFormSubmit: 1  // 表单出价
        //   isRegister: 0    //注册优化目标 -->
                    </a-form-item>
                    <a-form-item label="转化目标" :labelCol="{ lg: { span: 6 }, sm: { span: 7 } }"
                      :wrapperCol="{ lg: { span: 18 }, sm: { span: 17 } }" v-if="item.bidType==10">
                      <a-select v-model="item.ocpxActionType">

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

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

                    </a-form-item>
                    <a-form-item label="深度转化目标" :labelCol="{ lg: { span: 6 }, sm: { span: 7 } }"
                      :wrapperCol="{ lg: { span: 18 }, sm: { span: 17 } }" v-if="
                        (item.ocpxActionType == 180 || item.ocpxActionType == 53) &&
                          allForm.groupTypeData.deepConversionTypes.length > 0
                      ">
                      <a-select v-model="item.deepConversionType" allowClear>
                        <a-select-option :value="items.deepConversionType"
                          v-for="(items, index) of allForm.groupTypeData.deepConversionTypes" :key="index">
                          {{ items.desc }}</a-select-option>
                      </a-select>
                    </a-form-item>

                    <a-form-item label="计费方式" :labelCol="{ lg: { span: 6 }, sm: { span: 7 } }"
                      :wrapperCol="{ lg: { span: 18 }, sm: { span: 17 } }">
                      <a-radio-group defaultValue="1">
                        <a-radio value="1">{{item.bidType == 1?"点击计费":"展示计费(oCPM)"}}</a-radio>
                      </a-radio-group>
                    </a-form-item>
                    <a-form-item label="出价" :labelCol="{ lg: { span: 6 }, sm: { span: 7 } }"
                      :wrapperCol="{ lg: { span: 18 }, sm: { span: 17 } }" v-if="item.bidType == 1">
                      <a-input-number v-model="item.bid" @change="showTip(index)"
                        :style="{ borderColor: item.showTipCheck ? 'red' : '#d9d9d9' }" style="width:100%">
                      </a-input-number>
                      <span style="color:red"
                        v-if="item.showTipCheck&&item.ocpxActionType==180">不得低于0.2元，不得高于项目最高出价{{ maxBid }}元</span>
                    </a-form-item>
                    <a-form-item label="目标成本" :labelCol="{ lg: { span: 6 }, sm: { span: 7 } }"
                      :wrapperCol="{ lg: { span: 18 }, sm: { span: 17 } }" v-else>
                      <a-input-number v-model="item.cpaBid" @change="showTip(index)"
                        :style="{ borderColor: item.showTipCheck ? 'red' : '#d9d9d9' }" style="width:100%">
                      </a-input-number>
                      <span style="color:red" v-if="item.showTipCheck">{{
                        item.bidType == 1
                          ? '不得低于1元，不得高于项目最高出价' + maxBid + '元'
                          : '不得低于1元，不得高于项目最高出价' + maxBid + '元'
                      }}</span>
                      <span style="color:red;font-weight:700" v-else-if="item.ocpxActionType==2&&item.cpaBid&&item.cpaBid>1">
                        行为出价大于1元,请注意！！！
                      </span>
                    </a-form-item>
                    <a-form-item label="深度转化出价" :labelCol="{ lg: { span: 6 }, sm: { span: 7 } }"
                      :wrapperCol="{ lg: { span: 18 }, sm: { span: 17 } }" v-if="
                        (item.ocpxActionType == 180 || item.ocpxActionType == 53) &&
                          allForm.groupTypeData.deepConversionTypes.length > 0 &&
                          item.deepConversionType != ''
                      ">
                      <a-input-number v-model="item.deepConversionBid" @change="deep_conversion_bidTip(index)"
                        :style="{ borderColor: item.deepConversionBidCheck ? 'red' : '#d9d9d9' }" style="width:100%"
                        :disabled="item.cpaBid == ''"></a-input-number>
                      <span style="color:red" v-if="item.deepConversionBidCheck">深度转化目标成本必须高于优化目标成本，且不得高于3000元</span>
                    </a-form-item>
                    <a-form-item label="广告组名称" :labelCol="{ lg: { span: 6 }, sm: { span: 7 } }"
                      :wrapperCol="{ lg: { span: 18 }, sm: { span: 17 } }">
                      <a-input v-model="item.unitName" @change="checkGroup($event, index)"></a-input>
                      <span style="color:red" v-if="item.unitNameCheck">广告组名称重复</span>
                    </a-form-item>
                  </a-card>
                </a-col>
              </a-row>
            </a-layout-content>
          </a-layout>
        </div>
      </a-form-item>
      <a-form-item :wrapperCol="{ span: 20 }" style="text-align: center">
        <a-button htmlType="submit" type="primary" :loading="loading">下一步</a-button>
        <!-- <a-button style="margin-left: 8px" @click="prevStep" v-show="step == 1">上一步</a-button> -->
      </a-form-item>
    </a-form>
    <a-modal v-model="visible" title="广告组创建信息">
      <div>
        创建成功：{{ allForm.success.length }}条
        <div style="margin-top:20px">
          <p v-for="(item, index) of allForm.success" :key="index">
            <span>名称：{{ item.unitName }}</span>
          </p>
        </div>
        <br />
        创建失败：{{ allForm.fail.length }}条
        <div style="margin-top:20px">
          <p v-for="(item, index) of allForm.fail" :key="index">
            <span>名称：{{ item.unitName }}</span><br />
            <span>错误信息：{{ item.failMessage }}</span>
          </p>
        </div>
      </div>
      <template slot="footer">
        <a-button key="back" @click="handleCancel">关闭</a-button>
        <a-button key="submit" type="primary" @click="handleOk" :disabled="allForm.success.length == 0">
          进入创意创建
        </a-button>
      </template>
    </a-modal>
  </a-card>
</template>

<script>
  import {
    getAction,
    postAction
  } from '@/api/manage'
  import moment from 'moment'
  import {
    mapGetters
  } from 'vuex'
  import jq from 'jquery'

  import creatApplication from './stepModule/creatApplication.vue'
  import targetedPopulation from './stepModule/targetedPopulation.vue'

  import selectCheckAll from './stepModule/test'
  let dateQuantumRangeConst = ''
  const columns = [{
      title: '人群',
      dataIndex: 'orientationName',
      scopedSlots: {
        customRender: 'orientationName'
      },
      width: 150
    },
    {
      title: '属性',
      dataIndex: 'populationType',
      filters: [{
          text: '上传人群',
          value: '1'
        },
        {
          text: '广告人群',
          value: '2'
        },
        {
          text: '主题专区',
          value: '3'
        },
        {
          text: '逻辑规则',
          value: '4'
        },
        {
          text: '人群扩展',
          value: '5'
        },
        {
          text: '平台定制',
          value: '6'
        },
        {
          text: '定制付费',
          value: '7'
        },
        {
          text: '网红粉丝类别',
          value: '8'
        },
        {
          text: '内容付费行为',
          value: '9'
        },
        {
          text: '移动应用安装',
          value: '10'
        },
        {
          text: '快手使用活跃度',
          value: '11'
        },
        {
          text: '行业分类',
          value: '12'
        },
        {
          text: '商业兴趣',
          value: '13'
        },
        {
          text: '固化标签',
          value: '14'
        },
        {
          text: '行业偏好',
          value: '15'
        },
        {
          text: '第三方标签',
          value: '16'
        },
        {
          text: '产品关键词',
          value: '17'
        }
      ],
      onFilter: (value, record) =>
        record.populationType
        .toString()
        .toLowerCase()
        .includes(value.toLowerCase()),
      scopedSlots: {
        customRender: 'populationType'
      },
      width: 150
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      scopedSlots: {
        customRender: 'createTime'
      },
      sorter: (a, b) => a.createTime - b.createTime
    }
  ]

  export default {
    name: 'Step2',
    components: {
      creatApplication,
      targetedPopulation,
      selectCheckAll,
    },
    props: {
      campaignId: {
        type: String,
        default () {
          return null
        }
      }
    },

    data() {
      return {
        allianceAccount:false,
        tongbuLoading: false,
        convert: false,
        convertId: "",
        convertList: [],
        checkedTrue: false,
        nameValue: '',
        visible: false,
        timeRange: [],
        form: this.$form.createForm(this),
        step: 0,
        people: '2',
        targeted: '2',
        topMiddle: false,
        topMiddleNo: false,
        keyValue: '',
        keyValueNo: '',
        columns,
        selectedRowKeys: [],
        selectedRowKeysValue: [],
        selectedRowKeysNo: [],
        selectedRowKeysValueNo: [],
        data: [],
        populationData: {},
        url: {
          insertTemplateUrl: '/kuaishou/create/createGroups',
          userAllocationList: '/ctop/userAllocation/list',
          campaignList: '/kuaishou/kuaiShouCampaignTemplate/list',
          getDeepConversionUrl: '/kuaishou/kuaiShouConversionTypes/getIsActivate',
          getCampaignTemplate: '/kuaishou/kuaiShouCampaignTemplate/getKuaiShouCampaignTemplate',
          appListUrl: '/kuaishou/kuaiShouCreateAppTemplate/list'
        },
        appList: [],
        appId: '',
        loading: false,
        campaignTemplateId: '',
        campaignType: '2',
        maxBid: 0,
        allForm: {
          dayBudget: '0',
          time: '1',
          scheduleTime: '1',
          scheduleTimeData: '000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000',
          group: [],
          groupTypeData: {},
          fail: [],
          success: [],
          sceneId: [7],
          appStore: ['huawei', 'oppo', 'vivo', 'xiaomi', 'meizu', 'smartisan'],
          allianceAccount:"1"
        },
        convertType: '1',
        dataList: []
      }
    },
    computed: {
      count() {
        return moment().startOf('day')
      }
    },
    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]
      }
    },
    methods: {
      showConvert() {
        this.convertChange()
        if (this.campaignType == 2) {
          if (this.getData('appId')) {
            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()
      },
      convertChange() {
        this.convertId = ""
      },
      getConvertList() {
        var params = {}
        params.accountId = localStorage.getItem('accountId')
        params.type = this.convertType
        getAction('/kuaishou/batch/getConvertList', params).then(res => {
          console.log(res)
          if (res.success) {
            this.convertList = res.result.map(item => {
              return {
                ...item,
                convert_id: item.convert_id + ''
              }
            })
          }
        })
      },
      getCheck(e) {
        this.checkedTrue = e.target.checked
      },
      addGroup() {
        if(this.campaignType=='2'||this.campaignType==2){
          if(this.getData('appId')){
            this.allForm.group.push({
              bidType:  10,
              bid: '',
              cpaBid: '',
              showTipCheck: false,
              deepConversionBidCheck: false,
              unitName: '',
              unitNameCheck: false,
              deepConversionType: '',
              deepConversionBid: '',
              ocpxActionType:this.campaignType == '2' && this.allForm.groupTypeData.isActivate == '1' ? 180 : 2,
            })
          }else{
            this.$message.error('请选择目标应用之后添加广告组')
          }
        }else{
           this.allForm.group.push({
              bidType:  10,
              bid: '',
              cpaBid: '',
              showTipCheck: false,
              deepConversionBidCheck: false,
              unitName: '',
              unitNameCheck: false,
              deepConversionType: '',
              deepConversionBid: '',
              ocpxActionType:this.campaignType == '2' && this.allForm.groupTypeData.isActivate == '1' ? 180 : 2,
            })
        }

      },
      resData(index) {
        this.allForm.group[index].bid = ''
        this.allForm.group[index].cpaBid = ''
        this.allForm.group[index].showTipCheck = false
        this.allForm.group[index].deepConversionBidCheck = false
        this.allForm.group[index].deepConversionType = ''
        this.allForm.group[index].deepConversionBid = ''
      },
      removeGroup(index) {
        this.allForm.group.splice(index, 1)
      },
      deep_conversion_bidTip(index) {
        if (
          this.allForm.group[index].deepConversionBid < this.allForm.group[index].cpaBid ||
          this.allForm.group[index].deepConversionBid > 3000
        ) {
          this.allForm.group[index].deepConversionBidCheck = true
        } else {
          this.allForm.group[index].deepConversionBidCheck = false
        }
      },
      checkGroup(e, index) {
        if (e.target.value != '') {
          getAction('/kuaishou/batch/checkUnitName', {
            campaignId: localStorage.getItem('campaignId'),
            unitName: e.target.value
          }).then(res => {
            if (res.success) {
              this.allForm.group[index].unitNameCheck = !res.result
            } else {
              this.allForm.group[index].unitNameCheck = false
            }

          })
        }

      },
      showTip(index) {
        if (this.allForm.group[index].bidType == 1) {
          if (this.allForm.group[index].bid < 0.2 || this.allForm.group[index].bid > this.maxBid) {
            this.allForm.group[index].showTipCheck = true
          } else {
            this.allForm.group[index].showTipCheck = false
          }
        } else {
          if (this.allForm.group[index].cpaBid < 1 || this.allForm.group[index].cpaBid > this.maxBid) {
            this.allForm.group[index].showTipCheck = true
          } else {
            this.allForm.group[index].showTipCheck = false
          }
        }
      },
      getScheduleTime(item) {
        this.allForm.scheduleTimeData = item
      },
      setTime(e) {
        //   console.log(moment('2019-12-27'))
        if (e.target.value == '2') {
          this.timeRange[0] = moment().startOf('day')
          this.timeRange[1] = moment().add(1, 'months')
        }
      },
      setTimeAll(e) {
        //   console.log(moment('2019-12-27'))
        if (e.target.value == '2') {
          this.$nextTick(() => {
            this.$refs.selectCheck.init()
          })
        } else {}
      },
      getData(className) {
        return this.form.getFieldValue(className)
      },
      handleConfirmValue(rule, value, callback) {
        if (this.campaignType == 3) {
          if (value == '') {
            callback('请填写链接')
          }
        } else if (this.campaignType == 4) {
          if (/(http|https):\/\/([\w.]+\/?)\S*/.test(value) && value != '' && value.length < 10000) {
            callback()
          } else {
            callback('链接不能为空且开头为http://或https://，并且长度小于10000')
          }
        } else if (this.campaignType == 5) {
          if (/(http|https):\/\/([\w.]+\/?)\S*/.test(value) && value != '' && value.length < 10000) {
            callback()
          } else {
            callback('链接不能为空且开头为http://或https://，并且长度小于10000')
          }
        }
      },
      budgetValue(rule, value, callback) {
        if (value < 100 || value > 100000000) {
          callback('不小于100，不超过100000000，仅支持输入自然数')
        }
        callback()
      },
      handleConfirmBid(rule, value, callback) {
        if (this.bid == 0 || this.bid <= 0.2 || this.bid >= 100) {
          callback('不得低于0.2元，不得高于100元')
        }
        callback()
      },

      handleConfirmCpaBid(rule, value, callback) {
        if (this.ocpxActionType == '2' && (this.cpaBid == 0 || this.cpaBid <= 1 || this.cpaBid >= 3000)) {
          callback('金额不得低于1元，不得高于3000元')
        }
        if (this.ocpxActionType == '180' && (this.cpaBid == 0 || this.cpaBid <= 5 || this.cpaBid >= 3000)) {
          callback('金额不得低于5元，不得高于3000元')
        }
        callback()
      },
      onSelectChange(selectedRowKeys, selectionRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRowKeysValue = selectionRows.map(item => {
          return {
            orientationId: item.orientationId,
            orientationName: item.orientationName
          }
        })
      },
      getCheckboxProps(record) {
        return {
          props: {
            disabled: this.selectedRowKeysValueNo.some(item => item.orientationId === record.orientationId)
          }
        }
      },
      onSelectChangeNo(selectedRowKeys, selectionRows) {
        this.selectedRowKeysNo = selectedRowKeys
        this.selectedRowKeysValueNo = selectionRows.map(item => {
          return {
            orientationId: item.orientationId,
            orientationName: item.orientationName
          }
        })
      },
      getCheckboxPropsNo(record) {
        return {
          props: {
            disabled: this.selectedRowKeysValue.some(item => item.orientationId === record.orientationId)
          }
        }
      },
      okSelect() {
        this.keyValue = ''
        this.topMiddle = false
        for (let i = 0; i < this.selectedRowKeysValue.length; i++) {
          this.keyValue += this.selectedRowKeysValue[i].orientationName + '   '
        }
      },
      okSelectNo() {
        this.keyValueNo = ''
        this.topMiddleNo = false
        for (let i = 0; i < this.selectedRowKeysValueNo.length; i++) {
          this.keyValueNo += this.selectedRowKeysValueNo[i].orientationName + '   '
        }
      },
      radioChange() {
        this.selectedRowKeys = []
        this.selectedRowKeysValue = []
        this.selectedRowKeysNo = []
        this.selectedRowKeysValueNo = []
        this.keyValue = ''
        this.keyValueNo = ''
      },

      addApplication() {
        this.tongbuLoading = true
        // this.$refs.application.showApplication()
        getAction('/kuaishou/batch/syncAppList', {
          accountId: localStorage.getItem('accountId')
        }).then(res => {
          if (res.success) {
            this.tongbuLoading = false
            this.$message.success(res.message)
            this.getAppList()
          } else {
            this.tongbuLoading = false
            this.$message.error(res.message)
          }
        })
      },
      handleOk() {
        var that = this
        if (this.allForm.success.length > 0) {
          that.$emit('nextStep')
          this.visible = false
        }
      },
      handleCancel(e) {
        this.visible = false
      },
      handleSubmit(e) {
        //   this.$refs.population.handleSubmit()

        e.preventDefault()
        this.$refs.population.handleSubmit()
        this.form.validateFieldsAndScroll((err, values) => {
          if (!err) {
            this.loading = true
            console.log(values)
            var groupArr = this.allForm.group.map(item => {
              return {
                ...item,
                cpaBid: item.cpaBid != '' ? item.cpaBid * 1000 : '',
                bid: item.bid != '' ? item.bid * 1000 : '',
                deepConversionBid: item.deepConversionBid != '' ? item.deepConversionBid * 1000 : '',
                ocpxActionType: item.ocpxActionType,
                bidType: item.bidType == 1 ? 2 : 10
              }
            })
            var json = {
              ...values,
              convertId: this.convertId ? this.convertId.key : null,
              sceneId: this.allForm.allianceAccount=='1'?values.sceneId == 1 ? [values.sceneId] : this.allForm.sceneId:[5],
              dayBudget: values.dayBudget * 1000
            }
            var params = {
              ...this.populationData,
              ...json,
              groupArr: groupArr,
              accountId: localStorage.getItem('accountId'),
              campaignId: localStorage.getItem('campaignId'),
              beginTime: moment(this.timeRange[0]).format('YYYY-MM-DD'),
              endTime: this.allForm.time == '2' ? moment(this.timeRange[1]).format('YYYY-MM-DD') : '',
              scheduleTime: this.allForm.scheduleTime == '2' ?
                this.allForm.scheduleTimeData :
                '000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000'
            }
            if (values.useAppMarket == true || values.useAppMarket == false) {
              params.useAppMarket = values.useAppMarket ? 1 : 0
              if (values.useAppMarket == true) {
                params.appStore = this.allForm.appStore
              }
            }
            if(this.allForm.allianceAccount=='1'){
              var {...paramsEnd} = params
            }else{
              var {fansStar,appType,businessInterestType,interestVideo,isOpen,noAgeBreak,noGenderBreak,noAreaBreak,...paramsElse} = params.allForm
              params.allForm = paramsElse
              var {businessInterestType,isOpen,noAgeBreak,noGenderBreak,noAreaBreak,...paramsEnd} = params
            }
            //fansStar  appType  businessInterestType   interestVideo isOpen
            if (this.checkedTrue) {
              var data = this.populationData
              postAction('/kuaishou/batch/addDirectionalTemplate', {
                accountId: localStorage.getItem('accountId'),
                templateName: this.nameValue,
                templateContent: JSON.stringify(this.populationData)
              }).then(res => {})
            }
            postAction('/kuaishou/batch/createUnit', paramsEnd).then(res => {
              if (res.success) {
                this.visible = true
                this.allForm.fail = res.result.fail
                this.allForm.success = res.result.success
                this.loading = false
                if (res.result.success.length > 0) {

                  var dataElse =  res.result.success.map(item => {
                      return {
                        tab: item.unitName,
                        key: item.unitId,
                        bidType: item.ocpxActionType,
                        sceneId:JSON.stringify(item.sceneId),
                        unitType: item.unitType
                      }
                    })
                  var dataJson = JSON.stringify(dataElse)
                  localStorage.setItem('pans', dataJson)
                  localStorage.setItem('appId', this.getData('appId'))
                  
                }
              } else {
                this.loading = false
                this.$message.error(res.message)
              }
            })
          }
        })
      },
      onChange(value) {
        console.log(value)
      },
      handleChange(value) {
        //   this.$refs.population.getAppList(value)
        this.allForm.group = []
        getAction('/kuaishou/batch/getIsActivate', {
          accountId: localStorage.getItem('accountId'),
          appId:this.getData('appId'),
          campaignType:2
        }).then(res => {
          if (res.success) {
            this.allForm.groupTypeData = res.result
          }
        })
      },
      handleChangeMould(value) {
        if (value) {
          this.populationData = JSON.parse(
            this.dataList.filter(item => {
              return item.id == value
            })[0].templateContent
          )
        } else {
          this.populationData = {}
        }
      },
      getPlatForm(appId) {
        if (appId) {
          var data = this.appList.filter(item => {
            return item.appId == appId
          })
          return data[0].platform
        }
      },
      handleBlur() {
        console.log('blur')
      },
      handleFocus() {
        console.log('focus')
      },
      filterOption(input, option) {
        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      },
      prevStep() {
        this.$emit('prevStep', this.campaignId ? this.campaignId : localStorage.getItem('campaignId'))
      },
      getMould() {
        let params = {}
        params.accountId = localStorage.getItem('accountId')
        getAction('/kuaishou/batch/getDirectionalTemplate', params).then(res => {
          console.log(res)
          if (res.success) {
            this.dataList = res.result.map((item, index) => {
              return {
                ...item,
                key: index
              }
            })
          }
        })
      },

      getAppList() {
        let params = {}
        params.accountId = localStorage.getItem('accountId')
        getAction('/kuaishou/batch/getAppList', params).then(res => {
          if (res.success) {
            this.appList = res.result.map((item, index) => {
              return {
                ...item,
                key: index
              }
            })
          }
        })
      },

      getCampaignList() {
        var params = {}
        params.accountId = localStorage.getItem('accountId')
        params.campaignId = this.campaignId ? this.campaignId : localStorage.getItem('campaignId')
        getAction('/kuaishou/batch/getCampaignList', params).then(res => {
          if (res.success) {
            this.campaignType = res.result.records[0].campaignType


            if(this.campaignType!=2){
              getAction('/kuaishou/batch/getIsActivate', {
                accountId: localStorage.getItem('accountId'),
                campaignType:this.campaignType
              }).then(res => {
                if (res.success) {
                  this.allForm.groupTypeData = res.result
                }
              })
            }
            // console.log(this.campaignType)
          }
        })
      },
      getData(className) {
        return this.form.getFieldValue(className)
      }
    },
    watch: {
      timeSeries(val) {
        console.log(val)
      }
    },
    mounted: function () {
      this.step = localStorage.getItem('step')
      this.getAppList()
      this.getCampaignList()
      this.getMould()



      getAction('/kuaishou/batch/getWhiteList',{
        accountId:localStorage.getItem('accountId')
      }).then(res=>{
        if(res.success){
          console.log(res)
          if(res.result){
            if(res.result.alliance_account == 1){
              this.allianceAccount = true
            }else{
              this.allianceAccount = false
            }
          }else{
            this.allianceAccount = false
          }
        }
      })
      getAction('/kuaishou/batch/getProjectMaxBid', {
        accountId: localStorage.getItem('accountId')
      }).then(res => {
        if (res.success) {
          this.maxBid = res.result / 1000
        }
      })
    }
  }
</script>

<style type="text/css">
  .plug-timer-grid {
    width: 100%;
  }

  .plug-timer-grid td,
  .plug-timer-grid th {
    border: 1px solid #97b4d1;
    text-align: center;
    /*cursor:pointer;*/
    font-size: 10px;
    line-height: 10px;
  }

  .Selected {
    background-color: rgb(102, 162, 243);
    opacity: 0.5;
  }

  .plug-timer-grid {
    border-collapse: collapse;
    z-index: 4;
  }

  .plug-timer-grid thead tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
  }

  .group-creat table td {
    height: 20px;
    max-width: 5px;
    font-size: 12px;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    transition: background 0.5s;
    -webkit-transition: background 0.5s;
  }

  .plug-timer-grid tbody th {
    width: 4%;
  }

  .plug-timer-grid tbody tr td {
    width: 2%;
  }

  /*.clear{*/
  /*  margin:20px 0px 20px 0px;*/
  /*}*/
</style>