<template>
  <div class="question-list">
    <div class="question-list-top">
      <h2>{{ question.question_item_title }}</h2>
      <p>{{ questionNumber }}/{{ paper.total_question_count }}</p>
    </div>
    <!-- 复合题 -->
    <div class="question-list-list" v-if="question.list">
      <div class="question-list-list-left" v-html="question.common_content"></div>
      <div class="question-list-list-right">
        <QuestionListItem
          :question="question"
          :class="{ 'is-active': question.q_number === questionNumber }"
          :key="question.id"
          v-for="question in question.list"
          v-on="$listeners"></QuestionListItem>
      </div>
    </div>
    <QuestionListItem :question="question" v-on="$listeners" v-else></QuestionListItem>
  </div>
</template>

<script>
import QuestionListItem from './QuestionListItem.vue'
export default {
  props: { paper: { type: Object, default: () => ({}) }, questionItems: { type: Array, default: () => [] }, questionNumber: { type: Number } },
  components: { QuestionListItem },
  computed: {
    question() {
      for (const group of this.questionItems) {
        for (const item of group.question_list) {
          if (item.list && item.list.find(item => item.q_number === this.questionNumber)) return item
          if (item.q_number === this.questionNumber) return item
        }
      }
      return {}
    }
  }
}
</script>

<style lang="scss">
.question-list-top {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
  height: 45px;
  border-bottom: 1px solid #ccc;
  h2 {
    flex: 1;
    font-size: 18px;
    font-weight: 400;
    color: #222;
  }
  p {
    font-size: 18px;
    color: #222;
  }
}
.question-list-list {
  display: flex;
  column-gap: 20px;
  img {
    max-width: 100% !important;
  }
}
.question-list-list-left {
  flex: 1;
  font-size: 14px;
  font-weight: bold;
  color: #222;
  line-height: 28px;
  overflow: hidden;
}
.question-list-list-right {
  flex: 1;
}
</style>
