<template>
  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
    <a-form @submit="handleSubmit" :form="form">
      <a-form-item label="选择头条账户" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-select
          v-model="accountId"
          showSearch
          placeholder="选择头条账户"
          optionFilterProp="children"
          style="width: 200px"
          :filterOption="filterOption"
        >
          <a-select-option
            v-for="user in userList"
            :key="user.accountId"
            :value="user.accountId"
          >{{user.authName}}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="选择广告组模板" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-select
          v-model="campaignId"
          showSearch
          placeholder="选择广告主模板"
          optionFilterProp="children"
          style="width: 200px"
          :filterOption="filterOption"
        >
          <a-select-option
            v-for="campaign in campaignList"
            :key="campaign.id"
            :value="campaign.id"
          >{{campaign.campaignName}}</a-select-option>
        </a-select>
      </a-form-item>

      <!--<a-form-item
        label="选择用户定向模板"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <a-select
          v-model="userorentationId"
          showSearch
          placeholder="选择用户定向模板"
          optionFilterProp="children"
          style="width: 200px"
          :filterOption="filterOption"
        >
          <a-select-option value="0">默认</a-select-option>
        </a-select>
      </a-form-item>-->

      <a-form-item label="选择预算与出价模板" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-select
          v-model="budgetId"
          showSearch
          placeholder="选择预算与出价模板"
          optionFilterProp="children"
          style="width: 200px"
          :filterOption="filterOption"
        >
          <a-select-option
            v-for="budget in budgetList"
            :key="budget.id"
            :value="budget.id"
          >{{budget.name}}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="选择投放目标模板" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-select
          v-model="deliverytargetId"
          showSearch
          placeholder="选择投放目标模板"
          optionFilterProp="children"
          style="width: 200px"
          :filterOption="filterOption"
          @change="changedeliveryTarget"
        >
          <a-select-option
            v-for="deliverytarget in deliverytargetList"
            :key="deliverytarget.id"
            :value="deliverytarget.id"
          >{{deliverytarget.name}}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        v-if="showConvertTarget"
        label="选择转化跟踪方式"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-select
          v-model="convertType"
          showSearch
          placeholder="选择投放目标模板"
          optionFilterProp="children"
          style="width: 200px"
          :filterOption="filterOption"
          @change="changeConvertType"
        >
          <a-select-option v-if="showSimple" value="SIMPLE">普通应用下载</a-select-option>
          <a-select-option value="API">应用下载API</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        v-if="showConvertTarget&&showConvertTargetSimple"
        label="选择转化目标"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-select
          v-model="simpleDeliverytarget"
          showSearch
          placeholder="选择转化目标"
          optionFilterProp="children"
          style="width: 200px"
          :filterOption="filterOption"
        >
          <a-select-option value="AD_CONVERT_TYPE_INSTALL_FINISH">安装完成</a-select-option>
          <a-select-option value="AD_CONVERT_TYPE_DOWNLOAD_FINiSH">下载完成</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        v-if="showConvertTarget&&showConvertTargetApi"
        label="选择转化目标"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-select
          v-model="convertId"
          showSearch
          placeholder="选择转化目标"
          optionFilterProp="children"
          style="width: 800px"
          :filterOption="filterOption"
        >
          <a-select-option
            v-for="activeConvert in activeConvertList"
            :key="activeConvert.id"
            :value="activeConvert.id"
          >{{activeConvert.name}}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="广告创意名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-input v-model="name"></a-input>
      </a-form-item>

      <a-form-item label="广告位置" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-radio-group v-model="advertiseLocation" @change="changeLoaction">
          <a-radio-button value="great">优选广告位</a-radio-button>
          <a-radio-button value="media">按媒体指定位置</a-radio-button>
          <a-radio-button value="sence">按场景指定位置</a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="媒体指定" v-if="showMedia" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-checkbox-group v-model="inventoryType">
          <a-checkbox value="INVENTORY_FEED">今日头条</a-checkbox>
          <a-checkbox value="INVENTORY_VIDEO_FEED">西瓜视频</a-checkbox>
          <a-checkbox value="INVENTORY_HOTSOON_FEED">火山小视频</a-checkbox>
          <a-checkbox value="INVENTORY_AWEME_FEED">抖音</a-checkbox>
          <a-checkbox value="INVENTORY_UNION_SLOT">穿山甲</a-checkbox>
        </a-checkbox-group>
      </a-form-item>

      <a-form-item label="场景选择" v-if="showSence" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-radio-group v-model="sceneInventory">
          <a-radio-button value="VIDEO_SCENE">沉浸式竖版视频场景广告位</a-radio-button>
          <a-radio-button value="FEED_SCENE">信息流场景广告位</a-radio-button>
          <a-radio-button value="TAIL_SCENE">视频后贴和尾帧场景广告位</a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="创意方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-radio-group v-model="creativeType">
          <a-radio-button value="customize">自定义创意</a-radio-button>
          <a-radio-button value="program">程序化创意</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="素材添加方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-radio-group v-model="materialAddType">
          <a-radio-button value="customize">自定义上传</a-radio-button>
          <a-radio-button value="program">程序化创意</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <material :creativeType.sync="creativeType" :accountId.sync="accountId" ref="material"></material>
      <a-form-item label="应用下载详情页" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-input v-model="webUrl"></a-input>
      </a-form-item>
      <a-form-item label="应用名" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-input v-model="appName"></a-input>
      </a-form-item>
      <a-form-item label="广告评论" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-radio-group v-model="isCommentDisable ">
          <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="labelCol" :wrapperCol="wrapperCol">
        <a-radio-group v-model="creativeDisplayMode">
          <a-radio-button value="CREATIVE_DISPLAY_MODE_CTR">优选模式</a-radio-button>
          <a-radio-button value="CREATIVE_DISPLAY_MODE_RANDOM">轮播模式</a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="创意分类" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-cascader
          :options="options"
          width="200px"
          v-model="adCategory"
          @change="onChange"
          placeholder="请选择分类"
        />
      </a-form-item>

      <a-form-item label="创意标签" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-select mode="tags" style="width: 100%" :tokenSeparators="[' ']" v-model="adKeywords"></a-select>
      </a-form-item>

      <a-form-item label="迭代数量" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-input-number :min="0" :max="10" v-model="iteratorNum" />
      </a-form-item>

      <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
        <a-button htmlType="submit" type="primary">提交</a-button>
        <a-button style="margin-left: 8px">保存</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
