<script setup lang="ts">
import type { ContestVideoItem } from '../types'
import AppVideoPlayer from '@/components/base/AppVideoPlayer.vue'
import { getContestVideoPalyInfo } from '../api'
interface Props {
  data: ContestVideoItem
}
const props = defineProps<Props>()
let playList = $ref<any>()
function fetchInfo() {
  getContestVideoPalyInfo({ source_id: props.data.source_id }).then(res => {
    playList = res.data.replay_list.play_info_list
  })
}
const playUrl = $computed(() => {
  if (Array.isArray(playList)) {
    const definitionUrl = playList.reduce(
      (result: any, item: any) => {
        result[item.Definition] = item.PlayURL
        return result
      },
      { SD: '', LD: '', FD: '' }
    )
    return definitionUrl.SD || definitionUrl.LD || definitionUrl.FD
  } else {
    return playList
  }
})
onMounted(() => {
  fetchInfo()
})
</script>

<template>
  <el-dialog title="查阅操作视频">
    <AppVideoPlayer :options="{ fluid: true, sources: [{ src: playUrl }] }" v-if="playUrl"></AppVideoPlayer>
  </el-dialog>
</template>
