<template>
  <div class="video-player">
    <image :src="coverImageUrl" class="video-cover" style="width: 100%; height:100%;" />
    <CxAudioPlayer
      v-if="list.length > 0"
      :list="list"
      :autoplays="true"
      style="
        display: flex; align-items: center; justify-content: center;
        position: absolute; left: 0; top: 0;
        width: 100%; height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
      "
    />
  </div>
</template>
<script>
import { mainClient } from '@/api/clients';
import CxAudioPlayer from './cx-audio-play/cx-audio-play.vue'
export default {
  props: {
    currentVideo: {
      type: Object,
      default: () => {}
    },
    coverImageUrl: {
      type: String,
      default: ''
    },
    http: {
      type: Object,
      default: () => {}
    },
  },
  components: {
    CxAudioPlayer
  },
  watch: {
    currentVideo: {
      handler(newVal, oldVal) {
        if (!newVal || !newVal.id) return
        this.fetchRealAudioUrl(newVal)
      },
      immediate: true,
      deep: true,
    }
  },
  data() {
    return {
      isfresh: false,
      screenLoading: false,
      isFullScreen: false,
      changeVideoLock: false,
      secondCountDown: 10,
      list: []
    }
  },
  methods: {
    async fetchRealAudioUrl(videoInfo) {
      if (!videoInfo) return
      const data = { ...videoInfo }
      try {
        const res = await mainClient.request({
          url: 'sociology/course/checkVideo',
          method: 'POST',
          data,
          header: {
            'Content-Type': 'application/json'
          }
        })
        console.log('获取播放凭证666',JSON.stringify(res.video));
        const real = res && res.video ? res.video : null
        if (!real) {
          this.list = []
          return
        }
        const src = real.videoUrl || real.m3u8Url || real.source || ''
        if (!src) {
          
          this.list = []
          return
        }
        this.list = [{ recorPath: src }]
      } catch (e) {
        this.list = []
      }
    }
  }
}
</script>
<style scoped>
.video-player {
  position: relative;
  height: 400rpx;
  width: 100%;

  .player {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
  }
}
</style>
