<script setup lang="ts">
import type { PaperQuestionType } from '@/types'

const router = useRouter()
const courseId = $ref<string>(inject('courseId'))
const semesterId = $ref<string>(inject('semesterId'))
const paperId = $ref<string>(inject('paperId'))
const paperTitle = $ref<string>(inject('paperTitle'))
const type = $ref<string>(inject('type'))
// 所有试题
const questionList = $ref<PaperQuestionType[]>(inject('questionList'))

const questionNum = computed(() => {
  return [
    { class: 'is-success', name: '答对' },
    { class: 'is-error', name: '答错' },
    { class: 'is-info', name: '未答' },
    { class: 'is-review', name: '已评价' },
    { class: 'is-unReview', name: '未评价' }
  ]
})
function genClass(data: PaperQuestionType) {
  let hasUserAnswer = !!data.user_answer
  if (data.children && data.children.length) {
    !data.children.filter(item => !item.user_answer).length && (hasUserAnswer = true)
  }
  return {
    'is-success': data.user_answer_status, // 答对
    'is-error': !data.user_answer_status, // 答错
    'is-info': !hasUserAnswer, // 未答
    'is-review': data.is_reviewed && (data.question_type === 3 || data.child_question_type === 3), // 已评价
    'is-unReview': !data.is_reviewed && (data.question_type === 3 || data.child_question_type === 3) // 未评价
  }
}
function handleClick(index: number) {
  router.push({
    path: '/course/exam',
    query: { course_id: courseId, semester_id: semesterId, paper_id: paperId, type, index, paper_title: paperTitle }
  })
}
</script>

<template>
  <div class="question-numbers">
    <ul class="question-num-tips">
      <li v-for="(item, index) in questionNum" :key="index">
        <div class="question-num-tips-item" :class="item.class"></div>
        <div class="txt">{{ item.name }}</div>
      </li>
    </ul>
    <div class="question-num">
      <!-- <div v-for="item in dataList" :key="item.question_item_id">
        <div class="tit">{{ item.title }}</div> -->
      <ul>
        <li v-for="(item, index) in questionList" class="question-num-item" :class="genClass(item)" :key="index" @click="handleClick(index)">
          {{ index + 1 }}
        </li>
      </ul>
      <!-- </div> -->
    </div>
    <div style="text-align: center">
      <el-button size="large" @click="handleClick(0)">全部解析</el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.question-numbers {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.question-num {
  flex: 1;
  margin: 20px 0;
  overflow-y: auto;
  overflow-x: hidden;
  .tit {
    font-size: 12px;
    color: #999999;
    line-height: 17px;
    margin-bottom: 10px;
  }
  ul {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 10px;
  }
}
.question-num-item {
  position: relative;
  margin: 0 auto;
  width: 24px;
  height: 24px;
  font-size: 14px;
  line-height: 24px;
  color: #666;
  text-align: center;
  border: 2px solid #ccc;
  border-radius: 50px;
  cursor: pointer;
}
.question-num-tips {
  padding: 0 20px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  .txt {
    margin-top: 5px;
    font-size: 12px;
    color: #ccc;
    line-height: 17px;
    text-align: center;
  }
}
.question-num-tips-item {
  cursor: pointer;
  position: relative;
  border-radius: 50px;
  width: 24px;
  height: 24px;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  border: 2px solid #ccc;
  color: #666;
}
.is-default {
  color: #666;
  border: 2px solid #ccc;
}
.is-error {
  color: #666;
  border: 2px solid #c01540;
}

.is-review {
  color: #fff !important;
  background-color: blue;
  border: 2px solid blue;
}
.is-unReview {
  border: 2px solid pink;
}
.is-info {
  color: #fff;
  background-color: #999;
  border: 2px solid #999;
}
.is-success {
  color: #666;
  border: 2px solid #0fc118;
}
.is-info.is-success {
  color: #fff;
}

.is-h5 {
  .question-num {
    ul {
      grid-template-columns: repeat(8, 1fr);
    }
  }
}
</style>
