<script setup lang="ts">
import { useRoute } from 'vue-router'

interface TVideo {
  id: any
  url?: string
  videoUrl?: string
  videoName?: string
  playDuration?: string | number
  videoDuration?: string | number
}

const props = defineProps<{
  videoList: TVideo[]
  select: number
}>()

const emit = defineEmits(['onPause'])

const route = useRoute()

let subjectId = route.params.subjectId as string

let playerRef = ref()
let player: any = null

let timeout: any = null
onMounted(() => {
  player = playerRef.value?.player()
  // 自动播放
  player?.once('ready', () => {
    timeout = setTimeout(async () => {
      if (props.select === 1) {
        playerRef.value?.play()
      }
    }, 500)
  })
})

onActivated(() => {
  timeout = null
  subjectId = route.params.subjectId as string
  // 自动播放
  player?.play?.()
})

onDeactivated(() => {
  clearTimeout(timeout)
  console.log('onDeactivated')
})
</script>
<template>
  <div class="knowledge-video">
    <VideoPlayer
      ref="playerRef"
      :videoList="videoList"
      :data="{
        subjectId,
        resourceType: 0,
        origin: 2,
      }"
      @onPause="(idx: number, duration: number) => emit('onPause', idx, duration)"
    ></VideoPlayer>
  </div>
</template>
<style scoped lang="scss">
.knowledge-video {
  width: 1792px;
  height: 85.33vh;
  border-radius: 1.67vh;
  border: 0.33vh solid rgba(241, 241, 250, 0.35);
  margin: 0 auto;
  overflow: hidden;
  #x-video {
    width: 100% !important;
    height: 100% !important;
    video {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
