<script setup>
const props = defineProps({ data: Object })

const teacherText = $computed(() => {
  if (!props.data) return ''
  return props.data.teachers.map(item => item.name).join('、')
})
</script>

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