<script setup lang="ts">
import type { VideoItem } from '../types'
import AppVideoPlayer from '@/components/base/AppVideoPlayer.vue'
import { getVideo } from '../api'

interface Props {
  id: string
}
const props = defineProps<Props>()

let detail = $ref<VideoItem | null>(null)
let playList = $ref<any>()

function fetchInfo() {
  if (!props.id) return
  getVideo({ id: props.id }).then(res => {
    detail = res.data
    playList = res.data?.play_auth?.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>
  <AppCard title="查看实验操作视频">
    <template v-if="detail">
      <el-descriptions>
        <el-descriptions-item label="实验操作视频名称：">{{ detail.name }}</el-descriptions-item>
        <el-descriptions-item label="文件大小：">{{ detail.size_name }}</el-descriptions-item>
        <el-descriptions-item label="观看次数：">{{ detail.pv }}次</el-descriptions-item>
        <el-descriptions-item label="关联实验课程：">{{ detail.course_id_name }}</el-descriptions-item>
        <el-descriptions-item label="关联实验：">{{ detail.experiment_id_name }}</el-descriptions-item>
        <el-descriptions-item label="有效状态：">{{ detail.status_name }}</el-descriptions-item>
        <el-descriptions-item label="创建人：">{{ detail.created_operator_name }}</el-descriptions-item>
        <el-descriptions-item label="创建时间：">{{ detail.created_time }}</el-descriptions-item>
      </el-descriptions>
      <div style="height: 600px" v-if="playUrl">
        <AppVideoPlayer :options="{ sources: [{ src: playUrl }] }" style="width: 100%; height: 100%"></AppVideoPlayer>
      </div>
    </template>
  </AppCard>
</template>
