<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 {
  competition_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.list.play_info_list
    // 日志上送
    // log.upload({
    //   event: 'video_event',
    //   action: 'experiment_video_stu_watch_action',
    //   data: {
    //     competition_id: props.competition_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>