import UploadToAli from '@femessage/upload-to-ali'
import { postAction, getAction, getPackage } from '@/api/manage'
import moment from 'moment'
import AFormItem from 'ant-design-vue/es/form/FormItem'
import material from './modules/material'
import $ from 'jquery'

export default {
  name: 'BaseForm',
  data() {
    return {
      previewVisible: false,
      previewImage: '',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      fileList: [],
      multiple: [],
      activeConvertList: [],
      showConvertTarget: false,
      convertType: '',
      simpleDeliverytarget: '',
      convertId: '',
      showSimple: true,
      showConvertTargetSimple: false,
      showConvertTargetApi: false,
      campaignList: {},
      deliverytargetList: {},
      userList: {},
      userorentationList: {},
      budgetList: {},
      deliveryRange: 'DEFAULT',
      campaignId: null,
      deliverytargetId: null,
      budgetId: null,
      userorentationId: null,
      adCategory: null,
      showLargeImage: false,
      showLargeVerticalImage: false,
      showHorizonVideo: false,
      showVerticalVideo: false,
      showGroupImage: false,
      showSmallImage: false,
      horizonImageUrl: '',
      horizonImageCreativeText: '',
      horizonVideoUrl: '',
      horizonVideoCoverImageUrl: '',
      horizonVideoCreativeText: '',
      verticalVideoUrl: '',
      verticalVideoCoverImageUrl: '',
      verticalVideoCreativeText: '',
      groupImageUrl: '',
      groupImageCreativeText: '',
      smallImageUrl: '',
      smallImageCreativeText: '',
      verticalImageUrl: '',
      verticalImageCreativeText: '',
      accessKeyId: 'LTAIbNbqWzSOklQV',
      accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
      bucket: 'ctop-media',
      region: 'oss-cn-beijing',
      acceptImage: 'image/jpeg,image/png',
      acceptVideo: 'video/mpeg,video/mp4',
      customDomain: '',
      options: [],
      adKeywords: [],
      userList: {},
      accountId: '',
      planList: {},
      planId: '',
      advertiseLocation: 'great',
      showMedia: false,
      showSence: false,
      inventoryType: [],
      sceneInventory: 'FEED_SENCE',
      creativeType: 'customize',
      materialAddType: 'customize',
      materialType: 'CREATIVE_IMAGE_MODE_LARGE',
      webUrl: '',
      appName: '',
      name: '',
      advancedCreativeTitle: '',
      isCommentDisable: '1',
      creativeDisplayMode: 'CREATIVE_DISPLAY_MODE_CTR',
      loading: false,
      iteratorNum: 1,
      creativeText: '',
      form: this.$form.createForm(this),
      url: {
        userAllocationList: '/template/allocation/list',
        insertUrl: '/template/creative/insert',
        industryListUrl: '/template/bytedance/industry/list',
        campaignListUrl: '/template/campaign/list',
        budgetTemplateListUrl: '/template/budget/list',
        deliverytargetTemplateListUrl: '/template/deliverytarget/list',
        userorentationTemplateListUrl: '/template/userorentation/list',
        deliverytargetTemplateGetUrl: '/template/deliveryTarget/get',
        convertList: 'template/convert/list'
      },

      // 创建大图横图创意
      createLargeImageCreativeCon: true,
      HorizontalLargeImageList: [],
      HorizontalLargeImageListBig: [],
      HorizontalLargeImageListHeng: [],
      HorizontalLargeImageListShu: [],
      HorizontalLargeImageListZu: [],
      HorizontalLargeImageListSmall: [],
      HorizontalLargeImageListBigShu: [],
      horizonImageUrlColl: [], // 大图横图图片素材集合
      horizonImageCreativeTextColl: [], // 创意标题集合
      itemIndex: null,
      tags: [],
      range: null,
      countTag: 0,
      titleData: [{ text: '', showElse: true, titleMany: 0 }]
    }
  },
  components: {
    AFormItem,
    UploadToAli,
    material
  },
  methods: {
    handleCancel() {
      this.previewVisible = false
    },
    handlePreview(file) {
      this.previewImage = file.url || file.thumbUrl
      this.previewVisible = true
    },
    handleChange({ fileList }) {
      this.fileList = fileList
    },
    judge(item) {
      var left = item.text.split('{')
      var right = item.text.split('}')
      console.log(left)
      if (item.countTag == 0) {
        return
      } else {
        if (left.length != 3 && right.lenght != 3) {
          item.countTag -= 1
        }
      }
    },
    getChange(item, tag, index) {
      item.countTag++
      if (item.text == '') {
        item.countTag = 0
      }
      if (item.countTag >= 2) {
        this.$message.error('最多插入两条词包')
        item.countTag = 2
        return
      }
      var node = document.getElementsByClassName('rending')[index]
      var v = '{' + tag.name + '}'
      if (document.selection) {
        //IE
        node.focus()
        var sel = document.selection.createRange()
        sel.text = v
        sel.select()
      } 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
        }
        item.text = node.value
        node.focus()
        node.selectionStart = startPos + v.length
        node.selectionEnd = startPos + v.length
      } else {
        //OTHER
        node.value += v
        item.text = node.value
        node.focus()
      }
    },
    getChangeAllTitle(item, tag, index) {
      item.titleMany++
      if (item.text == '') {
        item.titleMany = 0
      }
      if (item.titleMany >= 2) {
        this.$message.error('最多插入两条词包')
        item.titleMany = 2
        return
      }
      var node = document.getElementsByClassName('rending-all')[index]
      var v = '{' + tag.name + '}'
      if (document.selection) {
        //IE
        node.focus()
        var sel = document.selection.createRange()
        sel.text = v
        sel.select()
      } 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
        }
        item.text = node.value
        node.focus()
        node.selectionStart = startPos + v.length
        node.selectionEnd = startPos + v.length
      } else {
        //OTHER
        node.value += v
        item.text = node.value
        node.focus()
      }
    },
    showElseClick(item) {
      item.showElse = !item.showElse
      if (!item.showElse) {
        item.many = this.tags.length
      } else {
        item.many = 3
      }
    },
    handleChangeText(value, option) {
      console.log(`selected ${value}`)
      this.HorizontalLargeImageList[this.itemIndex].text += value.join()
    },
    getIndex(item, index) {
      this.itemIndex = index
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    refreshConvertApiId() {
      let params = {}
      getAction(
        this.url.convertList + '?accountId=' + this.accountId + '&targetId=' + this.deliverytargetId,
        params
      ).then(res => {
        console.log(res)
        if (res.code == 0) {
          this.activeConvertList = res.data.active_convert_list
        } else {
          this.$message.error(res.message)
        }
      })
    },
    changedeliveryTarget() {
      //切换投放目标模板
      this.convertType = null
      this.simpleDeliverytarget = null
      this.activeConvertList = []
      let param = {}
      var targetId = this.deliverytargetId
      getAction(this.url.deliverytargetTemplateGetUrl + '?targetId=' + targetId, param).then(res => {
        if (res.success) {
          console.log(res.data)
          if (res.data.deliveryTarget == 'CONVERSION') {
            this.showConvertTarget = true
          } else {
            this.showConvertTarget = false
          }
          //下载链接
          if (res.data.downloadType == 'DOWNLOAD_URL') {
            this.showSimple = true
          } else {
            //落地页
            this.showSimple = false
          }
        }
      })
    },
    changeConvertType() {
      if (this.convertType == 'SIMPLE') {
        this.showConvertTargetSimple = true
        this.showConvertTargetApi = false
      } else {
        this.refreshConvertApiId()
        this.showConvertTargetSimple = false
        this.showConvertTargetApi = true
      }
    },
    materialTypeChange() {
      let type = this.materialType
      if (type === 'CREATIVE_IMAGE_MODE_SMALL') {
        // this.createLargeImageCreativeCon = false
        this.showLargeImage = false
        this.showLargeVerticalImage = false
        this.showHorizonVideo = false
        this.showVerticalVideo = false
        this.showGroupImage = false
        this.showSmallImage = true
        this.HorizontalLargeImageList = this.HorizontalLargeImageListSmall
      }
      if (type === 'CREATIVE_IMAGE_MODE_LARGE') {
        // this.createLargeImageCreativeCon = true
        this.showLargeImage = false
        this.showLargeVerticalImage = false
        this.showHorizonVideo = false
        this.showVerticalVideo = false
        this.showGroupImage = false
        this.showSmallImage = false
        this.HorizontalLargeImageList = this.HorizontalLargeImageListBig
      }
      if (type === 'CREATIVE_IMAGE_MODE_GROUP') {
        // this.createLargeImageCreativeCon = false
        this.showLargeImage = false
        this.showLargeVerticalImage = false
        this.showHorizonVideo = false
        this.showVerticalVideo = false
        this.showGroupImage = true
        this.showSmallImage = false
        this.HorizontalLargeImageList = this.HorizontalLargeImageListZu
      }
      if (type === 'CREATIVE_IMAGE_MODE_VIDEO') {
        // this.createLargeImageCreativeCon = false
        this.showLargeImage = false
        this.showLargeVerticalImage = false
        this.showHorizonVideo = true
        this.showVerticalVideo = false
        this.showGroupImage = false
        this.showSmallImage = false
        this.HorizontalLargeImageList = this.HorizontalLargeImageListShu
      }
      if (type === 'CREATIVE_IMAGE_MODE_LARGE_VERTICAL') {
        // this.createLargeImageCreativeCon = false
        this.showLargeImage = false
        this.showLargeVerticalImage = true
        this.showHorizonVideo = false
        this.showVerticalVideo = false
        this.showGroupImage = false
        this.showSmallImage = false
        this.HorizontalLargeImageList = this.HorizontalLargeImageListBigShu
      }
      if (type === 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
        // this.createLargeImageCreativeCon = false
        this.showLargeImage = false
        this.showLargeVerticalImage = false
        this.showHorizonVideo = false
        this.showVerticalVideo = true
        this.showGroupImage = false
        this.showSmallImage = false
        this.HorizontalLargeImageList = this.HorizontalLargeImageListHeng
      }
    },
    moment,
    changeLoaction() {
      if (this.advertiseLocation === 'great') {
        this.showMedia = false
        this.showSence = false
      }
      if (this.advertiseLocation === 'media') {
        this.showMedia = true
        this.showSence = false
      }
      if (this.advertiseLocation === 'sence') {
        this.showMedia = false
        this.showSence = true
      }
    },
    // this.$message.success(`${info.file.name} 文件上传成功`);
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
          let params = {};
          params.campaignId = this.campaignId;
          params.deliveryRange = this.deliveryRange;
          params.userorentationId = this.userorentationId;
          params.budgetId = this.budgetId;
          params.deliverytargetId = this.deliverytargetId;
          params.horizonImageUrl = this.horizonImageUrl;
          params.horizonImageCreativeText = this.horizonImageCreativeText;
          params.horizonVideoUrl = this.horizonVideoUrl;
          params.horizonVideoCoverImageUrl = this.horizonVideoCoverImageUrl;
          params.horizonVideoCreativeText = this.horizonVideoCreativeText;
          params.verticalVideoUrl = this.verticalVideoUrl;
          params.verticalVideoCoverImageUrl = this.verticalVideoCoverImageUrl;
          params.verticalVideoCreativeText = this.verticalVideoCreativeText;
          params.groupImageUrl = this.groupImageUrl;
          params.groupImageCreativeText = this.groupImageCreativeText;
          params.smallImageUrl = this.smallImageUrl;
          params.smallImageCreativeText = this.smallImageCreativeText;
          params.verticalImageUrl = this.verticalImageUrl;
          params.verticalImageCreativeText = this.verticalImageCreativeText;
          params.planId = this.planId;
          params.accountId = this.accountId;
          params.advertiseLocation = this.advertiseLocation;
          params.inventoryType = this.inventoryType;
          params.sceneInventory = this.sceneInventory;
          params.creativeType = this.creativeType;
          params.customize = this.customize;
          params.webUrl = this.webUrl;
          params.appName = this.appName;
          params.isCommentDisable = this.isCommentDisable;
          params.creativeDisplayMode = this.creativeDisplayMode;
          params.adCategory = this.adCategory;
          params.adKeywords = this.adKeywords;
          params.name = this.name;
          params.convertId = this.convertId;
          params.iteratorNum = this.iteratorNum;
          params.simpleDeliverytarget = this.simpleDeliverytarget;
          params.convertType = this.convertType;
          var dataCreatives = this.$refs.material.HorizontalLargeImageListBig.concat(
            this.$refs.material.HorizontalLargeImageListHeng,
            this.$refs.material.HorizontalLargeImageListShu,
            this.$refs.material.HorizontalLargeImageListZu,
            this.$refs.material.HorizontalLargeImageListSmall,
            this.$refs.material.HorizontalLargeImageListBigShu
          )
          console.log(dataCreatives)
          params.creatives = dataCreatives
          if (this.creativeType == 'program') {
              
            //   params.titles = this.titleData
            params.titles = this.$refs.material.titleData
          }

          console.log(params)
          postAction(this.url.insertUrl, params).then(res => {
            console.log(res)
            if (res.success) {
              alert('广告创意批量创建成功')
            } else {
              alert(res.message)
            }
          })
        }
      })
    },
    onChange(value) {
      console.log(value)
      console.log(this.HorizontalLargeImageListSmall)
      console.log(this.HorizontalLargeImageListBig)
      console.log(this.HorizontalLargeImageListZu)
    },
    //   创建大图横图创意
    addCreative() {
      let type = this.materialType
      if (type === 'CREATIVE_IMAGE_MODE_SMALL') {
        this.HorizontalLargeImageListSmall.push({
          typeCode: type,
          imageUrl: '',
          text: '',
          vadioUrl: '',
          multiple: [],
          countTag: 0,
          many: 3,
          showElse: true
        })
        this.HorizontalLargeImageList = this.HorizontalLargeImageListSmall
      }
      if (type === 'CREATIVE_IMAGE_MODE_LARGE') {
        this.HorizontalLargeImageListBig.push({
          typeCode: type,
          imageUrl: '',
          text: '',
          vadioUrl: '',
          multiple: [],
          countTag: 0,
          many: 3,
          showElse: true
        })
        this.HorizontalLargeImageList = this.HorizontalLargeImageListBig
      }
      if (type === 'CREATIVE_IMAGE_MODE_GROUP') {
        this.HorizontalLargeImageListZu.push({
          creativeType: this.creativeType,
          typeCode: type,
          imageUrl: '',
          text: '',
          vadioUrl: '',
          multiple: [],
          countTag: 0,
          many: 3,
          showElse: true
        })
        this.HorizontalLargeImageList = this.HorizontalLargeImageListZu
      }
      if (type === 'CREATIVE_IMAGE_MODE_VIDEO') {
        this.HorizontalLargeImageListShu.push({
          creativeType: this.creativeType,
          typeCode: type,
          imageUrl: '',
          text: '',
          vadioUrl: '',
          multiple: [],
          countTag: 0,
          many: 3,
          showElse: true
        })
        this.HorizontalLargeImageList = this.HorizontalLargeImageListShu
      }
      if (type === 'CREATIVE_IMAGE_MODE_LARGE_VERTICAL') {
        this.HorizontalLargeImageListBigShu.push({
          creativeType: this.creativeType,
          typeCode: type,
          imageUrl: '',
          text: '',
          vadioUrl: '',
          multiple: [],
          countTag: 0,
          many: 3,
          showElse: true
        })
        this.HorizontalLargeImageList = this.HorizontalLargeImageListBigShu
      }
      if (type === 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
        this.HorizontalLargeImageListHeng.push({
          creativeType: this.creativeType,
          typeCode: type,
          imageUrl: '',
          text: '',
          vadioUrl: '',
          multiple: [],
          countTag: 0,
          many: 3,
          showElse: true
        })
        this.HorizontalLargeImageList = this.HorizontalLargeImageListHeng
      }
    },
    deleteCreative(index) {
      console.log(index)
      console.log(this.HorizontalLargeImageList)
      this.HorizontalLargeImageList.splice(index, 1)
      this.horizonImageCreativeTextColl.splice(index, 1)
      this.range = null
    },
    getTags() {
      getPackage({ accountId: this.accountId }).then(res => {
        if (res.code == '0') {
          this.tags = res.creative_word
        }
      })
    },
    addTitle() {
      this.titleData.push({ text: '', titleMany: 0 })
    },
    tetleDetele(index) {
      this.titleData.splice(index, 1)
    }
  },
  created: function() {
    let params = {}
    postAction(this.url.campaignListUrl, params).then(res => {
      if (res.success) {
        this.campaignList = res.result.records
      }
    })

    params = {}
    params.pageSize = '1000'
    params.mediaId = '1'
    postAction(this.url.userAllocationList, params).then(res => {
      if (res.success) {
        this.userList = res.result.records
      }
    })
    params = {}
    getAction(this.url.industryListUrl, params).then(res => {
      this.options = res
    })

    params = {}
    params.pageSize = '1000'
    postAction(this.url.budgetTemplateListUrl, params).then(res => {
      if (res.success) {
        this.budgetList = res.result.records
      }
    })

    params = {}
    params.pageSize = '1000'
    params.mediaId = '1'
    postAction(this.url.userAllocationList, params).then(res => {
      if (res.success) {
        this.userList = res.result.records
      }
    })

    params = {}
    params.pageSize = '1000'
    postAction(this.url.deliverytargetTemplateListUrl, params).then(res => {
      if (res.success) {
        this.deliverytargetList = res.result.records
      }
    })

    params = {}
    params.pageSize = '1000'
    postAction(this.url.userorentationTemplateListUrl, params).then(res => {
      if (res.success) {
        this.userorentationList = res.result.records
      }
    })
  },
  watch: {
    creativeType: function(n, o) {
      console.log(n, o)
      this.HorizontalLargeImageListBig = []
      this.HorizontalLargeImageListHeng = []
      this.HorizontalLargeImageListShu = []
      this.HorizontalLargeImageListZu = []
      this.HorizontalLargeImageListSmall = []
      this.HorizontalLargeImageListBigShu = []
      this.HorizontalLargeImageList = []
    },
    accountId: function(n, o) {
      this.getTags()
    }
  },
  computed: {
    count: function() {
      var bool
      if (this.creativeType == 'customize') {
        bool =
          this.HorizontalLargeImageListBig.length +
            this.HorizontalLargeImageListHeng.length +
            this.HorizontalLargeImageListShu.length +
            this.HorizontalLargeImageListZu.length +
            this.HorizontalLargeImageListSmall.length +
            this.HorizontalLargeImageListBigShu.length >=
          10
            ? true
            : false
      } else {
        if (
          this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL' ||
          this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO'
        ) {
          bool = this.HorizontalLargeImageListHeng.length + this.HorizontalLargeImageListShu.length >= 12 ? true : false
        } else {
          bool =
            this.HorizontalLargeImageListBig.length +
              this.HorizontalLargeImageListZu.length +
              this.HorizontalLargeImageListSmall.length +
              this.HorizontalLargeImageListBigShu.length >=
            10
              ? true
              : false
        }
      }
      return bool
    },
    countMany: function() {
      var bool =
        this.HorizontalLargeImageListBig.length +
        this.HorizontalLargeImageListHeng.length +
        this.HorizontalLargeImageListShu.length +
        this.HorizontalLargeImageListZu.length +
        this.HorizontalLargeImageListSmall.length +
        this.HorizontalLargeImageListBigShu.length
      return bool
    },
    vadioMany: function() {
      var bool = this.HorizontalLargeImageListHeng.length + this.HorizontalLargeImageListShu.length
      return bool
    },
    imgMany: function() {
      var bool =
        this.HorizontalLargeImageListBig.length +
        this.HorizontalLargeImageListZu.length +
        this.HorizontalLargeImageListSmall.length +
        this.HorizontalLargeImageListBigShu.length
      return bool
    }
  }
}
</script>


<style lang="scss">
.dynamically_add_form_item {
  .ant-form-item-label {
    width: auto !important;
  }
  .ant-form-item-control-wrapper {
    width: auto !important;
  }
}
</style>