<script setup lang="ts">
import type { ExperimentInfo, ExperimentRecord } from '../types'

interface Props {
  data: ExperimentInfo
}

const props = defineProps<Props>()

const classText = $computed(() => {
  return props.data.student.classes.map(item => item.name).join('、')
})

const detail = $ref(inject<ExperimentRecord>('detail'))
</script>

<template>
  <el-dialog title="查看实验报告" :close-on-click-modal="false" width="600px">
    <el-form label-suffix="：" label-width="110px" label-position="right">
      <el-row>
        <el-col :span="12">
          <el-form-item label="实验名称">{{ data.name }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="实验课程名称">{{ data.course.name }}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="学生姓名">{{ data.student.name }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学生学号">{{ data.student.sno_number }}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="所属专业">{{ data.student.specialty.name }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属班级">{{ classText }}</el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="实验报告文件" v-if="detail?.file">
        {{ detail.file.name }}
        <el-button type="primary" text> <a :href="detail.file.url" target="_blank"> 查阅</a></el-button>
      </el-form-item>
    </el-form>
    <el-row justify="center">
      <el-button round auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
    </el-row>
  </el-dialog>
</template>
