<style lang="scss" scoped>
.actor-photo-list {
  display: flex;
  padding-left: 0;
  li {
    width: 25%;
    margin: 10px;
    position: relative;
    height: 250px;
    border: 1px solid #f2f2f2;
    list-style: none;
    img,
    video {
      width: 100%;
      margin-top: auto;
      margin-bottom: auto;
      top: 0;
      bottom: 0;
      position: absolute;
      max-height: 250px;
    }
  }
}
</style>
<template>
  <div>
    <a-modal title="选择素材" v-model="visibleMatemal" @ok="handleOk" @cancel="close" :width="800">
      <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"></a-checkbox
              ><video class="video" :src="item.url" controls="controls" style="min-height:160px">
                您的浏览器不支持 video 标签。
              </video>
            </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 { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { mapGetters } from 'vuex'
import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放，及停止所有视频播放的方法
export default {
  name: 'check-matemal',
  mixins: [JeecgListMixin],
  components: {},

  data() {
    return {
      url: {
        list: '/ctop/materialInfo/list'
      },
      visibleMatemal: false,
      dataSource: [],
      columns: [],
      checkArr: [],
      active: '',
      joinVideo: {
        head: '',
        content: [],
        foot: '',
        key: 1
      }
    }
  },
  watch: {},
  updated() {
    stopOtherVideo()
  },
  methods: {
    showCheck(typeName, keyNumber, item) {
      this.dataSource = []
      console.log(keyNumber,item)
      this.visibleMatemal = true
      this.queryParam.userId = this.userInfo().id
      this.queryParam.type = typeName
      this.active = typeName

      if (typeName == 'VIDEO_PART') {
        this.checkArr = []
        this.joinVideo = {
          head: '',
          content: item.VIDEO_PART,
          foot: '',
          key: keyNumber
        }
      } else {
        this.checkArr = []
        this.joinVideo = {
          head: '',
          content: [],
          foot: '',
          key: keyNumber
        }
      }

      this.loadData()
    },
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
    handleOk() {
      this.visibleMatemal = false
      this.checkArr = []
      this.$emit('showVideo', this.joinVideo, this.active)
    },
    close() {},
    getDataSource(page, pageSize) {
      this.ipagination.current = page
      this.loadData()
    },
    onChangeCheck(checkedList) {
      console.log(checkedList)
      //  { value: 'VIDEO_HEAD', tab: '片头' },
      // { value: 'VIDEO_PART', tab: '片段' },
      // { value: 'VIDEO_TAIL', tab: '片尾' }
      if (this.active == 'VIDEO_HEAD') {
        //片头
        if (this.checkArr.length > 1) {
          this.checkArr.shift()
          this.joinVideo.head = checkedList[0]
        } else if (this.checkArr.length == 1) {
          this.joinVideo.head = checkedList[0]
        } else if (this.checkArr.length == 0) {
          this.joinVideo.head = ''
        }
      } else if (this.active == 'VIDEO_TAIL') {
        //片尾
        if (this.checkArr.length > 1) {
          this.checkArr.shift()
          this.joinVideo.foot = checkedList[0]
        } else if (this.checkArr.length == 1) {
          this.joinVideo.foot = checkedList[0]
        } else if (this.checkArr.length == 0) {
          this.joinVideo.foot = ''
        }
      } else {
        //内容
        this.joinVideo.content = checkedList
      }
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
