<script setup lang="ts">
import type { ExperimentVideoType, PlayInfo } from '../types'
import AppVideoPlayer from '@/components/base/AppVideoPlayer.vue'
import { getExperimentVideoPlayInfo } from '../api'

import { useLog } from '@/composables/useLog'
const log = useLog()

interface Props {
  experiment_id?: string
  course_id?: string
  data: ExperimentVideoType
}
const props = defineProps<Props>()
let playList = $ref<PlayInfo[]>([])
function fetchInfo() {
  getExperimentVideoPlayInfo({ source_id: props.data.source_id }).then(res => {
    playList = res.data.play_info_list
    // 日志上送
    log.upload({
      event: 'video_event',
      action: 'experiment_video_stu_watch_action',
      data: {
        experiment_id: props.experiment_id,
        course_id: props.course_id,
        video_id: props.data.id
      }
    })
  })
}
const playUrl = $computed(() => {
  return playList[0]?.PlayURL || ''
})
onMounted(() => {
  fetchInfo()
})
</script>
<template>
  <div class="video-item">
    <h2>{{ data.name }}</h2>
    <!-- <img :src="data.cover" /> -->
    <div style="height: 200px" v-if="playUrl">
      <AppVideoPlayer
        :options="{ sources: [{ src: playUrl, type: 'application/x-mpegURL' }] }"
        style="width: 100%; height: 100%"
      ></AppVideoPlayer>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.video-item {
  h2 {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    padding: 10px 0;
    text-align: center;
  }
  img {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
}
</style>
