<script setup lang="ts">
import type { PaperQuestionType } from '@/types'
import CourseExamResultQuestionNumbers from '../components/CourseExamResultQuestionNumbers.vue'
import { getPaper } from '../api'

const route = useRoute()
const courseId = $ref(route.query.course_id as string)
provide('courseId', courseId)
const semesterId = $ref(route.query.semester_id as string)
provide('semesterId', semesterId)
const paperId = $ref(route.query.paper_id as string)
provide('paperId', paperId)
const paperTitle = $ref(route.query.paper_title as string)
provide('paperTitle', paperTitle)
const type = $ref(parseInt(route.query.type as string))
provide('type', type)

const detail = reactive({ status: 2, check_time: '', commit_time: '', score: '', question: [], score_details: [] })
let questionList = $ref<PaperQuestionType[]>([])
provide('questionList', $$(questionList))

let loading = $ref<boolean>(false)
// 获取试卷详情
function fetchInfo() {
  loading = true
  getPaper({ course_id: courseId, semester_id: semesterId, paper_id: paperId, type }).then(res => {
    const { question, status, score_details } = res.data
    Object.assign(detail, res.data)
    questionList = status === 1 ? question : score_details
    loading = false
  })
}

const chart = $computed(() => {
  return questionList.reduce(
    (result, item) => {
      // 大题
      if (item.children && item.children.length) {
        item.children.forEach(item => {
          if (item.question_options && item.question_options.length) {
            result.objectiveQuestions.score += item.user_score || 0
            result.objectiveQuestions.total += item.score
          } else {
            result.subjectiveQuestions.score += item.user_score || 0
            result.subjectiveQuestions.total += item.score
          }
        })
      } else {
        if (item.question_options && item.question_options.length) {
          result.objectiveQuestions.score += item.user_score || 0
          result.objectiveQuestions.total += item.score
        } else {
          result.subjectiveQuestions.score += item.user_score || 0
          result.subjectiveQuestions.total += item.score
        }
      }
      return result
    },
    {
      objectiveQuestions: { score: 0, total: 0 }, // 客观题
      subjectiveQuestions: { score: 0, total: 0 } // 主观题
    }
  )
})
// 客观题
const objectiveQuestions = computed(() => {
  const { score, total } = chart.objectiveQuestions
  return {
    percentage: total ? Math.floor((score / total) * 100) : 0,
    score,
    total
  }
})
// 主观题
const subjectiveQuestions = computed(() => {
  const { score, total } = chart.subjectiveQuestions
  return {
    percentage: total ? Math.floor((score / total) * 100) : 0,
    score,
    total
  }
})
onMounted(() => {
  fetchInfo()
})
</script>

<template>
  <div class="course-exam-result" v-loading="loading">
    <div class="course-exam-card">
      <div class="chart-box">
        <div class="chart-box-hd">
          <h2>成绩报告</h2>
          {{ detail.commit_time }}
        </div>
        <div class="chart-box-bd chart-wrapper">
          <div class="chart-item">
            <div class="chart-item__title">客观题</div>
            <div class="chart-item__content">
              <el-progress type="circle" color="#ba143e" :stroke-width="8" :percentage="objectiveQuestions.percentage">
                <p>{{ objectiveQuestions.score }}分</p>
              </el-progress>
            </div>
          </div>
          <div class="chart-item">
            <div class="chart-item__title">主观题</div>
            <div class="chart-item__content">
              <el-progress type="circle" color="#ba143e" :stroke-width="8" :percentage="subjectiveQuestions.percentage">
                <p>{{ detail.status === 3 ? subjectiveQuestions.score : '-' }}分</p>
              </el-progress>
            </div>
          </div>
        </div>
      </div>
      <div class="chart-box">
        <div class="chart-box-hd">
          <h2>测试评估</h2>
        </div>
        <div class="chart-box-bd">
          <div class="score">
            <el-progress color="#ba143e" :stroke-width="8" :percentage="detail.score ? parseFloat(detail.score) : 0" style="width: 100%">
              <img src="@/assets/images/icon_exam_result.png" width="24" />
            </el-progress>
            <template v-if="detail.status !== 3">
              <p class="t1">请等待老师评分~</p>
            </template>
            <template v-else>
              <p class="t2">{{ detail.score }}</p>
            </template>
          </div>
        </div>
      </div>
    </div>
    <div class="course-exam-card" style="flex: 0 0 500px">
      <CourseExamResultQuestionNumbers />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.course-exam-result {
  display: flex;
  height: 100%;
}
.course-exam-card {
  flex: 1;
  height: 100%;
  background-color: #fff;
  border-radius: 6px;
  padding: 0.2rem;
  box-sizing: border-box;
}
.course-exam-card + .course-exam-card {
  margin-left: 0.2rem;
}
.chart-box-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  color: #222222;
  line-height: 45px;
  border-bottom: 1px solid #ccc;
}
.chart-box-bd {
  padding: 0.2rem 0;
}
.chart-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
.chart-item {
  padding: 0.4rem;
  display: flex;
  align-items: center;
}
.chart-item__title {
  padding: 0.2rem;
  font-size: 0.22rem;
  color: #333;
}
.chart-item__content {
  p {
    font-size: 0.22rem;
    color: #333;
  }
}
.score {
  width: 3rem;
  margin: 0.1rem auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .t1 {
    font-size: 14px;
    color: #222222;
    line-height: 20px;
    text-align: center;
    margin: 50px 0 68px 0;
  }
  .t2 {
    font-size: 44px;
    font-weight: 500;
    color: #222222;
    line-height: 20px;
    text-align: center;
    margin: 50px 0 68px 0;
  }
}

.is-h5 {
  .course-exam-result {
    flex-direction: column;
  }
  .course-exam-card {
    margin-bottom: 0.2rem;
    margin-left: 0;
  }
  .chart-item {
    padding: 0;
  }

}
</style>
