<script setup lang="ts">
import type { ExperimentBookType } from '../types'
import Preview from '@/components/Preview.vue'
import { getExperimentCase } from '../api'

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

let detail = $ref<ExperimentBookType>()
function fetchInfo() {
  if (!props.experiment_id) return
  getExperimentCase({ experiment_id: props.experiment_id }).then((res) => {
    detail = res.data.detail || {}
    if (detail && Object.keys(detail).length === 0) {
      emits('empty')
    }
  })
}
watchEffect(() => {
  fetchInfo()
})
</script>

<template>
  <Preview :url="detail.url" v-if="props.experiment_id && detail?.id"></Preview>
  <el-empty description="暂无数据" v-else />
</template>
