<template>
  <a-form :form="form">
    <a-form-item label="选择素材类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-radio-group v-model="materialType" @change="materialTypeChange">
        <a-badge
          :count="HorizontalLargeImageListBig.length"
          :numberStyle="{backgroundColor: '#52c41a'} "
        >
          <a-radio-button value="CREATIVE_IMAGE_MODE_LARGE">大图横图</a-radio-button>
        </a-badge>
        <a-badge
          :count="HorizontalLargeImageListShu.length"
          :numberStyle="{backgroundColor: '#52c41a'} "
        >
          <a-radio-button value="CREATIVE_IMAGE_MODE_VIDEO">横版视频</a-radio-button>
        </a-badge>
        <a-badge
          :count="HorizontalLargeImageListHeng.length"
          :numberStyle="{backgroundColor: '#52c41a'} "
        >
          <a-radio-button value="CREATIVE_IMAGE_MODE_VIDEO_VERTICAL">竖版视频</a-radio-button>
        </a-badge>
        <a-badge
          :count="HorizontalLargeImageListZu.length"
          :numberStyle="{backgroundColor: '#52c41a'} "
          v-if="creativeType=='customize'"
        >
          <a-radio-button value="CREATIVE_IMAGE_MODE_GROUP">组图</a-radio-button>
        </a-badge>
        <a-badge
          :count="HorizontalLargeImageListSmall.length"
          :numberStyle="{backgroundColor: '#52c41a'} "
        >
          <a-radio-button value="CREATIVE_IMAGE_MODE_SMALL">小图</a-radio-button>
        </a-badge> 
        <a-badge
          :count="HorizontalLargeImageListBigShu.length"
          :numberStyle="{backgroundColor: '#52c41a'} "
        >
          <a-radio-button value="CREATIVE_IMAGE_MODE_LARGE_VERTICAL">大图竖图</a-radio-button>
        </a-badge>
      </a-radio-group>
    </a-form-item>
    <!-- 创建大图横图创意 -->
    <a-form-item
      label="创建创意"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
      v-if="createLargeImageCreativeCon"
    >
      <a-layout>
        <a-layout-content style="padding:10px;">
          <div :style="{ marginBottom: '16px' }">
            <a-button @click="addCreative()" :disabled="count">添加创意</a-button>
            <span
              style="color:black;margin-left:10px"
              v-if="creativeType == 'customize'"
            >{{countMany}}/10</span>
            <span
              style="color:black;margin-left:10px"
              v-else-if="creativeType == 'program'"
            >视频数量：{{vadioMany}}/12 图片数量：{{imgMany}}/10</span>
          </div>
          <a-row>
            <a-col :span="8" v-for="(item,index) of HorizontalLargeImageList" :key="index">
              <a-card title :ref="item">
                <a-icon
                  type="close"
                  style="float:right;cursor: pointer;"
                  @click="deleteCreative(index)"
                />
                <div style="clear:both"></div>
                <div class="dynamically_add_form_item">
                  <a-form-item class label="素材上传" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <upload-to-ali
                      v-model="item.vadioUrl"
                      :customDomain="customDomain"
                      preview
                      :region="region"
                      :bucket="bucket"
                      :accept="materialType=='CREATIVE_IMAGE_MODE_VIDEO'||materialType=='CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'?acceptVideo:acceptImage"
                      :size="102400"
                      :accessKeyId="accessKeyId"
                      :accessKeySecret="accessKeySecret"
                    ></upload-to-ali>
                  </a-form-item>

                  <a-form-item
                    label="封面上传"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    v-if="(materialType=='CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'||materialType=='CREATIVE_IMAGE_MODE_VIDEO')"
                  >
                    <upload-to-ali
                      v-model="item.imageUrl"
                      :customDomain="customDomain"
                      preview
                      :region="region"
                      :bucket="bucket"
                      :accept="acceptImage"
                      :size="102400"
                      :accessKeyId="accessKeyId"
                      :accessKeySecret="accessKeySecret"
                    ></upload-to-ali>
                  </a-form-item>

                  <a-form-item
                    label="创意标题"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    v-if="creativeType == 'customize'"
                  >
                    <a-input v-model="item.text" class="rending" @change="judge(item)"></a-input>
                  </a-form-item>
                  <a-form-item
                    label="动态词包"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    v-if="creativeType == 'customize'"
                  >
                    <a-tag
                      v-for="(itemTag,indexTag) of tags"
                      :key="indexTag"
                      v-show="indexTag<item.many"
                      @click="getChange(item,itemTag,index)"
                    >{{itemTag.name}}</a-tag>
                    <span @click="showElseClick(item)">{{item.showElse?"更多":"收起"}}</span>
                  </a-form-item>

                </div>
              </a-card>
            </a-col>
          </a-row>
        </a-layout-content>
      </a-layout>
    </a-form-item>
    <a-form-item
      v-if="creativeType == 'program'"
      label="程序化创意标题"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
    >
      <a-button @click="addTitle">添加创意标题</a-button>
      <br />
      <div v-for="(item,index) of titleData" :key="index">
        <a-input style="width:55%" v-model="item.text" class="rending-all" @change="judge(item)"></a-input>
        <a-icon
          type="delete"
          style="margin-left:20px;cursor: pointer;"
          v-show="titleData.length>1"
          @click="tetleDetele(index)"
        />
        <br />
        <a-tag
          v-for="(itemTag,indexTag) of tags"
          :key="indexTag"
          @click="getChangeAllTitle(item,itemTag,index)"
        >{{itemTag.name}}</a-tag>
      </div>
    </a-form-item>
  </a-form>
