<style>
.display-none-selset {
  display: none !important;
}
#table_time_selected1 tr {
  border: 1px solid rgb(102, 162, 243);
}

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

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

.else-label .ant-form-item-label label::after {
  content: '';
  position: relative;
  top: -0.5px;
  margin: 0 8px 0 2px;
}
</style>
<style scoped>
::v-deep .ant-radio-group{
  width: 100%!important;
}
</style>
<template>
  <a-card :body-style="{ padding: '24px 32px' }" :bordered="false" class="group-creat">
    <a-form @submit="handleSubmit" :form="form">

        <a-form-item
        label="今日已创建数"
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
            <div style="color:red">
                {{getData('unitType') == '4' ? createCount.ctmCount : createCount.pgdCount  }}
            </div>
        </a-form-item>
      <a-form-item
        label="创意制作方式"
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
      >
        <a-radio-group buttonStyle="solid" v-decorator="['unitType', { initialValue: '4' }]" @change="changeUnitType">
          <a-radio-button value="4">自定义</a-radio-button>
          <a-radio-button value="7">程序化</a-radio-button>
        </a-radio-group>
      </a-form-item>

        
      <a-form-item
        label="目标应用"
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        v-if="campaignType == '2'||campaignType == '7'"
      >
        <a-select
          v-decorator="['appId', { rules: [{ required: true, message: '请选择目标应用' }] }]"
          showSearch
          allowClear
          placeholder="选择应用目标"
          optionFilterProp="children"
          style="width: 500px"
          @focus="handleFocus"
          @blur="handleBlur"
          @change="handleChange"
          :filterOption="filterOption"
        >
          <a-select-option value="0">请选择目标应用</a-select-option>
          <a-select-option v-for="appModel in appList" :key="appModel.appId" :value="appModel.appId">
            {{ appModel.appName }}&#12288;&nbsp;&#12288; {{ appModel.appVersion }}&#12288;&#12288;&#12288;{{
              appModel.platform | platform
            }}
          </a-select-option>
        </a-select>
        <!-- <a @click="addApplication" style="margin-left:10px">刷新应用</a> -->
        <a-button type="primary" @click="addApplication" :loading="tongbuLoading"> 刷新应用</a-button>
      </a-form-item>
      <a-form-item
        label="调起链接"
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        v-if="campaignType == '2'||campaignType == '7'"
      >
        <a-switch default-checked v-model="uriCheck"/>
        <span style="color:red"> 需加白使用</span>
        <div v-if="uriCheck">
            <a-input placeholder="请填写链接" v-decorator="['schemaUri', { rules: [{ message:'链接不能为空'}] }]" />
            <br /><br />
            <a
              v-if="getData('schemaUri')"
              @click="
                clickTrackUrlShow = true
                clickTrackUrlShowType = '3'
              "
              style="margin-right: 10px; position: relative; top: -20px"
              >收藏调起链接</a
            >
            <a
              @click="
                getClickTrackUrlList('3')
                clickTrackUrlShowType = '3'
              "
              style="margin-right: 10px; position: relative; top: -20px"
              >调起链接列表</a
            >
        </div>
      </a-form-item>

     
      <a-form-item
        label="转化类型"
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        v-if="campaignType == '3'"
      >
        <a-radio-group
          buttonStyle="solid"
          v-decorator="['urlType', { rules: [{ required: true, message: '请选择目标应用' }], initialValue: '1' }]"
        >
          <a-radio-button value="1">淘宝商品</a-radio-button>
          <a-radio-button value="2">淘客商品</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        :label="campaignType == 3 ? ' ' : campaignType == '7'?'H5链接':'链接'"
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        v-if="campaignType == 3||campaignType == 4||campaignType == 5||campaignType == 6||campaignType == 7"
        :class="{ 'else-label': campaignType == 3 }"
      >
        <a-input
          placeholder="请填写链接"
          v-decorator="['url', { rules: [{ required: true, message: '链接不能为空' }] }]"
        />
        <br /><br />
        <a
          v-if="getData('url')"
          @click="
            clickTrackUrlShow = true
            clickTrackUrlShowType = '4'
          "
          style="margin-right: 10px; position: relative; top: -20px"
          >收藏链接</a
        >
        <a
          @click="
            getClickTrackUrlList('4')
            clickTrackUrlShowType = '4'
          "
          style="margin-right: 10px; position: relative; top: -20px"
          >链接列表</a
        >
      </a-form-item>

      <a-form-item
        label="转化目标"
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        v-if="campaignType == 2 || campaignType == 4 || campaignType == 5"
      >
        <span v-if="convertId && !convert" style="display: block; font-size: 16px"
          >已选择转化目标: {{ convertId.label }}</span
        >
        <a-button type="primary" @click="showConvert">{{ convertId ? '更换转化目标' : '选择转化目标' }}</a-button>
      </a-form-item>

      <a-modal v-model="convert" title="选择转化目标">
        <template slot="footer">
          <a-button key="back" @click="convert = false">取消</a-button>
          <a-button key="submit" type="primary" @click="convertOk"> 确定 </a-button>
        </template>
        <a-form-item
          label="追踪方式"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-radio-group buttonStyle="solid" v-model="convertType" @change="convertChange">
            <a-radio-button value="1" v-show="campaignType == 4 || campaignType == 5">JS布玛</a-radio-button>
            <a-radio-button value="2" v-show="campaignType == 4 || campaignType == 5">Xpath</a-radio-button>
            <a-radio-button
              value="3"
              v-show="campaignType == 2 && (getPlatForm(getData('appId')) == 1 || getPlatForm(getData('appId')) == 2)"
              >应用-SDK
            </a-radio-button>
            <a-radio-button value="7" v-show="campaignType == 2">应用-API</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          label="选择转化"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-select allowClear labelInValue style="width: 100%" v-model="convertId" @focus="getConvertList">
            <a-select-option :value="item.convert_id" v-for="(item, index) in convertList" :key="item.convert_id">
              {{ item.convert_name }}</a-select-option
            >
          </a-select>
        </a-form-item>
      </a-modal>

      <a-form-item
        label=" "
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        class="else-label"
        v-if="campaignType == '2' && (getPlatForm(getData('appId')) == '1' || getPlatForm(getData('appId')) == '2')"
      >
        <a-checkbox
          v-decorator="[
            'useAppMarket',
            {
              valuePropName: 'checked',
              initialValue: false,
            },
          ]"
        >
          优先从系统应用商店下载
        </a-checkbox>
      </a-form-item>
      <a-form-item
        label=" "
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 16 } }"
        class="else-label"
        v-if="getData('useAppMarket')&&campaignType == '2' && (getPlatForm(getData('appId')) == '1' || getPlatForm(getData('appId')) == '2')"
      >
        请勾选投放应用已上架的应用商店（默认全选）
        <a-checkbox-group v-model="allForm.appStore">
          <a-checkbox value="huawei">华为</a-checkbox>
          <a-checkbox value="oppo">OPPO</a-checkbox>
          <a-checkbox value="vivo">VIVO</a-checkbox>
          <a-checkbox value="xiaomi">小米</a-checkbox>
          <a-checkbox value="meizu">魅族</a-checkbox>
          <a-checkbox value="smartisan">锤子</a-checkbox>
        </a-checkbox-group>
      </a-form-item>
      <a-form-item label="投放范围" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        v-if="allianceAccount">
        <a-radio-group buttonStyle="solid" v-model="allForm.allianceAccount">
          <a-radio-button value="1">默认</a-radio-button>
          <a-radio-button value="2">联盟广告</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        label="创建数量"
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
      >
        <a-input-number
          v-decorator="[
            'createCount',
            {
              rules: [{ required: true, message: '创建数量必填' }],
              initialValue: 1,
            },
          ]"
          style="width: 150px"
        >
        </a-input-number>
      </a-form-item>

      <div style="text-align: center; font-size: 16px; margin-bottom: 10px">目标人群</div>
      <a-form-item
        label="选择模板"
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
      >
        <a-select
          v-decorator="['templateId']"
          showSearch
          allowClear
          placeholder="选择定向模板"
          optionFilterProp="children"
          style="width: 500px"
          :filterOption="filterOption"
        >
          <a-select-option v-for="appModel in templateList" :key="appModel.templateId" :value="appModel.templateId">
            {{ appModel.templateName }}
          </a-select-option>
        </a-select>
        <a-button type="primary" @click="getTemplate(null)" :loading="templateLoading"> 刷新模板</a-button>
        <br>
        <a style="margin: 0 10px 0 0" @click="addTemplate(null)">新增模板</a>
        <a
          @click="lookTemplate(null, getData('templateId'))"
          :disabled="getData('templateId') == '' || getData('templateId') == null"
          >查看模板</a
        >
      </a-form-item>

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

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

      <!-- <a-form-item
        label="场景广告位"
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
        v-if="allForm.allianceAccount == '1'"
      >
        <a-radio-group buttonStyle="solid" v-decorator="['sceneId', { initialValue: '1' }]">
          <a-radio-button value="1">优选广告位</a-radio-button>
          <a-radio-button value="2">按场景选择广告位</a-radio-button>
        </a-radio-group>
        <br />
      </a-form-item>
      <a-form-item
        label=" "
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        class="else-label"
        v-if="getData('sceneId') == '2'"
      >
        <a-checkbox-group :defaultValue="[7]" v-model="allForm.sceneId">
          <a-checkbox :value="7">信息流广告</a-checkbox>
          <a-checkbox :value="6">上下滑大屏广告</a-checkbox>
          <a-checkbox :value="3">视频播放页广告</a-checkbox>
        </a-checkbox-group>
      </a-form-item> -->
      <div style="text-align: center; font-size: 16px">优化目标和计费</div>

      <div style="width: 100%" v-for="(item, index) of allForm.group" :key="index">
        <div style="clear: both"></div>
        <a-form-item
          label="选择商品"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
          v-if="isLibrary"
        >
          <a @click="getProductList()">选择商品</a> 
          <p v-if="!!outerShowId">{{outerShowId.split('@')[2]}}</p>
        </a-form-item>
        <a-form-item
          label="优化目标"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-radio-group buttonStyle="solid" v-model="item.bidType" @change="resData(index)">
            <a-radio-button :value="1" :disabled="campaignBidType == '1'">点击数</a-radio-button>

            <a-radio-button :value="10" v-if="campaignBidType != '1'">转化数</a-radio-button>
            <a-radio-button :value="12" v-else>转化数</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          label="转化目标"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
          v-if="item.bidType == 10||item.bidType == 12"
        >
          <a-select v-model="item.ocpxActionType" @change="getDeepTypesList" allowClear>
            <a-select-option :value="items.ocpx_action_type" v-for="items in ocpxActionList"
                >{{items.name}}</a-select-option
              >
          </a-select>
        </a-form-item>
        <a-form-item
          label="深度转化目标"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
          v-if="
            (item.ocpxActionType == 180 || item.ocpxActionType == 53) && deepTypesList.length > 0
          "
        >
          <a-select v-model="item.deepConversionType" allowClear>
            <a-select-option
              :value="items.event_type"
              v-for="(items, index) of deepTypesList"
              :key="index"
            >
              {{ items.name }}</a-select-option
            >
          </a-select>
        </a-form-item>

        <a-form-item
          label="计费方式"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-radio-group defaultValue="1">
            <a-radio value="1">{{ campaignBidType == '1'?'最大转化':item.bidType == 1 ? '点击计费' : '展示计费(oCPM)' }}</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          label="出价"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
          v-if="item.bidType == 1&&campaignBidType != '1'"
        >
                    <!-- v-model="item.bid" -->
          <a-input-number

            v-decorator="[
            'bid',
            {
              rules: [{ required: true, message: '出价必填' }, {validator: bidCheck}],
            },
          ]"
            :style="{ borderColor: item.showTipCheck ? 'red' : '#d9d9d9' }"
            style="width: 100%"
          >
          </a-input-number>
          <!-- <span style="color: red" v-if="item.showTipCheck && item.ocpxActionType == 180"
            >不得低于0.2元，不得高于项目最高出价{{ maxBid }}元</span
          > -->
        </a-form-item>
        
        <a-form-item
          label="目标成本"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
          v-else-if="item.bidType != 1 && campaignBidType != '1'"
        >
                    <!-- v-model="item.cpaBid" -->
          <a-input-number

            v-decorator="[
            'cpaBid',
            {
              rules: [{ required: true, message: '目标成本必填' }, {validator: cpaBidCheck}],
            },]"
          
            style="width: 100%"
          >
          </a-input-number>
          <!-- <span style="color: red" v-if="item.showTipCheck">{{
            item.bidType == 1
              ? '不得低于1元，不得高于项目最高出价' + maxBid + '元'
              : '不得低于1元，不得高于项目最高出价' + maxBid + '元'
          }}</span> -->
          <span
            style="color: red; font-weight: 700"
            v-if="item.ocpxActionType == 2 && getData('cpaBid') && getData('cpaBid') > 1"
          >
            行为出价大于1元,请注意！！！
          </span>
        </a-form-item>
        <a-form-item
          label="深度转化出价"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
          v-if="
            (item.ocpxActionType == 180 || item.ocpxActionType == 53)  &&
            item.deepConversionType != ''&&
            campaignBidType != '1'
          "
        >
          <a-input-number
            v-model="item.deepConversionBid"
            @change="deep_conversion_bidTip(index)"
            :style="{ borderColor: item.deepConversionBidCheck ? 'red' : '#d9d9d9' }"
            style="width: 100%"
            :disabled="getData('cpaBid')==null||getData('cpaBid') == ''"
          ></a-input-number>
          <span style="color: red" v-if="item.deepConversionBidCheck"
            >深度转化目标成本必须高于优化目标成本</span
          >
        </a-form-item>
        <a-form-item
          label="广告组名称"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
        <!-- v-model="item.unitName"  -->
          <a-input  v-decorator="[
            'unitName',
            {
              rules: [{ required: true, message: '广告组必填' }, {validator: handleConfirmValue}],
            },]" @change="checkGroup($event, index)" id="unitName"></a-input>
          <span style="color: red" v-if="item.unitNameCheck">广告组名称重复</span>
          <a-tag color="#2db7f5" @click="getChangeAll('序号', 'form', 'unitName')">+序号</a-tag>
        </a-form-item>
        <a-form-item
          v-if="showNumber"
          label="序号开始值"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-input-number
            :min="0"
            v-decorator="[
              'startNumber',
              {
                rules: [{ required: true, message: '序号开始值必填' }],
                initialValue: 0,
              },
            ]"
            style="width: 150px"
          >
          </a-input-number>
        </a-form-item>
      </div>
      <div style="text-align: center; font-size: 16px">创意素材</div>

      <a-form-item
        label="素材类型"
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
      >
        <a-radio-group
          buttonStyle="solid"
          v-decorator="['creativeMaterialType', { initialValue: '1' }]"
          @change="changeType()"
        >
          <a-radio-button value="1">竖版视频</a-radio-button>
          <a-radio-button value="2">横版视频</a-radio-button>
          <!-- <a-radio-button value="4" v-if="JSON.parse(pane.sceneId).indexOf(7)>0">便利贴创意</a-radio-button> -->
        </a-radio-group>
      </a-form-item>
      <a-form-item
        label="创意标题"
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
      >
        <a-input
          v-decorator="[
            'creativeName',
            {
              rules: [{ required: true, message: '创意标题必填' }],
              initialValue: '自定义创意_竖版视频',
            },
          ]"
        ></a-input>
      </a-form-item>
      <a-form-item
        label="创建类型"
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        v-if="getData('unitType')=='4'"
      >
         <a-radio-group
          buttonStyle="solid"
          v-decorator="['createType', { rules: [{ required: true, message: '请选择目标应用' }], initialValue: '0' }]"
          @change="getPageSize"
        >
          <a-radio-button value="0">单品</a-radio-button>
          <a-radio-button value="1">混搭</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        v-if="getData('unitType')=='7' || getData('createType')!='1'"
        :label="getData('unitType')=='7'?'视频数':'封面数'"
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
      >
         <a-input-number
          :max="getData('unitType')=='7'?10:15"
          :min="getData('unitType')=='7'?3:1"
          v-decorator="[
            'imageCount',
            {
              rules: [{ required: true, message: '数量必填必填' }],
              initialValue: 5,
            },
          ]"
          style="width: 150px"
        >
        </a-input-number>
      </a-form-item>
      
      <a-form-item
        label="选择视频"
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
      >
        <a @click="getVideoList()">选择视频</a> 
        {{ videoList.length + '/' + (getData('unitType')=='4'
        ?(getData('createType')=='0'?
        getData('createCount'):getData('createCount')*15)
        :getData('createCount')*getData('imageCount')) }}
        <br />
        <div v-if="videoList.length > 0 && showVideo" style="display:flex;flex-wrap:wrap">
          <span v-for="(item, index) of videoList" :key="index" style="position: relative" class="width-video">
            <a-icon type="close-circle" @click="deleteData(index, item)" style="position: absolute;right:0;color:red" />
            <img :src="item.coverUrl" controls="controls" style="width:100%" @click="matemalVideo(item)"></img>
          </span>
        </div>
      </a-form-item>
      <a-form-item
        label="广告语"
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
      >
      <!-- v-model.trim="allForm.description" -->
      <!-- @keyup="getData('description')?getData('description')=this.value.replace(/^ +| +$/g,'')" -->
        <!-- <a @click="showTitle()">推荐广告语</a> -->
        <div style="position:relative" v-for="(item, index) in descriptionList" :key="index">
            <a-textarea
                class="rending"
                placeholder="请输入广告语"
                @change="descriptionchange(item.value, index)"
                v-model="item.value"
                :autosize="{ minRows: 2, maxRows: 6 }"
                :max-length="30"
                style=" width: 80%;"
            ></a-textarea>
            <p
                style="
                font-size: 12px;
                color: #b6bbc7;
                letter-spacing: 0.3px;
                text-align: right;
                line-height: 30px;
                position: absolute;
                bottom: 0;
                left: 0;
                width: 80%;
                margin-bottom: 0;
                "
            >
                {{ item.value.length }}/30
                <!-- {{ getFormData('description').length  }}/30 -->
            </p>
            <div style="position:absolute;right:0;top:-10px">
                <a-icon
                    type="plus"
                    @click="addDescription()"
                    style="margin-right:15px"
                    v-if="descriptionList.length < 10"
                />
                <a-icon
                    type="minus"
                    @click="removeDescription(index)"
                    v-if="descriptionList.length > 1"
                />
            </div>
        </div>
        <a @click="cunTitle()">收藏</a>
        <a @click="showCunTitle()" style="margin-left: 10px">收藏列表</a>
        <!-- 
        <br />
        <a-tag v-for="(itemTag, indexTag) of tags" :key="indexTag" @click="getChange(item, itemTag, index)">{{
          itemTag.name
        }}</a-tag> -->
      </a-form-item>
      <a-form-item label="下载详情" v-if="showSite" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }">
            <a-select
              v-decorator="['siteId']"
              showSearch
              allowClear
              placeholder="选择应用下载详情页"
              optionFilterProp="children"
              :filterOption="filterOption"
            >
              <a-select-option v-for="appModel in siteList" :key="appModel.siteId" :value="appModel.siteId">
                {{ appModel.name }}
              </a-select-option>
            </a-select>
      </a-form-item>
      <a-form-item
        label="创意分类"
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        v-if="creativeCategorySwitch"
      >
        <a-cascader
          :options="createOptions"
          v-decorator="['creativeCategory',{ rules: [{ required: true, message: '创意分类必选' }] }]"
          :fieldNames="fieldNames"
          placeholder="请选择创意分类"
        />
      </a-form-item>
      <a-form-item
        label="创意标签"
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        v-if="creativeCategorySwitch"
      >
        <a-select
          mode="tags"
          style="width: 100%"
          placeholder="按回车生成标签"
          v-decorator="['creativeTag',{ rules: [{ required: true, message: '创意标签必填' }] }]"
          dropdownClassName="display-none-selset"
          :token-separators="[',', ' ', '，']"
        >
        </a-select>
        <span v-if="getData('creativeTag') && getData('creativeTag').length > 10" style="color: red"
        >创意标签最多填写10个，请删减</span>
        <br />
        <a-popconfirm @confirm="getInfo()">
          <div slot="title">
            <div>
              分类名称:
              <a-input placeholder="请输入" v-model="tagName" style="display: inline-block; width: 300px" />
            </div>
          </div>

          <a style="margin-right: 10px" :disabled="!getData('creativeTag')">收藏</a>
        </a-popconfirm>

        <a @click="showCunTag('creativeTag')">收藏列表</a>
      </a-form-item>
      <a-form-item
        label="行动号召"
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
      >
        <a-select
          v-decorator="['actionBarText', { rules: [{ required: true, message: '行动号召按钮文案' }] }]"
          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-item>
      <a-form-item
        label="下载详情"
        v-if="showSite"
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
      >
        <a-select
          v-decorator="['siteId']"
          showSearch
          allowClear
          placeholder="选择应用下载详情页"
          optionFilterProp="children"
          :filterOption="filterOption"
        >
          <a-select-option v-for="appModel in siteList" :key="appModel.siteId" :value="appModel.siteId">
            {{ appModel.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="第三方点击监测链接"
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
      >
        <a-input v-decorator="['clickTrackUrl']" placeholder="请输入第三方检测链接"> </a-input>
        <a
          v-if="getData('clickTrackUrl')"
          @click="
            clickTrackUrlShow = true
            clickTrackUrlShowType == '1'
          "
          style="margin-right: 10px"
          >收藏监测链接</a
        >
        <a
          @click="
            getClickTrackUrlList('1')
            clickTrackUrlShowType = '1'
          "
          >监测链接列表</a
        >
      </a-form-item>
      <a-form-item
        label="第三方ActionBar点击监控链接"
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        v-if="actionbarClickUrlSwitch"
      >
        <a-input v-decorator="['actionbarClickUrl']" placeholder="请输入第三方点击监控链接"> </a-input>
        <span style="color: red; position: relative; top: -10px">仅加白使用</span>
        <br />
        <a
          v-if="getData('actionbarClickUrl')"
          @click="
            clickTrackUrlShow = true
            clickTrackUrlShowType = '2'
          "
          style="margin-right: 10px; position: relative; top: -20px"
          >收藏监测链接</a
        >
        <a
          @click="
            getClickTrackUrlList('2')
            clickTrackUrlShowType = '2'
          "
          style="margin-right: 10px; position: relative; top: -20px"
          >监测链接列表</a
        >
      </a-form-item>

      <a-form-item :wrapperCol="{ span: 20 }" style="text-align: center">
        <a-button htmlType="submit" type="primary" :loading="loading">确定</a-button>
        <!-- <a-button style="margin-left: 8px" @click="prevStep" v-show="step == 1">上一步</a-button> -->
      </a-form-item>
    </a-form>
    <a-modal v-model="visible" title="广告组创建信息">
      <div>创建成功：{{ allForm.success }}条</div>
      <template slot="footer">
        <a-button key="submit" type="primary" @click="handleOk"> 返回列表 </a-button>
      </template>
    </a-modal>

    <templateModal ref="templateModal" @getData="getTemplateList" />
    <a-modal title="查看视频" v-model="visibleVideo" :width="400" :footer="null">
      <video class="video" :src="videoUrlShow" controls="controls" style="width: 100%">
        您的浏览器不支持 video 标签。
      </video>
    </a-modal>
    <a-modal
      :maskClosable="false"
      title="选择素材"
      v-model="visibleMatemal"
      @ok="handleOkShow"
      @cancel="cancelAll"
      :width="1000"
    >
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item label="类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-radio-group v-model="mediaDimension" style="width: 300px"> 
                <a-radio-button value="a">按时间查询</a-radio-button>
                <a-radio-button value="b">按消耗查询</a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span="8" v-if="mediaDimension == 'a'">
            <a-form-item label="日期选择" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-range-picker name="buildTime" v-model="time" />
            </a-form-item>
          </a-col>
          <a-col :span="8" v-else>
            <a-form-item label="消耗时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select v-model="costType" placeholder="请选择消耗时间" style="width: 100%">
                <a-select-option :value="1">昨天</a-select-option>
                <a-select-option :value="2">近七天</a-select-option>
                <a-select-option :value="3">近14天</a-select-option>
                <a-select-option :value="4">近一个月</a-select-option>
                <a-select-option :value="5">近三个月</a-select-option>
                <a-select-option :value="6">近半年</a-select-option>
                <a-select-option :value="7">近一年</a-select-option>
                <a-select-option :value="8">全部</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
              当前选择数量
              {{ sumContent + '/' + (getData('unitType')=='4'?(getData('createType')=='0'?getData('createCount'):getData('createCount')*15):getData('createCount')*getData('imageCount') )}}
              <a-button  type="primary" @click="tongbu()" :loading="tongbuLoading" style="margin-left:10px"  v-if="mediaDimension == 'a'">
              刷新素材</a-button>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item label="视频ID" :labelCol="labelCol" :wrapperCol="wrapperCol">
               <a-input placeholder="请输入视频ID" v-model="photoId"/>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="视频名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
               <a-input placeholder="请输入视频名称" v-model="photoName"/>
            </a-form-item>
          </a-col>
          <a-col :span="8" v-if="mediaDimension == 'a'">
            <a-form-item label="唯一标识" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input placeholder="请输入唯一标识，多个以,隔开" v-model="md5Str"/>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-button style="position: relative;top: 4px;" @click="selectAllVideo">
              全选
            </a-button>
            <a-button type="primary" style="position: relative;top: 4px;margin-left:5px" @click="searchVideo">
              搜索
            </a-button>
          </a-col>

          <!-- <a-col :span="12">
            <a-form-item label="筛选条件" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-select v-model="orderBy" style="width: 100%">
                <a-select-option value="time"> 按时间排序 </a-select-option>
                <a-select-option value="cost"> 按消耗排序</a-select-option>
              </a-select>
            </a-form-item>
          </a-col> -->
        </a-row>
          
        <ul v-if="dataSource.length > 0" style="overflow: auto; padding-left: 0;margin-top:10px">
          <a-checkbox-group v-model="checkVideo" style="width: 100%" @change="setData">
            <li v-for="(item, index) of dataSource" :key="index" class="chouzhen" style="height: 400px">
              <!-- <video class="video" :src="item.url" controls="controls" style="width:100%">
                您的浏览器不支持 video 标签。
              </video> -->
              <a-checkbox
                :value="item.photoId"
                style="width: 100%; position: absolute; z-index: 100; right: 0; top: 0;    max-height: 80%;overflow: hidden;"
              >
                <img :src="item.coverUrl" alt="" style="width: 90%; margin-bottom: 30px" />
                
              
              </a-checkbox>
              <div style="position: absolute; z-index: 100; bottom: 35px;width:100%;left:0">
                  <div style="width: 100%; text-align: center">
                    {{ item.statDate&&item.channelType == 0 ? 
                    '内部  ' + item.statDate.split(' ')[0]:item.statDate&&item.channelType == 1 ?
                    '素造  ' + item.statDate.split(' ')[0]: item.charge&&item.channelType == 0?
                    '内部  ' + item.charge :'素造  ' + item.charge}}
                  </div>
                </div>
              <a @click="matemalVideo(item, index)" style="position: absolute; z-index: 100; right: 0; bottom: 5px;width:100%;text-align:center"
                >查看视频</a
              >
            </li>
          </a-checkbox-group>
        </ul>
        <div v-else style="width: 100%; height: 400px; display: flex; justify-content: center; align-items: center">
          <img
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575627350102&di=02972956f2243933bffc0d85099adbfe&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D1095310825%2C1528244349%26fm%3D214%26gp%3D0.jpg"
            alt=""
            v-if="!loadingVideoList"
          />
          <img v-else src="@/views/modules/material/loading.gif" />
        </div>
        <!-- <a-button slot="tabBarExtraContent" type="primary" @click="tongbu()" :loading="tongbuLoading">
          刷新素材</a-button
        > -->
      </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="clickTrackUrlShowType=='3'?'调起链接名称':clickTrackUrlShowType=='4'?'链接名称':'监测链接名称'" v-model="clickTrackUrlShow">
      <template slot="footer">
        <a-button
          key="submit"
          :disabled="trackUrlName == '' && !showTrackUrlNameElse"
          type="primary"
          @click="clickTrackUrlOk"
        >
          确定
        </a-button>
      </template>
      <a-input :placeholder="clickTrackUrlShowType=='3'?'调起链接名称':clickTrackUrlShowType=='4'?'链接名称':'监测链接名称'" v-model="trackUrlName" @blur="changeTrackUrlName" style="width: 100%" />
      <span style="color: red" v-if="!showTrackUrlNameElse">名称重复</span>
    </a-modal>
    <a-modal :title="clickTrackUrlShowType=='3'?'调起链接列表':clickTrackUrlShowType=='4'?'链接列表':'监测链接列表'" v-model="clickTrackUrlList" :width="1000" :footer="null">
      <a-spin :spinning="spinning">
        <a-row :gutter="10" class="onlny-click-track">
          <a-col :sm="24" style="margin-bottom: 20px; z-index: 10">
            <a-card class="search-box" style="over-flow: auto">
              <!-- <a-input v-model="trackName"></a-input> -->
              <a-input-search
                placeholder="请输入名称"
                enter-button="Search"
                size="large"
                @search="onSearch"
                style="width: 40%; margin-bottom: 20px"
                v-model="trackName"
              />
              <a-list size="large" bordered :dataSource="trackUrlList">
                <a-list-item slot="renderItem" slot-scope="item" :title="item.trackUrl" style="line-height: 50px">
                  <div slot="actions">
                    <a @click="okClickTrackUrl(item)">选择</a>
                    <a-divider type="vertical" />
                    <a @click="removeClickTrackUrl(item)">删除</a>
                  </div>

                  {{ item.trackName }}
                  <a-input v-model="item.trackUrl" readOnly style="margin: 10px; width: 70%"></a-input>
                </a-list-item>
              </a-list>
            </a-card>
          </a-col>
        </a-row>
      </a-spin>
    </a-modal>

    <a-modal title="收藏标题" v-model="creativeTagVisible" :width="1000" @ok="okTag">
      <el-tree :data="optionsTag" show-checkbox node-key="id" :props="defaultProps" :check-strictly="true" ref="tree">
      </el-tree>
    </a-modal>

    <a-modal title="推荐标题" v-model="titleVisible" :width="1000" :footer="null">
      <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-list size="large" bordered :dataSource="title">
              <a-list-item slot="renderItem" slot-scope="item">
                <a slot="actions" @click="okTitle(item)">选择</a>
                {{ item }}
              </a-list-item>
            </a-list>
          </a-card>
        </a-col>
      </a-row>
    </a-modal>


    <a-modal title="收藏标题" v-model="cunTitleVisible" :width="1000" :footer="null">
      <a-row :gutter="10">
        <a-col :sm="24" style="margin-bottom: 20px; z-index: 10">
          <a-card class="search-box" style="over-flow: auto">
            <a-list size="large" bordered :dataSource="cunTitleList">
              <a-list-item slot="renderItem" slot-scope="item">
                <div slot="actions">
                  <a @click="okTitleCun(item)">选择</a>
                  <a-divider type="vertical" />
                  <a @click="removeTitleCun(item)">删除</a>
                </div>
                {{ item.title }}
              </a-list-item>
            </a-list>
          </a-card>
        </a-col>
      </a-row>
    </a-modal>
    <a-modal title="选择商品" v-model="libraryVisible" :width="1000"  
      @ok="libraryVisible = false;outerShowId=outerId;libraryPage.current=1;libraryName=null"
      @cancel="libraryVisible = false;libraryList=[];outerId=undefined;libraryPage.current=1;libraryName=null">
      <a-row :gutter="24">
       
      
        <a-col :span="10">
          <a-input-search
            placeholder="请输入产品名称"
            enter-button="搜索"
            size="large"
            @search="libraryPage.current=1;getProductList()"
            style="width: 100%; margin-bottom: 20px"
            v-model="libraryName"
          />
        </a-col>

      
      </a-row>
      <a-card style="width:100%">
        <a-radio-group v-model="outerId">
          <a-card-grid style="width: 25%;" :hoverable="false" v-for="(item, index) in libraryList" :key="index">
           <a-radio :value="item.outer_id+'@'+item.product_id+'@'+item.product_name"><h3>{{item.product_name}}</h3>
           <p>ID:{{item.outer_id}}</p></a-radio> 

          </a-card-grid>
        </a-radio-group>
      </a-card>
      <div style="text-align: right">
        <a-pagination
          size="small"
          :showTotal="libraryPage.showTotal"
          style="float: right"
          v-if="libraryList.length > 0"
          showQuickJumper
          :pageSize.sync="libraryPage.pageSize"
          :total="libraryPage.total"
          v-model="libraryPage.current"
          @change="getProductList"
        />
      </div>
    </a-modal>
  </a-card>
</template>

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

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

  data() {
    return {
      descriptionList: [{value:''}],
      showNumber:false,
      md5Str:'',
      photoId:'',
      photoName:'',
      costType: 1,
      uriCheck: false,
      templateLoading: false,
      dataOne: [],
      actionBarTextList: [],
      trackName: '',
      trackUrlList: [],
      showSite: false,
      appList: [],
      siteList: [],
      createOptions: [],
      fieldNames: {
        label: 'category_name',
        value: 'category_id',
        children: 'child',
      },
      defaultProps: {
        children: 'children',
        label: 'label',
        id: 'id',
      },
      showTrackUrlNameElse: true,
      clickTrackUrlList: false,
      spinning: false,
      trackUrlName: '',
      tagName: '',
      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,
        },
      },
      ipagination: {
        current: 1,
        pageSize: 10,
        //   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
        },
      },
      showVideo: true,
      videoList: [],
      orderBy: 'time',
      mediaDimension: 'a',
      visibleMatemal: false,
      loadingVideoList: false,
      checkVideo: [],
      checkVideoAll: [],
      checkVideoWai: [],
      checkVideoWhole: [],
      dataSource: [],
      active: 0,
      time: [],
      channelType: 0,
      creativeMaterialType: '',
      tab: [
        // {
        //   value: 2,
        //   label: '全部',
        // },
        {
          value: 0,
          label: '内部',
        },
        {
          value: 1,
          label: '外部',
        },
      ],
      templateList: [],
      allianceAccount: false,
      creativeCategorySwitch: false,
      actionbarClickUrlSwitch: false,
      tongbuLoading: false,
      convert: false,
      convertId: '',
      convertList: [],
      checkedTrue: false,
      nameValue: '',
      visible: false,
      timeRange: [],
      form: this.$form.createForm(this),
      step: 0,
      people: '2',
      targeted: '2',
      topMiddle: false,
      topMiddleNo: false,
      keyValue: '',
      keyValueNo: '',
      columns,
      selectedRowKeys: [],
      selectedRowKeysValue: [],
      selectedRowKeysNo: [],
      selectedRowKeysValueNo: [],
      data: [],
      populationData: {},
      url: {
        insertTemplateUrl: '/kuaishou/create/createGroups',
        userAllocationList: '/ctop/userAllocation/list',
        campaignList: '/kuaishou/kuaiShouCampaignTemplate/list',
        getDeepConversionUrl: '/kuaishou/kuaiShouConversionTypes/getIsActivate',
        getCampaignTemplate: '/kuaishou/kuaiShouCampaignTemplate/getKuaiShouCampaignTemplate',
        appListUrl: '/kuaishou/kuaiShouCreateAppTemplate/list',
      },
      appList: [],
      appId: '',
      loading: false,
      campaignTemplateId: '',
      campaignType: null,
      campaignBidType: null,
      maxBid: 0,
      allForm: {
        dayBudget: '0',
        time: '1',
        scheduleTime: '1',
        scheduleTimeData:
          '000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000',
        group: [],
        groupTypeData: null,
        fail: [],
        success: [],
        sceneId: [1],
        appStore: ['huawei', 'oppo', 'vivo', 'xiaomi', 'meizu', 'smartisan'],
        allianceAccount: '1',
        description: '',
      },
      convertType: '1',
      convertAllList: [],
      dataList: [],
      clickTrackUrlShow: false,
      clickTrackUrlShowType: '1',
      optionsTag: [],
      creativeTagVisible: false,
      visibleVideo: false,
      videoUrlShow: '',
      sumContent: 0,
      titleVisible: false,
      options: [],
      value: '',
      title: [],
      cunTitleVisible: false,
      cunTitleList: [],
      createCount: 0,
      tongbuLoading: false,
      ocpxActionList: [],
      deepTypesList: [],
      libraryVisible:false,
      isLibrary:false,
      libraryId:null,
      libraryName:null,
      libraryList:[],
      outerId:undefined,
      outerShowId:undefined,
      libraryPage:{
        current: 1,
        pageSize: 8,
        //   pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        //   showSizeChanger: true,
        total: 0,
        onChange: (current) => {
          // 切换分页时的回调，
          // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
          this.libraryPage.current = current
        },
      },
    }
  },
  computed: {
    count() {
      return moment().startOf('day')
    },
  },
  filters: {
    getDate(value) {
      let date = new Date(value)
      let y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? '0' + MM : MM
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      return y + '-' + MM + '-' + d
    },
    platform(str) {
      var data = {
        1: 'Android应用下载',
        2: 'Android网页游戏',
        3: 'iOS应用下载',
        4: 'iOS网页游戏',
      }
      return data[str]
    },
  },
  methods: {
    getOcpxActionList(value){
      var params = {}
      params.accountId = localStorage.getItem('campaignAccountId')
      params.sceneCategory = 0
      params.campaignType = localStorage.getItem('campaignType')
      params.sceneIds = this.allForm.allianceAccount == '1' ? this.allForm.sceneId : [5]
      params.appId = value?value:null
      var url = '/kuaishou/batch/conversionInfos'
      if(this.campaignBidType == '1'){
        url = '/kuaishou/batch/mcbConversionInfos'
      }
      this.postDataAction(url, params).then(res=>{
        if(res.success){
          this.ocpxActionList = res.result.data.ocpx_types
        }
      })
    },
    getDeepTypesList(data){
      if(!!data){
        var params = {}
        params.accountId = localStorage.getItem('campaignAccountId')
        params.sceneCategory = 0
        params.campaignType = localStorage.getItem('campaignType')
        params.sceneIds = this.allForm.allianceAccount == '1' ? this.allForm.sceneId : [5]
        params.appId = this.getData('appId')
        params.ocpxActionType = data
        this.postDataAction('/kuaishou/batch/deepTypes', params).then(res=>{
          if(res.success){
            this.deepTypesList = res.result.data.deep_types
          }
        })
      }else{
        this.deepTypesList = []
      }
     
    },
    descriptionchange(val, index) {
      this.$nextTick(() => {
          this.descriptionList[index].value = val.replace(/\s*/g, '').trim()
      })
    },
    addDescription() {
      this.descriptionList.push({ value: '' })
    },
    removeDescription(index) {
      this.descriptionList.splice(index, 1)
    },
    searchVideo() {
      let url = '/kuaishou/kuaiShouVideoGet/getBatchV2VideoList'
      let params = {}
      // localStorage.getItem('campaignAccountId')
      params.accountId = localStorage.getItem('campaignAccountId')
      params.pageSize = this.ipagination.pageSize
      params.pageNo = this.ipagination.current
      params.status = 0
      params.photoId = this.photoId
      params.photoName = this.photoName
      params.materialType =this.creativeMaterialType 
      if(this.mediaDimension == 'a'){
        url = '/kuaishou/kuaiShouVideoGet/getBatchV2VideoList'
        params.signatures = this.md5Str
        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'
        }
      }else if(this.mediaDimension == 'b'){
        url = '/kuaishou/kuaiShouVideoGet/getVideoListByCostType'
        params.costType = this.costType
      }
      // params.materialType = this.creativeMaterialType

      // params.channelType = this.channelType
      // params.orderBy = this.orderBy
      
     
      this.showVideoList(url, params)
    },
    tongbu() {
      this.tongbuLoading = true
      getAction('/kuaishou/batch/syncVideo', {
        accountId: localStorage.getItem('campaignAccountId'),
      }).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.tongbuLoading = false
          this.searchVideo()
        } else {
          this.$message.error(res.message)
          this.tongbuLoading = false
        }
      })
    },
    removeTitleCun(item) {
      deleteAction('/kuaishou/kuaiShouTitleCollection/delete', {
        id: item.id,
      }).then((res) => {
        if (res.success) {
          this.getCunTitle()
        }
      })
    },
    okTitleCun(item) {
      this.allForm.description = item.title
      // this.form.setFieldsValue({
      //   description: item.title,
      // })


      if (this.descriptionList[0].value == '') {
        this.descriptionList = [{value:item.title}]
      } else {
        for (let index = 0; index < this.descriptionList.length; index++) {
          if (this.descriptionList[index].value == '') {
              this.descriptionList.splice(index, 1)
          }
        }
        if(this.descriptionList.length<=9){
          this.descriptionList.push({value:item.title})
        }
      }
     
      this.cunTitleVisible = false
      this.cunTitleList = []
    },
    cunTitle() {
      let isNotComplete = this.descriptionList.findIndex(item => {
          return item.value === ''
      })
      if (isNotComplete > -1) {
          this.$message.error('广告语未填,不可收藏')
          return
      }
      var params = {}
      params.accountId = localStorage.getItem('campaignAccountId')
      params.userId = this.userInfo().id
      params.titles = this.descriptionList.map(item=>{
        return item.value
      })
      postAction('/kuaishou/kuaiShouTitleCollection/addMore', params).then((res) => {
        if (res.success) {
          this.$message.success('收藏成功')
        } else {
          this.$message.error(res.message)
        }
      })
      
    },
    showCunTitle() {
      this.cunTitleVisible = true
      this.getCunTitle()
    },
    getCunTitle() {
      var params = {}
      params.accountId = localStorage.getItem('campaignAccountId')
      params.userId = this.userInfo().id
      params.pageNo = 1
      params.pageSize = 500
      getAction('/kuaishou/kuaiShouTitleCollection/list', params).then((res) => {
        if (res.success) {
          this.cunTitleList = res.result.records
        }
      })
    },
    okTitle(item) {
      this.allForm.description = item
      this.$nextTick(() => {
        if (this.descriptionList[0].value == '') {
          this.descriptionList = [{value:item}]
        } else {
          for (let index = 0; index < this.descriptionList.length; index++) {
            if (this.descriptionList[index].value == '') {
                this.descriptionList.splice(index, 1)
            }
          }
          if(this.descriptionList.length<=9){
            this.descriptionList.push({value:item})
          }
        }
      })

      this.titleVisible = false
      this.dataOne = []
      this.value = ''
      this.title = []
    },
    searchQuery() {
      // /ctop/creativeTitle/titleSuggestion
      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 : []
      })
      // firstCategory，secondCategory，keywords
    },
    onChangeTitle(value, selectedOptions) {
      this.dataOne = value
      this.value = ''
      this.title = []
    },
    filter(inputValue, path) {
      return path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
    },
    showTitle() {
      this.titleVisible = true
      this.getHangye()
    },
    getHangye() {
      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]
          }
        }
      })
    },
    matemalVideo(item) {
      this.visibleVideo = true
      this.videoUrlShow = item.url
    },
    showCunTag(type) {
      this.creativeTagVisible = true
      var params = {}
      params.accountId = localStorage.getItem('campaignAccountId')
      params.userId = this.userInfo().id
      params.pageSize = 1000
      params.pageNo = 1

      getAction('/tag/kuaiShouCreativeTagCollection/list', params).then((res) => {
        if (res.success) {
          // console.log(res.result)
          this.optionsTag = res.result.records.map((item) => {
            return {
              id: item.id,
              label: item.tagName,
              children: JSON.parse(item.tagArray).map((item) => {
                return {
                  id: item,
                  label: item,
                  disabled: true,
                }
              }),
            }
          })
        }
      })
    },

    okTag() {
      var data = this.$refs.tree.getCheckedKeys()
      if (data.length > 1) {
        this.$message.error('只能选择一个选项')
        //  this.$refs.tree.setCheckedKeys([]);
      } else {
        var params = {}
        params.accountId = localStorage.getItem('campaignAccountId')
        params.userId = this.userInfo().id
        params.pageSize = 1000
        params.pageNo = 1
        params.id = data[0]

        getAction('/tag/kuaiShouCreativeTagCollection/list', params).then((res) => {
          if (res.success) {
            // console.log(res.result)
            this.$nextTick(() => {
              this.form.setFieldsValue({
                creativeTag: JSON.parse(res.result.records[0].tagArray).map((item) => {
                  return item
                }),
              })
              this.form.validateFields(['creativeTag'])
            })

            this.creativeTagVisible = false
          } else {
            this.$message.error('选择出错，请稍后选择或自行手填')
          }
        })
      }
    },
    getInfo() {
      if (this.tagName == '') {
        this.$message.error('请输入分类名称')
        return
      } else {
        let params = {}
        params.tagName = this.tagName
        //   params.campaignBudget = this.campaignBudget
        params.tagArray = JSON.stringify(this.getData('creativeTag'))
        params.userId = this.userInfo().id
        params.accountId = localStorage.getItem('campaignAccountId')
        postAction('/tag/kuaiShouCreativeTagCollection/add', params).then((res) => {
          if (res.success) {
            this.$message.success('添加成功')
            this.tagName = ''
          } else {
            this.$message.error(res.message)
          }
        })
      }
    },
    onSearch(value) {
      var params = {}
      params.accountId = localStorage.getItem('campaignAccountId')
      params.userId = this.userInfo().id
      params.trackType = this.clickTrackUrlShowType
      params.pageNo = 1
      params.pageSize = 500
      params.trackName = value
      getAction('/kuaishou/kuaiShouTrackUrlCollection/list', params).then((res) => {
        if (res.success) {
          this.trackUrlList = res.result.records
        } else {
          this.$message.error(res.message)
        }
      })
    },
    okClickTrackUrl(item) {
      this.clickTrackUrlList = false
      if (this.clickTrackUrlShowType == '1') {
        this.form.setFieldsValue({
          clickTrackUrl: item.trackUrl,
        })
      } else if (this.clickTrackUrlShowType == '2') {
        this.form.setFieldsValue({
          actionbarClickUrl: item.trackUrl,
        })
      }else if (this.clickTrackUrlShowType == '3') {
        this.form.setFieldsValue({
          schemaUri: item.trackUrl,
        })
      }else if (this.clickTrackUrlShowType == '4') {
        this.form.setFieldsValue({
          url: item.trackUrl,
        })
      }
    },
    removeClickTrackUrl(item) {
      deleteAction('/kuaishou/kuaiShouTrackUrlCollection/delete', {
        id: item.id,
      }).then((res) => {
        if (res.success) {
          this.getClickTrackUrlList(this.clickTrackUrlShowType)
        }
      })
    },
    getClickTrackUrlList(type) {
      this.spinning = true
      this.clickTrackUrlList = true
      this.trackUrlList = []
      var params = {}
      params.accountId = localStorage.getItem('campaignAccountId')
      params.trackType = type
      params.userId = this.userInfo().id
      params.pageNo = 1
      params.pageSize = 500
      getAction('/kuaishou/kuaiShouTrackUrlCollection/list', params).then((res) => {
        if (res.success) {
          this.spinning = false
          this.trackUrlList = res.result.records
        } else {
          this.spinning = false
          this.$message.error(res.message)
        }
      })
    },
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
    changeTrackUrlName() {
      var params = {}
      params.accountId = localStorage.getItem('campaignAccountId')
      params.userId = this.userInfo().id
      params.trackName = this.trackUrlName
      getAction('/kuaishou/kuaiShouTrackUrlCollection/checkTrackName', params).then((res) => {
        this.showTrackUrlNameElse = res.result
      })
    },
    clickTrackUrlOk() {
      var params = {}
      params.accountId = localStorage.getItem('campaignAccountId')
      params.userId = this.userInfo().id
      params.trackName = this.trackUrlName
      params.trackType = this.clickTrackUrlShowType
      params.trackUrl =
        this.clickTrackUrlShowType == '1' ? 
        this.getData('clickTrackUrl') :
        this.clickTrackUrlShowType == '2'?this.getData('actionbarClickUrl'):
        this.clickTrackUrlShowType == '3'?this.getData('schemaUri'):
        this.clickTrackUrlShowType == '4'?this.getData('url'):this.getData('clickTrackUrl')
      postAction('/kuaishou/kuaiShouTrackUrlCollection/add', params).then((res) => {
        if (res.success) {
          this.clickTrackUrlShow = false
          this.trackUrlName = ''
          this.$message.success('添加成功')
        } else {
          this.$message.error(res.message)
        }
      })
    },
    deleteData(index, item) {
      this.videoList.splice(index, 1)
      var deleteIndex = this.checkVideo.findIndex((c) => c == item.photoId)
      this.checkVideo.splice(deleteIndex, 1)
      for (let i = 0; i < this.checkVideoAll.length; i++) {
        for (let j = 0; j < this.checkVideoAll[i].length; j++) {
          if (this.checkVideoAll[i][j] == item.photoId) {
            this.checkVideoAll[i] = this.checkVideo
          }
        }
      }
      // for (let i = 0; i < this.checkVideoWai.length; i++) {
      //   for (let j = 0; j < this.checkVideoWai[i].length; j++) {
      //     if (this.checkVideoWai[i][j] == item.photoId) {
      //       this.checkVideoWai[i] = this.checkVideo
      //     }
      //   }
      // }
      this.sumContent = this.checkVideo.length
      // var deleteIndexAll = this.checkVideoAll.findIndex((c) => c == item.photoId)
      // this.checkVideoAll.splice(deleteIndexAll, 1)
    },
    setVideUrl(photoId) {
      this.videoList = []
      getAction('/batch/kuaiShouGroupTemplate/getUrlByPhotoId', { photoId: photoId }).then((res) => {
        if (res.success) {
          this.videoList.push({ url: res.result.url, photoId: photoId, coverUrl: res.result.coverUrl })
        } 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)
      }
      this.getOcpxActionList()
    },
    selectAllVideo() {
      this.checkVideo = this.dataSource.map((item) => {
        return item.photoId
      })
      // if (this.active == 0) {
        for (let i = 0; i < this.ipagination.current; i++) {
          this.checkVideoAll.push([])
        }
        this.checkVideoAll[this.ipagination.current - 1] = this.checkVideo
      // } else if (this.active == 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
      if(this.getData('unitType') == '4'){
        if (this.getData('createType') == '0') {
          if (sum > this.getData('createCount')) {
            this.$message.error('最多选择' + this.getData('createCount') + '个素材')
            this.checkVideo = []
            this.sumContent = this.sumContent - 10

            // if (this.active == 0) {
              this.checkVideoAll[this.ipagination.current - 1] = this.checkVideo
          
          }
        } else {
          if (sum > this.getData('createCount') * 15) {
            this.$message.error('最多选择' + this.getData('createCount') * 15 + '个素材')
            this.checkVideo = []
            this.sumContent = this.sumContent - 15

            // if (this.active == 0) {
              this.checkVideoAll[this.ipagination.current - 1] = this.checkVideo
            // } else if (this.active == 1) {
            //   this.checkVideoWai[this.ipagination.current - 1] = this.checkVideo
            // }
          }
        }
      }else{
        if (sum > this.getData('createCount')*this.getData('imageCount')) {
          this.$message.error('最多选择'+this.getData('createCount')*this.getData('imageCount')+'个素材')
          this.checkVideo = []
          this.sumContent-=10
          // if (this.active == 0) {
            this.checkVideoAll[this.ipagination.current - 1] = this.checkVideo
          // } else if (this.active == 1) {
            // this.checkVideoWai[this.ipagination.current - 1] = this.checkVideo
          // }
        }
      }
    },
    setData(data) {
      // if (this.active == 0) {
        for (let i = 0; i < this.ipagination.current; i++) {
          this.checkVideoAll.push([])
        }
        this.checkVideoAll[this.ipagination.current - 1] = data
      // } else if (this.active == 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
      if(this.getData('unitType') == '4'){
        if (this.getData('createType') == '0') {
          if (sum > this.getData('createCount')) {
            this.$message.error('最多选择' + this.getData('createCount') + '个素材')
            this.checkVideo.pop()
            this.sumContent--
            // if (this.active == 0) {
              this.checkVideoAll[this.ipagination.current - 1] = this.checkVideo
            // } else if (this.active == 1) {
            //   this.checkVideoWai[this.ipagination.current - 1] = this.checkVideo
            // }
          }
        } else {
          if (sum > this.getData('createCount') * 15) {
            this.$message.error('最多选择' + this.getData('createCount') * 15 + '个素材')
            this.checkVideo.pop()
            this.sumContent--
            // if (this.active == 0) {
              this.checkVideoAll[this.ipagination.current - 1] = this.checkVideo
            // } else if (this.active == 1) {
              // this.checkVideoWai[this.ipagination.current - 1] = this.checkVideo
            // }
          }
        }
      }else{
        if (sum > this.getData('createCount')*this.getData('imageCount')) {
          this.$message.error('最多选择'+this.getData('createCount')*this.getData('imageCount')+'个素材')
          this.checkVideo.pop()
          this.sumContent--
          // if (this.active == 0) {
            this.checkVideoAll[this.ipagination.current - 1] = this.checkVideo
          // } else if (this.active == 1) {
            // this.checkVideoWai[this.ipagination.current - 1] = this.checkVideo
          // }
        }
      }
      

    },
    getVideoList() {
      this.orderBy = 'time'
      this.visibleMatemal = true
      if (this.checkVideo.length > 0) {
      } else {
        this.showVideo = false
        this.checkVideo = []
      }
      // this.active = 0
      // this.time = []
      // this.channelType = 0
      this.creativeMaterialType = this.getData('creativeMaterialType')
      this.searchVideo()

      // this.getAction('/kuaishou/kuaiShouVideoGet/getBatchV2VideoList', {accountId:10168379}).then(res=>{
      //   console.log(res)
      // })
      // this.getAction('/kuaishou/kuaiShouVideoGet/getVideoListByCostType', {accountId:10168379,costType:1}).then(res=>{
      //   console.log(res)
      // })
    },
    getDataSource(page, pageSize) {
      console.log(this.checkVideo, this.checkVideoAll)
      this.checkVideo = this.checkVideoAll[page-1]
      this.ipagination.current = page
      this.searchVideo()
    },
    cancelAll() {
      // this.checkVideoAll = []
      // this.checkVideoWei = []
      this.ipagination.current = 1
      this.mediaDimension = 'a'
      this.time = []
      this.costType = 1
      this.photoId = ''
      this.photoName = ''
      this.visibleMatemal = false
      this.md5Str = ""
    },
    handleOkShow() {
      // this.checkVideoAll = [...new Set(this.checkVideoAll)]
      var data = tqFun(this.checkVideoAll).concat(tqFun(this.checkVideoWai))
      this.checkVideo = data
      // console.log(this.checkVideoAll, this.checkVideo)
      for (let i = 0; i < this.checkVideo.length; i++) {
        this.setVideUrl(this.checkVideo[i])
        if (i == this.checkVideo.length - 1) {
          this.showVideo = true
          this.visibleMatemal = false
          this.cancelAll()
        }
      }
    },
    callback(key) {
      this.channelType = key
      this.checkVideo = []
      this.ipagination.current = 1
      this.time = []
      if (key == 0) {
        this.checkVideo = this.checkVideoAll[this.ipagination.current - 1]
      } else if (key == 1) {
        this.checkVideo = this.checkVideoWai[this.ipagination.current - 1]
      }
    },
    changeType() {
      this.$nextTick(() => {
        if (this.getData('creativeMaterialType') == '1') {
          if(this.getData('unitType') == '4') {
            this.form.setFieldsValue({creativeName:'自定义创意_竖版视频'})
          }else{
            this.form.setFieldsValue({creativeName:'程序化创意_竖版视频'})
          }
        } else {
          if(this.getData('unitType') == '4') {
            this.form.setFieldsValue({creativeName:'自定义创意_横版视频'})
          }else{
            this.form.setFieldsValue({creativeName:'程序化创意_横版视频'})
          }
        }
      })
    },
    lookTemplate(accountId, templateId) {
      this.$refs.templateModal.handleOk(localStorage.getItem('campaignAccountId'), templateId, 'look')
    },
    addTemplate(accountId) {
      this.$refs.templateModal.create(localStorage.getItem('campaignAccountId'), 'add')
    },
    getTemplate(accountId) {
      var data = null
      if (accountId) {
        data = accountId
      } else {
        this.templateLoading = true
        data = localStorage.getItem('campaignAccountId')
      }
      getAction('/batch/kuaishouTemplate/getTemplateByAccountId', {
        accountId: data,
      }).then((res) => {
        if (res.success) {
          this.getTemplateList(data)
        }
      })
    },
    getTemplateList(accountId) {
      this.templateList = []
      getAction('/batch/kuaishouTemplate/list', {
        accountId: accountId,
      }).then((res) => {
        if (res.success) {
          this.templateList = res.result.map((item, index) => {
            return {
              ...item,
              key: index,
            }
          })
          this.templateLoading = false
        } else {
          this.templateLoading = false
        }
      })
    },
    convertOk() {
      var dataLink = []
      dataLink = this.convertAllList.filter((item) => {
        return item.convert_id == this.convertId.key
      })
      if (dataLink.length > 0) {
        this.form.setFieldsValue({ clickTrackUrl: dataLink[0].click_url })
        this.convert = false
      }
    },
    showConvert() {
      this.convertChange()
      if (this.campaignType == 2) {
        if (this.getData('appId')) {
          this.convert = true
          if (this.getPlatForm(this.getData('appId')) == 1 || this.getPlatForm(this.getData('appId')) == 2) {
            this.convertType = '3'
          } else {
            this.convertType = '7'
          }
        } else {
          this.$message.error('请选择应用')
        }
      } else {
        this.convert = true
        this.convertType = '1'
      }
      this.getConvertList()
    },
    convertChange() {
      this.convertId = ''
    },
    getConvertList() {
      var params = {}
      params.accountId = localStorage.getItem('campaignAccountId')
      params.type = this.convertType
      getAction('/kuaishou/batch/getConvertList', params).then((res) => {
        if (res.success) {
          this.convertList = res.result.map((item) => {
            return {
              ...item,
              convert_id: item.convert_id + '',
            }
          })
          this.convertAllList.push(...this.convertList)
        }
      })
    },
    getCheck(e) {
      this.checkedTrue = e.target.checked
    },
    addGroup() {
      this.allForm.group.push( {
          bidType: this.campaignBidType == '1'? 12:10,
          // bid: '',
          // cpaBid: '',
          showTipCheck: false,
          deepConversionBidCheck: false,
          // unitName: '',
          unitNameCheck: false,
          deepConversionType: '',
          deepConversionBid: '',
          ocpxActionType: this.campaignBidType == '1'? undefined:2,
        })

     
    },
    resData(index) {
      // this.allForm.group[index].bid = ''
      // this.allForm.group[index].cpaBid = ''
      this.allForm.group[index].showTipCheck = false
      this.allForm.group[index].deepConversionBidCheck = false
      this.allForm.group[index].deepConversionType = ''
      this.allForm.group[index].deepConversionBid = ''
      this.form.setFieldsValue({
        bid: undefined,
      })
      this.form.setFieldsValue({
        cpaBid: undefined,
      })
    },
    removeGroup(index) {
      this.allForm.group.splice(index, 1)
    },
    deep_conversion_bidTip(index) {
      if (
        this.allForm.group[index].deepConversionBid < this.getData('cpaBid')
      ) {
        this.allForm.group[index].deepConversionBidCheck = true
      } else {
        this.allForm.group[index].deepConversionBidCheck = false
      }
    },
    checkGroup(e, index) {
      if (e.target.value != '') {
        getAction('/kuaishou/batch/checkUnitName', {
          campaignId: localStorage.getItem('campaignList'),
          unitName: e.target.value,
        }).then((res) => {
          if (res.success) {
            this.allForm.group[index].unitNameCheck = !res.result
          } else {
            this.allForm.group[index].unitNameCheck = false
          }
        })
      }
    },
    showTip(index) {
      if (this.allForm.group[index].bidType == 1) {
        if (this.getData('bid') < 0.2 || this.getData('bid') > this.maxBid) {
          this.allForm.group[index].showTipCheck = true
        } else {
          this.allForm.group[index].showTipCheck = false
        }
      } else {
        if (this.getData('cpaBid') < 1 || this.getData('cpaBid') > this.maxBid) {
          this.allForm.group[index].showTipCheck = true
        } else {
          this.allForm.group[index].showTipCheck = false
        }
      }
    },
    getScheduleTime(item) {
      this.allForm.scheduleTimeData = item
    },
    setTime(e) {
      if (e.target.value == '2') {
        this.timeRange[0] = moment().startOf('day')
        this.timeRange[1] = moment().add(1, 'months')
      }
    },
    setTimeAll(e) {
      if (e.target.value == '2') {
        this.$nextTick(() => {
          this.$refs.selectCheck.init()
        })
      } else {
      }
    },
    getData(className) {
      return this.form.getFieldValue(className)
    },
    bidCheck(rule, value, callback) {
      if (value < 0.2) {
        callback('不得低于0.2元')
      } else {
        callback()
      }
    },
    cpaBidCheck(rule, value, callback) {
      if (value < 0.1) {
        callback('不得低于0.1元')
      } else {
        callback()
      }
    },
    handleConfirmValue(rule, value, callback) {
      if (value != '' && value != undefined) {
        getAction('/kuaishou/batch/checkUnitName', {
          campaignId: localStorage.getItem('campaignList'),
          unitName: value + '_0',
        }).then((res) => {
          if (res.success) {
            if (!res.result) {
              callback('广告组名称重复')
            } else {
              callback()
            }
          } else {
            callback()
          }
        })
      } else {
        callback()
      }
    },
    budgetValue(rule, value, callback) {
      if (value < 100 || value > 100000000) {
        callback('不小于100，不超过100000000，仅支持输入自然数')
      }
      callback()
    },
    handleConfirmBid(rule, value, callback) {
      if (this.bid == 0 || this.bid <= 0.2 || this.bid >= 100) {
        callback('不得低于0.2元，不得高于100元')
      }
      callback()
    },

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

    addApplication() {
      this.tongbuLoading = true
      // this.$refs.application.showApplication()
      getAction('/kuaishou/batch/syncAppList', {
        accountId: localStorage.getItem('campaignAccountId'),
      }).then((res) => {
        if (res.success) {
          this.tongbuLoading = false
          this.$message.success(res.message)
          this.getAppList()
        } else {
          this.tongbuLoading = false
          this.$message.error(res.message)
        }
      })
    },
    handleOk() {
      var that = this

      this.$bus.$emit('remove', '/creat/creatUnit')
      this.$router.replace({
        path: '/batchCreation/campaignList',
      })
    },
    handleCancel(e) {
      this.visible = false
    },
    handleSubmit(e) {
      e.preventDefault()
      if (
        this.checkVideo.length <
        (this.getData('unitType')=='4'?this.getData('createType') == '0' ? this.getData('createCount') : this.getData('createCount') * 15:
        this.getData('createCount')*this.getData('imageCount'))
      ) {
        // this.$message.error('选择的素材不能小于创建条数')
        this.getData('unitType')=='4'?
        this.getData('createType') == '0'
          ? this.$message.error('选择的素材不能小于创建条数')
          : this.$message.error('选择的素材不能小于创建条数*15'):
          this.$message.error('选择的素材不能小于创建条数*'+this.getData('imageCount'))
      } else {
        let isNotComplete = this.descriptionList.findIndex(item => {
            return item.value === ''
        })
        if (isNotComplete > -1) {
            this.$message.error('广告语未填')
            return
        }
        if(this.getData('unitType')=='7'&&this.descriptionList.length<3){
          this.$message.error('程序化创意广告语最少三条')
          return
        }
        this.form.validateFieldsAndScroll((err, values) => {
          if (!err) {
            this.loading = true
            var groupArr = this.allForm.group.map((item) => {
              return {
                ...item,

                deepConversionBid: item.deepConversionBid != '' ? item.deepConversionBid * 1000 : '',
                ocpxActionType: item.ocpxActionType,
                bidType: item.bidType == 1 ? 2 : item.bidType,
              }
            })
            
            var json = {
              ...values,
              cpaBid: values.cpaBid && values.cpaBid != '' ? values.cpaBid * 1000 : null,
              bid: values.bid && values.bid != '' ? values.bid * 1000 : null,
              convertId: this.convertId ? this.convertId.key : null,
              dayBudget: values.dayBudget * 1000,
              photoArr: this.checkVideo,
              creativeCategory: values.creativeCategory
                ? values.creativeCategory[values.creativeCategory.length - 1]
                : null,
              unitType: values.unitType,
            }
            var params = {
              userId: this.userInfo().id,
              ...json,
              ...groupArr[0],
              description:JSON.stringify(this.descriptionList.map(item=>{return item.value})),
              accountId: localStorage.getItem('campaignAccountId'),
              campaignId: localStorage.getItem('campaignList'),
              beginTime: moment(this.timeRange[0]).format('YYYY-MM-DD'),
              endTime: this.allForm.time == '2' ? moment(this.timeRange[1]).format('YYYY-MM-DD') : '',
              appStore: values.useAppMarket == true ? this.allForm.appStore : null,
              useAppMarket: values.useAppMarket ? 1 : 0,
              sceneId: this.allForm.allianceAccount == '1' ? this.allForm.sceneId : [5],
              scheduleTime:
                this.allForm.scheduleTime == '2'
                  ? this.allForm.scheduleTimeData
                  : '000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000',
            }
            if(!!this.outerShowId){
              params.libraryId = this.libraryId
              params.outerId = this.outerShowId.split('@')[0]
              params.productId = this.outerShowId.split('@')[1]
              params.detailUnitType = this.campaignType == '2'?0:this.campaignType == '5'?1:this.campaignType == '7'?2:0
            }
            postAction('/batch/kuaiShouGroupTemplate/submitUnitTask', params).then((res) => {
              this.loading = false
              if (res.success) {
                this.visible = true
                this.allForm.fail = res.result.code
                this.allForm.success = res.result.size
              } else {
                this.$message.error(res.message)
              }
            })
          }
        })
      }
    },
    onChange(value) {
      // console.log(value)
    },
    changeUnitType(e){
      this.sumContent = 0
      this.videoList = []
      this.checkVideo = []
      this.checkVideoAll = []
      this.ipagination.pageSize = 10
      this.$nextTick(()=>{
        if (this.getData('creativeMaterialType') == '1') {
          if(this.getData('unitType') == '4') {
            this.form.setFieldsValue({creativeName:'自定义创意_竖版视频'})
          }else{
            this.form.setFieldsValue({creativeName:'程序化创意_竖版视频'})
          }
        } else {
          if(this.getData('unitType') == '4') {
            this.form.setFieldsValue({creativeName:'自定义创意_横版视频'})
          }else{
            this.form.setFieldsValue({creativeName:'程序化创意_横版视频'})
          }
        }
        // if(e.target.value == '4') {
        //   this.form.setFieldsValue({creativeName:'自定义创意_竖版视频'})
        // }else{
        //   this.form.setFieldsValue({creativeName:'程序化创意_竖版视频'})
        // }
      })
      
    },
    handleChange(value) {
      //   this.$refs.population.getAppList(value)
      this.getSiteList(value)
      this.getOcpxActionList(value)
    },
    handleChangeMould(value) {
      if (value) {
        this.populationData = JSON.parse(
          this.dataList.filter((item) => {
            return item.id == value
          })[0].templateContent
        )
      } else {
        this.populationData = {}
      }
    },
    getPlatForm(appId) {
      if (appId) {
        var data = this.appList.filter((item) => {
          return item.appId == appId
        })
        return data[0].platform
      }
    },
    handleBlur() {
      // console.log('blur')
    },
    handleFocus() {
      // console.log('focus')
    },
    getPageSize(data) {
      if (data.target.value == '0') {
        this.ipagination.pageSize = 5
      } else if (data.target.value == '1') {
        this.ipagination.pageSize = 15
      }
      this.videoList = []
      this.checkVideo = []
      this.checkVideoAll = []
      this.checkVideoWai = []

      this.sumContent = 0
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    prevStep() {
      this.$emit('prevStep', this.campaignId ? this.campaignId : localStorage.getItem('campaignList'))
    },
    getMould() {
      let params = {}
      params.accountId = localStorage.getItem('campaignAccountId')
      getAction('/kuaishou/batch/getDirectionalTemplate', params).then((res) => {
        // console.log(res)
        if (res.success) {
          this.dataList = res.result.map((item, index) => {
            return {
              ...item,
              key: index,
            }
          })
        }
      })
    },

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

    getCampaignList() {
      var params = {}
      params.accountId = localStorage.getItem('campaignAccountId')
      params.campaignId = this.campaignId ? this.campaignId : localStorage.getItem('campaignList')
      getAction('/kuaishou/batch/getCampaignList', params).then((res) => {
        if (res.success) {
          this.campaignType = res.result.records[0].campaignType
          // console.log(this.campaignType)
        }
      })
    },
    getData(className) {
      return this.form.getFieldValue(className)
    },
    showVideoList(url, params) {
      this.dataSource = []
      this.loadingVideoList = true
      getAction(url, params).then((res) => {
        // console.log(res)
        if (res.success) {
          this.dataSource = res.result.list
          this.ipagination.total = res.result.total
          this.loadingVideoList = false
        } else {
          this.loadingVideoList = false
        }
      })
    },
    getSiteList(appId) {
      getAction('/kuaishou/batch/getPageList', {
        accountId: localStorage.getItem('campaignAccountId'),
        appId: appId,
        viewComp: 7,
      }).then((res) => {
        if (res.success) {
          this.siteList = res.result
          if (this.siteList.length > 0) {
            this.showSite = true
          }
        } else {
          this.showSite = false
        }
      })
    },
    getChangeAll(type, form, field) {
      this.showNumber = false
      this.showNumber = true
      var node = document.getElementById(field)
      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[form].setFieldsValue({ unitName: sel.text })
          }
      } 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[form].setFieldsValue({ unitName: node.value })
          }
          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[form].setFieldsValue({ unitName: node.value })
          }
          node.focus()
          // this.campaignName = node.value
      }
    },
    getIsActivate(val){
      let params={};
      params.accountId=localStorage.getItem('campaignAccountId');
      params.campaignType=localStorage.getItem('campaignType');
      params.appId=val
      
      getAction('/kuaishou/batch/getIsActivate',params).then(res => {
          if (res.success) {
              this.allForm.groupTypeData = res.result
          }
      })
    },
    getProductList(){
      postAction('/batch/kuaiShouGroupTemplate/productList',{
        accountId: localStorage.getItem('campaignAccountId'),
        libraryId: this.libraryId,
        libraryName:this.libraryName,
        page:this.libraryPage.current,
        pageSize:this.libraryPage.pageSize
      }).then(result=>{
        if(result.code == 0){
          this.libraryVisible = true
          this.libraryList = result.data.details
          this.libraryPage.total = result.data.total_count
          if(!!this.outerShowId){
            this.outerId = this.outerShowId
          }
        }
      })
    },
    
  },
  watch: {
    timeSeries(val) {
      // console.log(val)
    },
    checkVideo(n, o) {},
    checkVideoAll(n, o) {
      // this.checkVideoAll = [...new Set(n)]
      // console.log(n,o)
      // this.checkVideo = [...new Set(n)]
    },
    time(n, o) {
      if(this.visibleMatemal){
        this.searchVideo()
      }
      
      // if (n.length > 0) {
      //   var params = {}
      //   params.accountId = localStorage.getItem('campaignAccountId')
      //   params.materialType = this.creativeMaterialType
      //   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 = this.orderBy
      //   params.signatures = this.md5Str
      //   this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
      // } else {
      //   var params = {}
      //   params.accountId = localStorage.getItem('campaignAccountId')
      //   params.materialType = this.creativeMaterialType
      //   params.pageSize = this.ipagination.pageSize
      //   params.pageNo = 1
      //   params.status = 0
      //   params.channelType = this.channelType
      //   params.orderBy = this.orderBy
      //   params.signatures = this.md5Str
      //   this.ipagination.current = 1
      //   this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
      // }
    },
  },
  created(){
    this.campaignBidType = localStorage.getItem('campaignBidType')
  },
  mounted: function () {
    
    this.getOcpxActionList()
    // this.getDeepTypesList(2)
    this.step = localStorage.getItem('step')
    this.getTemplate(localStorage.getItem('campaignAccountId'))
    this.getAppList()
    // this.getCampaignList()
    this.campaignType = localStorage.getItem('campaignType')
    
    this.getMould()
    this.addGroup()
    getAction('/kuaishou/batch/getWhiteList', {
      accountId: localStorage.getItem('campaignAccountId'),
    }).then((res) => {
      if (res.success) {
        // console.log(res)
        if (res.result) {
          this.creativeCategorySwitch = res.result.creative_category_switch == 1 ? true : false
          this.allianceAccount = res.result.alliance_account == 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.allianceAccount = false
          this.creativeCategorySwitch = false
          this.actionbarClickUrlSwitch = false
        }
      }
    })
    getAction('/kuaishou/batch/getProjectMaxBid', {
      accountId: localStorage.getItem('campaignAccountId'),
    }).then((res) => {
      if (res.success) {
        this.maxBid = res.result / 1000
      }
    })

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

    getAction('/kuaishou/batch/getCreativeCategory', {
      accountId: localStorage.getItem('campaignAccountId'),
    }).then((res) => {
      if (res.success) {
        // console.log(res)
        this.createOptions = res.result
      }
    })

    getAction('/batch/kuaiShouGroupTemplate/getApiCreateCount', {
      accountId: localStorage.getItem('campaignAccountId'),
    }).then((res) => {
      this.createCount = res.result
    })

    postAction('/batch/kuaiShouGroupTemplate/getLibraryConfig',{
      accountId: localStorage.getItem('campaignAccountId'),
    }).then(res=>{
      if(res.success){
        this.isLibrary = res.result.isLibrary
        this.libraryId = res.result.libraryId

      }
    })
  },
}
</script>

<style type="text/css" scoped lang="scss">
.width-video {
  width: calc(20% - 10px);
  margin-right: 10px;
  margin-bottom: 10px;
}
.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;
}
.actor-photo-list {
  display: flex;
  padding-left: 0;

  li {
    width: 25%;
    margin: 10px;
    position: relative;
    height: 250px;
    border: 1px solid #f2f2f2;
    list-style: none;
    img,
    video {
      width: 100%;
      margin-top: auto;
      margin-bottom: auto;
      top: 0;
      bottom: 0;
      position: absolute;
      max-height: 250px;
    }
  }
}
.plug-timer-grid {
  width: 100%;
}

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

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

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

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

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

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

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

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