<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">{{questionData.stem}}</div>
        <ul class="topics" :style="{height: contentHeight - 60 + 'px'}">
          <template v-for="(item, index) in questionData.list">
            <li :key="'type4' + index">
              <div class="title">
                <span>{{ item.orderNum }}.</span>{{ item.title }}
              </div>
              <ul :class="item.type === 2 ? 'check-option' : 'radio-option'"><!-- radio-option check-option -->
                <template v-for="(items, cIndex) in item.opt">
                  <li
                    :key="'c' + cIndex"
                    @click="changeOptions(item.type, item.id, items.id)"
                    :class="questionParams.answerRecord[item.id]
                      ? questionParams.answerRecord[item.id].answer.find(id => { return id === items.id })
                        ? 'active'
                        : ''
                      : ''"
                    >
                    <div class="icon"></div>
                    <div class="txt">{{items.text}}</div>
                  </li>
                </template>
                <!-- <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>
          </template>
          <!-- <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>
import Bus from '../../components/common/bus.js'
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] }
        }
      }
      Bus.$emit('monitoringChanges')
      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>
