<script setup lang="ts">
import type { ExperimentVideoType } from '../types'
import VideoItem from './VideoItem.vue'
import { getExperimentVideoList } from '../api'

interface Props {
  experiment_id?: string
  course_id?: string
}
const props = defineProps<Props>()
const emits = defineEmits(['empty'])

let list = $ref<ExperimentVideoType[]>([])
function fetchInfo() {
  if (!props.experiment_id) return
  getExperimentVideoList({ experiment_id: props.experiment_id }).then((res) => {
    list = res.data.list
    if (list.length === 0) {
      emits('empty')
    }
  })
}
watchEffect(() => {
  fetchInfo()
})

const isEmpty = $computed(() => {
  return !props.experiment_id || !list.length
})
</script>

<template>
  <el-empty description="暂无数据" v-if="isEmpty" />
  <template v-else>
    <VideoItem
      v-for="item in list"
      :key="item.id"
      :data="item"
      :course_id="course_id"
      :experiment_id="experiment_id"></VideoItem>
  </template>
</template>

<style lang="scss" scoped></style>
