<template xmlns="http://www.w3.org/1999/html">
  <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"
          @change="actionGroups"
          showSearch
          showArrow
          allowClear
          placeholder="选择需创建的快手账户"
          optionFilterProp="children"
          style="width: 650px"
          :filterOption="filterOption"
        >
          <a-select-option
            v-for="userAccount in accountList"
            :key="userAccount.accountId"
            :value="userAccount.accountId"
          >{{userAccount.authName}}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="选择广告组" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-cascader
          style="width: 650px"
          v-model="ids"
          :options="options"
          @change="onChangeActionBarText"
          :loadData="loadData"
          placeholder="Please select"
          changeOnSelect
          multiple
        />
      </a-form-item>

      <a-form-item label="视频类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-radio-group v-model="creativeMaterialType" @change="changeVideoList">
          <a-radio-button value="1">竖版视频</a-radio-button>
          <a-radio-button value="2">横版视频</a-radio-button>
          <a-radio-button value="3" v-if="singlePicture">单张图片</a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item
        label="贴片类型"
        v-if="showSinglePicTiepianType"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-radio-group v-model="singlePicTiepianType" @change="changeSinglePicTiepianTypeFun">
          <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="视频上传方式"
        v-if="showUploadType"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-radio-group v-model="videoUploadType" @change="changeUploadVideo">
          <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="上传封面（贴片）"
        v-if="showUploadSinglePicType"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-radio-group v-model="changeSinglePicType" @change="changeSinglePicTypeFun">
          <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="选择本地视频文件进行上传"
        v-if="localUpload"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <upload-to-ali
          v-model="localUrl"
          :customDomain="customDomain"
          preview
          :region="region"
          :bucket="bucket"
          :accept="acceptVideo"
          :max="10"
          :size="1024000"
          :accessKeyId="accessKeyId"
          :accessKeySecret="accessKeySecret"
          :before-upload="file"
          :dir="dirVideo"
          @loaded="overUpload"
        ></upload-to-ali>
      </a-form-item>

      <a-form-item
        label="选择作品进行上传"
        v-if="selectVideoUpload"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <div>
          <a type="primary" @click="showModalVideo">点击选中已上传作品</a>
          <a-modal
            class="ant_modal_body_container"
            title="选择作品"
            v-model="visibleVideo"
            @ok="handleOkVideo"
            :width="860"
            @cancel="handleCancelVideo"
          >
            <template>
              <a-radio-group
                @change="getDescription"
                v-model="videoUrl"
                class="image_item_container"
              >
                <div class="image_item" v-for="(video,index) of videoList" :key="index">
                  <video class="video" :src="video.localUrl" controls="controls">您的浏览器不支持 video 标签。</video>
                  <a-radio :style="radioStyle" :value="video.localUrl">
                    <div class="item_text">{{video.videoName}}</div>
                  </a-radio>
                </div>
              </a-radio-group>
            </template>
          </a-modal>
          <div class="checkbox_item_container checkbox_item_container_size" v-if="videoUrl">
            <div class="item_ul">
              <div class="item_li" style="width:130px;height:180px;">
                <a-col class="item">
                  <a-icon
                    type="close-circle"
                    style="position:absolute;top:-5px;right:-5px;color:red"
                    @click="deteleRadio"
                  />
                  <video
                    class="video"
                    :src="videoUrl"
                    controls="controls"
                    style="min-height:160px"
                  >您的浏览器不支持 video 标签。</video>
                </a-col>
              </div>
            </div>
          </div>
        </div>
      </a-form-item>

      <!-- 贴片，上传作品 -->
      <a-form-item
        label="选择作品进行上传（贴片）"
        v-if="hasSinglePicVideoUpload"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <div>
          <a type="primary" @click="showSinglePicModalVideo">点击选中已上传作品</a>
          <a-modal
            class="ant_modal_body_container"
            title="选择作品"
            v-model="visibleSinglePicVideo"
            @ok="handleOkSinglePicVideo"
            :width="860"
            @cancel="handleCancelSinglePicVideo"
          >
            <template>
              <div>
                <a-checkbox-group @change="VideoOnChange" class="checkbox_item_container">
                  <div class="item_ul">
                    <div class="item_li" v-for="(video,index) of videoList" :key="index">
                      <a-col class="item">
                        <video
                          class="video"
                          :src="video.localUrl"
                          controls="controls"
                        >您的浏览器不支持 video 标签。</video>
                        <a-checkbox :value="video.localUrl" class="checkbox_item">
                          <div class="item_txt">{{video.videoName}}</div>
                        </a-checkbox>
                      </a-col>
                    </div>
                  </div>
                </a-checkbox-group>
              </div>
            </template>
          </a-modal>
          <div class="checkbox_item_container checkbox_item_container_size">
            <div class="item_ul">
              <div
                class="item_li"
                v-for="(item,index) of haveSinglePicVideoUrl"
                :key="index"
                style="width:130px;height:180px;"
              >
                <a-col class="item">
                  <a-icon
                    type="close-circle"
                    style="position:absolute;top:-5px;right:-5px;color:red"
                    @click="detele(index)"
                  />
                  <video
                    class="video"
                    :src="item"
                    controls="controls"
                    style="min-height:160px"
                  >您的浏览器不支持 video 标签。</video>
                </a-col>
              </div>
            </div>
          </div>
        </div>
      </a-form-item>

      <!-- 贴片，本地上传视频，可上传多个视频 -->
      <a-form-item
        label="选择本地视频文件进行上传（贴片）"
        v-if="tiepianVideoLocalUpload"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <upload-to-ali
          v-model="tiepianVideoLocalUploadList"
          :customDomain="customDomain"
          preview
          multiple
          :region="region"
          :bucket="bucket"
          :accept="acceptVideo"
          :max="10"
          :size="1024000"
          :accessKeyId="accessKeyId"
          :accessKeySecret="accessKeySecret"
          :before-upload="file"
          :dir="dirVideo"
          @loaded="overUpload"
        ></upload-to-ali>
      </a-form-item>

      <!-- 贴片，上传封面图片 -->
      <a-form-item
        v-if="hasSinglePicCoverUpload"
        label="选择封面（贴片）"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <div>
          <a type="primary" @click="showSinglePicCoverModal">点击选中已上传封面</a>
          <a-modal
            class="ant_modal_body_container"
            title="选择封面"
            v-model="visibleSinglePicCover"
            @ok="handleOkSinglePicCover"
            @cancel="handleCancelSinglePicCover"
            :width="860"
          >
            <template>
              <div>
                <input
                  v-model="isAllChecked"
                  type="checkbox"
                  @click="checkAll($event)"
                  class="select_all"
                /> 全选
                <div class="image_item_container">
                  <div v-for="(item ,index) in imageList" class="image_item" :key="index">
                    <label :for="item.id" class="label_item">
                      <img :src="item.src" alt class="item_img" />
                      <p class="item_text">{{item.name}}</p>
                      <p class="item_checkbox">
                        <input
                          class="checkItem"
                          type="checkbox"
                          v-model="checkeds"
                          :value="item.id"
                          @onClick="checkeda(item.id)"
                          @change="changChecked"
                          :id="item.id"
                        />
                      </p>
                    </label>
                  </div>
                </div>
              </div>
            </template>
          </a-modal>
          <div class="checkbox_item_container checkbox_item_container_size">
            <div class="item_ul">
              <div
                class="item_li"
                v-for="(item,index) of imageList"
                :key="index"
                style="width:100px;height:150px;margin:15px 0;"
                v-if="checkeds.indexOf( item.id )!=-1"
              >
                <a-col class="item">
                  <a-icon
                    type="close-circle"
                    style="position:absolute;top:-5px;right:-5px;color:red"
                    @click="deteleImg(item.id)"
                  />
                  <img :src="item.src" alt style="width:100%" />
                </a-col>
              </div>
            </div>
          </div>
        </div>
      </a-form-item>

      <!-- 贴片，本地上传图片，可上传多个图片 -->
      <a-form-item
        label="选择本地图片进行上传（贴片）"
        v-if="tiepianImageLocalUpload"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <upload-to-ali
          v-model="tiepianImageLocalUploadList"
          :customDomain="customDomain"
          preview
          multiple
          :region="region"
          :bucket="bucket"
          :accept="acceptImage"
          :max="10"
          :size="1024000"
          :accessKeyId="accessKeyId"
          :accessKeySecret="accessKeySecret"
          :before-upload="file"
          :dir="dirImg"
          @loaded="overUpload"
        ></upload-to-ali>
      </a-form-item>

      <a-form-item
        v-if="showImageUpload"
        label="图片上传"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <upload-to-ali
          v-model="localImageUrl"
          :customDomain="customDomain"
          multiple
          preview
          :region="region"
          :bucket="bucket"
          :accept="acceptImage"
          :max="10"
          :size="1024000"
          :accessKeyId="accessKeyId"
          :accessKeySecret="accessKeySecret"
          :before-upload="file"
          :dir="dirImg"
          @loaded="overUpload"
        ></upload-to-ali>
      </a-form-item>

      <a-form-item
        label="上传封面"
        v-if="showUploadImageRadio"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-radio-group v-model="imageType" @change="changeImageType">
          <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 v-if="showCover" label="选择封面" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <div>
          <a type="primary" @click="showModal">点击选中已上传封面</a>
          <a-modal
            title="选择封面"
            v-model="visible"
            @ok="handleOk"
            :width="860"
            class="ant_modal_body_container"
          >
            <template>
              <input
                v-model="isAllChecked"
                type="checkbox"
                @click="checkAll($event)"
                class="select_all"
              /> 全选
              <br />
              <br />
              <div class="image_item_container">
                <div v-for="(item ,index) in imageList" class="image_item" :key="index">
                  <label :for="item.id" class="label_item">
                    <img :src="item.src" alt class="item_img" />
                    <p class="item_text">{{item.name}}</p>
                    <p class="item_checkbox">
                      <input
                        class="checkItem"
                        type="checkbox"
                        v-model="checkeds"
                        :value="item.id"
                        @onClick="checkeda(item.id)"
                        @change="changChecked"
                        :id="item.id"
                      />
                    </p>
                  </label>
                </div>
              </div>
            </template>
          </a-modal>
          <div class="checkbox_item_container checkbox_item_container_size">
            <div class="item_ul">
              <div
                class="item_li"
                v-for="(item,index) of imageList"
                :key="index"
                style="width:100px;height:150px;margin:15px 0;"
                v-if="checkeds.indexOf( item.id )!=-1"
              >
                <a-col class="item">
                  <a-icon
                    type="close-circle"
                    style="position:absolute;top:-5px;right:-5px;color:red"
                    @click="deteleImg(item.id)"
                  />
                  <img :src="item.src" alt style="width:100%" />
                </a-col>
              </div>
            </div>
          </div>
        </div>
      </a-form-item>

      <a-form-item
        v-if="showLocalImageUpload"
        label="本地封面上传"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <upload-to-ali
          v-model="imageUrl"
          :customDomain="customDomain"
          multiple
          preview
          :region="region"
          :bucket="bucket"
          :accept="acceptImage"
          :max="10"
          :size="1024000"
          :accessKeyId="accessKeyId"
          :accessKeySecret="accessKeySecret"
          :before-upload="file"
          :dir="dirImg"
          @loaded="overUpload"
        ></upload-to-ali>
      </a-form-item>

      <a-form-item label="行动号召按钮" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-select
          v-model="actionBarTextDesc"
          showSearch
          allowClear
          placeholder="选择应用目标"
          optionFilterProp="children"
          style="width: 650px"
          @focus="handleFocus"
          @blur="handleBlur"
          :filterOption="filterOption"
        >
          <a-select-option
            v-for="actionBar in actionBarTextList"
            :key="actionBar.id"
            :value="actionBar.actionBarText"
          >{{actionBar.actionBarText}}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="作品广告语" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-textarea style="width: 650px" v-model="description" :rows="2" />
      </a-form-item>

      <a-form-item label="创意名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-input v-model="creativeName" placeholder="请填写广告创意名称" style="width: 650px"></a-input>
      </a-form-item>

      <a-form-item
        v-if="showClickTrackUrl"
        label="第三方点击监测链接"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-input v-model="clickTrackUrl" placeholder="请填写第三方点击监测链接" style="width: 650px"></a-input>
      </a-form-item>

      <a-form-item
        v-if="showImpressionUrl"
        label="第三方开始播放监测链接"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-input v-model="impressionUrl" placeholder="请填写第三方开始播放监测链接" style="width: 650px"></a-input>
      </a-form-item>

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

