<script setup lang="ts">
import { getExperimentScore } from '../api'

interface Props {
  experiment_id: string
}
const props = defineProps<Props>()

let experiment = $ref<any>()
let detail = $ref<any>()
const classText = $computed(() => {
  if (!experiment) return ''
  return experiment.student.classes.map((item: any) => item.name).join('、')
})

function fetchInfo() {
  getExperimentScore({ experiment_id: props.experiment_id }).then(res => {
    experiment = res.data.experiment
    let scoreDetails = []
    try {
      scoreDetails = JSON.parse(res.data.achievement.score_details).map((item: any) => {
        return { ...item, percent: parseFloat(item.percent), commit_score: parseFloat(item.commit_score) }
      })
    } catch (error) {
      console.log(error)
    }
    detail = Object.assign(res.data.achievement, {
      score: parseFloat(res.data.achievement.score),
      score_details: scoreDetails
    })
  })
}
onMounted(() => {
  fetchInfo()
})

function getOperationUrl(type: number) {
  if (type === 1) {
    // 实验报告
    return `/student/lab/report/view/${experiment.id}`
  } else if (type === 8) {
    // 用户旅程
    return `${import.meta.env.VITE_DML_URL}/trip/my/score?experiment_id=${experiment.id}&student_id=${
      experiment.student.id
    }`
  }
}
</script>

<template>
  <el-dialog title="实验成绩详情" width="600px">
    <el-form label-width="120px" label-suffix="：" v-if="detail">
      <el-form-item label="实验名称">{{ experiment.name }}</el-form-item>
      <el-form-item label="实验课程名称">{{ experiment.course.name }}</el-form-item>
      <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-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="评分教师">
            {{
              detail.checker_sso_user.real_name || detail.checker_sso_user.nickname || detail.checker_sso_user.username
            }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="评分时间">{{ detail.check_time }}</el-form-item>
        </el-col>
      </el-row>
      <div class="form-result">
        <div class="form-result__score">
          <p>实验得分</p>
          <p class="t1">{{ detail.score }}</p>
        </div>
        <el-table
          :data="detail.score_details"
          stripe
          :header-cell-style="{ background: '#ededed' }"
          v-if="detail.is_show === '1'">
          <el-table-column label="实验成绩组成项" prop="name" align="center"></el-table-column>
          <el-table-column label="权重" prop="percent" align="center">
            <template #default="{ row }">{{ row.percent }}%</template>
          </el-table-column>
          <el-table-column label="得分" width="100" align="center">
            <template #default="{ row }">
              {{ row.commit_score }}
              <!-- 实验报告 | 用户旅程 -->
              <template v-if="(row.type === 1 && experiment.report_upload_way === 2) || row.type === 8">
                <el-button text type="primary">
                  <a :href="getOperationUrl(row.type)" target="_blank">查看明细</a>
                </el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>
    <template #footer>
      <el-row justify="center">
        <el-button round auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.form-result {
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-result__score {
  padding: 40px;
  white-space: nowrap;
  text-align: center;
  .t1 {
    font-size: 30px;
    color: var(--main-color);
  }
}
</style>