</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 $ from 'jquery'
export default {
  name: 'BaseForm',
  props: {
    accountId: {
      default() {
        return ''
      }
    },
    creativeType: {
      type: String,
      default() {
        return 'customize'
      }
    }
  },
  components: {
    AFormItem,
    UploadToAli
  },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      accessKeyId: 'LTAIbNbqWzSOklQV',
      accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
      bucket: 'ctop-media',
      region: 'oss-cn-beijing',
      acceptImage: 'image/jpeg,image/png',
      acceptVideo: 'video/mpeg,video/mp4',
      customDomain: '',
      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'
      },
      materialType: 'CREATIVE_IMAGE_MODE_LARGE',
      // 创建大图横图创意
      createLargeImageCreativeCon: true,
      HorizontalLargeImageList: [],
      HorizontalLargeImageListBig: [],
      HorizontalLargeImageListHeng: [],
      HorizontalLargeImageListShu: [],
      HorizontalLargeImageListZu: [],
      HorizontalLargeImageListSmall: [],
      HorizontalLargeImageListBigShu: [],
      horizonImageUrlColl: [], // 大图横图图片素材集合
      horizonImageCreativeTextColl: [], // 创意标题集合
      itemIndex: null,
      tags: [],
      range: null,
      countTag: 0,
      titleData: [{ text: '', showElse: true, titleMany: 0 }]
    }
  },
  methods: {
    judge(item) {
      var re = /{(.*?)}/g
      var array = []
      var temp
      while ((temp = re.exec(item.text))) {
        array.push(temp[1])
      }
      console.log(array)
      item.countTag = array.length
    },
    getChange(item, tag, index) {
      this.judge(item)
      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) {
      this.judge(item)
      if (item.text == '') {
        item.countTag = 0
      }
      if (item.countTag >= 2) {
        this.$message.error('最多插入两条词包')
        // item.countTag = 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
      }
    },
    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
      }
    },
    //   创建大图横图创意
    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)
    },
    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() {},
  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) {
      if (n != '') {
        this.getTags()
      }
    },
    materialType: function(n, o) {
      this.materialTypeChange()
    }
  },
  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>