<template>
  <div class="input-item material-creat">
    <a-form-item>
      <a-radio-group v-model="materialType" @change="materialTypeChange" style="margin-bottom: 32px;">
        <!-- <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=='customCreativity'">
          <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>
      <div class="bui-tabs-scroll">
        <a-layout
          :style="{ height: '600px',width:'700px',border:'1px solid #ccc',overflow:'auto',padding:'0 15px 10px'}">
          <a-layout-content style="padding:10px;">
            <div :style="{ marginBottom: '16px' }">
              <a-button @click="addCreative()" :disabled="count&&materialType!=undefined">添加创意</a-button>
              <span style="color:black;margin-left:10px"
                v-if="creativeType == 'customCreativity'">{{countMany}}/10</span>
              <span style="color:black;margin-left:10px" v-else>{{countMany}}/12</span>
            </div>
            <a-row>
              <a-col :span="24" 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> -->
                      <!-- <uploadFile :value.sync="item.vadioUrl" :fileCount="1"
                        :uploadType="materialType=='CREATIVE_IMAGE_MODE_VIDEO'||materialType=='CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'?'video':'image'" />
                         -->
                      <a
                        @click="getVideoList(item)">{{materialType=='CREATIVE_IMAGE_MODE_VIDEO'||materialType=='CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'?'选择视频':'选择图片'}}</a>
                      <div>
                        <!-- {{materialType}} -->
                        <video :src="item.videoUrl" style="width:300px"
                          v-show="materialType=='CREATIVE_IMAGE_MODE_VIDEO'&&item.videoUrl"></video>
                        <video :src="item.videoUrl" style="width:120px"
                          v-show="materialType=='CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'&&item.videoUrl"></video>
                      </div>
                    </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 @click="getImageList(item)" >{{item.imageUrl==''?'选择图片':'更改图片'}}</a>
                      <br />
                      <img :src="item.imageUrl" alt="图片加载失败！"  style="width:120px" v-if="item.imageUrl">
                    </a-form-item>

                    <a-form-item label="创意标题" :labelCol="labelCol" :wrapperCol="wrapperCol"
                      v-if="creativeType == 'customCreativity'">
                      <a-input v-model="item.title " style="width:400px" class="rending" @change="judge($event,item)"></a-input>
                    </a-form-item>
                    <a-form-item label="动态词包" :labelCol="labelCol" :wrapperCol="wrapperCol"
                      v-if="creativeType == 'customCreativity'">
                      <!-- {{tags}} -->
                      <!-- v-show="indexTag<item.many" -->
                      <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)" class="moreTags">{{item.showElse?"更多":""}}</span>
                    </a-form-item>

                  </div>
                </a-card>
              </a-col>
            </a-row>
          </a-layout-content>
        </a-layout>
      </div>
    </a-form-item>
    <div v-if="creativeType == 'proceduralCreativity'">

      <div style="display:block;font-size: 22px;margin-bottom: 20px;">程序化创意标题</div>
      <a-button @click="addTitle" class="row-item">添加创意标题</a-button>
      <br />
      <div v-for="(item,index) of titleData" :key="index">
        <a-input style="width:55%;margin-bottom:20px" v-model="item.title" class="rending-all" @change="judge($event,item)">
        </a-input>
        <a-icon type="delete" style="margin-left:20px;cursor: pointer;" v-show="titleData.length>1"
          @click="tetleDetele(index)" />
        <br />
        <a-tag style="margin-bottom:10px" v-for="(itemTag,indexTag) of tags" :key="indexTag"
          @click="getChangeAllTitle(item,itemTag,index)">
          {{itemTag.name}}</a-tag>
      </div>
    </div>
    <!-- 创建大图横图创意 -->

    <a-modal :maskClosable="false" title="选择素材" v-model="visibleMatemal" @ok="handleOkShow" :width="1000" :height='500'>
      <div >

     
      <a-range-picker name="buildTime" style="width: 400px;margin:10px 0" v-model="time" />
      <ul v-if="dataSource.length>0" :style="{height:materialType == 'CREATIVE_IMAGE_MODE_VIDEO'?'200px':'380px'}">
        <a-checkbox-group v-model="checkVideo" @change="onChangeVideo" style="width:100%">
          <li v-for="(item,index) of dataSource" :key="index" class="chouzhen" >

            <!-- <video class="video" :src="item.url" controls="controls" style="width:100%">
                  您的浏览器不支持 video 标签。
                </video> -->
            <a-checkbox :value="item" style="width:100%;position:absolute;z-index: 100;right:0;top:0;">

              <video v-if="materialType == 'CREATIVE_IMAGE_MODE_VIDEO' || materialType ==
          'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL'" class="video" :src="item.videoUrl" controls="controls"
                style="width:100%;margin-left: -8px;">
                您的浏览器不支持 video 标签。
              </video>
              <img v-else :src="item.imageUrl" alt="" style="width:100%;margin-left: -8px;">
            </a-checkbox>
            <!-- <a @click="matemalVideo(item,index)" style="position:absolute;z-index: 100;right:56px;bottom: 5px;">查看视频</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>

      <!-- <ul class="actor-photo-list">
          <a-checkbox-group v-model="checkArr" style="width:100%;  display: flex;padding-left: 0;"
            @change="onChangeCheck">
            <li v-for="(item, index) of dataSource" :key="index">
              <a-checkbox :value="item" style="position:absolute;z-index:100;padding-right:30px">

              </a-checkbox>
            </li>
          </a-checkbox-group>
        </ul> -->
      <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>
       </div>

    </a-modal>
    <a-modal :maskClosable="false" title="选择素材" v-model="visibleMatemalImage" @ok="handleOkShowImage" :width="1000">
      <a-range-picker name="buildTime" style="width: 400px;margin:10px 0" v-model="time" />
      <ul v-if="dataSource.length>0" style="overflow:auto;padding-left:0;">
        <a-checkbox-group v-model="checkVideo" @change="onChangeVideo" style="width:100%">
          <li v-for="(item,index) of dataSource" :key="index" class="chouzhen" style="height:350px">

            <!-- <video class="video" :src="item.url" controls="controls" style="width:100%">
                  您的浏览器不支持 video 标签。
                </video> -->
            <a-checkbox :value="item" style="width:100%;position:absolute;z-index: 100;right:0;top:0;">

              <img :src="item.imageUrl" alt="" style="width:100%;margin-left: -8px;">
            </a-checkbox>
            <!-- <a @click="matemalVideo(item,index)" style="position:absolute;z-index: 100;right:56px;bottom: 5px;">查看视频</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>

      <!-- <ul class="actor-photo-list">
          <a-checkbox-group v-model="checkArr" style="width:100%;  display: flex;padding-left: 0;"
            @change="onChangeCheck">
            <li v-for="(item, index) of dataSource" :key="index">
              <a-checkbox :value="item" style="position:absolute;z-index:100;padding-right:30px">

              </a-checkbox>
            </li>
          </a-checkbox-group>
        </ul> -->
      <div style="text-align:right">
        <a-pagination size="small" :showTotal="ipagination.showTotal" style="float:right" v-if="dataSource.length > 0"
          showQuickJumper :pageSize.sync="ipagination.pageSize" :total="ipagination.total" v-model="ipagination.current"
          @change="getDataSource" />
      </div>
    </a-modal>
    <a-modal title="查看视频" v-model="visibleVideo" :width="300" :footer="null">
      <video class="video" :src="videoUrlShow" controls="controls" style="width:100%">
        您的浏览器不支持 video 标签。
      </video>
    </a-modal>
  </div>
