<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>
        <!-- 内容组件 -->
        <template v-if="item.type === 1">
          <p>{{ item.notice_message || item.question_stem }}</p>
          <el-input
            type="textarea"
            readonly
            :autosize="{ minRows: 6 }"
            :placeholder="`这里是学生填写的${item.name}回答内容，支持富文本。`" />
        </template>
        <!-- 附件组件 -->
        <template v-else-if="item.type === 2">
          <el-table stripe :header-cell-style="{ background: '#ededed' }">
            <el-table-column label="序号" type="index" width="80px" align="center"></el-table-column>
            <el-table-column label="附件类型" align="center"></el-table-column>
            <el-table-column label="附件名称" align="center"></el-table-column>
            <el-table-column label="更新时间" align="center"></el-table-column>
            <el-table-column label="操作" align="right">
              <el-link>查看</el-link>
            </el-table-column>
          </el-table>
        </template>
        <!-- 思考题 -->
        <template v-else-if="item.type === 3">
          <p>{{ item.question_stem }}</p>
          <el-input
            type="textarea"
            readonly
            :autosize="{ minRows: 6 }"
            :placeholder="`这里是学生填写的${item.name}回答内容，支持富文本。`" />
        </template>
        <!-- 试卷 -->
        <template v-else-if="item.type === 4"> </template>
      </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" scoped>
.report-preview {
  h1 {
    font-size: 24px;
    text-align: center;
    padding-bottom: 30px;
  }
  .total-score {
    text-align: right;
    font-size: 16px;
    font-weight: bold;
    color: var(--main-color);
    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>
