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

const props = defineProps({ id: String })

let experiment = $ref()
let report = $ref()

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

function fetchInfo() {
  getExperimentReport({ experiment_id: props.id }).then(res => {
    experiment = res.data.experiment
    report = res.data.report
    let detail = []
    try {
      detail = JSON.parse(report.detail)
    } catch (error) {
      console.log(error)
    }
    report = Object.assign(report, { detail })
  })
}
onMounted(() => {
  fetchInfo()
})

// 关闭
function handleClose() {
  window.close()
}
</script>

<template>
  <h1 class="report-title">实验报告</h1>
  <el-form label-suffix="：" hide-required-asterisk v-if="experiment">
    <el-row>
      <el-col :span="12">
        <el-form-item label="课程名称">{{ experiment.course.name }}</el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="实验名称">{{ experiment.name }}</el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="实验地点">{{ report.experiment_address }} </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="实验日期"> {{ report.experiment_date }} </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="实验类型">{{ experiment.type_level }}</el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="指导教师">{{ teacherText }}</el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="专业">{{ experiment.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-row>
      <el-col :span="12">
        <el-form-item label="姓名">{{ experiment.student.name }}</el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="学号">{{ experiment.student.sno_number }}</el-form-item>
      </el-col>
    </el-row>
    <el-divider />
    <el-form-item :label="item.name" v-for="item in report.detail" :key="item.id" class="report-form-item">
      <!-- 内容 -->
      <template v-if="item.type === 1">
        {{ item.notice_message }}
        <div class="report-form-item__content" v-html="item.content"></div>
      </template>
      <!-- 附件 -->
      <template v-if="item.type === 2">
        <el-table :data="item.files" stripe :header-cell-style="{ background: '#ededed' }" style="margin-top: 20px">
          <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
          <el-table-column label="附件类型" prop="type" align="center">
            <template #default="{ row }">
              {{ row.type === '1' ? '本地上传' : '实验截图' }}
            </template>
          </el-table-column>
          <el-table-column label="附件名称" prop="name" align="center"></el-table-column>
          <el-table-column label="更新时间" prop="updated_time" align="center"></el-table-column>
          <el-table-column label="操作" width="100" align="center">
            <template #default="{ row }">
              <el-button text type="primary"><a :href="row.url" target="_blank">查看</a></el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 思考题 -->
      <template v-if="item.type === 3">
        {{ item.question_stem }}
        <div class="report-form-item__content" v-html="item.content"></div>
      </template>
    </el-form-item>
  </el-form>
  <el-row justify="center">
    <el-button type="primary" plain auto-insert-space @click="handleClose">关闭</el-button>
  </el-row>
</template>

<style lang="scss">
.report-title {
  padding: 20px;
  font-size: 20px;
  text-align: center;
}
.report-form-item {
  flex-direction: column;
  .el-form-item__label {
    font-weight: bold;
    text-align: left;
    justify-content: flex-start;
  }
}
.report-form-item__content {
  clear: both;
  width: 100%;
  padding: 10px;
  background-color: #efefef;
  border-radius: 6px;
  box-sizing: border-box;
}
</style>