</template>

<script>
  import uploadFile from '@/components/uploadFile.vue'
  import {
    postAction,
    getAction,
    getPackage
  } from '@/api/manage'
  import {
    stopOtherVideo,
    closeAllVideoFun
  } from '@/utils/videoControl' // 停止除当前外的其他视频播放，及停止所有视频播放的方法
  import moment from 'moment'
  import AFormItem from 'ant-design-vue/es/form/FormItem'
  import $ from 'jquery'
  import qs from 'qs'
  export default {
    name: 'BaseForm',
    props: {
      accountId: {
        default () {
          return ''
        }
      },
      creativeType: {
        type: String,
        default () {
          return 'customCreativity'
        }
      }
    },
    components: {
      AFormItem,
      //   UploadToAli,
      uploadFile
    },
    data() {
      return {
        visibleMatemal: false,
        visibleVideo: false,
        videoUrlShow: "",
        dataSource: [],
        loadingVideoList: false,
        time: [],
        checkVideo: [],
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 5
          }
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 16
          }
        },
        visibleMatemalImage: false,
        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_VIDEO',
        // 创建大图横图创意
        createLargeImageCreativeCon: true,
        HorizontalLargeImageList: [],
        HorizontalLargeImageListBig: [],
        HorizontalLargeImageListHeng: [],
        HorizontalLargeImageListShu: [],
        HorizontalLargeImageListZu: [],
        HorizontalLargeImageListSmall: [],
        HorizontalLargeImageListBigShu: [],
        horizonImageUrlColl: [], // 大图横图图片素材集合
        horizonImageCreativeTextColl: [], // 创意标题集合
        itemIndex: null,
        tags: [],
        range: null,
        countTag: 0,
        titleData: [{
          text: '',
          creativeWordIds: [],
          showElse: true,
          titleMany: 0
        }],
        nowItem: null,
        ipagination: {
          current: 1,
          pageSize: 5,
          //   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
          }
        },
        isImg:false,
        accountInfo:{},
      }
    },
    methods: {
      getDataSource(page, pageSize) {
        console.log(this.isImg)
        this.ipagination.current = page
        var params = {}
        params.accountId = this.accountInfo.value
        params.pageSize = this.ipagination.pageSize
        params.pageNo = page
        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')
        }
        if ((this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO' || this.materialType ==
          'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL')&&!this.isImg) {
          if (this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO') {
            params.type = 1
          } else {
            params.type = 2
          }
          this.showVideoList('/bytedance/batch/getVideoList', params)
        } else if(this.isImg){
          console.log(this.isImg)
          if (this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO') {
            params.type = 1
          } else {
            params.type = 2
          }
          this.showVideoList('/bytedance/batch/getImageList', params)
        }
      },
      getImageList(item) {
        this.checkVideo = []
        this.nowItem = item
        this.visibleMatemalImage = true

        this.ipagination.current = 1

        this.isImg=true;
        var params = {}
        params.accountId = this.accountInfo.value
        params.pageSize = this.ipagination.pageSize
        params.pageNo = this.ipagination.current
        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')
        }

          if (this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO') {
            params.type = 1
          } else {
            params.type = 2
          }
          this.showVideoList('/bytedance/batch/getImageList', params)
      
        
      },
      onChangeVideo() {
        if (this.checkVideo.length > 1) {
          this.checkVideo.shift()
        }
      },
      matemalVideo(item, index) {
        this.visibleVideo = true
        this.videoUrlShow = item.url
      },
      handleOkShow() {
        this.visibleMatemal = false
        if (this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO' || this.materialType ==
          'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {

          this.nowItem.videoId = this.checkVideo[0].id
          this.nowItem.videoUrl = this.checkVideo[0].videoUrl
        } else {
          this.nowItem.imageId = this.checkVideo[0].id
          this.nowItem.imageUrl = this.checkVideo[0].imageUrl
        }
      },
      handleOkShowImage() {
        this.visibleMatemalImage = false
        this.nowItem.imageId = this.checkVideo[0].id
        this.nowItem.imageUrl = this.checkVideo[0].imageUrl
      },
      getVideoList(item) {
        this.checkVideo = []
        this.nowItem = item
        this.visibleMatemal = true
        this.isImg=false
        this.ipagination.current = 1
        var params = {}
        params.accountId = this.accountInfo.value
        params.pageSize = this.ipagination.pageSize
        params.pageNo = this.ipagination.current
        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')
        }
        if (this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO' || this.materialType ==
          'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
          if (this.materialType == 'CREATIVE_IMAGE_MODE_VIDEO') {
            params.type = 1
          } else {
            params.type = 2
          }

          this.showVideoList('/bytedance/batch/getVideoList', params)
        } else {
          this.showVideoList('/bytedance/batch/getImageList', params)
        }

      },
      showVideoList(url, params) {
        this.dataSource = []
        this.loadingVideoList = true

        getAction(url, params).then(res => {
          if (res.success) {
            this.dataSource = res.result.records
            this.ipagination.total = res.result.total
            this.loadingVideoList = false
          } else {
            this.loadingVideoList = false
          }
        })
      },
      judge(item) {
        // console.log(item)
        var re = /{(.*?)}/g
        var array = []
        var temp
        while ((temp = re.exec(item.title))) {
          array.push(temp[1])
        }
        // console.log(array)
        item.countTag = array.length;
        // console.log(item.countTag )
      },
      getChange(item, tag, index) {
        this.judge(item)
        if (item.title == '') {
          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()
          item.creativeWordIds.push(tag.creative_word_id)
        } 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.title = node.value
          item.creativeWordIds.push(tag.creative_word_id)
          node.focus()
          node.selectionStart = startPos + v.length
          node.selectionEnd = startPos + v.length
        } else {
          //OTHER
          node.value += v
          item.creativeWordIds.push(tag.creative_word_id)
          item.title = node.value
          node.focus()
        }
      },
      getChangeAllTitle(item, tag, index) {
        this.judge(item)
        if (item.title == '') {
          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 + '}'
        item.creativeWordIds.push(tag.creative_word_id)
        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.title = node.value
          node.focus()
          node.selectionStart = startPos + v.length
          node.selectionEnd = startPos + v.length
        } else {
          //OTHER
          node.value += v
          item.title = node.value
          node.focus()
        }
      },
      showElseClick(item) {
        console.log(item)
        item.showElse = !item.showElse
        if (!item.showElse) {
          item.many = this.tags.length
        } else {
          item.many = 5
        }
      },
      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
        console.log(type)
        this.getTags()
        if (type === 'CREATIVE_IMAGE_MODE_SMALL') {
          this.HorizontalLargeImageListSmall.push({
            ImageMode: type,
            imageUrl: '',
            imageId: '',
            title: '',
            creativeWordIds: [],
            vadioUrl: '',
            videoId: '',
            multiple: [],
            countTag: 0,
            many: 5,
            showElse: true
          })
          this.HorizontalLargeImageList = this.HorizontalLargeImageListSmall
        }
        if (type === 'CREATIVE_IMAGE_MODE_LARGE') {
          this.HorizontalLargeImageListBig.push({
            imageMode: type,
            imageUrl: '',
            imageId: '',
            title: '',
            creativeWordIds: [],
            vadioUrl: '',
            videoId: '',
            multiple: [],
            countTag: 0,
            many: 3,
            showElse: true
          })
          this.HorizontalLargeImageList = this.HorizontalLargeImageListBig
        }
        if (type === 'CREATIVE_IMAGE_MODE_GROUP') {
          this.HorizontalLargeImageListZu.push({
            creativeType: this.creativeType,
            imageMode: type,
            imageUrl: '',
            imageId: '',
            title: '',
            creativeWordIds: [],
            vadioUrl: '',
            videoId: '',
            multiple: [],
            countTag: 0,
            many: 3,
            showElse: true
          })
          this.HorizontalLargeImageList = this.HorizontalLargeImageListZu
        }
        if (type === 'CREATIVE_IMAGE_MODE_VIDEO') {
          this.HorizontalLargeImageListShu.push({
            creativeType: this.creativeType,
            imageMode: type,
            imageUrl: '',
            imageId: '',
            title: '',
            creativeWordIds: [],
            vadioUrl: '',
            videoId: '',
            multiple: [],
            countTag: 0,
            many: 3,
            showElse: true
          })
          this.HorizontalLargeImageList = this.HorizontalLargeImageListShu
        }
        if (type === 'CREATIVE_IMAGE_MODE_LARGE_VERTICAL') {
          this.HorizontalLargeImageListBigShu.push({
            creativeType: this.creativeType,
            imageMode: type,
            imageUrl: '',
            imageId: '',
            title: '',
            creativeWordIds: [],
            vadioUrl: '',
            videoId: '',
            multiple: [],
            countTag: 0,
            many: 3,
            showElse: true
          })
          this.HorizontalLargeImageList = this.HorizontalLargeImageListBigShu
        }
        if (type === 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL') {
          this.HorizontalLargeImageListHeng.push({
            creativeType: this.creativeType,
            imageMode: type,
            imageUrl: '',
            imageId: '',
            title: '',
            creativeWordIds: [],
            vadioUrl: '',
            videoId: '',
            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() {
        let accountInfo = localStorage.getItem('accountInfo')
        // console.log(groupInfo)
        let LHKaccountInfo=sessionStorage.getItem('LHKaccountInfo');
        
        if(accountInfo){
          this.accountInfo=JSON.parse(accountInfo)
        }else if(LHKaccountInfo){
          this.accountInfo=JSON.parse(LHKaccountInfo)[1]
        }

        

        getAction('/bytedance/batch/creative/words/get', {
          accountId: this.accountInfo.value
        }).then(res => {
          console.log(res)
          if (res.code == '0') {
            this.tags = res.creative_word
          } else {
            this.tags = []
          }
        })
      },
      addTitle() {
        this.titleData.push({
          text: '',
          creativeWordIds: [],
          titleMany: 0,
          creativeWordIds: []
        })
      },
      tetleDetele(index) {
        this.titleData.splice(index, 1)
      }
    },
    created: function () {
      this.$nextTick(() => {
        this.getTags()
      })
    },
    watch: {
      creativeType: function (n, o) {
        console.log(n, o)
        this.HorizontalLargeImageListBig = []
        this.HorizontalLargeImageListHeng = []
        this.HorizontalLargeImageListShu = []
        this.HorizontalLargeImageListZu = []
        this.HorizontalLargeImageListSmall = []
        this.HorizontalLargeImageListBigShu = []
        this.HorizontalLargeImageList = []
      },
      materialType: function (n, o) {
        this.materialTypeChange()
      },
      visibleVideo(n, o) {
        if (!n) {
          closeAllVideoFun()
        }
      },
      time(n, o) {
        console.log(n)
        if (n.length > 0) {
          var params = {}
          params.accountId = this.accountInfo.value
          params.pageSize = this.ipagination.pageSize
          params.pageNo = 1
          params.startDate = moment(n[0]).format('YYYY-MM-DD')
          params.endDate = moment(n[1]).format('YYYY-MM-DD')
          this.showVideoList('/bytedance/batch/getVideoList', params)
        } else {
          var params = {}
          params.accountId = this.accountInfo.value
          params.pageSize = this.ipagination.pageSize
          params.pageNo = 1
          this.ipagination.current = 1
          this.showVideoList('/bytedance/batch/getVideoList', params)
        }
      },
    },
    computed: {
      count: function () {
        var bool
        if (this.creativeType == 'customCreativity') {
          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">
  .material-creat {
    .ant-layout {
      background: white;
    }

    .ant-scroll-number {
      z-index: 1000;
    }
  }

  .dynamically_add_form_item {
    .ant-form-item-label {
      width: auto !important;
    }

    .ant-form-item-control-wrapper {
      width: auto !important;
    }
  }
</style>
<style lang="scss" scoped>
  ul,
  li {
    margin: 0;
    padding: 0;
  }
  .moreTags{
    cursor: pointer;
  }
  .moduler {
    background: #fff;
    margin-bottom: 16px;
    position: relative;
    padding: 32px 24px 48px 32px;
    border-radius: 4px;
    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);

    .moduler-title {
      display: flex;
      align-items: center;
      font-size: 22px;
      margin-bottom: 20px;
    }

    .row-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 32px;
    }

    .row-item:last-of-type {
      margin-bottom: 0;
    }

    .row-item .hint-item {
      width: 24px;
      min-width: 24px;
      align-self: flex-start;
      line-height: 20px;
      height: 20px;
      margin-top: 5px;
    }

    .row-item .label-item {
      position: relative;
      align-items: flex-start;
      align-self: flex-start;
      line-height: 20px;
      height: 20px;
      margin-top: 7px;
      width: 80px;
      min-width: 80px;

      .text-item {
        font-size: 14px;
        width: 60px;
      }
    }

    .row-item .required-item {
      width: 4px;
      height: 4px;
      border-radius: 2px;
      background: #f45858;
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
    }

    .row-item .input-item {
      min-width: 480px;
      position: relative;

      // height: 35px;
      .tip {
        font-size: 12px;
        color: tomato;
      }

      .inventory-tags-lists-header {
        background-color: #F8F9FA;
        border: 1px solid #E4E9ED;
        height: 36px;
        line-height: 33px;
        border-radius: 4px 4px 0 0;
        font-weight: bold;
        display: flex;
      }

      .inventory-tags-lists-container {
        border: 1px solid #E4E9ED;
        margin-top: -1px;
        height: 100%;
        padding: 4px 0px;
        border-radius: 0 0 4px 4px;
      }

      .inventory-tags-lists-item {
        width: 100%;
        height: 37px;
        line-height: 37px;
        padding-left: 12px;
        padding-right: 12px;
        display: flex;
        font-size: 14px;
        color: #333;
      }
    }
  }

  .opt {
    text-align: right;
  }
  ul{
    overflow:auto;
    padding-left:0
  }
  .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
  }
</style>