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

import CourseExamQuestionItem from './CourseExamQuestionItem.vue'
import { formatQuestionType } from '@/utils/index'

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

// 试题类型
const questionTypeText = computed(() => {
  return formatQuestionType(props.question.question_type)
})
</script>

<template>
  <div class="course-exam-question">
    <div class="course-exam-question-hd">
      <h4 class="course-exam-question-hd__title">{{ questionTypeText }}</h4>
      <aside class="course-exam-question-hd__aside"><slot name="index"></slot></aside>
    </div>
    <div class="course-exam-question-bd">
      <h2 class="course-exam-question-title" v-if="question.common_content" v-html="question.common_content"></h2>
      <template v-if="question.children && question.children.length">
        <CourseExamQuestionItem
          v-for="(item, index) in question.children"
          :question="item"
          :status="status"
          :index="index + 1"
          :key="item.id"
        />
      </template>
      <CourseExamQuestionItem :question="question" :status="status" :index="index" v-else />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.course-exam-question {
  position: relative;
}
.course-exam-question-hd {
  padding-top: 20px;
  display: flex;
  align-items: center;
  height: 45px;
}
.course-exam-question-hd__title {
  flex: 1;
  font-size: 18px;
  color: #222;
}
.course-exam-question-hd__aside {
  font-size: 18px;
  color: #222;
}
.course-exam-question-title {
  margin: 20px 0 30px;
  font-size: 18px;
  color: #222;
  .num {
    font-size: 32px;
    font-weight: bold;
    color: #222;
    line-height: 45px;
    margin-top: 5px;
  }
}
</style>
