<script lang="ts" setup>
import type { IQuestionList } from '../type'
import { getPaperStuDetail } from '../api'
import QuestionItem from '../components/QuestionItem.vue'
const route = useRoute()
const questionList: any = ref<IQuestionList[]>([])
const questionData: any = ref({})
const paper_id = route.query.id as string

// 获取试卷详情
getPaperStuDetail({ id: paper_id }).then(res => {
  questionData.value = res.data
  questionList.value = JSON.parse(JSON.stringify(questionData.value.score_details))
  questionList.value.map((item: any) => {
    if (item.user_answer.indexOf(',') !== -1) {
      item.user_answer = item.user_answer.split(',')
    }
    return item
  })
})
</script>
<template>
  <el-card class="container">
    <div class="content">
      <template v-for="(item, index) in questionList" :key="index">
        <div class="sub-content" v-if="item?.children && item?.children.length > 0">
          <div class="sub-container">
            <div class="title" v-html="item.common_content"></div>

            <QuestionItem
              v-for="(subItem, itemIndex) in item.children"
              :key="subItem.id"
              :question="subItem"
              :currentIndex="index"
              :childIndex="itemIndex"
              :questionId="paper_id"
            />
          </div>
        </div>
        <div class="sub-container" v-else>
          <QuestionItem :question="item" :currentIndex="index" :questionId="paper_id" />
        </div>
      </template>
    </div>
  </el-card>
</template>
<style lang="scss" scoped>
.container {
  background: #fff;
  border: 1px solid #f3f3f3;
  margin-bottom: 20px;
  border-radius: 6px;
  ::v-deep .el-card__body {
    padding: 10px 20px;
  }
  .content {
    padding: 10px;
    .title {
      line-height: 40px;
      font-size: 16px;
    }
    .sub-container {
      border: 1px solid #e3e3e3;
      padding: 15px 15px 0;
      border-radius: 4px;
      margin-top: 10px;
    }
    .sub-content {
      margin-bottom: 20px;
      border-bottom: 1px solid #f3f3f3;
    }
    .question-item:last-child {
      border: none;
    }
  }
}
</style>
