<script setup lang="ts">
import subjectApi from '@/api/subject/subject'

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

const props = defineProps<{
  show: boolean
  knowledge: { id: any; name: string }
  data: {
    subjectId: string | number
    resourceType: 0 | 1 | 2 | 3
    origin: 1 | 2
  }
}>()
const emit = defineEmits(['update:show'])

const videoList = ref<TVideo[]>([])

const playerRef = ref()

function handleClose() {
  emit('update:show', false)
  return false
}

const loading = ref(false)
watch(
  () => props.show,
  async nv => {
    if (nv) {
      videoList.value = []
      loading.value = true
      try {
        const {
          data: { data: res },
        } = await subjectApi.getSubjectKnowledgeVideos({
          size: -1,
          knowledgeId: props.knowledge.id,
        })
        videoList.value = res.rows || []
        await nextTick()
        const player = playerRef.value?.player()
        player?.once('ready', () => {
          setTimeout(async () => {
            playerRef.value?.play()
          }, 500)
        })
      } catch {}
      loading.value = false
    } else {
      const player = playerRef.value?.player()
      player.pause()
    }
  },
)

function onPause(idx: number, duration: number) {
  videoList.value[idx] && (videoList.value[idx].playDuration = duration)
}
</script>
<template>
  <div v-show="show" class="video_full-box">
    <div class="top" @click="handleClose">
      <Icon name="left_arrow" size="80"></Icon>
      <LineFont v-if="knowledge?.name" :text="knowledge.name" />
    </div>
    <div class="video-box">
      <VideoPlayer
        v-if="videoList.length"
        ref="playerRef"
        :videoList="videoList"
        :data="data"
        @onPause="onPause"
      ></VideoPlayer>
      <Empty v-else :type="loading ? 'loading' : 'network'"></Empty>
    </div>
  </div>
</template>
<style scoped lang="scss">
.video_full-box {
  position: fixed;
  width: 100vw;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  overflow: hidden;
  box-sizing: border-box;
  line-height: 1.5;
  @include main_bg;
  @include hidden_scroll;
  .top {
    padding: 2.67vh 64px 0;
    position: relative;
    z-index: 1;
    margin-bottom: 2vh;
    display: flex;
    align-items: center;
    .x-icon {
      margin-right: $space-3;
    }
  }
  .video-box {
    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 {
      video {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
