<script setup lang="ts">
import type { ExperimentVideoType, PlayInfo } from '../types'
import AppVideoPlayer from '@/components/base/AppVideoPlayer.vue'
import { getExperimentVideoPlayInfo } from '../api'
interface Props {
  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
  })
}
const playUrl = $computed(() => {
  return playList[0]?.PlayURL || ''
})
onMounted(() => {
  fetchInfo()
})
</script>
<template>
  <div class="video-item">
    <h2>{{ data.name }}</h2>
    <!-- <img :src="data.cover" /> -->
    <AppVideoPlayer
      :options="{ sources: [{ src: playUrl, type: 'application/x-mpegURL' }] }"
      style="width: 100%"
      v-if="playUrl"
    ></AppVideoPlayer>
  </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>
