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

interface Props {
  index: number
  status: number
}
const props = defineProps<Props>()

// 所有试题
const questionList = $ref<PaperQuestionType[]>(inject('questionList'))
// 试题索引
let questionIndex = $ref<number>(inject('questionIndex'))

const questionNum = computed(() => {
  if (props.status === 3) {
    return [
      { class: 'is-success', name: '答对' },
      { class: 'is-error', name: '答错' },
      { class: 'is-info', name: '未答' }
    ]
  } else {
    return [
      { class: 'is-info', name: '已答' },
      { class: 'is-default', name: '未答' },
      { class: 'is-success', name: '当前' }
    ]
  }
})
function genClass(data: PaperQuestionType, index: number) {
  let hasUserAnswer = !!data.user_answer
  if (data.children && data.children.length) {
    !data.children.filter(item => !item.user_answer).length && (hasUserAnswer = true)
  }
  if (props.status === 3) {
    return {
      'is-success': data.user_answer_status, // 答对
      'is-error': !data.user_answer_status, // 答错
      'is-info': !hasUserAnswer // 未答
    }
  } else {
    return {
      'is-info': hasUserAnswer, // 已做
      'is-success': index === questionIndex // 当前
    }
  }
}
function handleClick(index: number) {
  questionIndex = index
}
</script>

<template>
  <div class="question-numbers">
    <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, index)" :key="index" @click="handleClick(index)">
          {{ index + 1 }}
        </li>
      </ul>
      <!-- </div> -->
    </div>

    <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>
</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(5, 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: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .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-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-error {
  color: #666;
  border: 2px solid #c01540;
}
.is-mark::after {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 4px;
  height: 4px;
  background: #c01540;
  border-radius: 50%;
}

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