<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-modal v-model="visible" title="修改广告组信息" :width="900" v-if="visible">
    <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 :disabled="typeCopy=='edit'"
          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>
        <br v-if="typeCopy!='edit'">
        <span v-if="typeCopy!='edit'" style="color:red">如修改目标应用,请重新选择落地页</span>
        <!-- <a @click="addApplication" style="margin-left:10px">添加应用</a> -->
        <creat-application ref="application" />
      </a-form-item>
      <a-form-item label=" " class="else-label" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        v-if="campaignType == '2'&&showSite&&(getPlatForm(getData('appId'))=='1'||getPlatForm(getData('appId'))=='2')">
        <a-select v-model="siteId" showSearch allowClear placeholder="选择应用下载详情页" optionFilterProp="children"
          :filterOption="filterOption">
          <a-select-option v-for="appModel in siteList" :key="appModel.siteId" :value="appModel.siteId">
            {{ appModel.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <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' }">
        <!-- 请填写以http://或者https://开头的落地页地址，长度不超过1000个字符 -->
        <a-input placeholder="请填写链接"
          v-decorator="['url', { rules: [{ required: true, message: ' ' }, { validator: handleConfirmValue }] }]" />
      </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="campaignType == '2'&&(getPlatForm(getData('appId'))=='1'||getPlatForm(getData('appId'))=='2')">

        <a-checkbox @change="onChange" :checked="allForm.useAppMarket">
          优先从系统应用商店下载
        </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="allForm.useAppMarket">
        请勾选投放应用已上架的应用商店（默认全选）
        <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" :disabled="typeCopy=='edit'">
          <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-show="allForm.dayBudget == '1'">
        <a-input placeholder="不小于100，不超过100000000，仅支持输入自然数" v-decorator="[
            'dayBudget',
          ]" />
      </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']">
          <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: 17 }, 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" :disabled="typeCopy=='edit'" v-model="allForm.sceneIdAll">
          <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="allForm.sceneIdAll == 2">
        <a-checkbox-group :disabled="typeCopy=='edit'" :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>
      <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="24" v-for="(item, index) of allForm.group" :key="index">
                  <a-card title :ref="item" style="height:435px">
                    <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>
                    </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">不得低于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>
    <template slot="footer">
      <a-button type="primary" @click="handleSubmit" :loading="loading">
        确定
      </a-button>
    </template>
    <a-modal v-model="visibleFail" title="错误信息" :footer="null">
      <div v-if="visibleData">
        失败条数：{{ visibleData.failCount }}
        <div style="margin-top:20px">
          <p v-for="(item, index) of visibleData.failInfo" :key="index">
            <span>名称：{{ item.campaignName?item.campaignName:item.unitName }}</span><br />
            <span>错误信息：{{ item.failMessage }}</span>
          </p>
        </div>
      </div>
    </a-modal>
  </a-modal>
</template>

