<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 questionNumTips: any = {
  1: [
    { class: 'is-info', name: '已答' },
    { class: 'is-default', name: '未答' },
    { class: 'is-success', name: '当前' }
  ],
  2: [
    { class: 'is-success', name: '答对' },
    { class: 'is-error', name: '答错' },
    { class: 'is-info', name: '未答' }
  ]
}
const questionNum = computed(() => {
  return questionNumTips[props.status]
})
function genClass(data: any, index: number) {
  // answer(0:未做,1:正确,2:错误)
  if (props.status === 1) {
    return {
      'is-info': !!data.user_answer, // 已做
      'is-success': index === questionIndex // 当前
    }
  }
  if (props.status === 2) {
    return {
      'is-success': data.answer === 1, // 答对
      'is-error': data.answer === 2, // 答错
      'is-info': data.answer === 0 // 未答
    }
  }
  if (props.status === 3) {
    return {
      'is-success': data.checked_flag, // 已批阅
      'is-error': !data.checked_flag, // 未批阅
      'is-info': data.answer === 0 // 未做
    }
  }
}
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;
  padding-top: 20px;
  .tit {
    font-size: 12px;
    color: #999999;
    line-height: 17px;
    margin-bottom: 10px;
  }
  ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
  }
}
.question-num-item {
  cursor: pointer;
  position: relative;
  border-radius: 50px;
  width: 24px;
  height: 24px;
  font-size: 14px;
  line-height: 24px;
  margin-right: 20px;
  margin-bottom: 10px;
  text-align: center;
  border: 2px solid #ccc;
  color: #666;

  &:nth-child(5n) {
    margin-right: 0;
  }
}
.question-num-tips {
  padding-bottom: 20px;
  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%;
}
</style>
