<style lang="scss" scoped>
.actor-photo-list {
  display: flex;
  padding-left: 0;
  li {
    width: 25%;
    margin: 10px;
    position: relative;
    height: 380px;
    border: 1px solid #f2f2f2;
    list-style: none;
    padding: 10px;
    img,
    video {
      width: 100%;
      //   margin-top: auto;
      //   margin-bottom: auto;
      //   top: 0;
      //   bottom: 0;
      //   position: absolute;
      //   max-height: 350px;
    }
  }
}
</style>
<template>
  <div>
    <a-modal title="选择素材" v-model="visibleMatemal" @ok="handleOk" @cancel="close" :width="1000">
      <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">
                <video
                  class="video"
                  v-if="active == 'video'"
                  :src="item.url"
                  controls="controls"
                  style="min-height:160px"
                >
                  您的浏览器不支持 video 标签。
                </video>
                <img :src="item.url" v-else alt="" />
              </a-checkbox>
            </li>
          </a-checkbox-group>
        </ul>
      </div>
      <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>
  </div>
</template>

<script>
import { getAction, postAction, postFile } from '@/api/manage'
import { mapGetters } from 'vuex'
import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放，及停止所有视频播放的方法
export default {
  name: 'check-matemal',
  components: {},

  data() {
    return {
      url: {
        list: '/kuaishou/batch/getVideoList'
      },
      visibleMatemal: false,
      dataSource: [],
      columns: [],
      checkArr: [],
      active: '',
      joinVideo: {
        video: '',
        image: [],
        key: 1
      },
      ipagination: {
        current: 1,
        pageSize: 4,
        //   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
        }
      }
    }
  },
  watch: {},
  updated() {
    stopOtherVideo()
  },
  methods: {
    showCheck(typeName, url, item, typeString, key) {
      this.dataSource = []
      this.visibleMatemal = true
      this.joinVideo.key = key
      this.ipagination.current = 1
      var params = {}
      params.accountId = localStorage.getItem('accountId')
      params.materialType = typeName
      params.pageSize = this.ipagination.pageSize
      params.pageNo = this.ipagination.current
      if(typeString == 'video'){
          params.channelType = 0
      }
      this.active = typeString
      this.numberType = typeName
      this.url.list = url
      this.getData(url, params)
    },
    getData(url, params) {
      this.dataSource = []
      getAction(url, params).then(res => {
        if (res.success) {
          this.dataSource = res.result.records
          this.ipagination.total = res.result.total
        }
      })
    },
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
    handleOk() {
      this.visibleMatemal = false
      this.checkArr = []
      this.ipagination.current = 1
      this.$emit('showVideo', this.joinVideo, this.active)
    },
    close() {},
    getDataSource(page, pageSize) {
      this.ipagination.current = page
      var params = {}
      params.accountId = localStorage.getItem('accountId')
      params.materialType = this.numberType
      params.pageSize = this.ipagination.pageSize
      params.pageNo = page
      this.getData(this.url.list, params)
    },
    onChangeCheck(checkedList) {
      console.log(checkedList)
      //  { value: 'VIDEO_HEAD', tab: '片头' },
      // { value: 'VIDEO_PART', tab: '片段' },
      // { value: 'VIDEO_TAIL', tab: '片尾' }
      if (this.active == 'video') {
        //片头
        if (this.checkArr.length > 1) {
          this.checkArr.shift()
          this.joinVideo.video = checkedList[0]
        } else if (this.checkArr.length == 1) {
          this.joinVideo.video = checkedList[0]
        } else if (this.checkArr.length == 0) {
          this.joinVideo.video = ''
        }
      } else {
        //内容
        if (this.checkArr.length > 15) {
          this.$message.error('封面最多选择15张')
          this.checkArr.pop()
          this.joinVideo.image = this.checkArr
        } else {
          this.joinVideo.image = checkedList
        }
      }
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
