<script setup lang="ts">
import { reportScoreRule } from '@/utils/dictionary'
interface Props {
  data: any
}
const props = defineProps<Props>()

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

<template>
  <el-dialog title="预览" class="report-preview">
    <h1>实验报告</h1>
    <el-form label-suffix="：">
      <el-row>
        <el-col :span="12">
          <el-form-item label="课程名称">{{ data.course_name }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="实验名称">{{ data.name }}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="实验地点"></el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="实验日期"></el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="实验类型">{{ data.type_name }}</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="专业"></el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="班级"></el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名"></el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学号"></el-form-item>
        </el-col>
      </el-row>
      <el-divider />
      <p class="total-score">总分：{{ data.score }}分</p>
      <el-form-item v-for="(item, index) in data.detail_list" :key="item.id">
        <div class="form-hd">
          <h3>{{ index + 1 }}、{{ item.name }}</h3>
          <p class="score">{{ item.score }}分</p>
          <p class="rule-mode">{{ reportScoreRule[item.rule_mode] }}</p>
        </div>
        <el-input
          type="textarea"
          readonly
          :autosize="{ minRows: 6 }"
          :value="item.notice_message || item.question_stem" />
      </el-form-item>
    </el-form>
    <el-row justify="center">
      <el-button type="primary" round auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
    </el-row>
  </el-dialog>
</template>

<style lang="scss">
.report-preview {
  h1 {
    font-size: 24px;
    text-align: center;
    padding-bottom: 30px;
  }
  .total-score {
    text-align: right;
    padding-right: 100px;
  }
  .form-hd {
    display: flex;
    width: 100%;
    font-size: 14px;
    font-weight: bold;
    h3 {
      flex: 1;
    }
    .rule-mode {
      width: 100px;
      text-align: right;
    }
  }
}
</style>
