<style scoped lang="scss">
.showShare {
  position: relative;
}
.share {
  display: none;
}
.showShare:hover .share {
  display: flex;
  justify-content: center;
  align-items: center;
}
.chouzhen {
  border-style: solid;
  border-width: 1px;
  border-color: #e4e4e4;
  width: calc(20% - 10px);
  padding: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  background: #fff;
  position: relative;
  z-index: 99;
  float: left;
}

li.chouzhen.first:before {
  font-size: 12px;
  content: '首帧';
  position: absolute;
  top: 7px;
  left: 5px;
  width: 36px;
  height: 20px;
  color: rgb(255, 255, 255);
  line-height: 20px;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  z-index: 1000;
}
.display-none-selset {
  display: none !important;
}
.logo {
  padding-left: 24px;
  img {
    height: 32px !important;
  }
  .name {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #CED2D9;
    // line-height: 22px;
    margin-left: 20px;
    padding-left: 21px;
    position: relative;
  }
  .name::before {
    content: '';
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.31);
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -9px;
  }
}
.chartBox {
  margin-top: 80px;
  .chartBody {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  .search-box {
    margin-bottom: 20px;
  }
}
</style>
<style lang="scss">
.hide-checkbox .ant-table-thead .ant-table-selection {
  display: none;
}
.new-batch .ant-card-head-title {
  font-weight: 700;
}
// .new-batch textarea {
//   resize: none;
//   border: none;
//   outline: 0;
//   box-shadow: none;
// }
.create-info .ant-form-item {
  margin-bottom: 0 !important;
}
.fengmian .ant-checkbox-wrapper:first-child {
  margin-left: 8px;
}
@media screen and (max-width: 1200px) {
  // 这里写对应要修改的样式如：
  .new-batch .el-step__title {
    font-size: 12px;
  }
}
.line-height-one .ant-form-item-control {
  line-height: inherit;
}
.creat-all-info .ant-form-item-control {
  width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.display-none-selset {
  display: none !important;
}
</style>
<template>
  <div ref="questionnaireBox" class="new-batch">
    <a-layout-header
      class="ant-header-fixedHeader ant-header-side-opened"
      :style="{ padding: '0' }"
      style="background: #0b2040 !important; position: fixed; top: 0; z-index: 100; width: 100%"
    >
      <div :class="['top-nav-header-index', theme]">
        <div class="header-index-wide">
          <div class="header-index-left" :style="topMenuStyle.headerIndexLeft">
            <div class="logo">
              <img src="~@/assets/logoNew1.png" alt="logo" />
              <span class="name">有腾投放管家</span>
            </div>
          </div>
        </div>
      </div>
    </a-layout-header>
    <div class="chartBox" style="padding: 0 20px">
      <a-row :gutter="20">
        <a-col :sm="3" style="margin-bottom: 20px; z-index: 10; position: fixed">
          <a-card class="search-box" style="height: 90vh">
            <el-steps direction="vertical" finish-status="wait" space="50px" :active="activeStep">
              <el-step v-for="(item, index) in stepsArr" :key="index" :title="item.title" @click.native="jump(index)">
              </el-step>
            </el-steps>
          </a-card>
        </a-col>
        <a-col :sm="21" :push="3" style="margin-bottom: 20px; z-index: 10" id="container">
          <a-form :form="form" @submit="handleSubmit" layout="horizontal" v-bind="formItemLayout">
            <a-spin :spinning="spinning">
              <a-card class="search-box step-jump" title="创建规则">
                <a-row class="line-height-one">
                  <a-col :xl="14" :md="24">
                    <a-form-item label="选择广告账户">
                      <Treeselect
                        :appId.sync="accountId"
                        :multiple="false"
                        request="2,4"
                        ref="treeSelect"
                        :disabled="$route.query.batchId != undefined"
                      />
                    </a-form-item>
                  </a-col>
                </a-row>

                <a-row>
                  <a-col :xl="14" :md="24">
                    <a-form-item label="营销目标">
                      <a-radio-group
                        @change="typeChange"
                        v-decorator="[
                          'campaignType',
                          { rules: [{ required: true, message: '营销目标必选' }], initialValue: 2 },
                        ]"
                      >
                        <a-radio-button :value="2">提升应用安装</a-radio-button>
                        <a-radio-button :value="3" disabled>获取电商下单</a-radio-button>
                        <a-radio-button :value="4" disabled>推广品牌活动</a-radio-button>
                        <a-radio-button :value="5">收集销售线索</a-radio-button>
                      </a-radio-group>
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row v-show="getData('campaignType', 'form') == 2">
                  <a-col :xl="14" :md="24">
                    <a-form-item label="推广平台">
                      <a-radio-group
                        @change="systemChange"
                        v-decorator="['systemType', { rules: [{ required: true, message: '' }], initialValue: 'iOS' }]"
                      >
                        <a-radio-button value="iOS">iOS</a-radio-button>
                        <a-radio-button value="Android">Android</a-radio-button>
                      </a-radio-group>
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :xl="14" :md="24">
                    <a-form-item label="是否新建计划">
                      <a-radio-group
                        v-decorator="['newClick', { 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-col>
                </a-row>
                <a-row v-if="!getData('newClick', 'form') || getData('newClick', 'form') == '1'">
                  <a-col :xl="14" :md="24">
                    <a-form-item label="规则配置">
                      <a-button type="primary" @click="ruleConfigShow"> 规则配置 </a-button>
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row v-else-if="getData('newClick', 'form') == '2'">
                  <a-col :xl="14" :md="24">
                    <a-form-item label="选择广告计划" selfUpdate>
                      <a-select
                        v-model="campaignId"
                        showSearch
                        allowClear
                        placeholder="请选择广告计划"
                        optionFilterProp="children"
                        :filterOption="filterOption"
                      >
                        <a-select-option
                          v-for="appModel in campaignList"
                          :key="appModel.campaignId"
                          :value="appModel.campaignId"
                          >{{ appModel.campaignName }}</a-select-option
                        >
                      </a-select>
                      <span v-if="showCount" style="margin-top: 15px">当前计划下还可创建{{ groupCount }}个广告组</span>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-card>

              <a-card class="search-box step-jump create-info creat-all-info">
                <div slot="title">
                  广告组基本信息 <a-button type="primary" style="float: right" @click="showDrawer"> 编辑 </a-button>
                </div>
                <a-row>
                  <a-col :xl="14" :md="24">
                    <a-form-item label="投放范围">{{ allianceAccount == '1' ? '默认' : '联盟' }} </a-form-item>
                  </a-col>
                  <a-col :xl="10" :md="24" :pull="screenWidth >= 1200 ? 4 : 0">
                    <a-form-item label="计费方式">
                      {{ groupTemplateId ? (unitInfo.bidType == 2 ? '点击计费' : '展示计费(oCPM)') : '无' }}
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :xl="14" :md="24">
                    <a-form-item label="单日预算">
                      {{
                        groupTemplateId
                          ? unitInfo.dayBudget && unitInfo.dayBudget > 0
                            ? unitInfo.dayBudget + '元'
                            : '不限'
                          : '无'
                      }}</a-form-item
                    >
                  </a-col>
                  <a-col :xl="10" :md="24" :pull="screenWidth >= 1200 ? 4 : 0">
                    <a-form-item :label="unitInfo.bidType == 2 ? '出价' : '转化目标出价'">
                      {{
                        groupTemplateId &&
                        ((unitInfo.bid && unitInfo.bid > 0) ||
                          (unitInfo.cpaBid && unitInfo.cpaBid > 0) ||
                          (unitInfo.bidMin && unitInfo.bidMax))
                          ? unitInfo.bidType == 2
                            ? unitInfo.bid && unitInfo.bid > 0
                              ? unitInfo.bid + '元'
                              : unitInfo.bidMin + '~' + unitInfo.bidMax + '元'
                            : unitInfo.cpaBid && unitInfo.cpaBid > 0
                            ? unitInfo.cpaBid + '元'
                            : unitInfo.bidMin + '~' + unitInfo.bidMax + '元'
                          : '无'
                      }}
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :xl="14" :md="24">
                    <a-form-item label="投放时段">
                      <div v-if="groupTemplateId == null">无</div>
                      <div v-else-if="scheduleTime == '1'">不限</div>
                      <!-- <div > -->
                      <a-popover v-else title="投放时段" :overlayStyle="{ width: '400px' }" placement="left">
                        <template slot="content">
                          <span v-for="(item, index) in unitInfo.scheduleTime.split('')" :key="index" v-if="item == 1">
                            {{
                              setItemDate(index, item) +
                              (index == unitInfo.scheduleTime.split('').length - 1 ? '' : ',')
                            }}
                          </span>
                        </template>
                        <span v-for="(item, index) in unitInfo.scheduleTime.split('')" :key="index">
                          {{ setItemDate(index, item) }}
                        </span>
                      </a-popover>
                      <!-- <span v-for="(item, index) in unitInfo.scheduleTime.split('')" :key="index">
                        {{ setItemDate(index, item) }}
                      </span>
                    </div> -->
                    </a-form-item>
                  </a-col>
                  <a-col :xl="10" :md="24" :pull="screenWidth >= 1200 ? 4 : 0">
                    <a-form-item label="场景广告位">
                      <div v-if="groupTemplateId == null">无</div>

                      <div v-else>
                        <span v-for="(item, index) in unitInfo.sceneId" :key="index">
                          {{ item | kuaishouSceneId }}{{ index == unitInfo.sceneId.length - 1 ? '' : ',' }}
                        </span>
                      </div>
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :xl="14" :md="24">
                    <a-form-item label="排期">
                      <div v-if="groupTemplateId == null">无</div>

                      <div v-else-if="unitTime == '1'">
                        从今天开始长期投放({{ moment(unitInfo.timeRange[0]).format('YYYY-MM-DD') }}起)
                      </div>
                      <div v-else>
                        {{ moment(unitInfo.timeRange[0]).format('YYYY-MM-DD') }}~{{
                          moment(unitInfo.timeRange[1]).format('YYYY-MM-DD')
                        }}
                      </div>
                    </a-form-item>
                  </a-col>
                  <a-col :xl="10" :md="24" :pull="screenWidth >= 1200 ? 4 : 0" v-if="unitInfo.deepConversionType">
                    <a-form-item label="深度转化目标">
                      <div v-if="groupTemplateId == null">无</div>

                      <div v-else>
                        {{ setDeepConversionType(unitInfo.deepConversionType) }}
                      </div>
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :xl="14" :md="24">
                    <a-form-item label="优化目标">
                      {{ groupTemplateId ? (unitInfo.bidType == 2 ? '封面点击数' : '转化数') : '无' }}
                    </a-form-item>
                  </a-col>
                  <a-col :xl="10" :md="24" :pull="screenWidth >= 1200 ? 4 : 0" v-if="unitInfo.deepConversionBid">
                    <a-form-item label="深度转化出价">
                      <div v-if="groupTemplateId == null">无</div>

                      <div v-else>
                        {{ unitInfo.deepConversionBid }}
                      </div>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-card>
              <a-card class="search-box step-jump" title="定向包">
                <p>
                  已选定向包： {{ checkDirectionalList.length }}/20
                  <a-button
                    style="margin: 0 15px"
                    @click="addTemplate(null)"
                    :disabled="this.accountId == undefined || accountId == '' || accountId == null"
                  >
                    新增定向包 </a-button
                  ><a-button
                    type="primary"
                    @click="
                      directionalVisible = true
                      getTemplateList()
                    "
                  >
                    选择定向包
                  </a-button>
                </p>
                <a-table
                  v-if="checkDirectionalList.length > 0"
                  :columns="columns"
                  :data-source="checkDirectionalList"
                  bordered
                  :pagination="false"
                >
                  <!-- @visibleChange="changeTag(items.code)" -->
                  <span slot="action" slot-scope="text, record">
                    <a @click="changeTag(record.templateId)">预览</a>
                    <a-divider type="vertical" />
                    <a @click="removeTarget(record.templateId)">删除</a>
                  </span>
                </a-table>
              </a-card>
              <a-card class="search-box step-jump create-info creat-all-info">
                <div slot="title">
                  创意基本信息

                  <a-tooltip
                    placement="left"
                    title="请填写广告组信息"
                    autoAdjustOverflow
                    v-if="groupTemplateId == null && !campaignData.campaignName"
                  >
                    <a-button
                      type="primary"
                      style="float: right"
                      :disabled="groupTemplateId == null && !campaignData.campaignName"
                    >
                      编辑
                    </a-button>
                  </a-tooltip>
                  <a-button
                    v-else
                    type="primary"
                    style="float: right"
                    @click="showDrawerCreate"
                    :disabled="groupTemplateId == null && !campaignData.campaignName"
                  >
                    编辑
                  </a-button>
                </div>
                <a-row>
                  <a-col :xl="14" :md="24">
                    <a-form-item label="制作方式"> <!-- {{}} -->自定义 </a-form-item>
                  </a-col>
                  <a-col :xl="10" :md="24" :pull="screenWidth >= 1200 ? 4 : 0">
                    <a-form-item label="自动发送礼包码"> <!--按展示付费（oCPM）-->关闭 </a-form-item>
                  </a-col>
                </a-row>
                <!-- v-if="creativeCategorySwitch" -->
                <a-row>
                  <a-col :xl="14" :md="24">
                    <a-form-item label="创意分类">
                      <!-- {{creativeInfo.creativeCategory}} -->

                      <a-cascader
                        v-if="createTiveTemplateId"
                        :options="createOptions"
                        v-model="creativeInfo.creativeCategory"
                        :fieldNames="fieldNames"
                        placeholder="请选择创意分类"
                        disabled
                      />
                      <span v-else>无</span>
                    </a-form-item>

                    <!-- creativeInfo.creativeCategory -->
                  </a-col>
                  <a-col :xl="10" :md="24" :pull="screenWidth >= 1200 ? 4 : 0">
                    <a-form-item label="封面贴纸">
                      <a-popover
                        title="封面贴纸"
                        :overlayStyle="{ width: '400px' }"
                        placement="left"
                        v-if="createTiveTemplateId && creativeInfo.overlayType[0]"
                      >
                        <template slot="content">
                          <img :src="showImgUrl(creativeInfo.overlayType[0])" alt="" style="width: 100%" />
                        </template>
                        <!-- {{ creativeInfo.overlayType[0] }} -->
                        1张
                      </a-popover>
                      <span v-else>无</span>
                    </a-form-item>
                    <!-- creativeInfo.overlayType -->
                  </a-col>
                </a-row>
                <!-- v-if="creativeCategorySwitch" -->
                <a-row>
                  <a-col :xl="14" :md="24">
                    <a-form-item label="创意标签">
                      {{ createTiveTemplateId && creativeInfo.creativeTag ? creativeInfo.creativeTag.join() : '无' }}
                    </a-form-item>
                    <!-- creativeInfo.creativeTag -->
                  </a-col>
                  <a-col :xl="10" :md="24" :pull="screenWidth >= 1200 ? 4 : 0">
                    <a-form-item label="行动号召">
                      {{ createTiveTemplateId ? creativeInfo.actionBarText : '无' }}
                    </a-form-item>
                    <!-- creativeInfo.actionBarText -->
                  </a-col>
                </a-row>
              </a-card>
              <a-card class="search-box step-jump" title="创意素材">
                <p>
                  已选素材：{{ videoMaterialShow ? materialCount : 0 }}/200
                  <a-button
                    type="primary"
                    @click="materialVisible = true"
                    style="margin: 0 15px"
                    :disabled="this.accountId == undefined || accountId == '' || accountId == null"
                  >
                    选择素材
                  </a-button>
                </p>
                <div
                  v-if="videoMaterialShow && materialCount > 0"
                  style="
                    width: 100%;
                    height: 400px;
                    overflow: auto;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    background: #f2f2f2;
                    padding: 30px;
                  "
                >
                  <div v-for="(item, index) in materialList" :key="index" style="width: 100%; display: contents">
                    <template v-for="(items, indexMaterial) in item.photoArr">
                      <div
                        style="
                          width: 45%;
                          height: 250px;
                          display: flex;
                          background: white;
                          justify-content: space-between;
                          margin: 20px;
                          padding: 10px;
                        "
                      >
                        <div style="width: 45%; height: 100%; text-align: center" class="showShare">
                          <img :src="items.photoId.coverUrl" style="width: auto; height: 100%" alt="" srcset="" />
                          <div
                            style="
                              width: 100%;
                              height: 100%;
                              background: rgba(0, 0, 0, 0.5);
                              position: absolute;
                              top: 0;
                            "
                            class="share"
                          >
                            <a-button
                              @click="
                                visibleVideo = true
                                videoUrlShow = items.photoId.url
                              "
                            >
                              查看视频
                            </a-button>
                          </div>
                        </div>

                        <div style="width: 45%; height: 100%; text-align: center">
                          <img
                            v-if="items.image.url"
                            :src="items.image.url"
                            style="width: auto; height: 100%"
                            alt=""
                            srcset=""
                          />
                          <img
                            v-else
                            :src="items.photoId.coverUrl"
                            style="width: auto; height: 100%"
                            alt=""
                            srcset=""
                          />
                        </div>
                        <a-popconfirm
                          title="确定要删除这个素材吗?"
                          ok-text="确定"
                          cancel-text="取消"
                          @confirm="removeVideoMaterial(index, indexMaterial)"
                          @cancel="cancel"
                        >
                          <a-icon type="close-circle" style="cursor: pointer" />
                        </a-popconfirm>
                      </div>
                    </template>
                  </div>
                </div>
                <div style="margin-top: 20px" v-if="materialInfo.matchingMethod != 1 && videoMaterialShow">
                  <a-list bordered :data-source="descriptionList">
                    <a-list-item slot="renderItem" slot-scope="item, index">
                      <p v-if="!item.edit" style="margin-bottom: 0; width: 100%">
                        {{ item.value }}
                      </p>
                      <p v-else style="margin-bottom: 0; width: 100%">
                        <a-input
                          id="error"
                          placeholder="请输入广告语"
                          v-model.trim="item.value"
                          :max-length="30"
                          style="width: 50%"
                        />
                      </p>

                      <div slot="actions">
                        <a @click="editDescription(item)">{{ item.edit ? '确定' : '编辑' }}</a>
                        <a-divider type="vertical" />
                        <a @click="removeDescription(index)">删除</a>
                      </div>
                    </a-list-item>
                    <div slot="header">
                      <a-button
                        type="primary"
                        style="margin-right: 20px"
                        @click="addDescription"
                        :disabled="
                          descriptionList.length >=
                          (materialInfo.matchingMethod == 2 ? materialCount : materialInfo.materialList.length)
                        "
                      >
                        选择广告语
                      </a-button>
                      <a-button
                        type="primary"
                        style="margin-right: 20px"
                        @click="addOne"
                        :disabled="
                          descriptionList.length >=
                          (materialInfo.matchingMethod == 2 ? materialCount : materialInfo.materialList.length)
                        "
                      >
                        添加广告语
                      </a-button>
                      {{ descriptionList.length }}/{{
                        materialInfo.matchingMethod == 2 ? materialCount : materialInfo.materialList.length
                      }}
                      <a style="margin-left: 20px" @click="descriptionList = []">清空 </a>
                    </div>
                  </a-list>
                </div>
              </a-card>
              <div style="display: flex; justify-content: space-between; margin-bottom: 100px">
                <a-button type="primary" @click="checkAppIds"> 预览应用/链接 </a-button>
                <div>
                  <a-button type="primary" style="margin-right: 15px" @click="handleSubmit" :loading="sumbitLoading">
                    预览广告组
                  </a-button>
                  <a-button @click="clearAllData"> 清空配置 </a-button>
                </div>
              </div>
            </a-spin>
          </a-form>
        </a-col>
      </a-row>
    </div>
    <!-- 规则配置 -->
    <a-modal
      title="规则配置"
      v-model="ruleConfigVisible"
      :width="1000"
      @ok="ruleConfigFormOk"
      @cancel="ruleConfigFormCancel"
      v-dialog-drag
    >
      <a-form :form="ruleConfigForm" layout="horizontal" hide-required-mark v-bind="formItemLayout">
        <a-row :gutter="16">
          <a-col :span="16">
            <a-form-item label="广告分组规则">
              <a-radio-group v-decorator="['groupRule', { rules: [{ required: true, message: '' }], initialValue: 1 }]">
                <a-radio-button :value="1">按定向包分组</a-radio-button>
                <a-radio-button :value="2">按创意组分组</a-radio-button>
                <a-radio-button :value="3" disabled>按落地页分组</a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="16">
            <a-form-item label="广告计划单日预算">
              <a-radio-group
                v-decorator="['budgetType', { 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-col>
        </a-row>
        <a-row :gutter="16" v-if="getData('budgetType', 'ruleConfigForm') == '2'">
          <a-col :span="16">
            <a-form-item label="" v-bind="tailFormItemLayout" selfUpdate>
              <a-input-number
                v-decorator="[
                  'dayBudget',
                  {
                    rules: [{ required: true, message: ' ' }, { validator: handleConfirmValue }],
                  },
                ]"
                :min="500"
                :precision="0"
                :max="100000000"
                style="width: 100%"
                placeholder="不小于500， 不超过100000000，仅支持输入自然数"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="16">
            <a-form-item label="计划默认状态">
              <a-radio-group
                v-decorator="['campaignStatus', { rules: [{ required: true, message: '' }], initialValue: 2 }]"
              >
                <a-radio-button :value="1">开启</a-radio-button>
                <a-radio-button :value="2">关闭</a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16" v-if="getData('campaignStatus', 'ruleConfigForm') == 2">
          <a-col :span="16">
            <a-form-item label="是否定时开始计划">
              <a-radio-group v-decorator="['isTime', { rules: [{ required: true, message: '' }], initialValue: '2' }]">
                <a-radio-button value="1">是</a-radio-button>
                <a-radio-button value="2">否</a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span="8" :pull="6" v-if="getData('isTime', 'ruleConfigForm') == '1'">
            <a-form-item label="选择时间">
              <a-date-picker
                v-decorator="['timeStart', { rules: [{ required: true, message: '定时开始计划时，开启时间必填' }] }]"
                show-time
                placeholder="选择开启时间"
                @change="onChange"
                @ok="onOk"
                :disabled-date="disabledDateOne"
                :showToday="false"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="16">
            <a-form-item label="广告组默认状态">
              <a-radio-group
                v-decorator="['unitStatus', { 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-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="16">
            <a-form-item label="广告计划名称">
              <a-input
                id="campaignName"
                v-decorator="[
                  'campaignName',
                  {
                    rules: [{ required: true, message: '广告计划名称必填' }],
                  },
                ]"
                style="width: 100%"
                placeholder="请输入"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="16">
            <a-form-item label="" v-bind="tailFormItemLayout">
              <a-tag color="#2db7f5" @click="getChangeAll('应用名称', 'ruleConfigForm', 'campaignName')"
                >+应用名称</a-tag
              >
              <a-tag color="#2db7f5" @click="getChangeAll('定向包', 'ruleConfigForm', 'campaignName')">+定向包</a-tag>
              <a-tag color="#2db7f5" @click="getChangeAll('日期', 'ruleConfigForm', 'campaignName')">+日期</a-tag>
              <a-tag color="#2db7f5" @click="getChangeAll('渠道号', 'ruleConfigForm', 'campaignName')"
                >+渠道号（应用标记）</a-tag
              >
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="16">
            <a-form-item label="" v-bind="tailFormItemLayout">
              <!-- <a-checkbox v-decorator="['keep']"> 存为预设 </a-checkbox> -->
              <!-- <a-checkbox-group v-decorator="['keep']"> -->
              <a-checkbox v-model="campaignKeep"> 存为预设 </a-checkbox>
              <!-- </a-checkbox-group> -->
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
    <!-- 规则配置结束 -->

    <!-- 广告组基本信息预设 -->
    <a-drawer :width="800" :visible="visible" :body-style="{ paddingBottom: '80px' }" @close="closeUnit('ruleForm')">
      <h2 slot="title" style="margin-bottom: 0">广告组基本信息</h2>
      <!-- class="create-info" -->
      <a-form-model ref="ruleForm" :model="unitInfo" v-bind="formItemLayout" :rules="rules" :hideRequiredMark="true">
        <a-row :gutter="16">
          <a-col :span="16">
            <a-form-model-item label="投放范围">
              <a-radio-group v-model="allianceAccount" @change="LOLchange">
                <a-radio-button value="1">默认</a-radio-button>
                <a-radio-button value="2">快手广告联盟</a-radio-button>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16" v-if="getData('systemType', 'form') == 'Android'">
          <a-col :span="16">
            <a-form-model-item label="" v-bind="tailFormItemLayout">
              <a-checkbox v-model="unitInfo.useAppMarket" @change="appStoreCheck"> 优先从系统应用商店下载 </a-checkbox>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16" v-if="getData('systemType', 'form') == 'Android'">
          <a-col :span="16">
            <a-form-model-item label="" :wrapperCol="{ span: 24, offset: 5 }" v-if="unitInfo.useAppMarket">
              <a-checkbox-group v-model="unitInfo.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>
              <br />
              请勾选投放应用已上架的应用商店（默认全选）
            </a-form-model-item>
          </a-col>
        </a-row>
        <!-- <a-row :gutter="16">
          <a-col :span="16">
            <a-form-model-item label="转化目标">
              <a-button type="primary" style="margin-right: 15px"> 选择转化目标 </a-button>
            </a-form-model-item>
          </a-col>
        </a-row> -->
        <h2 style="margin: 20px 0 10px 0">预算与出价</h2>
        <a-row :gutter="16">
          <a-col :span="16">
            <a-form-model-item label="单日预算">
              <a-radio-group v-model="dayBudgetType" @change="unitInfo.dayBudget = null">
                <a-radio-button value="1">不限</a-radio-button>
                <a-radio-button value="2">统一预算</a-radio-button>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16" v-if="dayBudgetType == '2'">
          <a-col :span="16">
            <a-form-model-item label="" :wrapperCol="{ span: 24, offset: 5 }" prop="dayBudget">
              <a-input-number
                v-model="unitInfo.dayBudget"
                style="width: 100%"
                placeholder="不小于500， 不超过100000000，仅支持输入自然数"
                :min="500"
                :precision="0"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="16">
            <a-form-model-item label="投放方式" prop="speed">
              <a-radio-group v-model="unitInfo.speed">
                <a-radio-button value="1">快速投放</a-radio-button>
                <a-radio-button value="2">平滑投放</a-radio-button>
                <a-radio-button value="3">优先低成本</a-radio-button>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="16">
            <a-form-model-item label="排期">
              <a-radio-group v-model="unitTime" @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="unitTime == '2'"
                v-model="unitInfo.timeRange"
                format="YYYY-MM-DD"
                :allowClear="false"
                :disabled-date="disabledDate"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="16">
            <a-form-model-item label="投放时段">
              <a-radio-group v-model="scheduleTime" @change="setTimeAll">
                <a-radio-button value="1">全天</a-radio-button>
                <a-radio-button value="2">特定时间</a-radio-button>
              </a-radio-group>
              <br />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16" v-if="scheduleTime == '2'">
          <a-col :span="24">
            <a-form-model-item label="" :wrapperCol="{ span: 24 }">
              <selectCheckAll style="width: 100%" :scheduleTime.sync="unitInfo.scheduleTime" ref="selectCheck" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="16">
            <a-form-model-item label="创意展现方式">
              <a-radio-group v-model="unitInfo.showMode">
                <a-radio-button value="2">智能优选</a-radio-button>
                <a-radio-button value="1">随机轮播</a-radio-button>
              </a-radio-group>
              <br />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16" v-if="allianceAccount == '1'">
          <a-col :span="24" :pull="2" style="margin-left: 15px">
            <a-form-model-item
              label="场景广告位"
              :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
              :wrapperCol="{ lg: { span: 19 }, sm: { span: 19 } }"
            >
              <checkBoxGroup
                :options="[
                  { label: '优选广告位', value: 1 },
                  { label: '信息流广告', value: 7 },
                  { label: '上下滑大屏广告', value: 6 },
                  { label: '视频播放页广告', value: 3 },
                ]"
                v-model="unitInfo.sceneId"
                @change="changeData"
              />
            </a-form-model-item>
          </a-col>
        </a-row>

        <h2 style="margin: 20px 0 10px 0">优化目标和计费</h2>
        <a-row :gutter="16">
          <a-col :span="16">
            <a-form-model-item label="优化目标">
              <a-radio-group v-model="unitInfo.bidType" @change="bidTypeChange">
                <a-radio-button :value="2">封面点击数</a-radio-button>
                <a-radio-button :value="10">转化数</a-radio-button>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="16" v-if="unitInfo.bidType == 10 && groupTypeData">
          <a-col :span="16">
            <a-form-model-item label="转化目标">
              <a-select v-model="unitInfo.ocpxActionType">
                <a-select-option :value="2">行为数</a-select-option>
                <a-select-option :value="180" v-if="groupTypeData.isActivate == '1'">激活</a-select-option>
                <a-select-option :value="53" v-if="groupTypeData.isFormSubmit == '1'">表单提交</a-select-option>
                <a-select-option :value="394" v-if="groupTypeData.isOrderSubmit == '1'">订单提交</a-select-option>
                <a-select-option :value="348" v-if="groupTypeData.isValidClue == '1'">使用有效线索</a-select-option>
                <a-select-option :value="383" v-if="groupTypeData.isCreditGrant == '1'">授信出价</a-select-option>
                <a-select-option :value="384" v-if="groupTypeData.isWanJian == '1'">完件出价</a-select-option>
                <a-select-option :value="190" v-if="groupTypeData.isPurchase == '1'">付费出价</a-select-option>
                <a-select-option :value="191" v-if="groupTypeData.isFirstdayRoi == '1'">首日ROI</a-select-option>
                <a-select-option :value="396" v-if="groupTypeData.isRegister == '1'">注册优化目标</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row
          :gutter="16"
          v-if="
            groupTypeData &&
            (unitInfo.ocpxActionType == 180 || unitInfo.ocpxActionType == 53) &&
            groupTypeData.deepConversionTypes.length > 0
          "
        >
          <a-col :span="16">
            <a-form-model-item label="深度转化目标">
              <a-select v-model="unitInfo.deepConversionType" allowClear>
                <a-select-option
                  :value="items.deepConversionType"
                  v-for="(items, index) of groupTypeData.deepConversionTypes"
                  :key="index"
                >
                  {{ items.desc }}</a-select-option
                >
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="16">
            <a-form-model-item label="计费方式">
              <a-radio default-checked>{{ unitInfo.bidType == 2 ? '点击计费' : '展示计费(oCPM)' }}</a-radio>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="16">
            <a-form-model-item label="出价方式">
              <a-radio-group
                v-model="unitInfo.templateBidType"
                @change="
                  unitInfo.bidMin = null
                  unitInfo.bidMax = null
                  unitInfo.cpaBid = null
                  unitInfo.bid = null
                "
              >
                <a-radio-button :value="1">固定出价</a-radio-button>
                <a-radio-button :value="2">随机出价</a-radio-button>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
        </a-row>

        <div v-if="unitInfo.bidType == 10">
          <div v-if="unitInfo.templateBidType == 1">
            <a-row :gutter="16">
              <a-col :span="16">
                <a-form-model-item label="转化目标出价" prop="cpaBid">
                  <a-input-number
                    v-model="unitInfo.cpaBid"
                    style="width: 90%"
                    :min="0"
                    :precision="2"
                    :max="unitInfo.dayBudget ? unitInfo.dayBudget : 999999"
                  />元
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row
              :gutter="16"
              v-if="
                groupTypeData &&
                (unitInfo.ocpxActionType == 180 || unitInfo.ocpxActionType == 53) &&
                groupTypeData.deepConversionTypes.length > 0
              "
            >
              <a-col :span="16">
                <a-form-model-item label="深度转化出价">
                  <a-input-number
                    v-model="unitInfo.deepConversionBid"
                    style="width: 90%"
                    :min="unitInfo.cpaBid ? unitInfo.cpaBid : 0"
                    :precision="2"
                  />元
                  <br />
                  <span v-if="unitInfo.deepConversionBid && (unitInfo.cpaBid || unitInfo.cpaBid > 0)"
                    >按照两个出价得到的期望目标深度转化率为{{
                      ((unitInfo.cpaBid / unitInfo.deepConversionBid) * 100).toFixed(2)
                    }}%</span
                  >
                </a-form-model-item>
              </a-col>
            </a-row>
          </div>
          <div v-else>
            <a-row :gutter="16">
              <a-col :span="16">
                <a-form-model-item
                  label="出价范围"
                  prop="bidMin"
                  :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                  :wrapperCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                >
                  <a-input-number
                    v-model="unitInfo.bidMin"
                    style="width: 60%"
                    @change="changeBidMin"
                    :min="1"
                    :precision="2"
                    :max="unitInfo.dayBudget ? unitInfo.dayBudget>3000?3000:unitInfo.dayBudget : 3000"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="2" :pull="10" style="position: relative; right: 312px; top: 8px">~</a-col>
              <a-col :span="6" :pull="11">
                <a-form-model-item label="" prop="bidMax">
                  <a-input-number
                    v-model="unitInfo.bidMax"
                    style="width: 53.3%"
                    @change="changeBidMax"
                    :min="1"
                    :precision="2"
                    :max="unitInfo.dayBudget ? unitInfo.dayBudget>3000?3000:unitInfo.dayBudget : 3000"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row
              :gutter="16"
              v-if="
                groupTypeData &&
                (unitInfo.ocpxActionType == 180 || unitInfo.ocpxActionType == 53) &&
                groupTypeData.deepConversionTypes.length > 0
              "
            >
              <a-col :span="16">
                <a-form-model-item label="深度转化出价">
                  <a-input-number
                    v-model="unitInfo.deepConversionBid"
                    style="width: 90%"
                    :min="unitInfo.bidMax ? unitInfo.bidMax : 0"
                    :precision="2"
                  />元
                  <br />
                  <span
                    v-if="
                      unitInfo.deepConversionBid &&
                      (unitInfo.bidMin || unitInfo.bidMin > 0) &&
                      (unitInfo.bidMax || unitInfo.bidMax > 0)
                    "
                    >按照两个出价得到的期望目标深度转化率为{{
                      ((unitInfo.bidMin / unitInfo.deepConversionBid) * 100).toFixed(2)
                    }}%~{{ ((unitInfo.bidMax / unitInfo.deepConversionBid) * 100).toFixed(2) }}%</span
                  >
                </a-form-model-item>
              </a-col>
            </a-row>
          </div>
        </div>

        <div v-else-if="unitInfo.bidType == 2">
          <div v-if="unitInfo.templateBidType == 1">
            <a-row :gutter="16">
              <a-col :span="16">
                <a-form-model-item label="出价" prop="bid">
                  <a-input-number
                    v-model="unitInfo.bid"
                    style="width: 90%"
                    :min="0.2"
                    :precision="2"
                    :max="unitInfo.dayBudget ? (unitInfo.dayBudget > 100 ? 100 : unitInfo.dayBudget) : 100"
                  />元
                </a-form-model-item>
              </a-col>
            </a-row>
          </div>
          <div v-else>
            <a-row :gutter="16">
              <a-col :span="16">
                <a-form-model-item
                  label="出价范围"
                  prop="bidMin"
                  :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                  :wrapperCol="{ lg: { span: 6 }, sm: { span: 6 } }"
                >
                  <a-input-number
                    v-model="unitInfo.bidMin"
                    style="width: 60%"
                    @change="changeBidMin"
                    :min="0.2"
                    :precision="2"
                    :max="unitInfo.dayBudget ? (unitInfo.dayBudget > 100 ? 100 : unitInfo.dayBudget) : 100"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="2" :pull="10" style="position: relative; right: 280px; top: 8px">~</a-col>
              <a-col :span="6" :pull="11">
                <a-form-model-item label="" prop="bidMax">
                  <a-input-number
                    v-model="unitInfo.bidMax"
                    style="width: 53.3%"
                    @change="changeBidMax"
                    :min="0.2"
                    :precision="2"
                    :max="unitInfo.dayBudget ? (unitInfo.dayBudget > 100 ? 100 : unitInfo.dayBudget) : 100"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
          </div>
        </div>
        <a-row :gutter="16">
          <a-col :span="16">
            <a-form-model-item label="广告组名称" prop="unitName">
              <a-input v-model="unitInfo.unitName" style="width: 90%" id="unitName" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="16">
            <a-form-item label="" v-bind="tailFormItemLayout">
              <a-tag color="#2db7f5" @click="getChangeAll('应用名称', 'unitInfo', 'unitName')">+应用名称</a-tag>
              <a-tag color="#2db7f5" @click="getChangeAll('定向包', 'unitInfo', 'unitName')">+定向包</a-tag>
              <a-tag color="#2db7f5" @click="getChangeAll('日期', 'unitInfo', 'unitName')">+日期</a-tag>
              <a-tag color="#2db7f5" @click="getChangeAll('渠道号', 'unitInfo', 'unitName')">+渠道号（应用标记）</a-tag>
              <a-tag color="#2db7f5" @click="getChangeAll('创意制作方式', 'unitInfo', 'unitName')">+创意制作方式</a-tag>
              <a-tag color="#2db7f5" @click="getChangeAll('广告位置', 'unitInfo', 'unitName')">+广告位置</a-tag>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="16">
            <a-form-item label="" v-bind="tailFormItemLayout">
              <a-checkbox v-model="keep"> 存为预设 </a-checkbox>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form-model>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
      >
        <a-button :style="{ marginRight: '8px' }" @click="closeUnit('ruleForm')"> 取消 </a-button>
        <a-button type="primary" @click="onClose"> 提交 </a-button>
      </div>
    </a-drawer>
    <!-- 广告组基本信息预设结束 -->

    <!-- 广告创意基本信息预设 -->
    <a-drawer
      :width="800"
      :visible="creativeVisible"
      :body-style="{ paddingBottom: '80px' }"
      @close="closeUnit('createForm')"
    >
      <h2 slot="title" style="margin-bottom: 0">广告创意基本信息</h2>
      <!-- class="create-info" -->
      <a-form-model
        ref="createForm"
        :model="creativeInfo"
        v-bind="formItemLayout"
        :rules="creativeRules"
        :hideRequiredMark="true"
      >
        <a-row :gutter="16">
          <a-col :span="16">
            <a-form-model-item label="创意制作方式">
              <a-radio-group v-model="creativeInfo.unitType">
                <a-radio-button :value="4">自定义</a-radio-button>
                <a-radio-button :value="7" disabled>程序化</a-radio-button>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="16">
            <a-form-model-item label="行动号召" prop="actionBarText">
              <a-select
                v-model="creativeInfo.actionBarText"
                showSearch
                allowClear
                placeholder="选择行动号召按钮文案"
                optionFilterProp="children"
                :filterOption="filterOption"
              >
                <a-select-option
                  v-for="appModel in actionBarTextList"
                  :key="appModel.id"
                  :value="appModel.actionBarText"
                  >{{ appModel.actionBarText }}</a-select-option
                >
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <!-- <a-row :gutter="16">
          <a-col :span="16">
            <a-form-model-item label="发送礼包码">
              <a-radio-group v-model="creativeInfo.targetActionType">
                <a-radio-button :value="1">关闭</a-radio-button>
                <a-radio-button :value="2">开启</a-radio-button>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
        </a-row> -->
        <a-row :gutter="16" v-if="stickerStyles.length > 0" class="fengmian">
          <a-col :span="16">
            <a-form-model-item label="封面贴纸">
              <a-checkbox-group v-model="creativeInfo.overlayType">
                <a-checkbox
                  v-for="(item, index) in stickerStyles"
                  :key="index"
                  :value="item.id"
                  :disabled="
                    creativeInfo.overlayType.filter((i) => i == item.id).length == 0 &&
                    creativeInfo.overlayType.length >= 1
                  "
                >
                  <img :src="item.url" alt="" style="width: 50px; margin: 10px; opacity: 0.5" />
                </a-checkbox>
              </a-checkbox-group>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16" v-if="creativeInfo.overlayType.length > 0">
          <a-col :span="16">
            <a-form-model-item label="封面广告语标题" prop="stickerTitle">
              <a-input v-model="creativeInfo.stickerTitle" style="width: 100%" placeholder="请输入" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <h2 style="margin: 20px 0 10px 0" v-if="creativeCategorySwitch">创意分类和标签</h2>
        <a-row :gutter="16" v-if="creativeCategorySwitch">
          <a-col :span="16">
            <a-form-model-item label="创意分类">
              <a-cascader
                :options="createOptions"
                v-model="creativeInfo.creativeCategory"
                :fieldNames="fieldNames"
                placeholder="请选择创意分类"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16" v-if="creativeCategorySwitch">
          <a-col :span="16">
            <a-form-model-item label="创意标签" prop="creativeTag">
              <a-select
                mode="tags"
                style="width: 100%"
                placeholder="按回车生成标签"
                v-model="creativeTag"
                dropdownClassName="display-none-selset"
                :token-separators="[',', ' ', '，']"
                @change="setData"
              >
              </a-select>
              <div style="width: 100%; height: 200px; border: 1px solid #f2f2f2; padding: 0 10px; margin-top: 20px">
                <h4 style="margin-bottom: 0">已填标签</h4>
                <template v-for="(tag, index) in creativeInfo.creativeTag">
                  <a-tooltip v-if="tag.length > 10" :key="tag" :title="tag">
                    <a-tag :key="tag" :closable="true" @close="() => handleClose(tag)">
                      {{ `${tag.slice(0, 10)}...` }}
                    </a-tag>
                  </a-tooltip>
                  <a-tag v-else :key="tag" :closable="true" @close="() => handleClose(tag)">
                    {{ tag }}
                  </a-tag>
                </template>
              </div>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="16">
            <a-form-item label="" v-bind="tailFormItemLayout">
              <a-checkbox value="1" v-model="creativeInfo.keep"> 存为预设 </a-checkbox>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form-model>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
      >
        <a-button :style="{ marginRight: '8px' }" @click="closeUnit('createForm')"> 取消 </a-button>
        <a-button type="primary" @click="submitCreative"> 提交 </a-button>
      </div>
    </a-drawer>
    <!-- 广告创意基本信息预设结束 -->

    <!-- 定向包选择开始 -->
    <a-modal
      title="我的定向包"
      v-model="directionalVisible"
      :width="1000"
      @ok="directionalOk"
      @cancel="directionalCancel"
    >
      <div style="margin-bottom: 15px; display: flex">
        <a-input-search
          placeholder="请输入定向包名称"
          enter-button
          @search="onSearch"
          v-model="templateName"
          style="width: 200px; margin-right: 10px"
        />
        <a-button type="primary" @click="getTemplate()" :loading="templateLoading"> 刷新模板</a-button>
      </div>

      <a-table
        rowKey="templateId"
        :loading="loading"
        :columns="columns"
        :data-source="templateList"
        bordered
        :pagination="false"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      >
        <!-- @visibleChange="changeTag(items.code)" -->
        <span slot="action" slot-scope="text, record">
          <a @click="changeTag(record.templateId)">预览</a>
          <a-divider type="vertical" />
          <a @click="lookTemplate(null, record.templateId)">编辑</a>
        </span>
      </a-table>
    </a-modal>
    <!-- 定向包选择结束 -->

    <!--定向预览-->
    <a-modal title="我的定向包" v-model="previewVisible" :width="1000" :footer="null">
      <a-form
        layout="horizontal"
        hide-required-mark
        v-bind="formItemLayout"
        v-if="templateData.templateName"
        class="create-info"
      >
        <a-row :gutter="16">
          <a-col :span="16">
            <a-form-item label="定向包">
              {{ templateData.templateName }}
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="16">
            <a-form-item label="定向人群包">
              <span v-if="templateData.population == '' || templateData.population == null"> 不限 </span>
              <div v-else>
                <span v-for="(item, index) in JSON.parse(templateData.population)" :key="item">
                  {{ showPeopleName(item) }}{{ index == JSON.parse(templateData.population).length - 1 ? '' : ',' }}
                </span>
              </div>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="24" :pull="1" style="margin-left: -26px">
            <a-form-item label="区域">
              <span v-if="templateData.region == '' || templateData.region == null"> 不限 </span>
              <div v-else>
                {{ region.join(',') }}
              </div>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="16">
            <a-form-item label="年龄">
              <span
                v-if="
                  (templateData.agesRange == '' || templateData.agesRange == null) &&
                  (templateData.min == '' || templateData.min == null) &&
                  (templateData.max == '' || templateData.max == null)
                "
              >
                不限
              </span>
              <div v-else>
                <span v-if="templateData.agesRange == '' || templateData.agesRange == null">
                  {{ templateData.min + '岁~' + templateData.max + '岁' }}
                </span>
                <span v-else>
                  <span v-for="(item, index) in JSON.parse(templateData.agesRange)" :key="index">
                    {{ item | kuaishouAge }}{{ index == JSON.parse(templateData.agesRange).length - 1 ? '' : ',' }}
                  </span>
                </span>
              </div>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="16">
            <a-form-item label="性别">
              {{ templateData.gender == 1 ? '女' : templateData.gender == 2 ? '男' : '不限' }}
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="16">
            <a-form-item label="平台">
              {{ templateData.platformOs == 1 ? 'Android系统' : templateData.platformOs == 2 ? 'IOS系统' : '不限' }}
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="16">
            <a-form-item label="手机价格">
              <span v-if="templateData.devicePrice == '' || templateData.devicePrice == null"> 不限 </span>
              <div v-else>
                <span v-for="(item, index) in JSON.parse(templateData.devicePrice)" :key="index">
                  {{ item | kuaishouPrice }}{{ index == JSON.parse(templateData.devicePrice).length - 1 ? '' : ',' }}
                </span>
              </div>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="16">
            <a-form-item label="网络环境">
              {{ templateData.network == 1 ? 'Wi-Fi' : templateData.network == 2 ? '移动网络' : '不限' }}
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="16">
            <a-form-item label="过滤已转化人群">
              {{ templateData.filterConvertedLevel | kuaishouFilterConvertedLevel }}
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
    <!-- 定向预览结束 -->

    <!-- 创意素材选择 -->
    <a-modal title="创意素材" v-model="materialVisible" :width="1000" @ok="handleOkVideo" @cancel="cancelVideo">
      <a-form-model
        ref="materialForm"
        :model="materialInfo"
        v-bind="formItemLayout"
        :rules="materialRules"
        :hideRequiredMark="true"
      >
        <a-row :gutter="16">
          <a-col :span="16">
            <a-form-model-item label="自动生成封面">
              <a-radio-group v-model="materialInfo.isMakeCover">
                <a-radio-button :value="1">不开启</a-radio-button>
                <a-radio-button :value="2">开启</a-radio-button>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16" v-if="materialInfo.isMakeCover == 2">
          <a-col :span="16">
            <a-form-model-item label="设置封面数量" prop="coverNumber">
              <a-input-number
                v-model="materialInfo.coverNumber"
                style="width: 100%"
                placeholder="请输入1~8之间的封面数量"
                :min="1"
                :max="8"
                :precision="0"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="16">
            <a-form-model-item label="广告语匹配方式">
              <a-radio-group v-model="materialInfo.matchingMethod">
                <a-radio-button :value="1">自定义</a-radio-button>
                <a-radio-button :value="2">按创意匹配</a-radio-button>
                <a-radio-button :value="3">按创意组匹配</a-radio-button>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="16">
            <a-form-model-item label="是否设置创意数量">
              <a-radio-group v-model="materialInfo.groupCreativity">
                <a-radio-button :value="1">是</a-radio-button>
                <a-radio-button :value="2">否</a-radio-button>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16" v-if="materialInfo.groupCreativity == 1">
          <a-col :span="16">
            <a-form-model-item label="设置创意数量" prop="creativityNumber">
              <a-input-number
                v-model="materialInfo.creativityNumber"
                style="width: 100%"
                placeholder="请输入1~15之间的创意数量"
                :min="1"
                :max="15"
                :precision="0"
              />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="24">
            <div
              style="
                width: 100%;
                height: 50px;
                border: 1px solid #f2f2f2;
                padding: 0 20px;
                line-height: 50px;
                position: relative;
              "
            >
              <span style="color: black; margin-right: 20px; font-weight: 700">创意制作</span>
              <span style="margin-right: 20px">创意组数量： {{ materialInfo.materialList.length }} 组</span>
              <span style="margin-right: 20px">视频数量： {{ materialCount }} 个</span>
              <a
                style="margin-right: 20px"
                @click="
                  materialInfo.materialList = []
                  checkVideo = []
                  checkVideoAll = []
                  checkVideoWai = []
                  sumContent = 0
                "
                >清空</a
              >
              <a-button type="primary" style="position: absolute; right: 20px; top: 8px" @click="checkVideoFun()">
                批量选择视频
              </a-button>
            </div>
          </a-col>
        </a-row>
        <a-row :gutter="16" style="margin-top: 20px">
          <a-col :span="24">
            <a-collapse accordion :defaultActiveKey="0">
              <a-collapse-panel
                :header="item.name"
                v-for="(item, indexList) in materialInfo.materialList"
                :key="indexList"
              >
                <a-tabs type="editable-card" hideAdd v-model="item.active" @edit="remove">
                  <a-tab-pane
                    forceRender
                    :tab="'创意' + (indexMater + 1)"
                    v-for="(items, indexMater) in item.photoArr"
                    :key="indexMater + '@' + indexList"
                  >
                    <div
                      style="
                        width: 100%;
                        height: 308px;
                        border: 1px solid #f2f2f2;
                        padding: 10px;
                        display: flex;
                        justify-content: space-between;
                      "
                    >
                      <div
                        style="width: 40%; height: 100%; display: flex; justify-content: space-between"
                        v-if="items.creativeName"
                      >
                        <div style="width: 45%; height: 100%" class="showShare">
                          <img
                            :src="items.photoId.coverUrl"
                            style="width: 100%; height: auto"
                            alt=""
                            srcset=""
                            v-if="items.photoId.coverUrl"
                          />
                          <div
                            style="
                              width: 100%;
                              height: 100%;
                              background: rgba(0, 0, 0, 0.5);
                              position: absolute;
                              top: 0;
                            "
                            class="share"
                          >
                            <a-button
                              @click="
                                visibleVideo = true
                                videoUrlShow = items.photoId.url
                              "
                            >
                              查看视频
                            </a-button>
                          </div>
                        </div>
                        <div style="width: 45%; height: 100%">
                          <img
                            v-if="items.image.url"
                            :src="items.image.url"
                            style="width: 100%; height: auto"
                            alt=""
                            srcset=""
                          />
                          <uploadFile
                            v-else
                            :value.sync="items.image"
                            :checkFile="fileWater"
                            @overUpload="overUploadImage"
                            @removeUpload="deleteImage"
                            :fileCount="1"
                            uploadType="image"
                            :multiple="false"
                          />
                        </div>
                      </div>
                      <div style="width: 55%; height: 100%; line-height: 1">
                        <a-form-model-item
                          ref="description"
                          :label="'广告语'"
                          :prop="'materialList.' + indexList + '.photoArr.' + indexMater + '.description'"
                          :rules="{
                            required: true,
                            message: '广告语必填',
                            trigger: 'blur',
                          }"
                          style="margin-top: 60px"
                          v-if="materialInfo.matchingMethod == 1"
                        >
                          <a-textarea
                            class="rending"
                            placeholder="请输入广告语"
                            v-model.trim="items.description"
                            :autosize="{ minRows: 2, maxRows: 6 }"
                            :max-length="30"
                          ></a-textarea>

                          <p
                            style="
                              font-size: 12px;
                              color: #b6bbc7;
                              letter-spacing: 0.3px;
                              text-align: right;
                              line-height: 20px;
                              position: absolute;
                              bottom: 0;
                              right: 6px;
                              width: 100%;
                              margin-bottom: 0;
                            "
                          >
                            {{ items.description.length + '/30' }}
                          </p>
                        </a-form-model-item>
                        <a-form-model-item
                          ref="creativeName"
                          :label="'创意名称'"
                          :prop="'materialList.' + indexList + '.photoArr.' + indexMater + '.creativeName'"
                          :rules="{
                            required: true,
                            message: '创意名称必填',
                            trigger: 'blur',
                          }"
                          ><a-input
                            v-model="items.creativeName"
                            placeholder="请输入创意名称"
                            style="margin-right: 8px"
                          />
                        </a-form-model-item>
                      </div>
                    </div>
                  </a-tab-pane>

                  <!-- <a-button
                    slot="tabBarExtraContent"
                    type="primary"
                    :disabled="
                      materialInfo.groupCreativity == 1
                        ? item.photoArr.length >= materialInfo.creativityNumber
                        : item.photoArr.length >= 15
                    "
                    @click="addMaterialOne(indexList)"
                  >
                    添加素材
                  </a-button> -->
                </a-tabs>
              </a-collapse-panel>
              <!-- <a-collapse-panel key="2" header="创意组2" :disabled="false">
                <p>{{ materialVisible }}</p>
              </a-collapse-panel>
              <a-collapse-panel key="3" header="创意组3">
                <p>{{ materialVisible }}</p>
              </a-collapse-panel> -->
            </a-collapse>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
    <!-- 创意素材选择结束 -->

    <!-- 选择素材相关 -->
    <a-modal
      :maskClosable="false"
      title="选择素材"
      v-model="checkMatemalVisible"
      @ok="handleOkShow"
      @cancel="cancelAll"
      :width="1000"
    >
      <a-tabs type="card" @change="callback" v-model="activeTwo" class="check-video">
        <div slot="tabBarExtraContent">
          当前选择数量 {{ sumContent }}/{{ Math.floor(200 / this.materialInfo.coverNumber) }}
          <a-button type="primary" @click="tongbu()" :loading="tongbuLoading" style="margin-left: 10px">
            刷新素材</a-button
          >
        </div>
        <a-tab-pane :tab="item.label" v-for="item of tab" :key="item.value">
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item
                label="日期选择"
                :labelCol="{
                  lg: {
                    span: 6,
                  },
                  sm: {
                    span: 6,
                  },
                  xs: {
                    span: 6,
                  },
                  md: {
                    span: 6,
                  },
                }"
                :wrapperCol="{
                  lg: {
                    span: 18,
                  },
                  sm: {
                    span: 18,
                  },
                  xs: {
                    span: 14,
                  },
                  md: {
                    span: 14,
                  },
                }"
              >
                <a-range-picker name="buildTime" v-model="time" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-button style="position: relative; top: 4px" @click="selectAllVideo"> 全选 </a-button>
            </a-col>
          </a-row>
          <ul v-if="dataSource.length > 0" style="overflow: auto; padding-left: 0; height: 400px">
            <!-- :value="item.photoId" -->
            <a-checkbox-group v-model="checkVideo" style="width: 100%" @change="setVideoData">
              <li v-for="(item, index) of dataSource" :key="index" class="chouzhen" style="height: 400px">
                <a-checkbox
                  :value="item.photoId"
                  style="width: 100%; position: absolute; z-index: 100; right: 0; top: 0"
                >
                  <img :src="item.coverUrl" alt="" style="width: 90%; margin-bottom: 30px" />
                  <div style="width: 100%; text-align: center">
                    {{ item.statDate ? '时间：' + item.statDate.split(' ')[0] : '消耗：' + item.charge }}
                  </div>
                </a-checkbox>
              </li>
            </a-checkbox-group>
          </ul>
          <div v-else style="width: 100%; height: 400px; display: flex; justify-content: center; align-items: center">
            <img src="@/assets/nodata.png" alt="" v-if="!loadingVideoList" />
            <img v-else src="@/views/modules/material/loading.gif" style="width: 50%" />
          </div>
        </a-tab-pane>
      </a-tabs>
      <div style="text-align: right">
        <a-pagination
          size="small"
          :showTotal="ipagination.showTotal"
          style="float: right"
          v-if="dataSource.length > 0"
          showQuickJumper
          :pageSize.sync="ipagination.pageSize"
          :total="ipagination.total"
          v-model="ipagination.current"
          @change="getDataSource"
        />
      </div>
    </a-modal>
    <!-- 选择素材相关结束 -->

    <!-- 推荐广告语开始 -->

    <a-modal
      title="推荐标题"
      v-model="titleVisible"
      :width="1000"
      @ok="okTitle"
      @cancel="
        dataOne = []
        value = ''
        title = []
        titleVisible = false
        checkTitle = []
      "
    >
      <a-row :gutter="10">
        <a-col :sm="10" style="margin-bottom: 20px; z-index: 10">
          <a-card class="search-box" style="min-height: 500px">
            <div style="margin-bottom: 30px">
              <span style="display: inline-block; width: 80px">行业</span>
              <a-cascader
                style="margin-top: 1rem; width: 300px"
                v-model="dataOne"
                :options="options"
                :showSearch="{ filter }"
                expandTrigger="hover"
                @change="onChangeTitle"
                placeholder="请选择行业"
              >
                <a-icon type="smile" slot="suffixIcon" class="test" />
              </a-cascader>
            </div>
            <div style="margin-bottom: 30px">
              <span style="display: inline-block; width: 80px">关键词</span>
              <a-input placeholder="请输入关键词" v-model="value" style="width: 300px" />
            </div>
            <span style="display: inline-block; width: 80px; float: left"></span>
            <a-button type="primary" @click="searchQuery" :disabled="value == ''">生成</a-button>
          </a-card>
        </a-col>
        <a-col :sm="14" style="margin-bottom: 20px; z-index: 10">
          <a-card class="search-box" style="over-flow: auto">
            <a-checkbox-group v-model="checkTitle" style="width: 100%">
              <a-list size="large" bordered :dataSource="title">
                <a-list-item slot="renderItem" slot-scope="item">
                  <a-checkbox :value="item"> {{ item }} </a-checkbox>
                  <!-- <a slot="actions" @click="okTitle(item)">选择</a> -->
                </a-list-item>
              </a-list>
            </a-checkbox-group>
          </a-card>
        </a-col>
      </a-row>
    </a-modal>
    <!-- 推荐广告语结束 -->

    <!-- 预览应用/链接 -->
    <a-modal
      :title="getData('campaignType', 'form') == 5 ? '填写链接' : '预览应用'"
      v-model="appIdVisible"
      :width="1000"
      @ok="appIdOk"
      @cancel="appIdVisible = false"
    >
      <a-row :gutter="10" class="hide-checkbox">
        <a-col :sm="24" style="margin-bottom: 20px; z-index: 10">
          <a-card class="search-box" style="min-height: 500px">
            <div style="margin-bottom: 30px">
              <span style="display: inline-block; width: 140px">应用分配方式</span>
              <a-radio-group v-model="appList.appAllocation">
                <a-radio-button :value="1">按账户分配</a-radio-button>
                <a-radio-button :value="2">按广告计划分配</a-radio-button>
                <a-radio-button :value="3">按广告组分配</a-radio-button>
              </a-radio-group>
            </div>
            <div style="margin-bottom: 30px">
              <span style="display: inline-block; width: 140px">选择应用</span>
              广告账户：1 &nbsp;&nbsp;&nbsp;&nbsp; 广告计划：{{ campaignCount }} &nbsp;&nbsp;&nbsp;&nbsp;广告组数量：{{
                checkDirectionalList.length * materialInfo.materialList.length
              }}
              <a-card style="min-height: 300px; margin-top: 15px" v-if="appIdVisible">
                <a-transfer
                  :data-source="appListArr"
                  :target-keys="targetKeys"
                  :disabled="disabled"
                  :show-search="true"
                  :filter-option="(inputValue, item) => item.appVersion.indexOf(inputValue) !== -1"
                  :show-select-all="true"
                  @change="onChangeTransFer"
                >
                  <template
                    slot="children"
                    slot-scope="{
                      props: { direction, filteredItems, selectedKeys, disabled: listDisabled },
                      on: { itemSelectAll, itemSelect },
                    }"
                  >
                    <a-table
                      :row-selection="
                        getRowSelection({ disabled: listDisabled, selectedKeys, itemSelectAll, itemSelect })
                      "
                      :columns="direction === 'left' ? leftColumns : rightColumns"
                      :data-source="filteredItems"
                      size="small"
                      :style="{ pointerEvents: listDisabled ? 'none' : null }"
                      :custom-row="
                        ({ key, disabled: itemDisabled }) => ({
                          on: {
                            click: () => {
                              if (itemDisabled || listDisabled) return
                              itemSelect(key, !selectedKeys.includes(key))
                            },
                          },
                        })
                      "
                    >
                      <!-- platform -->

                      <div slot="platform" slot-scope="text, records" @click.stop>
                        {{ text | platform }}
                      </div>
                      <div slot="action" slot-scope="text, records" @click.stop>
                        <!-- {{ records.siteId }} -->
                        <a-select v-model="records.siteId" style="width: 100%" @focus="getSiteList(records)" allowClear>
                          <a-select-option
                            v-for="appModel in records.siteList"
                            :key="appModel.siteId"
                            :value="appModel.siteId"
                          >
                            {{ appModel.name }}
                          </a-select-option>
                        </a-select>
                      </div>
                    </a-table>
                  </template>
                </a-transfer>
              </a-card>
            </div>
            <div style="margin-bottom: 30px">
              <span style="display: inline-block; width: 140px">链接分配方式</span>
              <a-radio-group v-model="appList.linkAllocation" @change="setCount">
                <a-radio-button :value="1">按账户分配</a-radio-button>
                <a-radio-button :value="2">按广告计划分配</a-radio-button>
                <a-radio-button :value="3">按广告组分配</a-radio-button>
              </a-radio-group>
            </div>
            <!-- linkAllocation: 1,
        clickUrlList: [],
        clickUrlActionList: [], -->
            <div style="margin-bottom: 30px">
              <span style="display: inline-block; width: 140px">第三方监测链接</span>

              <a-input
                v-model="item.value"
                placeholder="请输入第三方检测链接"
                style="width: 60%; margin-bottom: 10px"
                v-for="(item, index) in appList.clickUrlList"
                :style="{ marginLeft: index != 0 ? '140px' : '0px' }"
                :key="index"
              >
              </a-input>
            </div>
            <div style="margin-bottom: 30px" v-if="actionbarClickUrlSwitch">
              <span style="display: inline-block; width: 140px">第三方点击监测链接</span>
              <a-input
                v-model="item.value"
                placeholder="请输入第三方点击检测链接"
                style="width: 60%; margin-bottom: 10px"
                v-for="(item, index) in appList.clickUrlActionList"
                :style="{ marginLeft: index != 0 ? '140px' : '0px' }"
                :key="index"
              >
              </a-input>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </a-modal>

    <templateModal ref="templateModal" @getData="getTemplate" />
    <!-- 预览应用/链接结束 -->
    <a-modal
      :title="getData('campaignType', 'form') == 5 ? '填写链接' : '预览应用'"
      v-model="urlVisible"
      :width="1000"
      @ok="urlOk"
      @cancel="urlVisible = false"
    >
      <a-row :gutter="10" class="hide-checkbox">
        <a-col :sm="24" style="margin-bottom: 20px; z-index: 10">
          <a-card class="search-box" style="min-height: 500px">
            <div style="margin-bottom: 30px">
              <span style="display: inline-block; width: 140px">应用分配方式</span>
              <a-radio-group v-model="appList.appAllocation" @change="setCountUrl">
                <a-radio-button :value="1">按账户分配</a-radio-button>
                <a-radio-button :value="2">按广告计划分配</a-radio-button>
                <a-radio-button :value="3">按广告组分配</a-radio-button>
              </a-radio-group>
            </div>
            <div style="margin-bottom: 30px">
              <span style="display: inline-block; width: 140px">填写链接</span>
              广告账户：1 &nbsp;&nbsp;&nbsp;&nbsp; 广告计划：{{ campaignCount }} &nbsp;&nbsp;&nbsp;&nbsp;广告组数量：{{
                checkDirectionalList.length * materialInfo.materialList.length
              }}
              <a-input
                v-model="item.value"
                placeholder="请输入链接"
                style="width: 60%; margin-bottom: 10px; margin-top: 10px"
                v-for="(item, index) in appList.urlArr"
                :key="index"
                :style="{ marginLeft: '140px' }"
              >
              </a-input>
            </div>
            <div style="margin-bottom: 30px">
              <span style="display: inline-block; width: 140px">监测链接分配方式</span>
              <a-radio-group v-model="appList.linkAllocation" @change="setCount">
                <a-radio-button :value="1">按账户分配</a-radio-button>
                <a-radio-button :value="2">按广告计划分配</a-radio-button>
                <a-radio-button :value="3">按广告组分配</a-radio-button>
              </a-radio-group>
            </div>
            <!-- linkAllocation: 1,
        clickUrlList: [],
        clickUrlActionList: [], -->
            <div style="margin-bottom: 30px">
              <span style="display: inline-block; width: 140px">第三方监测链接</span>

              <a-input
                v-model="item.value"
                placeholder="请输入第三方检测链接"
                style="width: 60%; margin-bottom: 10px"
                v-for="(item, index) in appList.clickUrlList"
                :style="{ marginLeft: index != 0 ? '140px' : '0px' }"
                :key="index"
              >
              </a-input>
            </div>
            <div style="margin-bottom: 30px" v-if="actionbarClickUrlSwitch">
              <span style="display: inline-block; width: 140px">第三方点击监测链接</span>
              <a-input
                v-model="item.value"
                placeholder="请输入第三方点击检测链接"
                style="width: 60%; margin-bottom: 10px"
                v-for="(item, index) in appList.clickUrlActionList"
                :style="{ marginLeft: index != 0 ? '140px' : '0px' }"
                :key="index"
              >
              </a-input>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </a-modal>

    <a-modal title="查看视频" v-model="visibleVideo" :width="400" :footer="null">
      <video class="video" :src="videoUrlShow" controls="controls" style="width: 100%">
        您的浏览器不支持 video 标签。
      </video>
    </a-modal>
  </div>
