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

const props = defineProps({ id: String, makePdf: Boolean })
const emit = defineEmits(['ready'])

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

const isCommit = $computed(() => {
  return report.is_comment === '1'
})
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 = []
    // 已批改
    if (report.is_comment === '1') {
      try {
        detail = JSON.parse(report.score_detail).map(item => {
          return { ...item, commit_score: parseFloat(item.commit_score) }
        })
      } catch (error) {
        console.log(error)
      }
    } else {
      try {
        detail = JSON.parse(report.detail)
      } catch (error) {
        console.log(error)
      }
    }
    report = Object.assign(report, { detail, score: parseFloat(report.score) })
    nextTick(() => {
      emit('ready')
    })
  })
}
watchEffect(() => {
  fetchInfo()
})

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

<template>
  <div class="report-preview">
    <div class="report-preview__inner">
      <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 />
        <template v-if="isCommit">
          <p class="report-score">实验报告得分：{{ report.score }}</p>
          <div class="comment is-all">
            <div class="comment-hd">实验报告整体评价</div>
            <div class="comment-bd">{{ report.comment }}</div>
          </div>
        </template>
        <el-form-item v-for="(item, index) in report.detail" :key="item.id" class="report-form-item">
          <div class="form-hd">
            <h3>{{ index + 1 }}、{{ item.name }}</h3>
            <p v-if="isCommit">得分：{{ item.commit_score }}分</p>
          </div>
          <!-- 内容 -->
          <template v-if="item.type === 1">
            <p class="report-form-item__tips">{{ item.notice_message }}</p>
            <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', width: makePdf ? '720px' : '100%' }">
              <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">
            <p class="report-form-item__tips">{{ item.question_stem }}</p>
            <div class="report-form-item__content" v-html="item.content"></div>
          </template>
          <div class="comment" v-if="isCommit">
            <div class="comment-hd">教师评价：</div>
            <div class="comment-bd">{{ item.comment }}</div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <el-row justify="center">
      <el-button type="primary" plain auto-insert-space @click="handleClose">关闭</el-button>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.report-preview__inner {
  padding: 40px;
  background-color: #fff;
}
.report-title {
  padding: 20px;
  font-size: 20px;
  text-align: center;
}

.report-score {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: var(--main-color);
  margin: 40px 0;
}
.report-form-item {
  margin-bottom: 40px;
  .form-hd {
    display: flex;
    width: 100%;
    font-size: 14px;
    font-weight: bold;
    justify-content: space-between;
    span {
      padding: 0 40px;
    }
  }
}
.report-form-item__content {
  clear: both;
  width: 100%;
  padding: 10px;
  background-color: #efefef;
  border-radius: 6px;
  box-sizing: border-box;
  :deep(*) {
    max-width: 100%;
  }
}
.comment {
  width: 100%;
  padding: 20px 0;
  &.is-all {
    margin-bottom: 60px;
    .comment-hd {
      font-size: 16px;
      font-weight: bold;
      color: var(--main-color);
    }
  }
}
.comment-hd {
  line-height: 30px;
}
.comment-bd {
  padding: 10px;
  border: 1px solid var(--main-color);
  border-radius: 6px;
}
</style>