<script>
  import {
    getAction,
    postAction,
    deleteAction,
    putAction
  } from '@/api/manage'
  import moment from 'moment'
  import {
    mapGetters
  } from 'vuex'
  import jq from 'jquery'
  import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
  import targetedPopulation from '@/views/modules/kuaishouapp/account/stepForm/stepModule/targetedPopulation.vue'

  import creatApplication from '@/views/modules/kuaishouapp/account/stepForm/stepModule/creatApplication.vue'

  import selectCheckAll from '@/views/modules/kuaishouapp/account/stepForm/stepModule/test'
  import pick from 'lodash.pick'
  export default {
    name: 'new-mould',
    components: {
      targetedPopulation,
      Treeselect,
      creatApplication,
      selectCheckAll
    },
    data() {
      return {
        allianceAccount:false,
        visibleFail: false,
        visibleData: null,
        checkedTrue: false,
        nameValue: '',
        visible: false,
        timeRange: [],
        form: this.$form.createForm(this),
        step: 0,
        people: '2',
        targeted: '2',
        topMiddle: false,
        topMiddleNo: false,
        keyValue: '',
        keyValueNo: '',
        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: {
          sceneIdAll: 1,
          dayBudget: '0',
          time: '1',
          scheduleTime: '1',
          scheduleTimeData: '000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000',
          group: [],
          groupTypeData: null,
          fail: [],
          success: [],
          sceneId: [7],
          useAppMarket: false,
          appStore: ['huawei', 'oppo', 'vivo', 'xiaomi',
            'meizu', 'smartisan'
          ],
          allianceAccount:'1'
        },
        typeCopy: "edit",
        dataList: [],
        unitId: '',
        oneCampaignId: '',
        copyCampaignId: '',
        showSite: false,
        siteId: "",
        siteList: [],
        isUpdateTrackUrl: false,
        clickTrackUrl: ""
      }
    },
    computed: {},
    filters: {
      platform(str) {
        var data = {
          1: 'Android应用下载',
          2: 'Android网页游戏',
          3: 'iOS应用下载',
          4: 'iOS网页游戏'
        }
        return data[str]
      }
    },
    methods: {
      getCheck(e) {
        this.checkedTrue = e.target.checked
      },
      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('advertisingGroupKey'),
            unitName: e.target.value
          }).then(res => {
            this.allForm.group[index].unitNameCheck = !res.result
          })
        }

      },
      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.$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.$refs.application.showApplication()
      },
      handleOk(item, type, campaignId, unitNameCopy, isUpdateTrackUrl, clickTrackUrl) {
        this.visible = true
        this.showSite = false
        this.isUpdateTrackUrl = isUpdateTrackUrl
        this.clickTrackUrl = clickTrackUrl
        //   /kuaishou/batch/getUnitDetail
        this.typeCopy = type
        if (campaignId) {
          this.oneCampaignId = item.campaignId
          this.copyCampaignId = campaignId
        }
        console.log(item.campaignId, campaignId)
        this.unitId = item.unitId
        var params = {}
        params.accountId = item.accountId
        params.unitId = item.unitId
        getAction('/kuaishou/batch/getUnitDetail', params).then(res => {
          if (res.success) {
            var dataJson = {
              ...res.result.baseInfo,
              ...res.result.appInfo,
              ...res.result.target
            }
            //   dataJson.useAppMarket = dataJson.useAppMarket==0?false:true

            this.allForm.sceneIdAll = JSON.parse(dataJson.sceneId).filter(item => item == 1).length > 0 ? 1 : JSON.parse(dataJson.sceneId)[0] ==5 ? 5 : 2
            this.allForm.allianceAccount = this.allForm.sceneIdAll==5?'2':'1'
            this.allForm.useAppMarket = dataJson.useAppMarket ? (dataJson.useAppMarket == 0 ? false : true) : false
            this.allForm.appStore = this.allForm.useAppMarket ? JSON.parse(dataJson.appStore) : ['huawei', 'oppo',
              'vivo', 'xiaomi',
              'meizu', 'smartisan'
            ]
            this.allForm.sceneId = this.allForm.sceneIdAll == 1 ? [7] : JSON.parse(res.result.baseInfo
              .sceneId)
            console.log(this.allForm.sceneId, 1111111)
            this.allForm.dayBudget = dataJson.dayBudget == 0 ? '0' : '1'
            dataJson.dayBudget = dataJson.dayBudget / 1000
            this.allForm.time = dataJson.endTime ? '2' : '1'
            this.timeRange = [moment(dataJson.beginTime), moment(dataJson.endTime)]
            this.allForm.scheduleTime = dataJson.scheduleTime.indexOf('1') != -1 ? '2' : '1'
            this.allForm.scheduleTimeData = dataJson.scheduleTime
            this.allForm.group = [{
              bidType: dataJson.bidType,
              bid: dataJson.bid,
              cpaBid: dataJson.cpaBid / 1000,
              showTipCheck: false,
              deepConversionBidCheck: false,
              unitName: unitNameCopy ? unitNameCopy : dataJson.unitName,
              unitNameCheck: false,
              deepConversionType: dataJson.deepConversionType,
              deepConversionBid: dataJson.deepConversionBid / 1000,
              ocpxActionType:dataJson.ocpxActionType
            }]

            this.populationData = dataJson
            this.populationData.population = dataJson.population ? JSON.parse(dataJson.population) : null
            this.populationData.excludePopulation = dataJson.excludePopulation ? JSON.parse(dataJson
                .excludePopulation) :
              null

            this.populationData.devicePrice = dataJson.devicePrice ? JSON.parse(dataJson.devicePrice) : null
            this.populationData.appInterest = dataJson.appInterest ? JSON.parse(dataJson.appInterest) : null
            this.populationData.businessInterest = dataJson.businessInterest ?
              JSON.parse(dataJson.businessInterest) :
              null
            this.populationData.fansStar = dataJson.fansStar ? JSON.parse(dataJson.fansStar) : null
            this.populationData.interestVideo = dataJson.interestVideo ? JSON.parse(dataJson.interestVideo) : null
            this.populationData.deviceBrand = dataJson.deviceBrand ? JSON.parse(dataJson.deviceBrand) : null

            this.populationData.age = dataJson.ageMin ? [dataJson.ageMin, dataJson.ageMax] : []
            this.populationData.agesRange = dataJson.agesRange ? JSON.parse(dataJson.agesRange) : []
            this.populationData.devicePrice = dataJson.devicePrice ? dataJson.devicePrice : null
            this.populationData.allForm = {}
            this.populationData.allForm.regionType =
              dataJson.region && JSON.parse(dataJson.region).length > 0 ? 'limit' : 'noLimit'

            this.populationData.allForm.region = dataJson.region
            // postAction('/kuaishou/batch/getRegionDetail', {
            //   regionArr: dataJson.region
            // }).then(res => {
            //   console.log(res, 11111)
            //   if (res.success) {
            //     this.populationData.allForm.region = res.result
            //   }
            // })

            this.populationData.allForm.ageType =
              dataJson.agesRange.length > 0 ? 'ageLimit' : dataJson.ageMin ? 'ageCustom' : 'noLimit'
            this.populationData.allForm.device = dataJson.deviceBrand ? '1' : '0'
            this.populationData.allForm.price = dataJson.devicePrice ? '1' : '0'
            this.populationData.allForm.appType = dataJson.appInterest ? '1' : dataJson.appIds ? '2' : '0'
            this.populationData.allForm.fansStar = dataJson.fansStar ? '1' : '0'
            this.populationData.allForm.interestVideo = dataJson.interestVideo ? '1' : '0'
            this.populationData.allForm.platform_os = dataJson.platformOs
            this.populationData.allForm.businessInterestType = dataJson.businessInterest ? 2 : 0
            this.populationData.allForm.isOpen = dataJson.isOpen
            this.populationData.allForm.noAgeBreak = dataJson.noAgeBreak + ''
            this.populationData.allForm.noGenderBreak = dataJson.noGenderBreak + ''
            this.populationData.allForm.noAreaBreak = dataJson.noAreaBreak + ''
            this.populationData.allForm.checkArr = this.populationData.allForm.appType == '2' ? JSON.parse(dataJson
              .appIds) : []
            this.$nextTick(() => {
              console.log(dataJson)
              this.form.setFieldsValue(pick(dataJson, ['appId', 'urlType', 'url', 'dayBudget', 'speed',
                'showMode'
              ]))
              //   this.form.setFieldsValue({
              //     appId: dataJson.appId
              //   })
              //   this.form.setFieldsValue({
              //     dayBudget: dataJson.dayBudget
              //   })
              //   this.form.setFieldsValue({
              //     speed: dataJson.speed
              //   })
              //   this.form.setFieldsValue({
              //     showMode: dataJson.showMode
              //   })
              //   console.log(dataJson.sceneId)
              //   this.form.setFieldsValue({
              //     sceneId: dataJson.sceneId
              //   })
            })
          }
        })
      },
      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
            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
              }
            })[0]
            var json = {
              ...values,
              // sceneId: this.allForm.sceneIdAll == 1 ? [this.allForm.sceneIdAll] : this.allForm.sceneId,
              sceneId: this.allForm.allianceAccount=='1'?this.allForm.sceneIdAll == 1 ? [this.allForm.sceneIdAll] : this.allForm.sceneId:[5],
              dayBudget: values.dayBudget * 1000
            }
            var params = {
              ...this.populationData,
              ...json,

              accountId: localStorage.getItem('accountId'),
              unitId: this.unitId,
              unitType: 4,
              beginTime: this.allForm.time == '2' ? moment(this.timeRange[0]).format('YYYY-MM-DD') : moment()
                .startOf('day').format('YYYY-MM-DD'),
              endTime: this.allForm.time == '2' ? moment(this.timeRange[1]).format('YYYY-MM-DD') : '',
              scheduleTime: this.allForm.scheduleTimeData
            }
            if (this.allForm.useAppMarket == true || this.allForm.useAppMarket == false) {
              params.useAppMarket = this.allForm.useAppMarket ? 1 : 0
              if (this.allForm.useAppMarket == true) {
                params.appStore = this.allForm.appStore
              }
            }


            if (this.isUpdateTrackUrl) {
              if (this.showSite && (this.getPlatForm(this.getData('appId')) == '1' || this.getPlatForm(this.getData(
                  'appId')) == '2')) {
                params.otherJson = {
                  isUpdate: true,
                  siteId: this.siteId,
                  isUpdateTrackUrl: true,
                  clickTrackUrl: this.clickTrackUrl
                }
              } else {
                params.otherJson = {
                  isUpdateTrackUrl: true,
                  clickTrackUrl: this.clickTrackUrl,
                  isUpdate: false
                }
              }
            } else {
              if (this.showSite && (this.getPlatForm(this.getData('appId')) == '1' || this.getPlatForm(this.getData(
                  'appId')) == '2')) {
                params.otherJson = {
                  isUpdate: true,
                  siteId: this.siteId,
                  isUpdateTrackUrl: false,
                }
              } else {
                params.otherJson = {
                  isUpdate: false,
                  isUpdateTrackUrl: false,
                }
              }
            }

            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 => {})
            }
            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
            }
            if (this.typeCopy == 'edit') {
              var param = {
                ...paramsEnd,
                ...groupArr
              }
              postAction('/kuaishou/batch/updateUnit', param).then(res => {
                if (res.result.code == 0) {
                  this.visible = false
                  this.$emit('getList', localStorage.getItem('advertisingGroupKey'))
                  this.loading = false
                } else {
                  this.loading = false
                  this.$message.error(res.result.message)
                }
              })
            } else if (this.typeCopy == 'copy') {
              paramsEnd.type = 'copy'
              paramsEnd.copyUnitId = this.unitId
              paramsEnd.copyToCampaignId = this.copyCampaignId
              paramsEnd.campaignId = this.oneCampaignId
              paramsEnd.createCount = 1
              paramsEnd.groupArr = [groupArr]
              postAction('/kuaishou/batch/copyUnit', paramsEnd).then(res => {
                if (res.success) {
                  if (res.result.failCount > 0) {
                    this.visibleFail = true
                    this.visibleData = res.result
                    this.loading = false
                  } else {
                    var that = this
                    setTimeout(() => {
                      that.visible = false
                      that.loading = false
                      that.$emit('getList', localStorage.getItem('advertisingGroupKey'))
                    }, 1000)
                  }

                } else {
                  this.$message.error(res.message)
                }

              })
            }

          }
        })

      },
      onChange(e) {
        this.allForm.useAppMarket = e.target.checked
        //   console.log(value)
      },
      getPageList(appId) {
        getAction('/kuaishou/batch/getPageList', {
          accountId: localStorage.getItem('accountId'),
          appId: appId,
          viewComp: 7
        }).then(res => {
          if (res.success) {
            console.log(res)
            this.siteList = res.result
          }
        })
      },
      handleChange(value) {
        //   this.$refs.population.getAppList(value)
        if (value == this.getData('appId')) {
          this.showSite = false
        } else {
          this.showSite = true
          this.siteId = ''
          this.getPageList(value)
        }
      },
      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('advertisingGroupKey'))
      },
      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('advertisingGroupKey')
        getAction('/kuaishou/batch/getCampaignList', params).then(res => {
          if (res.success) {
            this.campaignType = res.result.records[0].campaignType
          }
        })
      },
    },
    activated: function () {
      this.getAppList()
      this.getCampaignList()
      this.getMould()
      getAction('/kuaishou/batch/getIsActivate', {
        accountId: localStorage.getItem('accountId')
      }).then(res => {
        if (res.success) {
          this.allForm.groupTypeData = res.result
        }
      })

      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>