</template>

<script>
//   import UserMenu from '../tools/UserMenu'
//   import SMenu from '../menu/'
import Logo from '@/components/tools/Logo.vue'
import pick from 'lodash.pick'
import { mixin } from '@/utils/mixin.js'
import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
import moment from 'moment'
import selectCheckAll from '@/components/formComponents/toutiaoTime'
import checkBoxGroup from '@/components/formComponents/checkBoxGroup'
import uploadFile from '@/components/uploadFileMd5Push.vue'
import BMF from 'browser-md5-file'
import templateModal from '@/views/modules/kuaishouapp/crossAccount/templateModal'
import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放，及停止所有视频播放的方法
import lookPreviewVue from './lookPreview.vue'
function tqFun(qcArr1) {
  var tempArr = []
  function bbFun(qcArr) {
    for (var i = 0; i < qcArr.length; i++) {
      if (qcArr[i] instanceof Array) {
        bbFun(qcArr[i])
      } else {
        tempArr.push(qcArr[i])
      }
    }
    return tempArr
  }
  return bbFun(qcArr1)
}

const mockData = []

const originTargetKeys = mockData.filter((item) => +item.key % 3 > 1).map((item) => item.key)

const leftTableColumns = [
  {
    dataIndex: 'appVersion',
    title: '应用标记',
  },
  {
    dataIndex: 'appId',
    title: '应用Id',
  },
  {
    dataIndex: 'platform',
    title: '应用类型',
    scopedSlots: { customRender: 'platform' },
  },
]
const rightTableColumns = [
  {
    dataIndex: 'appName',
    title: '应用名称',
  },
  {
    dataIndex: 'action',
    title: '选择应用下载详情',
    scopedSlots: { customRender: 'action' },
  },
]
export default {
  name: 'GlobalHeader',
  components: {
    //   UserMenu,
    //   SMenu,
    Logo,
    Treeselect,
    selectCheckAll,
    checkBoxGroup,
    uploadFile,
    templateModal,
  },
  mixins: [mixin],
  props: {
    mode: {
      type: String,
      // sidemenu, topmenu
      default: 'sidemenu',
    },
    theme: {
      type: String,
      required: false,
      default: 'dark',
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false,
    },
    device: {
      type: String,
      required: false,
      default: 'desktop',
    },
  },
  data() {
    return {
      spinning: true,
      removeActive: null,
      visibleVideo: false,
      videoUrlShow: '',
      disabled: false,
      showSearch: false,
      targetKeys: [],
      leftColumns: leftTableColumns,
      rightColumns: rightTableColumns,

      active: 0,
      previewVisible: false,

      targetIds: [],
      accountId: '',
      directionalVisible: false, //定向包选择模态框
      templateList: [], //定向包模板列表
      templateListAll: [],
      selectedRowKeys: [],
      selectionRows: [],
      checkDirectionalList: [], //选择的定向包
      populationList: [],
      videoVisibleChange: '',
      templateData: {},
      loading: false,
      region: [],
      columns: [
        {
          title: '定向包名称',
          dataIndex: 'templateName',
          width: '33%',
          align: 'center',
          scopedSlots: { customRender: 'templateName' },
        },
        {
          title: '关联广告组',
          dataIndex: 'unitCount',
          width: '33%',
          align: 'center',
          scopedSlots: { customRender: 'unitCount' },
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
      ruleConfigVisible: false, //规则配置的模态框
      ruleConfigForm: this.$form.createForm(this),
      visible: false, //广告组信息配置右侧抽屉
      screenWidth: document.body.clientWidth,
      form: this.$form.createForm(this),
      formUnit: this.$form.createForm(this),
      headerBarFixed: false,
      //update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
      topMenuStyle: {
        headerIndexLeft: {},
        topNavHeader: {},
        headerIndexRight: {},
        topSmenuStyle: {},
      },
      activeStep: 0,
      campaignData: {},
      //组相关
      unitInfo: {
        useAppMarket: false,
        appStore: [],
        dayBudget: null,
        speed: '1',
        timeRange: [moment().startOf('day'), moment().add(1, 'months')],
        scheduleTime: '',
        showMode: '2',
        sceneId: [1],
        bidType: 10,
        ocpxActionType: 2,
        deepConversionType: null,
        templateBidType: 1,
        cpaBid: null,
        bid: null,
        deepConversionBid: null,
        bidMax: null,
        bidMin: null,
        unitName: '',
        // 'huawei', 'oppo', 'vivo', 'xiaomi', 'meizu', 'smartisan'
      },
      allianceAccount: '1',
      dayBudgetType: '1',
      unitTime: '1',
      scheduleTime: '1',
      rules: {
        dayBudget: [{ required: true, trigger: 'change', validator: this.handleConfirmValue }],
        unitName: [{ required: true, message: '广告组名称必填', trigger: 'change' }],
        cpaBid: [{ required: true, trigger: 'change', validator: this.cpaBidValue }],
        bid: [{ required: true, trigger: 'change', validator: this.bidValue }],
        bidMax: [{ required: true, trigger: 'change', validator: this.maxValue }],
        bidMin: [{ required: true, trigger: 'change', validator: this.minValue }],
      },
      groupTypeData: null, //加白
      keep: false,
      campaignKeep: false,
      //组相关结束

      //创意相关
      creativeVisible: false,
      creativeInfo: {
        unitType: 4,
        // targetActionType: 1,
        overlayType: [],
        creativeCategory: [],
        creativeTag: [],
        stickerTitle: '',
        actionBarText: '',
        keep: false,
      },
      creativeTag: [],
      creativeRules: {
        actionBarText: [{ required: true, message: '行动号召按钮必选', trigger: 'change' }],
        creativeTag: [{ required: true, message: '创意标签最多十个', trigger: 'change', validator: this.creativeMany }],
        stickerTitle: [{ required: true, trigger: 'change', validator: this.stickerCheck }],
      },
      stickerStyles: [], //贴纸信息
      actionBarTextList: [],
      createOptions: [], //创意分类
      fieldNames: {
        label: 'category_name',
        value: 'category_id',
        children: 'child',
      },
      //创意相关结束

      //素材相关
      materialVisible: false,
      videoMaterialShow: false,
      materialInfo: {
        isMakeCover: 2, //是否自动生成封面  1不开启,2开启
        coverNumber: 1, //设置封面数量
        matchingMethod: 2, //广告语匹配方式  1自定义,2按创意,3按创意组
        groupCreativity: 2, //是否设置组中创意数量  1是,2否
        creativityNumber: 1,
        materialList: [
          // {
          //   name: '创意组1',
          //   photoArr: [{ photoId: '', image: {}, creativeName: '', description: '' }],
          // },
        ],
      },
      materialRules: {
        coverNumber: [{ required: true, message: '封面数量必填', trigger: 'blur' }],
        creativityNumber: [{ required: true, message: '创意数量必填', trigger: 'blur' }],
      },
      checkMatemalVisible: false, //素材模态框展示
      dataSource: [], //素材列表
      checkVideo: [],
      checkVideoAll: [],
      checkVideoWai: [],
      tongbuLoading: false,
      loadingVideoList: false,
      videoList: [],
      ipagination: {
        current: 1,
        pageSize: 50,
        //   pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        //   showSizeChanger: true,
        total: 0,
        onChange: (current) => {
          // 切换分页时的回调，
          // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
          this.ipagination.current = current
        },
      },
      time: [],
      channelType: 0,
      activeTwo: 0,
      tab: [
        // {
        //   value: 2,
        //   label: '全部',
        // },
        {
          value: 0,
          label: '内部',
        },
        {
          value: 1,
          label: '外部',
        },
      ],

      //自定义
      materialList: [],
      //按创意和按创意组匹配
      descriptionList: [],
      titleVisible: false,
      options: [],
      value: '',
      dataOne: [],
      title: [],
      checkTitle: [],
      //素材相关结束

      //配置应用/链接
      appList: {
        checkType: 'app',
        appAllocation: 1, //1按账户，2按广告计划，3按广告组
        appArr: [], //{ appId: '', siteId: 123123 }
        urlArr: [{ value: '' }],
        linkAllocation: 1,
        clickUrlList: [{ value: '' }],
        clickUrlActionList: [{ value: '' }],
      },
      // appAllocation: 1, //1按账户，2按广告计划，3按广告组
      // appIds: [],
      // linkAllocation: 1,
      // clickUrlList: [],
      appIdVisible: false,
      urlVisible: false,
      appListArr: [],
      //配置应用/链接结束

      stepsArr: [
        { title: '创建规则' },
        { title: '广告组基本信息' },
        { title: '定向包' },
        { title: '创意基本信息' },
        { title: '创意素材' },
        // { title: '转化跟踪' },
        // { title: '预览提交' },
      ],
      formItemLayout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 19 },
      },
      tailFormItemLayout: {
        wrapperCol: {
          sm: {
            span: 16,
            offset: 5,
          },
        },
      },

      campaignTemplateId: null,
      groupTemplateId: null,
      createTiveTemplateId: null,
      creativeCategorySwitch: false,
      actionbarClickUrlSwitch: false,

      campaignList: [],
      campaignId: '',
      sumContent: 0,
      templateLoading: false,
      templateName: '',
      groupCount: 0,
      showCount: false,
      sumbitLoading: false,
    }
  },
  computed: {
    allPhotoIdArr() {
      var data = []
      for (let i = 0; i < this.materialInfo.materialList.length; i++) {
        for (let j = 0; j < this.materialInfo.materialList[i].photoArr.length; j++) {
          data.push(this.materialInfo.materialList[i].photoArr[j].photoId.photoId)
        }
      }
      data = [...new Set(data)]
      return data
    },
    showTip() {
      if (this.groupTemplateId == null && !this.campaignData.campaignName) {
        return true
      } else {
        return false
      }
    },
    materialCount() {
      var count = 0

      for (let i = 0; i < this.materialInfo.materialList.length; i++) {
        if (this.materialInfo.materialList.length > 0) {
          for (let j = 0; j < this.materialInfo.materialList[i].photoArr.length; j++) {
            count++
          }
        }
      }
      return count
    },
    campaignCount() {
      return this.campaignData.groupRule
        ? this.campaignData.groupRule == 1
          ? this.checkDirectionalList.length
          : this.campaignData.groupRule == 2
          ? this.materialInfo.materialList.length
          : 0
        : this.checkDirectionalList.length
    },
  },
  watch: {
    campaignId(n, o) {
      this.showCount = false
      if (n != null && n != '') {
        this.getCount()
      }
    },
    visibleVideo(n, o) {
      if (!n) {
        closeAllVideoFun()
      }
    },
    accountId: function (n, o) {
      if (this.$route.query.batchId) {
      } else {
        if (n != '') {
          this.spinning = true
          this.getCampaignTemplate(n)
          this.getGroupTemplate(n)
          this.getCreativeTemplate(n)
          this.getCampaignList(n)
          this.clearAllData()
          this.getAction('/kuaishou/batch/getCreativeCategory', {
            accountId: n,
          }).then((res) => {
            if (res.success) {
              this.createOptions = res.result
            }
          })
          this.getAction('/kuaishou/batch/getIsActivate', {
            accountId: n,
          }).then((res) => {
            if (res.success) {
              this.groupTypeData = res.result
            }
          })
          this.getAction('/kuaishou/batch/getCreativeWordStyles', {
            accountId: n,
          }).then((res) => {
            this.stickerStyles = []
            if (res.success) {
              if (res.result) {
                // this.stickerStyles = res.result.map((item) => {
                //   return {
                //     id: item.sticker_style_id,
                //     url: item.sticker_styles[0],
                //   }
                // })
                var data = res.result.map((item) => {
                  return item.sticker_styles
                })
                data.map((item) => {
                  item.map((i) => {
                    this.stickerStyles.push({
                      id: i.overlay_type,
                      url: i.overlay_preview_url,
                    })
                  })
                })
              } else {
                this.stickerStyles = []
              }
            } else {
              this.stickerStyles = []
            }
          })

          this.getAction('/kuaishou/batch/getWhiteList', {
            accountId: n,
          }).then((res) => {
            if (res.success) {
              // console.log(res)
              if (res.result) {
                this.creativeCategorySwitch = res.result.creative_category_switch == 1 ? true : false
                this.actionbarClickUrlSwitch = res.result.actionbar_click_url_switch == 1 ? true : false

                // if (res.result.alliance_account == 1) {
                //   this.allianceAccount = true
                // } else {
                //   this.allianceAccount = false
                // }
              } else {
                this.creativeCategorySwitch = false
                this.actionbarClickUrlSwitch = false
              }
            }
          })
          this.spinning = false
        } else {
          this.spinning = false
        }
      }
    },

    checkMatemalVisible(n, o) {
      if (n) {
        var params = {}
        params.accountId = this.accountId
        params.materialType = 1
        params.pageSize = this.ipagination.pageSize
        params.pageNo = 1
        params.status = 0
        params.channelType = this.channelType
        params.orderBy = 'time'
        this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
      }
    },
    time(n, o) {
      if (n.length > 0) {
        var params = {}
        params.accountId = this.accountId
        params.materialType = 1
        params.pageSize = this.ipagination.pageSize
        params.pageNo = 1
        params.status = 0
        params.channelType = this.channelType
        params.startDate = moment(n[0]).format('YYYY-MM-DD') + ' 00:00:00'
        params.endDate = moment(n[1]).format('YYYY-MM-DD') + ' 23:59:59'
        params.orderBy = 'time'
        this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
      } else {
        var params = {}
        params.accountId = this.accountId
        params.materialType = '1'
        params.pageSize = this.ipagination.pageSize
        params.pageNo = 1
        params.status = 0
        params.channelType = this.channelType
        params.orderBy = 'time'
        this.ipagination.current = 1
        this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
      }
    },
  },
  mounted() {
    if (this.$route.query.accountId && this.$route.query.batchId != undefined) {
      this.spinning = false
      this.getAction('/kuaishou/batch/getCreativeCategory', {
        accountId: this.$route.query.accountId,
      }).then((res) => {
        if (res.success) {
          this.createOptions = res.result
        }
      })
      this.getAction('/kuaishou/batch/getIsActivate', {
        accountId: this.$route.query.accountId,
      }).then((res) => {
        if (res.success) {
          this.groupTypeData = res.result
        }
      })
      this.getAction('/kuaishou/batch/getCreativeWordStyles', {
        accountId: this.$route.query.accountId,
      }).then((res) => {
        this.stickerStyles = []
        if (res.success) {
          if (res.result) {
            // this.stickerStyles = res.result.map((item) => {
            //   return {
            //     id: item.sticker_style_id,
            //     url: item.sticker_styles[0],
            //   }
            // })
            var data = res.result.map((item) => {
              return item.sticker_styles
            })
            data.map((item) => {
              item.map((i) => {
                this.stickerStyles.push({
                  id: i.overlay_type,
                  url: i.overlay_preview_url,
                })
              })
            })
          } else {
            this.stickerStyles = []
          }
        } else {
          this.stickerStyles = []
        }
      })

      this.getAction('/kuaishou/batch/getWhiteList', {
        accountId: this.$route.query.accountId,
      }).then((res) => {
        if (res.success) {
          // console.log(res)
          if (res.result) {
            this.creativeCategorySwitch = res.result.creative_category_switch == 1 ? true : false
            this.actionbarClickUrlSwitch = res.result.actionbar_click_url_switch == 1 ? true : false

            // if (res.result.alliance_account == 1) {
            //   this.allianceAccount = true
            // } else {
            //   this.allianceAccount = false
            // }
          } else {
            this.creativeCategorySwitch = false
            this.actionbarClickUrlSwitch = false
          }
        }
      })

      var str = ''
      for (let i = 0; i < 7 * 24; i++) {
        str += '0'
      }

      this.accountId = this.$route.query.accountId
      var dataJson = JSON.parse(localStorage.getItem('lookPreview'))
      this.getTemplateList()
      let params = {}
      params.accountId = this.accountId

      this.getAction('/kuaishou/batch/getAppList', params).then((res) => {
        if (res.success) {
          var dataOne = res.result.filter((item, index) => {
            return this.getData('systemType', 'form') == 'Android'
              ? item.platform == 1 || item.platform == 2
              : item.platform == 3 || item.platform == 4
          })
          this.appListArr = dataOne.map((item, index) => {
            return {
              ...item,
              key: item.appId + '',
              title: item.appName,
              siteId: null,
              siteList: [],
            }
          })
        }
      })
      this.$nextTick(() => {
        if (!dataJson.campaignJson.campaignId) {
          this.form.setFieldsValue({ systemType: dataJson.campaignJson.systemType })
          this.form.setFieldsValue({ campaignType: dataJson.campaignJson.campaignType })
        } else {
          this.form.setFieldsValue({ systemType: dataJson.campaignJson.systemType })
          this.form.setFieldsValue({ campaignType: dataJson.campaignJson.campaignType })
          this.form.setFieldsValue({ newClick: '2' })
          this.campaignId = dataJson.campaignJson.campaignId
        }

        this.getCampaignList(this.$route.query.accountId)
        this.campaignTemplateId = 'edit'
        this.campaignData = { ...dataJson.campaignJson }

        this.groupTemplateId = 'edit'
        this.unitInfo.useAppMarket = dataJson.unitJson.useAppMarket == 1 ? true : false
        this.unitInfo.appStore = dataJson.unitJson.appStore ? JSON.parse(dataJson.unitJson.appStore) : []
        this.dayBudgetType = dataJson.unitJson.dayBudget && dataJson.unitJson.dayBudget > 0 ? '2' : '1'
        this.unitInfo.dayBudget =
          dataJson.unitJson.dayBudget && dataJson.unitJson.dayBudget > 0 ? dataJson.unitJson.dayBudget / 1000 : null
        this.unitInfo.speed = dataJson.unitJson.speed + ''
        this.unitTime = dataJson.unitJson.endTime && dataJson.unitJson.endTime != '' ? '2' : '1'
        this.unitInfo.timeRange =
          dataJson.unitJson.endTime && dataJson.unitJson.endTime != ''
            ? [moment().startOf('day'), moment().add(1, 'months')]
            : [moment().startOf('day'), moment().add(1, 'months')]
        this.scheduleTime = dataJson.unitJson.scheduleTime == null || dataJson.unitJson.scheduleTime == str ? '1' : '2'
        this.unitInfo.scheduleTime =
          dataJson.unitJson.scheduleTime == null || dataJson.unitJson.scheduleTime == str
            ? str
            : dataJson.unitJson.scheduleTime
        this.unitInfo.showMode = dataJson.unitJson.showMode + ''
        this.unitInfo.sceneId =
          JSON.parse(dataJson.unitJson.sceneId)[0] == 5 ? [1] : JSON.parse(dataJson.unitJson.sceneId)
        this.allianceAccount = JSON.parse(dataJson.unitJson.sceneId)[0] == 5 ? '2' : '1'
        this.unitInfo.bidType = dataJson.unitJson.bidType
        this.unitInfo.ocpxActionType = dataJson.unitJson.ocpxActionType ? dataJson.unitJson.ocpxActionType : 2
        this.unitInfo.deepConversionType = dataJson.unitJson.deepConversionType
        this.unitInfo.templateBidType = dataJson.unitJson.templateBidType
        this.unitInfo.cpaBid =
          dataJson.unitJson.cpaBid && dataJson.unitJson.cpaBid > 0 ? dataJson.unitJson.cpaBid / 1000 : null
        this.unitInfo.bid = dataJson.unitJson.bid && dataJson.unitJson.bid > 0 ? dataJson.unitJson.bid / 1000 : null
        this.unitInfo.deepConversionBid =
          dataJson.unitJson.deepConversionBid && dataJson.unitJson.deepConversionBid > 0
            ? dataJson.unitJson.deepConversionBid / 1000
            : null
        this.unitInfo.bidMax =
          dataJson.unitJson.bidMax && dataJson.unitJson.bidMax > 0 ? dataJson.unitJson.bidMax / 1000 : null
        this.unitInfo.bidMin =
          dataJson.unitJson.bidMin && dataJson.unitJson.bidMin > 0 ? dataJson.unitJson.bidMin / 1000 : null
        this.unitInfo.unitName = dataJson.unitJson.unitName

        this.createTiveTemplateId = 'edit'
        this.creativeInfo.overlayType = dataJson.creativeJson.overlayType ? [dataJson.creativeJson.overlayType] : []
        this.creativeInfo.creativeCategory =
          dataJson.creativeJson.creativeCategory > 10000
            ? [
                parseInt(dataJson.creativeJson.creativeCategory / 10000),
                parseInt(dataJson.creativeJson.creativeCategory / 100),
                dataJson.creativeJson.creativeCategory,
              ]
            : dataJson.creativeJson.creativeCategory > 100
            ? [parseInt(dataJson.creativeJson.creativeCategory / 100), dataJson.creativeJson.creativeCategory]
            : []
        this.creativeInfo.creativeTag = dataJson.creativeJson.creativeTag
          ? JSON.parse(dataJson.creativeJson.creativeTag)
          : []
        this.creativeInfo.actionBarText = dataJson.creativeJson.actionBarText
        this.creativeInfo.stickerTitle = dataJson.creativeJson.stickerTitle

        if (this.campaignData.timeStart != '') {
          this.campaignData.timeStart = moment(this.campaignData.timeStart)
        }
        if (this.campaignData.dayBudget > 0) {
          this.campaignData.budgetType = '2'
          this.campaignData.dayBudget = this.campaignData.dayBudget / 1000
        } else {
          this.campaignData.budgetType = '1'
          this.campaignData.dayBudget = null
        }
        var that = this

        this.checkDirectionalList = JSON.parse(dataJson.checkDirectionalList)
        this.selectedRowKeys = JSON.parse(dataJson.checkDirectionalList).map((item) => {
          return item.templateId
        })
        this.materialList = dataJson.materialArray.materialInfo.materialList
        this.materialInfo = { ...dataJson.materialArray.materialInfo }
        this.descriptionList = dataJson.materialArray.descriptionList.map((item) => {
          return { value: item }
        })
        this.videoMaterialShow = true
        this.targetKeys =
          dataJson.appList.appArr && dataJson.appList.appArr.length > 0
            ? dataJson.appList.appArr.map((item) => {
                return item.appId
              })
            : []
        this.appList = {
          checkType: dataJson.appList.checkType,
          appAllocation: dataJson.appList.appAllocation,
          appArr: dataJson.appList.appArr,
          urlArr: dataJson.appList.urlArr
            ? dataJson.appList.urlArr.map((item) => {
                return { value: item }
              })
            : [{ value: '' }],
          linkAllocation: dataJson.appList.linkAllocation,
          clickUrlList: dataJson.appList.clickUrlList
            ? dataJson.appList.clickUrlList.map((item) => {
                return { value: item }
              })
            : [{ value: '' }],
          clickUrlActionList: dataJson.appList.clickUrlList
            ? dataJson.appList.clickUrlList.map((item) => {
                return { value: item }
              })
            : [{ value: '' }],
        }
        this.appIdVisible = true
        this.appIdVisible = false
        this.urlVisible = true
        this.urlVisible = false
      })
    } else if (this.$route.query.accountId) {
      this.accountId = this.$route.query.accountId
    } else {
      this.spinning = false
    }
    this.$nextTick(function () {
      // this.accountId = 23212
      window.addEventListener('scroll', this.onScroll)
      const that = this
      window.onresize = () => {
        return (() => {
          window.screenWidth = document.body.clientWidth
          that.screenWidth = window.screenWidth
        })()
      }
    })
  },
  methods: {
    setDeepConversionType(typeChange) {
      // groupTypeData.deepConversionTypes
      var data = this.groupTypeData.deepConversionTypes.filter((item) => {
        return item.deepConversionType == typeChange
      })
      return data[0].desc
    },
    checkVideoFun() {
      this.ipagination.current = 1
      this.checkMatemalVisible = true
      this.checkVideo = this.allPhotoIdArr
      this.sumContent = this.checkVideo.length
      this.checkVideoAll = this.allPhotoIdArr.length > 0 ? this.checkVideoAll : []
      this.checkVideoWai = this.allPhotoIdArr.length > 0 ? this.checkVideoWai : []
    },
    getCount() {
      this.getAction('/kuaishou/kuaiShouGroup/queryToDayBuiltCount', { accountId: this.accountId }).then((res) => {
        if (res.success) {
          this.groupCount = res.result
          this.showCount = true
        } else {
          this.showCount = false
        }
      })
    },
    //编辑模板
    lookTemplate(accountId, templateId) {
      this.$refs.templateModal.handleOk(this.accountId, templateId, 'look')
    },
    //新增定向模板
    addTemplate(accountId) {
      this.$refs.templateModal.create(this.accountId, 'add')
    },
    onSearch() {
      this.templateList = this.templateListAll.filter((item) => {
        return item.templateName.toLowerCase().indexOf(this.templateName.toLowerCase()) > -1
      })
    },
    getTemplate() {
      this.templateLoading = true
      this.getAction('/batch/kuaishouTemplate/getTemplateByAccountId', {
        accountId: this.accountId,
      }).then((res) => {
        if (res.success) {
          this.getTemplateList()
          this.templateLoading = false
        }
      })
    },
    addMaterialOne(indexList) {
      this.checkMatemalVisible = true
    },
    overUploadVideo(urlAll) {
      // console.log(urlAll)
    },
    overUploadImage(urlAll) {
      var that = this
      // console.log(urlAll)
    },
    deleteImage() {},
    fileWater(file) {
      var bmf = new BMF()
      var that = this
      return new Promise(function (resolve, reject) {
        bmf.md5(file, (err, md5) => {
          resolve({ md5: md5, accountId: that.accountId })
        })
      })
    },

    okAppId() {},
    setCountUrl(e) {
      this.appList.urlArr = []
      if (e.target.value == 1) {
        this.appList.urlArr = [{ value: '' }]
      } else if (e.target.value == 2) {
        for (let i = 0; i < this.campaignCount; i++) {
          this.appList.urlArr.push({ value: '' })
        }
      } else if (e.target.value == 3) {
        var count = this.checkDirectionalList.length * this.materialInfo.materialList.length
        for (let i = 0; i < count; i++) {
          this.appList.urlArr.push({ value: '' })
        }
      }
    },
    setCount(e) {
      this.appList.clickUrlList = []
      this.appList.clickUrlActionList = []
      if (e.target.value == 1) {
        this.appList.clickUrlList = [{ value: '' }]
        this.appList.clickUrlActionList = [{ value: '' }]
      } else if (e.target.value == 2) {
        for (let i = 0; i < this.campaignCount; i++) {
          this.appList.clickUrlList.push({ value: '' })
          this.appList.clickUrlActionList.push({ value: '' })
        }
      } else if (e.target.value == 3) {
        var count = this.checkDirectionalList.length * this.materialInfo.materialList.length
        for (let i = 0; i < count; i++) {
          this.appList.clickUrlList.push({ value: '' })
          this.appList.clickUrlActionList.push({ value: '' })
        }
      }
    },
    getAllData() {
      var data = []
      this.appListArr.filter((co, i) => {
        let temp = this.targetKeys.indexOf(co.key)
        if (temp >= 0) {
          data.push(co)
        }
      })
      return data
    },
    urlOk() {
      var count = this.appList.urlArr.filter((item) => {
        return item.value != ''
      })
      if (this.appList.appAllocation == 1) {
        if (count.length != 1) {
          this.$message.error('按账户分配必须填写1个链接')
          return
        }
      } else if (this.appList.appAllocation == 2) {
        if (count.length != this.campaignCount) {
          this.$message.error('按广告计划分配必须填写' + this.campaignCount + '个链接')
          return
        }
      } else if (this.appList.appAllocation == 3) {
        if (count.length != this.checkDirectionalList.length * this.materialInfo.materialList.length) {
          this.$message.error(
            '按广告组分配必须填写' + this.checkDirectionalList.length * this.materialInfo.materialList.length + '个链接'
          )
          return
        }
      }

      var dataArr = []
      for (let i = 0; i < this.appList.clickUrlList.length; i++) {
        if (
          /(http|https):\/\/([\w.]+\/?)\S*/.test(this.appList.clickUrlList[i].value) &&
          this.appList.clickUrlList[i].value.length < 10000
        ) {
        } else {
          dataArr.push(false)
        }
      }

      for (let i = 0; i < this.appList.urlArr.length; i++) {
        if (
          /(http|https):\/\/([\w.]+\/?)\S*/.test(this.appList.urlArr[i].value) &&
          this.appList.urlArr[i].value.length < 10000
        ) {
        } else {
          dataArr.push(false)
        }
      }
      if (dataArr.length > 0) {
        this.$message.error('请检查链接是否填写正确')
        return
      }
      this.urlVisible = false
    },
    handleConfirmValue(rule, value, callback) {
      if (/(http|https):\/\/([\w.]+\/?)\S*/.test(value) && value.length < 10000) {
        callback()
      } else {
        callback('链接不能为空且开头为http://或https://，并且长度小于10000')
      }
    },
    appIdOk() {
      if (this.appList.appAllocation == 1) {
        if (this.targetKeys.length != 1) {
          this.$message.error('按账户分配只可以选择一个应用')
          return
        }
      } else if (this.appList.appAllocation == 2) {
        if (this.targetKeys.length != this.campaignCount) {
          this.$message.error('按广告计划分配必须选择' + this.campaignCount + '个应用')
          return
        }
      } else if (this.appList.appAllocation == 3) {
        if (this.targetKeys.length != this.checkDirectionalList.length * this.materialInfo.materialList.length) {
          this.$message.error(
            '按广告组分配必须选择' + this.checkDirectionalList.length * this.materialInfo.materialList.length + '个应用'
          )
          return
        }
      }
      var dataArr = []
      for (let i = 0; i < this.appList.clickUrlList.length; i++) {
        if (
          /(http|https):\/\/([\w.]+\/?)\S*/.test(this.appList.clickUrlList[i].value) &&
          this.appList.clickUrlList[i].value.length < 10000
        ) {
        } else {
          dataArr.push(false)
        }
      }
      if (dataArr.length > 0) {
        this.$message.error('请检查链接是否填写正确')
        return
      }
      this.appIdVisible = false
    },
    onChangeTransFer(nextTargetKeys, direction, moveKeys) {
      this.targetKeys = nextTargetKeys
    },
    getSiteList(item) {
      this.getAction('/kuaishou/batch/getPageList', {
        accountId: this.accountId,
        appId: item.appId,
        viewComp: 7,
      }).then((res) => {
        if (res.success) {
          // console.log(item)
          item.siteList = res.result
        } else {
          this.showSite = false
        }
      })
    },
    getRowSelection({ disabled, selectedKeys, itemSelectAll, itemSelect }) {
      return {
        getCheckboxProps: (item) => ({ props: { disabled: disabled || item.disabled } }),
        onSelectAll(selected, selectedRows) {
          itemSelectAll(selected)
        },
        onSelect({ key }, selected) {
          itemSelect(key, selected)
        },
        selectedRowKeys: selectedKeys,
      }
    },

    checkAppIds() {
      if (this.campaignCount == 0 || this.checkDirectionalList.length * this.materialInfo.materialList.length == 0) {
        this.$message.error('请先完成以上操作，再进行此步骤')
        return
      } else {
        if (this.getData('campaignType', 'form') == 2) {
          this.appIdVisible = true

          let params = {}
          params.accountId = this.accountId
          this.getAction('/kuaishou/batch/getAppList', params).then((res) => {
            if (res.success) {
              var dataOne = res.result.filter((item, index) => {
                return this.getData('systemType', 'form') == 'Android'
                  ? item.platform == 1 || item.platform == 2
                  : item.platform == 3 || item.platform == 4
              })
              this.appListArr = dataOne.map((item, index) => {
                return {
                  ...item,
                  key: item.appId + '',
                  title: item.appName,
                  siteId: null,
                  siteList: [],
                }
              })
            }
          })
        } else {
          this.urlVisible = true
        }
      }
    },
    moment,
    setItemDate(sum, item) {
      let i = sum
      if (item == 1) {
        if (i < 24) {
          return '周一' + i + ':00~' + (i + 1) + ':00'
        } else if (i < 48 && i >= 24) {
          return '周二' + (i - 24) + ':00~' + (i - 23) + ':00'
        } else if (i < 72 && i >= 48) {
          return '周三' + (i - 48) + ':00~' + (i - 47) + ':00'
        } else if (i < 96 && i >= 72) {
          return '周四' + (i - 72) + ':00~' + (i - 71) + ':00'
        } else if (i < 120 && i >= 96) {
          return '周五' + (i - 96) + ':00~' + (i - 95) + ':00'
        } else if (i < 144 && i >= 120) {
          return '周六' + (i - 120) + ':00~' + (i - 119) + ':00'
        } else {
          return '周日' + (i - 144) + ':00~' + (i - 143) + ':00'
        }
      }
    },
    editDescription(item) {
      // console.log(item)
      item.edit = !item.edit
    },
    removeDescription(index) {
      this.descriptionList.splice(index, 1)
    },
    okTitle() {
      // console.log(this.checkTitle)
      var count = this.materialInfo.matchingMethod == 2 ? this.materialCount : this.materialInfo.materialList.length
      if (this.descriptionList.length + this.checkTitle.length > count) {
        this.$message.error('选择广告语超过可选的上限,请去掉一部分后确定')
        return
      }

      if (this.checkTitle.length > 0) {
        for (let i = 0; i < this.checkTitle.length; i++) {
          this.descriptionList.push({ value: this.checkTitle[i], edit: false })
        }
      } else {
        this.$message.error('请选择广告语')
        return
      }

      this.titleVisible = false
      this.dataOne = []
      this.value = ''
      this.title = []
      this.checkTitle = []
    },

    onChangeTitle(value, selectedOptions) {
      this.dataOne = value
      this.value = ''
      this.title = []
    },
    searchQuery() {
      this.getAction('/ctop/creativeTitle/titleSearch', {
        firstCategory: this.dataOne[0],
        secondCategory: this.dataOne[1],
        keywords: this.value,
      }).then((res) => {
        // console.log(res)
        this.title = res.result ? res.result : []
      })
    },
    addDescription() {
      this.titleVisible = true
      this.getHangye()
    },
    addOne() {
      this.descriptionList.push({ value: '', edit: true })
    },
    getHangye() {
      this.getAction('/ctop/creativeTitle/getTitleLabel', '').then((res) => {
        if (res.success) {
          this.options = res.result.map((item) => {
            return {
              label: item.label,
              value: item.value,
              children:
                item.children.length > 0
                  ? [
                      {
                        label: '不限',
                        value: 0,
                      },
                    ].concat(item.children)
                  : [
                      {
                        label: '不限',
                        value: 0,
                      },
                    ],
            }
          })
          this.options = [
            {
              label: '不限',
              value: 0,
            },
          ].concat(this.options)
          if (this.dataOne.length > 0) {
            return
          } else {
            this.dataOne = [0]
          }
        }
      })
    },
    remove(targetKey, action) {
      var keyArr = targetKey.split('@')
      var photoId = this.materialInfo.materialList[keyArr[1]].photoArr[keyArr[0]].photoId.photoId

      this.materialInfo.materialList[keyArr[1]].photoArr.splice(keyArr[0], 1)
      var lastIndex

      this.materialInfo.materialList[keyArr[1]].photoArr.forEach((pane, i) => {
        console.log(i, keyArr[0])
        if (i == +keyArr[0]) {
          lastIndex = i - 1
        }
      })
      if (this.materialInfo.materialList[keyArr[1]].photoArr.length > 0) {
        if (lastIndex >= 0) {
          this.materialInfo.materialList[keyArr[1]].active = lastIndex + '@' + keyArr[1]
        } else {
          this.materialInfo.materialList[keyArr[1]].active = '0@' + keyArr[1]
        }
      } else {
        this.materialInfo.materialList.splice(keyArr[1], 1)
        if (this.materialInfo.materialList.length == 0) {
        } else {
          this.materialInfo.materialList[keyArr[1]].active = '0@0'
        }
      }

      if (this.allPhotoIdArr.indexOf(photoId) > -1) {
      } else {
        for (let i = 0; i < this.checkVideoAll.length; i++) {
          if (this.checkVideoAll[i].length > 0) {
            for (let j = 0; j < this.checkVideoAll[i].length; j++) {
              if (this.checkVideoAll[i][j] == photoId) {
                this.checkVideoAll[i].splice(j, 1)
              }
            }
          }
        }
        for (let i = 0; i < this.checkVideoWai.length; i++) {
          if (this.checkVideoWai[i].length > 0) {
            for (let j = 0; j < this.checkVideoWai[i].length; j++) {
              if (this.checkVideoWai[i][j] == photoId) {
                this.checkVideoWai[i].splice(j, 1)
              }
            }
          }
        }
      }
    },

    handleOkVideo() {
      this.$refs.materialForm.validate((valid) => {
        if (valid) {
          this.materialVisible = false
          this.videoMaterialShow = true
          this.checkMatchingMethod()
        } else {
          this.$message.error('广告语匹配方式为自定义时，有未填写的广告语，请检查')
          return
        }
      })
    },
    checkMatchingMethod() {
      if (this.materialInfo.matchingMethod == 2) {
        if (this.descriptionList.length > this.materialCount) {
          this.$message.error('当前广告语匹配方式最多能填' + this.materialCount + '个广告语')
          return
        }
      } else {
        if (this.descriptionList.length > this.materialInfo.materialList.length) {
          this.$message.error('当前广告语匹配方式最多能填' + this.materialInfo.materialList.length + '个广告语')
          return
        }
      }
    },
    cancelVideo() {
      // this.materialInfo.isMakeCover = 2
      // this.materialInfo.coverNumber = 1
      // this.materialInfo.matchingMethod = 1
      // this.materialInfo.groupCreativity = 2
      // this.materialInfo.creativityNumber = 1
      // this.materialInfo.materialList = []
      this.materialVisible = false
      // this.materialInfo.materialList = []
    },
    removeVideoMaterial(index, indexMaterial) {
      var photoId = this.materialInfo.materialList[index].photoArr[indexMaterial].photoId.photoId
      this.materialInfo.materialList[index].photoArr.splice(indexMaterial, 1)
      if (this.allPhotoIdArr.indexOf(photoId) > -1) {
      } else {
        for (let i = 0; i < this.checkVideoAll.length; i++) {
          if (this.checkVideoAll[i].length > 0) {
            for (let j = 0; j < this.checkVideoAll[i].length; j++) {
              if (this.checkVideoAll[i][j] == photoId) {
                this.checkVideoAll[i].splice(j, 1)
              }
            }
          }
        }
        for (let i = 0; i < this.checkVideoWai.length; i++) {
          if (this.checkVideoWai[i].length > 0) {
            for (let j = 0; j < this.checkVideoWai[i].length; j++) {
              if (this.checkVideoWai[i][j] == photoId) {
                this.checkVideoWai[i].splice(j, 1)
              }
            }
          }
        }
      }
      // this.materialList[index].photoArr.splice(indexMaterial, 1)
    },
    cancel() {},

    //选择素材相关
    handleOkShow() {
      if (this.sumContent > Math.floor(200 / this.materialInfo.coverNumber)) {
        this.$message.error('根据设置封面数量计算,已选择视频超过创意上限,请勾除！！！')
        return
      }
      var dataAll = tqFun(this.checkVideoAll).concat(tqFun(this.checkVideoWai))
      this.checkVideo = dataAll

      var arrPhotoId = []
      var count = this.materialInfo.groupCreativity == 2 ? 15 : this.materialInfo.creativityNumber
      for (let i = 0; i < this.materialInfo.coverNumber; i++) {
        var data = this.checkVideo
        arrPhotoId = arrPhotoId.concat(data)
      }
      arrPhotoId.sort()
      var arr = []
      for (let i = 0; i < arrPhotoId.length; i++) {
        arr.push({
          photoId: arrPhotoId[i],
          image: {},
          creativeName: '创意组' + `${Math.ceil((i + 1) / count)}` + '-创意',
          description: '',
        })
      }
      // +
      //       `${i > count ? (i % count == 0 ? count : i % count) : i + 1}`,
      var spArray = function (n, arr) {
        var newArr = [],
          i
        for (i = 0; i < arr.length; ) {
          newArr.push(arr.slice(i, (i += n)))
        }
        return newArr
      }
      var arrAll = spArray(count, arr)

      var dataCount = Math.ceil((this.materialInfo.coverNumber * this.checkVideo.length) / count)

      this.materialInfo.materialList = []
      this.materialList = []
      for (let i = 0; i < dataCount; i++) {
        var dataArr = arrAll[i]
        this.materialInfo.materialList.push({
          name: '创意组' + (i + 1),
          photoArr: dataArr,
          active: 0 + '@' + i,
        })
        this.materialList.push({
          name: '创意组' + (i + 1),
          photoArr: dataArr,
          active: 0 + '@' + i,
        })
      }

      for (let i = 0; i < this.materialInfo.materialList.length; i++) {
        for (let j = 0; j < this.materialInfo.materialList[i].photoArr.length; j++) {
          this.setVideUrl(this.materialInfo.materialList[i].photoArr[j].photoId).then((res) => {
            this.materialInfo.materialList[i].photoArr[j].photoId = res
            this.materialList[i].photoArr[j].photoId = res
          })
          if (this.materialInfo.isMakeCover == 2) {
            this.getImageCover(this.materialInfo.materialList[i].photoArr[j].photoId).then((res) => {
              setTimeout(() => {
                if (res.length > 0) {
                  this.materialInfo.materialList[i].photoArr[j].image =
                    res[i % 2 == 0 ? j % this.materialInfo.coverNumber : 7 - (j % this.materialInfo.coverNumber)]
                  this.materialList[i].photoArr[j].image =
                    res[i % 2 == 0 ? j % this.materialInfo.coverNumber : 7 - (j % this.materialInfo.coverNumber)]
                }

                this.checkMatemalVisible = false
              }, 100)
            })
          } else {
            this.checkMatemalVisible = false
          }
        }
      }
    },
    setVideUrl(photoId) {
      this.videoList = []
      return new Promise((resolve, reject) => {
        this.getAction('/batch/kuaiShouGroupTemplate/getUrlByPhotoId', { photoId: photoId }).then((res) => {
          if (res.success) {
            resolve({ ...res.result, photoId: photoId })
          }
        })
      })
      // this.getAction('/batch/kuaiShouGroupTemplate/getUrlByPhotoId', { photoId: photoId }).then((res) => {
      //   if (res.success) {
      //     this.videoList.push({ url: res.result.url, photoId: photoId, coverUrl: res.result.coverUrl })
      //     return res.result.url
      //   } else {
      //   }
      // })
    },
    getImageCover(photoId) {
      var params = {
        photoId: photoId,
        pageSize: 20,
        pageNo: 1,
      }
      return new Promise((resolve, reject) => {
        this.getAction('/cutFrame/material/queryByPhotoId', params).then((res) => {
          if (res.success) {
            resolve(res.result)
          }
        })
      })
    },
    cancelAll() {},
    callback(key) {
      this.channelType = key
      this.checkVideo = []
      // this.allPhotoIdArr
      this.ipagination.current = 1
      this.time = []
      if (key == 0 && this.checkVideoAll.length > 0) {
        this.checkVideo = this.checkVideoAll[this.ipagination.current - 1]
      } else if (key == 1 && this.checkVideoWai.length > 0) {
        this.checkVideo = this.checkVideoWai[this.ipagination.current - 1]
      }
    },
    selectAllVideo() {
      this.checkVideo = this.dataSource.map((item) => {
        return item.photoId
      })
      // console.log(this.checkVideo)
      if (this.activeTwo == 0) {
        for (let i = 0; i < this.ipagination.current; i++) {
          this.checkVideoAll.push([])
        }
        this.checkVideoAll[this.ipagination.current - 1] = this.checkVideo
      } else if (this.activeTwo == 1) {
        for (let i = 0; i < this.ipagination.current; i++) {
          this.checkVideoWai.push([])
        }
        this.checkVideoWai[this.ipagination.current - 1] = this.checkVideo
      }
      var sum = 0
      for (let i = 0; i < this.checkVideoAll.length; i++) {
        sum += this.checkVideoAll[i].length
      }
      for (let i = 0; i < this.checkVideoWai.length; i++) {
        sum += this.checkVideoWai[i].length
      }
      this.sumContent = sum

      var dataCount = Math.floor(200 / this.materialInfo.coverNumber)
      if (sum > dataCount) {
        this.$message.error('最多选择' + dataCount + '个素材')
        this.checkVideo = []
        this.sumContent = this.sumContent - this.dataSource.length

        if (this.activeTwo == 0) {
          this.checkVideoAll[this.ipagination.current - 1] = this.checkVideo
        } else if (this.activeTwo == 1) {
          this.checkVideoWai[this.ipagination.current - 1] = this.checkVideo
        }
      }
    },
    setVideoData(data) {
      if (this.activeTwo == 0) {
        for (let i = 0; i < this.ipagination.current; i++) {
          this.checkVideoAll.push([])
        }
        this.checkVideoAll[this.ipagination.current - 1] = data
      } else if (this.activeTwo == 1) {
        for (let i = 0; i < this.ipagination.current; i++) {
          this.checkVideoWai.push([])
        }
        this.checkVideoWai[this.ipagination.current - 1] = data
      }

      var sum = 0
      for (let i = 0; i < this.checkVideoAll.length; i++) {
        sum += this.checkVideoAll[i].length
      }
      for (let i = 0; i < this.checkVideoWai.length; i++) {
        sum += this.checkVideoWai[i].length
      }
      this.sumContent = sum
      var dataCount = Math.floor(200 / this.materialInfo.coverNumber)
      if (sum > dataCount) {
        this.$message.error('最多选择' + dataCount + '个素材')
        this.checkVideo.pop()
        this.sumContent--
        if (this.activeTwo == 0) {
          this.checkVideoAll[this.ipagination.current - 1] = this.checkVideo
        } else if (this.activeTwo == 1) {
          this.checkVideoWai[this.ipagination.current - 1] = this.checkVideo
        }
      }
    },
    tongbu() {
      this.tongbuLoading = true
      this.getAction('/kuaishou/batch/syncVideo', {
        accountId: this.accountId,
      }).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.tongbuLoading = false
          var params = {}
          params.accountId = this.accountId
          params.materialType = 1
          params.pageSize = this.ipagination.pageSize
          params.pageNo = 1
          params.status = 0
          params.channelType = this.channelType
          params.orderBy = 'time'
          if (this.time.length > 0) {
            // params.startDate = moment(this.time[0]).format('YYYY-MM-DD')
            // params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
            params.startDate = moment(this.time[0]).format('YYYY-MM-DD') + ' 00:00:00'
            params.endDate = moment(this.time[1]).format('YYYY-MM-DD') + ' 23:59:59'
          }
          this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
        } else {
          this.$message.error(res.message)
          this.tongbuLoading = false
        }
      })
    },
    getDataSource(page, pageSize) {
      if (this.activeTwo == 0) {
        this.checkVideo = this.checkVideoAll[page - 1]
      } else if (this.activeTwo == 1) {
        this.checkVideo = this.checkVideoWai[page - 1]
      }
      this.ipagination.current = page
      var params = {}
      params.accountId = this.accountId
      params.materialType = '1'
      params.pageSize = this.ipagination.pageSize
      params.pageNo = page
      params.channelType = this.channelType
      params.status = 0
      params.orderBy = 'time'
      if (this.time.length > 0) {
        // params.startDate = moment(this.time[0]).format('YYYY-MM-DD')
        // params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
        params.startDate = moment(this.time[0]).format('YYYY-MM-DD') + ' 00:00:00'
        params.endDate = moment(this.time[1]).format('YYYY-MM-DD') + ' 23:59:59'
      }
      this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
    },
    showVideoList(url, params) {
      this.dataSource = []
      this.loadingVideoList = true
      this.getAction(url, params).then((res) => {
        // console.log(res)
        this.loadingVideoList = false
        if (res.success) {
          this.dataSource = res.result.list
          this.ipagination.total = res.result.total
        }
      })
    },
    removeTarget(templateId) {
      var index = this.checkDirectionalList.findIndex((item) => item.templateId == templateId)
      var indexTwo = this.selectionRows.findIndex((item) => item.templateId == templateId)
      var indexThree = this.selectionRows.findIndex((item) => item.templateId == templateId)
      this.checkDirectionalList.splice(index, 1)
      // this.selectionRows.splice(indexTwo, 1)
      this.selectedRowKeys.splice(indexThree, 1)
    },
    directionalOk() {
      if (this.selectionRows.length > 20) {
        this.$message.error('最多选择20个定向包')
        return
      } else if (this.selectionRows.length == 0) {
        this.$message.error('请选择定向包')
        return
      }
      this.checkDirectionalList = this.selectionRows
      this.directionalVisible = false
      // this.selectedRowKeys = []
      // this.selectionRows = []
    },
    directionalCancel() {
      this.directionalVisible = false
      if (this.checkDirectionalList.length > 0) {
      } else {
        this.selectedRowKeys = []
      }
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectionRows = selectionRows
    },
    getTemplateList() {
      this.loading = true
      this.templateList = []
      var params = {}
      params.accountId = this.accountId
      if (this.getData('campaignType', 'form') == 2) {
        params.platformOs = this.getData('systemType', 'form') == 'Android' ? 1 : 2
      }

      this.getAction('/batch/kuaishouTemplate/list', params).then((res) => {
        this.loading = false
        if (res.success) {
          this.templateList = res.result
          this.templateListAll = JSON.parse(JSON.stringify(this.templateList))
        } else {
          this.templateList = []
        }
      })
    },

    changeTag(visible) {
      this.videoVisibleChange = visible
      this.templateData = {}
      var params = {}
      params.templateId = visible
      this.getAction('/batch/kuaishouTemplateTarget/getDetailByTemplateId', params).then((res) => {
        if (res.success) {
          var dataJson = {
            ...res.result.base,
            ...res.result.detail,
          }

          this.getPeople().then((item) => {
            this.templateData = dataJson
            if (dataJson.region == '' || dataJson.region == null) {
            } else {
              this.showRegion(dataJson.region)
            }
            this.previewVisible = true
          })
        }
      })
    },
    showPeopleName(id) {
      return this.populationList.filter((item) => item.orientationId == id)[0].orientationName
    },
    showRegion(data) {
      return new Promise((resolve, reject) => {
        this.postDataAction('/kuaishou/batch/getRegionDetail', {
          regionArr: data,
        }).then((res) => {
          if (res.success) {
            //   this.populationData.allForm.region = res.result
            this.region = res.result.map((item) => {
              return item.label
            })
          }
        })
      })
    },
    getPeople() {
      return new Promise((resolve, reject) => {
        this.getAction('/kuaishou/batch/getPopulationList', { accountId: this.accountId }).then((res) => {
          if (res.success) {
            if (res.result) {
              this.populationList = res.result.map((item, index) => {
                return {
                  ...item,
                  key: index,
                }
              })
              resolve(res.result)
            }
          }
        })
      })
    },
    setData(value) {
      // console.log(value)
      this.creativeInfo.creativeTag.push(...value)
      this.creativeInfo.creativeTag = [...new Set(this.creativeInfo.creativeTag)]
      for (let i = 0; i < this.creativeInfo.creativeTag.length; i++) {
        if (this.creativeInfo.creativeTag[i].length > 10) {
          this.creativeInfo.creativeTag.splice(i, 1)
          this.$message.error('创意标签最多只能十个字符，超过的已清除')
        }
      }
      this.creativeTag = []
    },
    handleClose(removedTag) {
      const tags = this.creativeInfo.creativeTag.filter((tag) => tag !== removedTag)
      // console.log(tags)
      this.creativeInfo.creativeTag = tags
      this.$refs.createForm.validateField('creativeTag')
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    filter(inputValue, path) {
      return path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
    },
    checkAccountId() {
      if (this.accountId == undefined || this.accountId == '' || this.accountId == null) {
        this.$message.warning('请先选择广告投放账号')
        return false
      } else {
        return true
      }
    },
    //rules
    handleConfirmValue(rule, value, callback) {
      if (value == '' || value < 500 || value >= 100000000) {
        callback('不小于500， 不超过100000000，仅支持输入自然数')
      }
      callback()
    },
    creativeMany(rule, value, callback) {
      if (value.length > 10) {
        callback('标签最多十个，每个标签不超过10个字')
      }
      callback()
    },
    stickerCheck(rule, value, callback) {
      if (this.creativeInfo.overlayType.length > 0 && value == '') {
        callback('封面广告语标题必填')
      } else if (value.length > 14) {
        callback('封面广告语标题最多为14个字符')
      }
      callback()
    },
    cpaBidValue(rule, value, callback) {
      if (this.unitInfo.ocpxActionType == 53) {
        if (value == '' || value == null) {
          callback('请输入转化目标出价')
        } else if (value < 5 || value > 3000) {
          callback('转化目标为表单数,出价不能低于5元，不能高于3000元，请正确输入')
        } else {
          callback()
        }
      } else {
        if (value == '' || value == null) {
          callback('请输入转化目标出价')
        } else if (value < 1 || value > 3000) {
          callback('转化目标出价不能低于1元，不能高于3000元，请正确输入')
        } else {
          callback()
        }
      }
    },
    bidValue(rule, value, callback) {
      if (value == '' || value == null) {
        callback('请输入出价')
      } else if (value < 0.2 || value > 100) {
        callback('不得低于0.2元，不得高于100元，不得高于组预算')
      } else {
        callback()
      }
    },
    maxValue(rule, value, callback) {
      if (value == '' || value == null) {
        callback('请输入最高出价')
      } else if (this.unitInfo.bidMin && value < this.unitInfo.bidMin) {
        callback('最高出价不能小于最低出价')
      } else {
        callback()
      }
    },
    minValue(rule, value, callback) {
      if (value == '' || value == null) {
        callback('请输入最低出价')
      } else if (this.unitInfo.bidMax && value > this.unitInfo.bidMax) {
        callback('最低出价不能大于最高出价')
      } else {
        callback()
      }
    },
    changeBidMin() {
      if (this.unitInfo.bidMax != '' && this.unitInfo.bidMax != null) {
        this.$refs.ruleForm.validateField('bidMax')
      }
    },
    changeBidMax() {
      if (this.unitInfo.bidMin != '' && this.unitInfo.bidMin != null) {
        this.$refs.ruleForm.validateField('bidMin')
      }
    },
    clearAllData() {
      this.videoMaterialShow = false
      this.materialList = []
      this.checkVideoAll = []
      this.checkVideoWai = []
      this.checkVideo = []
      this.descriptionList = []

      this.materialInfo.isMakeCover = 2
      this.materialInfo.coverNumber = 1
      this.materialInfo.groupCreativity = 2
      this.materialInfo.creativityNumber = 1
      this.materialInfo.matchingMethod = 2
      this.materialInfo.materialList = []

      this.checkDirectionalList = []
      this.selectionRows = []
      this.selectedRowKeys = []

      this.appList.appAllocation = 1
      this.appList.appArr = []
      this.appList.urlArr = [{ value: '' }]
      this.appList.linkAllocation = 1
      this.appList.clickUrlList = [{ value: '' }]
      this.appList.clickUrlActionList = [{ value: '' }]
      this.targetKeys = []
    },
    getCampaignList(accountId) {
      this.getAction('/kuaishou/batch/getCampaignList', {
        accountId: accountId,
        pageSize: 2000,
        pageNo: 1,
        campaignType: this.getData('campaignType', 'form'),
      }).then((res) => {
        if (res.success) {
          this.campaignList = res.result.records
        }
      })
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          var params = {}
          params.batchId = new Date().getTime()
          if (this.getData('newClick', 'form') == '2') {
            params.campaignJson = {
              accountId: this.accountId,
              campaignId: this.campaignId,
              systemType: this.getData('systemType', 'form'),
              campaignType: this.getData('campaignType', 'form'),
            }
          } else {
            if (this.campaignData.campaignName) {
              params.campaignJson = {
                ...this.campaignData,
                accountId: this.accountId,
                systemType: this.getData('systemType', 'form'),
                campaignType: this.getData('campaignType', 'form'),
                dayBudget: this.campaignData.dayBudget ? this.campaignData.dayBudget * 1000 : null,
                timeStart: this.campaignData.timeStart
                  ? moment(this.campaignData.timeStart).format('YYYY-MM-DD hh:mm:ss')
                  : null,
              }
            } else {
              this.$message.error('请填写规则的内容')
              this.sumbitLoading = false
              return
            }
          }

          if (this.unitInfo.unitName) {
            var str = ''
            for (let i = 0; i < 7 * 24; i++) {
              str += '0'
            }
            params.unitJson = {
              ...this.unitInfo,
              unitType: 4,
              accountId: this.accountId,
              sceneId: this.allianceAccount == '1' ? JSON.stringify(this.unitInfo.sceneId) : JSON.stringify([5]),
              dayBudget: this.dayBudgetType == '1' ? 0 : this.unitInfo.dayBudget * 1000,
              beginTime: moment(this.unitInfo.timeRange[0]).format('YYYY-MM-DD'),
              endTime: this.unitTime == '2' ? moment(this.unitInfo.timeRange[1]).format('YYYY-MM-DD') : null,
              scheduleTime: this.scheduleTime == '2' ? this.unitInfo.scheduleTime : str,
              useAppMarket: this.unitInfo.useAppMarket ? 1 : 0,
              appStore: this.unitInfo.useAppMarket ? JSON.stringify(this.unitInfo.appStore) : null,
              cpaBid: this.unitInfo.cpaBid ? this.unitInfo.cpaBid * 1000 : null,
              bid: this.unitInfo.bid ? this.unitInfo.bid * 1000 : null,
              bidMax: this.unitInfo.bidMax ? this.unitInfo.bidMax * 1000 : null,
              bidMin: this.unitInfo.bidMin ? this.unitInfo.bidMin * 1000 : null,
              deepConversionBid: this.unitInfo.deepConversionBid ? this.unitInfo.deepConversionBid * 1000 : null,
            }
          } else {
            this.$message.error('请填写组内容')
            this.sumbitLoading = false
            return
          }

          if (this.checkDirectionalList.length > 0) {
            params.targetIds = JSON.stringify(
              this.checkDirectionalList.map((item) => {
                return item.templateId
              })
            )
            params.checkDirectionalList = JSON.stringify(this.checkDirectionalList)
          } else {
            this.$message.error('请选择定向包')
            this.sumbitLoading = false
            return
          }

          params.creativeJson = {
            ...this.creativeInfo,
            accountId: this.accountId,
            overlayType: this.creativeInfo.overlayType.length > 0 ? this.creativeInfo.overlayType[0] : null,
            creativeCategory: this.creativeCategorySwitch
              ? this.creativeInfo.creativeCategory[this.creativeInfo.creativeCategory.length - 1]
              : null,
            creativeTag: this.creativeCategorySwitch ? JSON.stringify(this.creativeInfo.creativeTag) : [],
            actionBarText: this.creativeInfo.actionBarText,
            stickerTitle: this.creativeInfo.overlayType.length > 0 ? this.creativeInfo.stickerTitle : null,
          }

          if (this.materialList.length > 0) {
            if (this.materialInfo.matchingMethod != 1 && this.descriptionList.length == 0) {
              this.$message.error('请填写广告语')
              this.sumbitLoading = false
              return
            }
            this.checkMatchingMethod()
            params.materialArray = {
              materialInfo: { ...this.materialInfo },
              materialList: this.materialList.map((item) => {
                return {
                  ...item,
                  photoArr: item.photoArr.map((t) => {
                    return { ...t, photoId: t.photoId.photoId }
                  }),
                }
              }),
              descriptionList:
                this.materialInfo.matchingMethod != 1
                  ? this.descriptionList.map((item) => {
                      return item.value
                    })
                  : null,
            }
          } else {
            this.$message.error('请选择素材')
            this.sumbitLoading = false
            return
          }

          var dataArr = this.getAllData()
          if (this.getData('campaignType', 'form') == 2) {
            if (dataArr.length > 0) {
              params.appList = {
                checkType: this.getData('campaignType', 'form') == 2 ? 'app' : 'url',
                appAllocation: this.appList.appAllocation, //1按账户，2按广告计划，3按广告组
                appArr: dataArr.map((item) => {
                  return { appId: item.key, siteId: item.siteId ? +item.siteId : null }
                }),
                urlArr: null,
                linkAllocation: this.appList.linkAllocation,
                clickUrlList: this.appList.clickUrlList.map((item) => {
                  return item.value
                }),
                clickUrlActionList: this.actionbarClickUrlSwitch
                  ? this.appList.clickUrlActionList.map((item) => {
                      return item.value
                    })
                  : [],
              }
            } else {
              this.$message.error('请选择应用')
              this.sumbitLoading = false
              return
            }
          } else {
            params.appList = {
              checkType: this.getData('campaignType', 'form') == 2 ? 'app' : 'url',
              appAllocation: this.appList.appAllocation, //1按账户，2按广告计划，3按广告组
              appArr: null,
              urlArr:
                this.getData('campaignType', 'form') == 2
                  ? null
                  : this.appList.urlArr.map((item) => {
                      return item.value
                    }),
              linkAllocation: this.appList.linkAllocation,
              clickUrlList: this.appList.clickUrlList.map((item) => {
                return item.value
              }),
              clickUrlActionList: this.actionbarClickUrlSwitch
                ? this.appList.clickUrlActionList.map((item) => {
                    return item.value
                  })
                : [],
            }
          }
          this.sumbitLoading = true
          this.postDataAction('/kuaishouBatch/campaignPreview/addPreviewData', params).then((res) => {
            if (res.success) {
              this.sumbitLoading = false
              // window.close()
              localStorage.setItem('lookPreview', JSON.stringify(params))
              window.open('/user/lookPreview?accountId=' + this.accountId + '&batchId=' + params.batchId, '_self')
            }
          })
        }
      })
    },
    systemChange(e) {
      if (
        this.checkDirectionalList.length > 0 ||
        this.materialCount > 0 ||
        this.appList.urlArr[0].value != '' ||
        this.targetKeys.length > 0
      ) {
        setTimeout(() => {
          //
          if (e.target.value == 'iOS') {
            this.form.setFieldsValue({ systemType: 'Android' })
          } else {
            this.form.setFieldsValue({ systemType: 'iOS' })
          }
        })
        var that = this
        this.$confirm({
          title: '警告',
          content: '切换推广平台会清空定向包、素材、以及选择的应用及链接,是否继续?',
          okText: '确认',
          cancelText: '取消',
          onOk: function () {
            setTimeout(() => {
              if (e.target.value == 'iOS') {
                that.form.setFieldsValue({ systemType: 'iOS' })
              } else {
                that.form.setFieldsValue({ systemType: 'Android' })
              }
            })
            that.clearAllData()
          },
        })
      }

      // if()
    },
    typeChange(e) {
      this.campaignList = []
      if (
        this.checkDirectionalList.length > 0 ||
        this.materialCount > 0 ||
        this.appList.urlArr[0].value != '' ||
        this.targetKeys.length > 0
      ) {
        setTimeout(() => {
          //
          if (e.target.value == 2) {
            this.form.setFieldsValue({ campaignType: 5 })
          } else {
            this.form.setFieldsValue({ campaignType: 2 })
          }
        })
        var that = this
        this.$confirm({
          title: '警告',
          content: '切换营销策略会清空定向包、素材、以及选择的应用及链接,是否继续?',
          okText: '确认',
          cancelText: '取消',
          onOk: function () {
            setTimeout(() => {
              if (e.target.value == 2) {
                that.form.setFieldsValue({ campaignType: 2 })
              } else {
                that.form.setFieldsValue({ campaignType: 5 })
              }
              that.getCampaignList(that.accountId)
              that.campaignId = ''
            })
            that.clearAllData()
          },
        })
      } else {
        setTimeout(() => {
          this.form.setFieldsValue({ campaignType: e.target.value })
          this.getCampaignList(this.accountId)
          this.campaignId = ''
        })
      }

      // if()
    },
    onChange(link) {
      // console.log('Anchor:OnChange', link)
    },

    showDrawer() {
      if (this.checkAccountId()) {
        this.visible = true
        this.getAction('/kuaishou/batch/getIsActivate', {
          accountId: this.accountId,
        }).then((res) => {
          if (res.success) {
            this.groupTypeData = res.result
          }
        })
        if (this.groupTemplateId) {
        } else {
          this.$nextTick(() => {
            // this.closeUnit('ruleForm')
            this.$refs.ruleForm.resetFields()
            this.allianceAccount = '1'
            this.dayBudgetType = '1'
            this.unitTime = '1'
            this.scheduleTime = '1'
            this.unitInfo.sceneId = [1]
            this.unitInfo.useAppMarket = false
            this.unitInfo.appStore = []
            this.unitInfo.dayBudget = null
            this.unitInfo.speed = '1'
            this.unitInfo.timeRange = [moment().startOf('day'), moment().add(1, 'months')]
            this.unitInfo.scheduleTime = ''
            this.unitInfo.showMode = '2'
            this.unitInfo.bidType = 10
            this.unitInfo.ocpxActionType = 2
            this.unitInfo.deepConversionType = null
            this.unitInfo.templateBidType = 1
            this.unitInfo.cpaBid = null
            this.unitInfo.bid = null
            this.unitInfo.deepConversionBid = null
            this.unitInfo.bidMax = null
            this.unitInfo.bidMin = null
            this.unitInfo.unitName = ''
          })
        }
      }
    },
    showImgUrl(id) {
      var data = this.stickerStyles.filter((item) => item.id == id)[0]
      if (data && data.url) {
        return data.url
      }
    },
    showDrawerCreate() {
      if (this.checkAccountId()) {
        this.creativeVisible = true
        if (this.createTiveTemplateId) {
        } else {
          this.$nextTick(() => {
            this.$refs.createForm.resetFields()
            this.creativeInfo.unitType = 4
            this.creativeInfo.overlayType = []
            this.creativeInfo.creativeCategory = []
            this.creativeInfo.creativeTag = []
            this.creativeInfo.stickerTitle = ''
            this.creativeInfo.actionBarText = ''
            this.creativeInfo.keep = false
          })
        }

        this.getAction('/kuaishou/batch/getCreativeWordStyles', {
          accountId: this.accountId,
        }).then((res) => {
          this.stickerStyles = []
          if (res.success) {
            if (res.result) {
              var data = res.result.map((item) => {
                return item.sticker_styles
              })
              data.map((item) => {
                item.map((i) => {
                  this.stickerStyles.push({
                    id: i.overlay_type,
                    url: i.overlay_preview_url,
                  })
                })
              })
            } else {
              this.stickerStyles = []
            }
          } else {
            this.stickerStyles = []
          }
        })

        this.getAction('/kuaishou/batch/getActionBarTextByType', {
          type: this.getData('campaignType', 'form'),
        }).then((res) => {
          if (res.success) {
            this.actionBarTextList = res.result
          }
        })

        this.getAction('/kuaishou/batch/getCreativeCategory', {
          accountId: this.accountId,
        }).then((res) => {
          if (res.success) {
            this.createOptions = res.result
          }
        })
      }
    },
    closeUnit(form) {
      // console.log(form)
      // this.$nextTick(() => {
      //   this.$refs[form].resetFields()
      // })

      if (form == 'ruleForm') {
        this.visible = false
        this.allianceAccount = '1'
        this.dayBudgetType = '1'
        this.unitTime = '1'
        this.scheduleTime = '1'
      } else if (form == 'createForm') {
        this.creativeVisible = false
      }
    },
    onClose() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // console.log(this.unitInfo)

          var str = ''
          for (let i = 0; i < 7 * 24; i++) {
            str += '0'
          }
          var params = { ...this.unitInfo }
          params.id = this.groupTemplateId ? (this.groupTemplateId == 'edit' ? null : this.groupTemplateId) : null
          params.unitType = 4
          params.accountId = this.accountId
          params.sceneId = this.allianceAccount == '1' ? JSON.stringify(this.unitInfo.sceneId) : JSON.stringify([5])
          params.dayBudget = this.dayBudgetType == '1' ? 0 : this.unitInfo.dayBudget * 1000
          params.beginTime = moment(this.unitInfo.timeRange[0]).format('YYYY-MM-DD')
          params.endTime = this.unitTime == '2' ? moment(this.unitInfo.timeRange[1]).format('YYYY-MM-DD') : null
          params.scheduleTime = this.scheduleTime == '2' ? this.unitInfo.scheduleTime : str
          params.useAppMarket = this.unitInfo.useAppMarket ? 1 : 0
          params.appStore = this.unitInfo.useAppMarket ? JSON.stringify(this.unitInfo.appStore) : null

          params.cpaBid = this.unitInfo.cpaBid ? this.unitInfo.cpaBid * 1000 : 0
          params.bid = this.unitInfo.bid ? this.unitInfo.bid * 1000 : 0
          params.bidMax = this.unitInfo.bidMax ? this.unitInfo.bidMax * 1000 : 0
          params.bidMin = this.unitInfo.bidMin ? this.unitInfo.bidMin * 1000 : 0
          params.deepConversionBid = this.unitInfo.deepConversionBid ? this.unitInfo.deepConversionBid * 1000 : 0
          //      allianceAccount: '1',
          // dayBudgetType: '1',
          // unitTime: '1',
          // scheduleTime: '1',

          if (this.keep) {
            this.postDataAction('/template/kuaiShouBatchGroupTemplate/saveOrUpdate', params).then((res) => {
              this.visible = false
              if (res.success) {
                this.groupTemplateId = res.result ? res.result : 'edit'
                this.$message.success(res.message)
                this.keep = false
              } else {
                this.$message.error(res.message)
              }
            })
          } else {
            if (this.groupTemplateId) {
            } else {
              this.groupTemplateId = 'edit'
            }

            this.visible = false
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    submitCreative() {
      this.$refs.createForm.validate((valid) => {
        if (valid) {
          var params = { ...this.creativeInfo }
          params.id = this.createTiveTemplateId
            ? this.createTiveTemplateId == 'edit'
              ? null
              : this.createTiveTemplateId
            : null
          params.accountId = this.accountId
          params.overlayType = this.creativeInfo.overlayType.length > 0 ? this.creativeInfo.overlayType[0] : null
          params.creativeCategory = this.creativeCategorySwitch
            ? this.creativeInfo.creativeCategory[this.creativeInfo.creativeCategory.length - 1]
            : null
          params.creativeTag = this.creativeCategorySwitch ? JSON.stringify(this.creativeInfo.creativeTag) : []
          params.actionBarText = this.creativeInfo.actionBarText
          params.stickerTitle = this.creativeInfo.overlayType.length > 0 ? this.creativeInfo.stickerTitle : null

          //      allianceAccount: '1',
          // dayBudgetType: '1',
          // unitTime: '1',
          // scheduleTime: '1',
          if (this.creativeInfo.keep) {
            this.creativeVisible = false
            this.postDataAction('/template/kuaiShouBatchCreativeTemplate/saveOrUpdate', params).then((res) => {
              if (res.success) {
                this.createTiveTemplateId = res.result ? res.result : 'edit'
                this.$message.success(res.message)
                this.creativeInfo.keep = false
              } else {
                this.$message.error(res.message)
              }
            })
          } else {
            if (this.createTiveTemplateId) {
            } else {
              this.createTiveTemplateId = 'edit'
            }

            this.creativeVisible = false
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    onChange(value, dateString) {
      console.log('Selected Time: ', value)
      console.log('Formatted Selected Time: ', dateString)
    },
    onOk(value) {
      console.log('onOk: ', value)
    },
    getCreativeTemplate(accountId) {
      this.getAction('/template/kuaiShouBatchCreativeTemplate/getCreativeTemplate', {
        accountId: accountId,
      }).then((res) => {
        if (res.success) {
          if (res.result) {
            var data = res.result
            //   params.id = this.createTiveTemplateId
            // params.accountId = this.accountId
            // params.overlayType = this.creativeInfo.overlayType.length > 0 ? this.creativeInfo.overlayType[0] : null
            // params.creativeCategory = this.creativeInfo.creativeCategory[this.creativeInfo.creativeCategory.length - 1]
            // params.creativeTag = JSON.stringify(this.creativeTag)
            // params.actionBarText = this.creativeInfo.actionBarText
            // params.stickerTitle = this.creativeInfo.overlayType.length > 0 ? this.creativeInfo.stickerTitle : null
            this.createTiveTemplateId = data.id
            this.creativeInfo.overlayType = data.overlayType ? [data.overlayType] : []
            this.creativeInfo.creativeCategory =
              data.creativeCategory > 10000
                ? [
                    parseInt(data.creativeCategory / 10000),
                    parseInt(data.creativeCategory / 100),
                    data.creativeCategory,
                  ]
                : data.creativeCategory > 100
                ? [parseInt(data.creativeCategory / 100), data.creativeCategory]
                : []
            this.creativeInfo.creativeTag = data.creativeTag ? JSON.parse(data.creativeTag) : []
            this.creativeInfo.actionBarText = data.actionBarText
            this.creativeInfo.stickerTitle = data.stickerTitle
            //      allianceAccount: '1',
            // dayBudgetType: '1',
            // unitTime: '1',
            // scheduleTime: '1',
          } else {
            this.createTiveTemplateId = null
            // this.closeUnit('createForm')
          }
        }
      })
    },
    getGroupTemplate(accountId) {
      this.getAction('/template/kuaiShouBatchGroupTemplate/getGroupTemplate', {
        accountId: accountId,
      }).then((res) => {
        if (res.success) {
          if (res.result) {
            var str = ''
            for (let i = 0; i < 7 * 24; i++) {
              str += '0'
            }
            var data = res.result
            this.groupTemplateId = data.id
            this.unitInfo.useAppMarket = data.useAppMarket == 1 ? true : false
            this.unitInfo.appStore = data.appStore ? JSON.parse(data.appStore) : []
            this.dayBudgetType = data.dayBudget && data.dayBudget > 0 ? '2' : '1'
            this.unitInfo.dayBudget = data.dayBudget && data.dayBudget > 0 ? data.dayBudget / 1000 : null
            this.unitInfo.speed = data.speed + ''
            this.unitTime = data.endTime && data.endTime != '' ? '2' : '1'
            this.unitInfo.timeRange =
              data.endTime && data.endTime != ''
                ? [moment().startOf('day'), moment().add(1, 'months')]
                : [moment().startOf('day'), moment().add(1, 'months')]
            this.scheduleTime = data.scheduleTime == null || data.scheduleTime == str ? '1' : '2'
            this.unitInfo.scheduleTime = data.scheduleTime == null || data.scheduleTime == str ? str : data.scheduleTime
            this.unitInfo.showMode = data.showMode + ''
            this.unitInfo.sceneId = JSON.parse(data.sceneId)[0] == 5 ? [1] : JSON.parse(data.sceneId)
            this.allianceAccount = JSON.parse(data.sceneId)[0] == 5 ? '2' : '1'
            this.unitInfo.bidType = data.bidType
            this.unitInfo.ocpxActionType = data.ocpxActionType ? data.ocpxActionType : 2
            this.unitInfo.deepConversionType = data.deepConversionType
            this.unitInfo.templateBidType = data.templateBidType
            this.unitInfo.cpaBid = data.cpaBid && data.cpaBid > 0 ? data.cpaBid / 1000 : null
            this.unitInfo.bid = data.bid && data.bid > 0 ? data.bid / 1000 : null
            this.unitInfo.deepConversionBid =
              data.deepConversionBid && data.deepConversionBid > 0 ? data.deepConversionBid / 1000 : null
            this.unitInfo.bidMax = data.bidMax && data.bidMax > 0 ? data.bidMax / 1000 : null
            this.unitInfo.bidMin = data.bidMin && data.bidMin > 0 ? data.bidMin / 1000 : null
            this.unitInfo.unitName = data.unitName
          } else {
            this.groupTemplateId = null
            this.allianceAccount = '1'
            // this.closeUnit('ruleForm')
          }
        }
      })
    },
    getCampaignTemplate(accountId) {
      this.getAction('/template/kuaiShouBatchCampaignTemplate/getCampaignTemplate', {
        accountId: accountId,
      }).then((res) => {
        if (res.success) {
          if (res.result) {
            this.campaignTemplateId = res.result.id
            this.campaignData = res.result
            if (this.campaignData.timeStart != '') {
              this.campaignData.timeStart = moment(this.campaignData.timeStart)
            }
            if (this.campaignData.dayBudget > 0) {
              this.campaignData.budgetType = '2'
              this.campaignData.dayBudget = res.result.dayBudget / 1000
            } else {
              this.campaignData.budgetType = '1'
              this.campaignData.dayBudget = null
            }
            var that = this
            // setTimeout(() => {
            //   var mdl = Object.assign({}, that.campaignData)
            //   that.$nextTick(() => {
            //     that.form.setFieldsValue(pick(mdl, ['campaignType']))
            //   })
            // })
          } else {
            this.campaignTemplateId = null
            this.campaignData = {}
            // this.form.resetFields()
          }
        }
      })
    },
    ruleConfigFormOk(e) {
      this.ruleConfigForm.validateFields((err, values) => {
        if (!err) {
          // console.log('Received values of form: ', values)
          var params = { ...values }
          params.id = this.campaignTemplateId
            ? this.campaignTemplateId == 'edit'
              ? null
              : this.campaignTemplateId
            : null
          params.accountId = this.accountId
          params.systemType = this.getData('systemType', 'form')
          params.campaignType = this.getData('campaignType', 'form')
          params.dayBudget = values.dayBudget ? values.dayBudget * 1000 : 0
          params.timeStart = values.timeStart ? moment(values.timeStart).format('YYYY-MM-DD hh:mm:ss') : ''
          this.campaignData = { ...params, dayBudget: values.dayBudget }
          if (this.campaignKeep) {
            this.postDataAction('/template/kuaiShouBatchCampaignTemplate/saveOrUpdate', params).then((res) => {
              this.campaignTemplateId = res.result ? res.result : 'edit'
              this.ruleConfigFormCancel()
              this.ruleConfigForm.resetFields()
              this.campaignKeep = false
              if (res.success) {
                this.$message.success(res.message)
              } else {
                this.$message.error(res.message)
              }
            })
          } else {
            if (this.campaignTemplateId) {
            } else {
              this.campaignTemplateId = 'edit'
            }
          }
          this.ruleConfigVisible = false
        }
      })
    },
    ruleConfigShow() {
      if (this.checkAccountId()) {
        this.ruleConfigVisible = true
        var that = this
        if (that.campaignTemplateId) {
          setTimeout(() => {
            if (that.campaignData.campaignName) {
              var mdl = Object.assign({}, that.campaignData)
              that.ruleConfigForm.setFieldsValue({ keep: [] })
              that.$nextTick(() => {
                that.ruleConfigForm.setFieldsValue(
                  pick(mdl, [
                    'budgetType',
                    'campaignName',
                    'campaignStatus',
                    'groupRule',
                    'isTime',
                    'keep',
                    'unitStatus',
                  ])
                )

                setTimeout(() => {
                  if (that.campaignData.isTime == '1') {
                    that.ruleConfigForm.setFieldsValue(pick(mdl, 'timeStart'))
                  }
                  if (that.campaignData.budgetType == '2') {
                    that.ruleConfigForm.setFieldsValue(pick(mdl, 'dayBudget'))
                  }
                }, 100)
              })
            }
          })
        } else {
          this.$nextTick(() => {
            this.ruleConfigForm.resetFields()
            this.ruleConfigForm.setFieldsValue({ keep: [] })
            this.campaignData = {}
          })
        }
      }
    },
    ruleConfigFormCancel() {
      this.ruleConfigVisible = false
    },
    getChangeAll(type, form, field) {
      var node = document.getElementById(field)
      if (this.getData('groupRule', 'ruleConfigForm') == 2 && form == 'ruleConfigForm' && type == '定向包') {
        this.$message.error('只有按定向包分组时,才可拼接定向包')
        return
      }
      var v = '{{' + type + '}}-'
      if (document.selection) {
        //IE
        node.focus()
        var sel = document.selection.createRange()
        sel.text = v
        sel.select()
        if (field == 'campaignName') {
          this[form].setFieldsValue({ campaignName: sel.text })
        } else if (field == 'unitName') {
          this.unitInfo.unitName = sel.text
          this.$refs.ruleForm.validateField('unitName')
        }
      } else if (node.selectionStart || node.selectionStart == '0') {
        //MOZILLA/GOOGLE
        var startPos = node.selectionStart
        var endPos = node.selectionEnd
        var restoreTop = node.scrollTop
        node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
        if (restoreTop > 0) {
          node.scrollTop = restoreTop
        }
        if (field == 'campaignName') {
          this[form].setFieldsValue({ campaignName: node.value })
        } else if (field == 'unitName') {
          this.unitInfo.unitName = node.value
          this.$refs.ruleForm.validateField('unitName')
        }
        node.focus()
        node.selectionStart = startPos + v.length
        node.selectionEnd = startPos + v.length
        // this.campaignName = node.value
      } else {
        //OTHER
        node.value += v
        // console.log(node.value)
        if (field == 'campaignName') {
          this[form].setFieldsValue({ campaignName: node.value })
        } else if (field == 'unitName') {
          this.unitInfo.unitName = node.value
          this.$refs.ruleForm.validateField('unitName')
        }
        node.focus()
        // this.campaignName = node.value
      }
    },

    appStoreCheck(value) {
      // console.log(value.target.checked)
      if (value.target.checked) {
        this.unitInfo.appStore = ['huawei', 'oppo', 'vivo', 'xiaomi', 'meizu', 'smartisan']
      } else {
        this.unitInfo.appStore = []
      }
    },
    LOLchange(value) {
      if (value.target.value == '2') {
        this.unitInfo.sceneId = [5]
      } else {
        this.unitInfo.sceneId = [1]
      }
    },
    bidTypeChange(value) {
      if (value.target.value == 10) {
        this.unitInfo.ocpxActionType = 2
        this.unitInfo.bid = null
      } else {
        this.unitInfo.ocpxActionType = null
        this.unitInfo.cpaBid = null
        this.unitInfo.deepConversionBid = null
      }
    },
    setTime(e) {
      if (e.target.value == '2') {
        this.unitInfo.timeRange[0] = moment().startOf('day')
        this.unitInfo.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 {
      }
    },

    changeData(data) {
      if (data.length > 1 && data.findIndex((item) => item == 1) == 0) {
        data.splice(
          data.findIndex((item) => item == 1),
          1
        )
      } else if (data.length > 1 && data.findIndex((item) => item == 1) == data.length - 1) {
        data.splice(0, data.length - 1)
      } else if (data.length == 0) {
        data.push(1)
      }
    },
    disabledDate(current) {
      // Can not select days before today and today
      return current && current < moment().subtract(1, 'days')
    },
    disabledDateOne(current) {
      // Can not select days before today and today
      return current && current < moment().subtract(0, 'days')
    },
    onScroll() {
      // var box = document.getElementById('box')
      // var t = document.documentElement.scrollTop || document.body.scrollTop
      // box.style.top = t + 'px'

      var jump = document.querySelectorAll('.step-jump')
      var distance =
        document.documentElement.scrollTop + 180 || window.pageYOffset + 180 || document.body.scrollTop + 180
      jump.forEach((item, index) => {
        if (distance >= item.offsetTop) {
          this.activeStep = index
        }
      })
    },
    // 锚点点击
    jump(index) {
      // console.log(index)
      this.activeStep = index
      // 用 class=".step-jump" 添加锚点，此时的类名要放在tr上，放在td上不对，
      // 以后做的时候要注意这点，不是表格的时候，如何放置锚点
      let jump = document.querySelectorAll('.step-jump')
      // 通过 offsetTop 获取对象到窗体顶部的距离，然后赋值给 scrollTop，就能实现锚点的功能
      let total = jump[index].offsetTop
      // console.log(total)
      // scrollTop滚动条距离页面的距离
      let distance = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
      // console.log(distance)
      // 平滑滚动，时长500ms，每10ms一跳，共50跳
      let step = total / 50
      if (total > distance) {
        smoothDown()
      } else {
        let newTotal = distance - total
        step = newTotal / 50
        smoothUp()
      }
      function smoothDown() {
        if (distance < total) {
          distance += step
          document.body.scrollTop = distance
          document.documentElement.scrollTop = distance
          window.pageYOffset = distance
          setTimeout(smoothDown, 5)
        } else {
          document.body.scrollTop = total
          document.documentElement.scrollTop = total
          window.pageYOffset = total
        }
      }
      function smoothUp() {
        if (distance > total) {
          distance -= step
          document.body.scrollTop = distance
          document.documentElement.scrollTop = distance
          window.pageYOffset = distance
          setTimeout(smoothUp, 10)
        } else {
          document.body.scrollTop = total
          document.documentElement.scrollTop = total
          window.pageYOffset = total
        }
      }
    },

    getData(className, formName) {
      return this[formName].getFieldValue(className)
    },
  },
}
</script>

<style lang="scss" scoped>
/* update_begin author:scott date:20190220 for: 缩小首页布局顶部的高度*/

$height: 59px;
.layout .header .user-wrapper .action .anticon,
.layout .top-nav-header-index .user-wrapper .action .anticon {
  color: #999;
}
.layout .header .user-wrapper .action .anticon,
.layout .top-nav-header-index .user-wrapper .action .anticon {
  color: #999;
}
.layout {
  .top-nav-header-index {
    .header-index-wide {
      margin-left: 10px;

      .ant-menu.ant-menu-horizontal {
        height: $height;
        line-height: $height;
      }
    }

    .trigger {
      line-height: 48px;
      font-size: 17px;
      &:hover {
        background: rgba(0, 0, 0, 0.05);
      }
    }
  }

  .header {
    z-index: 2;
    color: #999;
    height: $height;
    background-color: #1890ff;
    transition: background 300ms;

    /* dark 样式 */
    &.dark {
      color: #000000;
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
      background-color: white !important;
    }
  }

  .header,
  .top-nav-header-index {
    &.dark .trigger:hover {
      background: rgba(0, 0, 0, 0.05);
    }
  }
}

.ant-layout-header {
  height: $height;
  line-height: $height;
}

/* update_end author:scott date:20190220 for: 缩小首页布局顶部的高度*/
</style>