<script setup>
import { getExperiment } from '../api'

const props = defineProps({ experiment_id: String })

let detail = $ref()

const teacherText = $computed(() => {
  if (!detail) return ''
  return detail.teachers.map(item => item.name).join('、')
})

function fetchInfo() {
  if (!props.experiment_id) return
  getExperiment({ experiment_id: props.experiment_id }).then(res => {
    detail = res.data.detail
  })
}
watchEffect(() => {
  fetchInfo()
})
</script>

<template>
  <template v-if="detail && experiment_id">
    <el-form label-suffix="：" label-width="120px" label-position="right">
      <el-form-item label="实验名称">{{ detail.name }}</el-form-item>
      <el-form-item label="实验课程名称">{{ detail.course.name }}</el-form-item>
      <el-form-item label="所属机构/学校">{{ detail.organization.name }}</el-form-item>
      <el-form-item label="实验类型">{{ detail.type_level }}</el-form-item>
      <el-form-item label="指导教师">{{ teacherText }}</el-form-item>
      <el-form-item label="实验学时">{{ detail.length }}学时</el-form-item>
      <el-form-item label="实验总成绩">{{ detail.score }}</el-form-item>
    </el-form>
    <el-divider />
    <el-form label-suffix="：" label-position="top">
      <el-form-item label="实验目的">{{ detail.purpose }}</el-form-item>
      <el-form-item label="实验要求">{{ detail.requirements }}</el-form-item>
      <el-form-item label="实验内容及原理">{{ detail.content }}</el-form-item>
      <el-form-item label="实验步骤及过程">{{ detail.procedure }}</el-form-item>
    </el-form>
  </template>
  <el-empty description="暂无数据" v-else />
</template>