<script>
import { getAction, postAction } from '@/api/manage'
import { mapGetters } from 'vuex'
import UploadToAli from '@femessage/upload-to-ali'
import moment from 'moment'
// import VuePreview from 'vue-preview'
import jq from 'jquery'
import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放，及停止所有视频播放的方法
import { fileCheck, fileInsert } from '@/api/actor'
import BMF from 'browser-md5-file'
export default {
  name: 'BaseForm',
  components: {
    UploadToAli,
    // VuePreview
  },
  data() {
    return {
      accountId: '', // 快手 accountId
      accountList: {},
      campaignId: '', //广告计划id
      targetPopulation: '',
      changeOnSelectValue: true,
      ids: [],
      showDeliveryType: false,
      deliveryType: '1',
      creativeMaterialType: '1',
      singlePicture: false, // 展示单张图片
      videoUploadType: '1',
      showSinglePicTiepianType: false, // 贴片类型
      showSinglePicType: false, //
      singlePicTiepianType: '1', // 贴片方式
      singlePicType: '1', //
      localUpload: false,
      localUrl: '', // 本地上传地址
      selectVideoUpload: true,
      hasSinglePicVideoUpload: false, // 有单张图片的作品上传
      hasSinglePicCoverUpload: false, // 有单张图片的封面上传
      videoUrl: '', // 视频id
      haveSinglePicVideoUrl: [], // 有单张图片的视频id集合
      haveSinglePicimagesList: [], // // 有单张图片的图片集合
      tiepianVideoLocalUpload: false, // 贴片视频本地上传
      tiepianVideoLocalUploadList: [], // 贴片视频本地上传id集合
      tiepianImageLocalUpload: false, // 贴片视频本地上传
      tiepianImageLocalUploadList: [], // 贴片视频本地上传id集合
      videoList: [],
      radioStyle: {
        // 视频单选样式
        display: 'block',
        height: '30px',
        lineHeight: '30px'
      },
      showUploadType: true,
      localImageUrl: [], //图片地址
      showImageUpload: false,
      imageList: [],
      imageUrl: [],
      sceneId: '', // 资源位置
      showCover: true,
      imageType: '1',
      actionBarTextList: [],
      actionBarTextDesc: '',
      description: '', // 作品广告语
      creativeName: '', //创意名称
      clickTrackUrl: '', // 第三方检测链接
      showLocalImageUpload: false,
      showUploadImageRadio: true,
      showUploadSinglePicType: false, // 单张图片上传类型
      changeSinglePicType: '1', // 单张图片上传方式
      visible: false,
      visibleVideo: false,
      visibleSinglePicVideo: false,
      visibleSinglePicCover: false,
      isAllChecked: false,
      showClickTrackUrl: true,
      showImpressionUrl: false,
      loading: false,
      impressionUrl: '',
      positionType: '',
      checkeds: [],
      customDomain: '',
      acceptVideo: 'video/mpeg,video/mp4',
      acceptImage: 'image/jpeg,image,jpg/png',
      accessKeyId: 'LTAIbNbqWzSOklQV',
      accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
      region: 'oss-cn-beijing',
      bucket: 'ctop-media',
      options: [],
      labelCol: {
        xs: {
          span: 7
        },
        sm: {
          span: 7
        }
      },
      wrapperCol: {
        xs: {
          span: 10
        },
        sm: {
          span: 17
        }
      },
      form: this.$form.createForm(this),
      url: {
        userAllocationList: '/ctop/userAllocation/list',
        getOptionsUrl: '/kuaishou/create/getOptions',
        getChildrenUrl: '/kuaishou/create/getChildren',
        videoListUrl: '/kuaishou/kuaiShouVideo/list',
        imageListUrl: '/kuaishou/kuaiShouImage/image/list',
        actionBarTextListUrl: '/kuaishou/kuaiShouActionBarText/list',
        getDescriptionUrl: '/kuaishou/kuaiShouVideo/queryShouVideo',

        creativeUrl: '/kuaishou/create/createCreative',
        selectGroupCreate: '/kuaishou/kuaiShouGroupCreateLog/select/group'
      }
    }
  },
  methods: {
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
    file(file) {
      console.log(file)
      var bmf = new BMF()
      var that = this
    },
    overUpload(url) {
      console.log(url, this.md5)
    },
    handleOk(e) {
      console.log(e)
      this.visible = false
      this.imageUrl = []
      if (this.checkeds.length > 0) {
        for (let i = 0; i < this.checkeds.length; i++) {
          let imageId = this.checkeds[i]
          for (let j = 0; j < this.imageList.length; j++) {
            let imageVo = this.imageList[j]
            if (imageId == imageVo.id) {
              this.imageUrl.push(imageVo.src)
            }
          }
        }
      }
    },
    showModal() {
      this.visible = true
    },

    // 上传视频弹窗
    handleOkVideo(e) {
      this.visibleVideo = false
      closeAllVideoFun()
    },
    showModalVideo() {
      this.visibleVideo = true
      stopOtherVideo()
    },
    handleCancelVideo() {
      closeAllVideoFun()
      this.videoUrl = ''
    },

    // 有单张图片的上传视频弹窗，多选
    handleOkSinglePicVideo(e) {
      this.visibleSinglePicVideo = false
      closeAllVideoFun()
    },
    showSinglePicModalVideo() {
      this.visibleSinglePicVideo = true
      stopOtherVideo()
    },
    handleCancelSinglePicVideo() {
      closeAllVideoFun()
      this.videoUrl = ''
    },
    //   视频多选
    VideoOnChange(checkedValues) {
      this.haveSinglePicVideoUrl = checkedValues
      console.log(this.haveSinglePicVideoUrl)
    },

    changChecked() {
      if (this.imageList.length == this.checkeds.length) {
        this.isAllChecked = true
      } else {
        this.isAllChecked = false
      }
    },

    //   有单张图片的上传封面
    showSinglePicCoverModal() {
      this.visibleSinglePicCover = true
    },
    handleOkSinglePicCover() {
      this.haveSinglePicimagesList = []
      if (this.checkeds.length > 0) {
        for (let i = 0; i < this.checkeds.length; i++) {
          let imageId = this.checkeds[i]
          for (let j = 0; j < this.imageList.length; j++) {
            let imageVo = this.imageList[j]
            if (imageId == imageVo.id) {
              this.haveSinglePicimagesList.push(imageVo.src)
            }
          }
        }
      }
      this.visibleSinglePicCover = false
    },
    handleCancelSinglePicCover() {
      this.visibleSinglePicCover = false
      this.haveSinglePicimagesList = []
    },

    checkeda: function(id) {
      let indexOf = this.checkeds.indexOf(id)
      if (indexOf >= 0) {
        this.$delete(this.checkeds, id)
      } else {
        this.checkeds.push(id)
      }
      console.log(this.checkeds)
    },

    checkAll(e) {
      // 点击全选事件函数
      let checkObj = document.querySelectorAll('.checkItem') // 获取所有checkbox项
      if (e.target.checked) {
        // 判定全选checkbox的勾选状态
        for (let i = 0; i < this.imageList.length; i++) {
          if (!checkObj[i].checked) {
            // 将未勾选的checkbox选项push到绑定数组中
            this.checkeds.push(parseFloat(checkObj[i].value))
            console.log(this.checkeds)
          }
        }
      } else {
        // 如果是去掉全选则清空checkbox选项绑定数组
        this.checkeds = []
      }
    },

    changeImageType() {
      if (this.imageType == '2') {
        this.showLocalImageUpload = true
        this.showCover = false
      } else {
        this.showLocalImageUpload = false
        this.showCover = true
      }
    },

    handleChange(value) {
      console.log(`selected ${value}`)
    },
    handleBlur() {
      console.log('blur')
    },
    handleFocus() {
      console.log('focus')
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },

    // 视频类型
    changeVideoList() {
      if ((this.creativeMaterialType == '1' || this.creativeMaterialType == '2') && this.sceneId == '2') {
        // 横版竖版并且无单张图片
        this.imageUrl = []
        this.showImageUpload = false
        this.showUploadType = true
        this.selectVideoUpload = true
        this.localUpload = false
        this.showUploadImageRadio = true
        this.showCover = true
        this.showLocalImageUpload = false
        this.videoUrl = ''
        this.hasSinglePicVideoUpload = false
        this.hasSinglePicCoverUpload = false
        this.showSinglePicType = false
        this.showSinglePicTiepianType = false
        if (this.videoUploadType == '1') {
          // 选择作品
          this.localUpload = false
        } else if (this.videoUploadType == '2') {
          // 本地上传
          this.localUpload = true
        }
        let params = {}
        params.pageSize = '1000'
        params.loginId = this.userInfo().id
        params.positionType = '1'
        params.accountId = this.accountId

        if (this.creativeMaterialType == '1') {
          // 竖版视频
          params.materialType = '1'
        }
        if (this.creativeMaterialType == '2') {
          params.materialType = '2'
        }

        getAction(this.url.videoListUrl, params).then(res => {
          if (res.success) {
            this.videoList = res.result.records
            // 设置默认选中的视频
            if (this.videoList.length > 0) {
              this.videoUrl = this.videoList[0].localUrl
            }
          }
        })
        getAction(this.url.imageListUrl, params).then(res => {
          this.imageList = res
        })
      } else if (
        (this.creativeMaterialType == '1' || this.creativeMaterialType == '2' || this.creativeMaterialType == '3') &&
        this.sceneId == '3'
      ) {
        // 横版竖版有单张图片
        if (this.creativeMaterialType == '1' || this.creativeMaterialType == '2') {
          // 切换横版或竖版
          this.showUploadType = true
          this.localUpload = false
          this.selectVideoUpload = false
          this.showImageUpload = false
          this.showUploadImageRadio = false
          this.showUploadSinglePicType = false
          this.tiepianImageLocalUpload = false

          this.haveSinglePicimagesList = []
          this.haveSinglePicVideoUrl = []

          let params = {}
          params.accountId = this.accountId
          params.pageSize = '1000'
          params.loginId = this.userInfo().id
          params.positionType = '2'
          if (this.creativeMaterialType == '2') {
            params.materialType = '2'
          } else if (this.creativeMaterialType == '1') {
            params.materialType = '1'
          }
          if (this.videoUploadType == '1') {
            // 选择作品
            this.tiepianVideoLocalUpload = false
            this.hasSinglePicVideoUpload = true
          } else if (this.videoUploadType == '2') {
            // 本地上传
            this.tiepianVideoLocalUpload = true
            this.hasSinglePicVideoUpload = false
            this.tiepianImageLocalUpload = false
          }
          getAction(this.url.videoListUrl, params).then(res => {
            if (res.success) {
              this.videoList = res.result.records
              // 设置默认选中的视频
              if (this.videoList.length > 0) {
                this.videoUrl = this.videoList[0].localUrl
              }
            }
          })
        } else if (this.creativeMaterialType == '3') {
          // 切换单张图片
          this.positionType = '2'
          this.singlePicTiepianType = '1'
          this.showImageUpload = true
          this.showUploadType = false
          this.selectVideoUpload = false
          this.showSinglePicType = false
          this.showSinglePicTiepianType = false
          this.hasSinglePicVideoUpload = false
          this.tiepianVideoLocalUpload = false
          this.hasSinglePicCoverUpload = false
          if (this.changeSinglePicType == '1') {
            // 选择封面
            this.tiepianImageLocalUpload = false
          } else if (this.changeSinglePicType == '2') {
            // 本地上传
            this.tiepianImageLocalUpload = true
            this.hasSinglePicCoverUpload = false
          }
        }
      }
      if (this.creativeMaterialType == '1' || this.creativeMaterialType == '2') {
        this.hasSinglePicCoverUpload = false
        this.showSinglePicTiepianType = false
      }
      if (this.creativeMaterialType == '3') {
        // 单张图片时
        this.hasSinglePicVideoUpload = false
        this.showSinglePicType = true
        this.showUploadSinglePicType = true
        this.showImageUpload = false
        this.showSinglePicTiepianType = true
        if (this.changeSinglePicType == '1') {
          this.hasSinglePicCoverUpload = true
        } else if (this.changeSinglePicType == '2') {
          this.hasSinglePicCoverUpload = false
        }
      }
    },

    // 视频上传方式
    changeUploadVideo() {
      if (this.sceneId == '2') {
        // 无单张图片时
        this.hasSinglePicVideoUpload = false
        this.hasSinglePicCoverUpload = false
        this.tiepianVideoLocalUpload = false
        this.tiepianImageLocalUpload = false
        if (this.videoUploadType == '2') {
          this.localUpload = true
          this.selectVideoUpload = false
        } else {
          this.selectVideoUpload = true
          this.localUpload = false
        }
      } else if (this.sceneId == '3') {
        if (this.materialType == '3') {
          if (this.changeSinglePicType == '2') {
            this.hasSinglePicCoverUpload = false
            this.tiepianImageLocalUpload = true
          } else if (this.changeSinglePicType == '1') {
            this.hasSinglePicCoverUpload = true
            this.tiepianImageLocalUpload = false
          }
        } else {
          this.showUploadImageRadio = false
          this.tiepianVideoLocalUpload = false
          if (this.videoUploadType == '1') {
            this.hasSinglePicVideoUpload = true
            this.tiepianVideoLocalUpload = false
          } else if (this.videoUploadType == '2') {
            this.hasSinglePicVideoUpload = false
            this.tiepianVideoLocalUpload = true
          }
        }
      }
    },
    getDescription() {
      let params = {}
      params.localUrl = this.videoUrl
      params.loginId = this.userInfo().id
      postAction(this.url.getDescriptionUrl, params).then(res => {
        if (res.success) {
          this.description = res.result.videoDesc
          this.creativeName = res.result.videoName + '_' + moment().format('YYYY-MM-DD_HH:mm')
        }
      })
      this.imageUrl = []
      this.checkeds = []
    },

    // 有单张图片的贴片方式
    changeSinglePicTiepianTypeFun() {
      if (this.creativeMaterialType == '3' && this.singlePicTiepianType == '1') {
        this.positionType = '1'
      } else if (this.creativeMaterialType == '3' && this.singlePicTiepianType == '2') {
        this.positionType = '2'
      }
      let params = {}
      params.pageSize = '1000'
      params.accountId = this.accountId
      params.loginId = this.userInfo().id
      if (this.singlePicTiepianType == '1') {
        params.materialType = '2'
        params.positionType = '1'
      }
      if (this.singlePicTiepianType == '2') {
        params.materialType = '2'
        params.positionType = '2'
      }
      getAction(this.url.imageListUrl, params).then(res => {
        this.imageList = res
        console.log(res)
      })
    },

    // 有单张图片的图片上传方式
    changeSinglePicTypeFun() {
      if (this.changeSinglePicType == '1') {
        // 选择封面
        this.hasSinglePicCoverUpload = true
        this.tiepianImageLocalUpload = false
      }
      if (this.changeSinglePicType == '2') {
        // 本地上传
        this.hasSinglePicCoverUpload = false
        this.tiepianImageLocalUpload = true
      }
    },

    onChangeActionBarText() {
      this.creativeMaterialType = '1'
      if (this.ids.length == 2) {
        this.imageUrl = []
        this.checkeds = []
        let id = this.ids[0]
        let params = {}
        params.campaignId = id
        getAction(this.url.actionBarTextListUrl, params).then(res => {
          if (res.success) {
            this.actionBarTextList = res.result.records
          }
        })

        let unitId = this.ids[1]
        let unitParams = {}
        unitParams.unitId = unitId
        getAction(this.url.selectGroupCreate, unitParams).then(res => {
          this.sceneId = res.sceneId
          if (res.sceneId == '2') {
            // 无单张图片的时候
            this.singlePicture = false
            this.showImageUpload = false
            this.showImpressionUrl = false
            this.showClickTrackUrl = true
            this.showUploadImageRadio = true
            this.showCover = true
            this.showLocalImageUpload = false
            this.selectVideoUpload = true
            this.hasSinglePicVideoUpload = false
            this.hasSinglePicCoverUpload = false
            this.showSinglePicTiepianType = false
            this.showUploadSinglePicType = false
            this.positionType = '1'
            this.tiepianVideoLocalUpload = false
            this.tiepianImageLocalUpload = false
            let params2 = {}
            params2.pageSize = '1000'
            params2.accountId = this.accountId
            params2.materialType = '1'
            params2.positionType = '1'
            params2.loginId = this.userInfo().id
            getAction(this.url.videoListUrl, params2).then(res => {
              if (res.success) {
                this.videoList = res.result.records
                // 设置默认选中的视频
                if (this.videoList.length > 0) {
                  this.videoUrl = this.videoList[0].localUrl
                  this.description = this.videoList[0].videoDesc
                }
              }
            })

            // 图片列表
            getAction(this.url.imageListUrl, params2).then(res => {
              this.imageList = res
              console.log(res)
            })
          } else if (res.sceneId == '3') {
            // 有单张图片的时候
            this.singlePicture = true
            this.showImpressionUrl = true
            this.showClickTrackUrl = false
            this.showUploadImageRadio = false
            this.showCover = false
            this.selectVideoUpload = false
            this.showLocalImageUpload = false
            this.positionType = '2'
            // 如果有单张图片，上传作品方式为多选
            this.hasSinglePicVideoUpload = true

            let params2 = {}
            params2.accountId = this.accountId
            params2.pageSize = '1000'
            params2.materialType = '1'
            params2.positionType = '2'
            params2.loginId = this.userInfo().id
            getAction(this.url.videoListUrl, params2).then(res => {
              if (res.success) {
                this.videoList = res.result.records
                // 设置默认选中的视频
                if (this.videoList.length > 0) {
                  this.videoUrl = this.videoList[0].localUrl
                  this.description = this.videoList[0].videoDesc
                }
              }
            })

            // 图片列表
            getAction(this.url.imageListUrl, params2).then(res => {
              this.imageList = res
            })
          }
        })
      }
    },

    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    loadData(selectedOptions) {
      const targetOption = selectedOptions[selectedOptions.length - 1]
      targetOption.loading = true

      this.campaignId = `${targetOption.value}`
      let params = {}
      params.campaignId = this.campaignId
      params.loginId = this.userInfo().id
      params.accountId = this.accountId
      postAction(this.url.getChildrenUrl, params).then(res => {
        console.log(res, 10000000)
        targetOption.children = res
        this.options = [...this.options]
        targetOption.loading = false
      })
    },

    actionGroups() {
      let params = {}
      params.loginId = this.userInfo().id
      params.accountId = this.accountId
      postAction(this.url.getOptionsUrl, params).then(res => {
        this.options = res
      })
    },

    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.loading = true
          let params = {}
          params.accountId = this.accountId
          if (this.ids.length == 2) {
            params.unitId = this.ids[1]
          }
          params.videoUploadType = this.videoUploadType
          params.imageUrl = this.imageUrl
          params.actionBarText = this.actionBarTextDesc
          params.description = this.description
          params.clickTrackUrl = this.clickTrackUrl
          params.creativeName = this.creativeName
          params.creativeMaterialType = this.creativeMaterialType
          params.impressionUrl = this.impressionUrl
          params.sceneId = this.sceneId
          params.loginId = this.userInfo().id
          params.positionType = this.positionType
          if (this.sceneId == '2') {
            params.imageType = this.imageType
            params.localImageUrl = this.localImageUrl
            if (this.videoUploadType == '1') {
              params.videoUrl = this.videoUrl
            } else if (this.videoUploadType == '2') {
              params.videoUrl = this.localUrl
            }
          } else if (this.sceneId == '3') {
            if (this.creativeMaterialType != '3') {
              if (this.videoUploadType == '1') {
                params.haveSinglePicVideoUrl = this.haveSinglePicVideoUrl
              } else if (this.videoUploadType == '2') {
                params.haveSinglePicVideoUrl = this.tiepianVideoLocalUploadList
              }
            } else if (this.creativeMaterialType == '3') {
              params.singlePicTiepianType = this.singlePicTiepianType
              if (this.changeSinglePicType == '1') {
                params.haveSinglePicimagesList = this.haveSinglePicimagesList
              } else if (this.changeSinglePicType == '2') {
                params.haveSinglePicimagesList = this.tiepianImageLocalUploadList
              }
            }
          }
          postAction(this.url.creativeUrl, params).then(res => {
            console.log(res)
            if (res.success) {
              this.loading = false
              alert('广告创意创建成功')
            } else {
              this.loading = false
              alert(res.message)
            }
          })
        }
      })
    },
    detele(index) {
      this.haveSinglePicVideoUrl.splice(index, 1)
    },
    deteleRadio() {
      this.videoUrl = null
    },
    deteleImg(item) {
      var index = this.checkeds.findIndex(v => v === item)
      this.checkeds.splice(index, 1)
      this.imageUrl.splice(index, 1)
      this.haveSinglePicimagesList.splice(index, 1)
    }
  },
  computed: {
    dirImg() {
      let date = new Date()
      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 'image/' + y + '-' + MM + '-' + d + '/'
    },
    dirVideo() {
      let date = new Date()
      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 'video/' + y + '-' + MM + '-' + d + '/'
    }
  },
  created: function() {
    let params = {}
    params.pageSize = '1000'
    params.mediaId = '2'
    params.userId = this.userInfo().id
    getAction(this.url.userAllocationList, params).then(res => {
      if (res.success) {
        this.accountList = res.result.records
      }
    })
  }
}
</script>
<style lang="scss">
.select_all {
  margin-bottom: 10px;
}

