<template>
  <div>
    <!-- 单选多选判断题(题目描述dom结构一样，只那选项区分) -->
    <template v-if="questionData.type === 1 || questionData.type === 2 || questionData.type === 3">
      <div class="title">
        <span>{{ questionData.orderNum }}.</span>{{ questionData.title }}
      </div>
      <div class="describe" v-html="questionData.des"></div>
      <ul :class="questionData.type === 2 ? 'check-option' : 'radio-option'">
        <template v-for="(item, index) in questionData.opt">
          <li
            :key="index"
            @click="changeOptions(questionData.type, questionData.id, item.id)"
            :class="questionParams.answerRecord[questionData.id]
              ? questionParams.answerRecord[questionData.id].answer.find(id => { return id === item.id })
                ? 'active'
                : ''
              : ''"
            >
            <div class="icon"></div>
            <div class="txt">{{item.text}}</div>
          </li>
        </template>
      </ul>
    </template>
    <!-- 复合题 -->
    <template v-if="questionData.type === 4">
      <div class="case-que">
        <div class="stem">李克强在讲话中首先代表党中央、国务院，向受命名的地方和受表彰的单位与个人
表示热烈祝贺，向人民解放军指战员、武警官兵、民兵预备役人员、部队职工，向烈军
属、伤残军人、转业复员退伍军人和军队离退休干部，向双拥工作战线的同志们致以诚
挚问候，向所有关心支持国防和军队建设的社会各界人士表示衷心感谢。
李克强说，党的十八大以来，在以习近平同志为核心的党中央坚强领导下，各地区
各有关部门积极支持和服务保障军队建设改革，进一步加大优抚安置保障，军队支援经
济社会发展积极有为，在参与重大自然灾害抢险救援和应对突发事件中当先锋，年面对
疫情，人民子弟兵闻令而动、敢打硬仗，广大军民携手同心、共克时艰，取得了抗击疫
情斗争重大战略成果，彰显了军政军民团结的强大力量。</div>
        <ul class="topics" :style="{height: contentHeight - 60 + 'px'}">
          <li>
            <div class="title">
              <span>11.</span>将以下5个句子重新排列组合，排列组合最连贯的是。
            </div>
            <ul class="radio-option"> <!-- radio-option check-option -->
              <li class="active">
                <div class="icon"></div>
                <div class="txt">A.⑤④②③①</div>
              </li>
              <li>
                <div class="icon"></div>
                <div class="txt">A.⑤④②③①</div>
              </li>
              <li>
                <div class="icon"></div>
                <div class="txt">A.⑤④②③①</div>
              </li>
              <li>
                <div class="icon"></div>
                <div class="txt">A.⑤④②③①</div>
              </li>
            </ul>
          </li>
          <li>
            <div class="title">
              <span>11.</span>将以下5个句子重新排列组合，排列组合最连贯的是。
            </div>
            <ul class="check-option"> <!-- radio-option check-option -->
              <li class="active">
                <div class="icon"></div>
                <div class="txt">A.⑤④②③①</div>
              </li>
              <li>
                <div class="icon"></div>
                <div class="txt">A.⑤④②③①</div>
              </li>
              <li>
                <div class="icon"></div>
                <div class="txt">A.⑤④②③①</div>
              </li>
              <li>
                <div class="icon"></div>
                <div class="txt">A.⑤④②③①</div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </template>
  </div>
</template>
<script>
export default {
  props: {
    contentHeight: { type: Number, default: () => {} },
    questionParams: { type: Object, default: () => {} }
  },
  data() {
    return {
      questionData: {}
    }
  },
  mounted() {
    this.questionData = this.questionParams.list[this.questionParams.questionIndex]
  },
  methods: {
    changeOptions(type, id, cId) {
      if (type !== 2) {
        this.questionParams.answerRecord[id]
          ? this.questionParams.answerRecord[id].answer = [cId]
          : (() => {
            this.questionParams.answeredCount++
            this.questionParams.answerRecord[id] = { answer: [cId] }
          })()
      } else {
        if (this.questionParams.answerRecord[id]) {
          const optChack = this.questionParams.answerRecord[id].answer.findIndex(item => { return item === cId })
          optChack === -1
            ? (() => {
              this.questionParams.answerRecord[id].answer.length === 0 && (this.questionParams.answeredCount++)
              this.questionParams.answerRecord[id].answer.push(cId)
            })()
            : this.questionParams.answerRecord[id].answer.splice(optChack, 1)
          this.questionParams.answerRecord[id].answer.length === 0 && (this.questionParams.answeredCount--)
        } else {
          this.questionParams.answeredCount++
          this.questionParams.answerRecord[id] = { answer: [cId] }
        }
      }
      this.$forceUpdate()
    }
  },
  computed: {
    changeQuestionIndex() {
      return this.questionParams.questionIndex
    }
  },
  watch: {
    changeQuestionIndex(newV, oldV) {
      this.questionData = this.questionParams.list[this.questionParams.questionIndex]
      console.log(this.questionData)
    }
  }
}
</script>
<style lang="scss" scoped>
.title{
  font-size: 18px;
  font-weight: bold;
  color: #222222;
  line-height: 25px;
  span{
    font-size: 32px;
    font-weight: bold;
    color: #222222;
    line-height: 45px;
  }
}
.describe{
  font-size: 18px;
  color: #222222;
  line-height: 25px;
  margin-top: 20px;
}
.radio-option,.check-option{
  padding: 24px 0 0 0;
  margin: 0;
  list-style: none;
  li{
    cursor: pointer;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    .icon{
      width: 18px;
      height: 18px;
      border: 1px solid #999999;
      border-radius: 50%;
    }
    .txt{
      width: 95%;
      font-size: 18px;
      color: #222222;
      line-height: 18px;
      margin-left: 10px;
    }
    &.active{
      .icon{
        width: 8px;
        height: 8px;
        border: 6px solid #C01540;
      }
    }
  }
}
.check-option{
  .icon{
    border-radius: 3px !important;
  }
}
.case-que{
  display: flex;
  .stem{
    flex: 1;
    font-size: 14px;
    font-weight: bold;
    color: #222222;
    line-height: 28px;
  }
  .topics{
    flex: 1;
    margin: 0;
    padding: 0 0 0 20px;
    list-style: none;
    overflow-y: scroll;
    scrollbar-width: none;
    &::-webkit-scrollbar {
      display: none;
    }
    li{
      .title{
        font-size: 18px;
        font-weight: bold;
        color: #222222;
        line-height: 25px;
        span{
          font-size: 32px;
          font-weight: bold;
          color: #222222;
          line-height: 45px;
        }
      }
    }
  }
}
</style>
