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

import { useLog } from '@/composables/useLog'
const log = useLog()

interface Props {
  experiment_id?: string
  course_id?: string
}
const props = defineProps<Props>()

let detail = $ref<ExperimentBookType>()
function fetchInfo() {
  if (!props.experiment_id) return
  getExperimentBook({ experiment_id: props.experiment_id }).then(res => {
    detail = res.data.detail
    // 日志上送
    log.upload({
      event: 'file_event',
      action: 'experiment_book_stu_watch_action',
      data: {
        experiment_id: props.experiment_id,
        course_id: props.course_id,
        book_id: detail.id
      }
    })
  })
}
watchEffect(() => {
  fetchInfo()
})

const isEmpty = $computed(() => {
  return !props.experiment_id || !detail?.id
})
</script>

<template>
  <el-empty description="暂无数据" v-if="isEmpty" />
  <template v-else>
    <Preview :url="detail.url"></Preview>
  </template>
</template>
