<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
        />
      </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"
        ></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"
        ></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"
        ></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"
        ></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"
        ></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' // 停止除当前外的其他视频播放，及停止所有视频播放的方法

  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']),

      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) {
          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)
      }
    },

    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>