.ant_modal_body_container {
  .ant-modal-body {
    max-height: 650px;
    overflow-y: scroll;

    .image_item_container {
      margin: 0 -10px;
      width: 100%;

      .image_item {
        display: inline-block;
        width: 20%;
        padding: 0 10px;
        box-sizing: border-box;
        margin-bottom: 20px;

        .label_item {
          display: block;
          cursor: pointer;
        }

        .item_img {
          width: 100%;
          margin-bottom: 10px;
        }

        .item_text {
          height: 42px;
          overflow: hidden;
          margin-bottom: 0;
        }

        .item_checkbox {
          margin-bottom: 0;
        }

        .video {
          width: 100%;
        }
      }
    }
  }

  .video_item_container {
    .video {
      width: 100%;
    }
  }
}

//   多选框
.checkbox_item_container {
  .item_ul {
    margin: 0 -10px;

    .item_li {
      width: 20%;
      float: left;
      padding: 0 10px;
      box-sizing: border-box;

      .item:hover i {
        display: block;
        cursor: pointer;
      }

      .item {
        position: relative;

        i {
          display: none;
        }

        video {
          width: 100%;
          min-height: 255px;
        }

        .checkbox_item {
          display: block;

          .ant-checkbox {
            display: inline-block;
          }

          span {
            display: block;
            padding: 0;

            .item_txt {
              text-align: left;
              height: 42px;
              overflow: hidden;
            }
          }
        }
      }
    }
  }
}

// @media (min-width: 1024px){
//     .checkbox_item_container {
//         width:70%
//     }
// } /*>=1024的设备*/

// @media (min-width: 1100px) {
//     .checkbox_item_container {
//         width:70%
//     }
// } /*>=1100的设备*/
@media (min-width: 1280px) {
  .checkbox_item_container_size {
    width: 70%;
  }
}

/*>=1280的设备*/

// @media (min-width: 1366px) {
// }

// @media (min-width: 1440px) {
// }

// @media (min-width: 1680px) {

// }
@media (min-width: 1920px) {
  .checkbox_item_container_size {
    width: 50%;
  }
}
</style>