<template>
  <div>
    <div class="title">
      <div class="type">{{ dItem.question_title }}</div>
      <div class="count">{{ currentNum }}/{{ questionsData.sheet.question_count }}</div>
    </div>
    <div class="topic" v-html="dItem.question_content">
    </div>
    <ul class="option" v-if="item.type === '1' || item.type === '6' || item.type === '5' && dItem.answer_count <= 1">
      <template v-for="(opt, oIndex) in dItem.question_options">
        <template v-if="requestData2 != 0 && requestData[item.id]">
          <li :key="oIndex" v-if="requestData[item.id][dItem.id]" :class="requestData[item.id][dItem.id].answer.find(res => { return res === opt.id }) ? 'active' : ''" @click="selectRadio(dItem, opt.id, oIndex, item)" :data-id="opt.id">{{opaKey[oIndex]}}.{{ opt.option }}</li>
          <li :key="oIndex" v-else :class="dItem.activeIndex == oIndex ? 'active' : ''" @click="selectRadio(dItem, opt.id, oIndex, item)" :data-id="opt.id">{{opaKey[oIndex]}}.{{ opt.option }}</li>
        </template>
        <template v-else>
          <li :key="oIndex" :class="dItem.activeIndex == oIndex ? 'active' : ''" @click="selectRadio(dItem, opt.id, oIndex, item)" :data-id="opt.id">{{opaKey[oIndex]}}{{ opt.option }}</li>
        </template>
      </template>
    </ul>
    <ul class="option" v-if="item.type === '2' || item.type === '5' && dItem.answer_count > 1">
      <template v-for="(opt, oIndex) in dItem.question_options">
        <template v-if="requestData2 != 0 && requestData[item.id]">
          <li :key="oIndex+'-'" v-if="requestData[item.id][dItem.id]" :class="opt.active ? 'active' : ''" @click="selectCheckbox(opt, opt.id, dItem, item, oIndex)" :data-id="opt.id">{{opaKey[oIndex]}}.{{ opt.option }}</li>
          <li :key="oIndex+'-'" v-else :class="opt.active ? 'active' : ''" @click="selectCheckbox(opt, opt.id, dItem, item, oIndex)" :data-id="opt.id">{{opaKey[oIndex]}}.{{ opt.option }}</li>
        </template>
        <template v-else>
          <li :key="oIndex+'-'" :class="opt.active ? 'active' : ''" @click="selectCheckbox(opt, opt.id, dItem, item, oIndex)" :data-id="opt.id">{{opaKey[oIndex]}}.{{ opt.option }}</li>
        </template>
      </template>
    </ul>
    <!-- <div class="analy" v-if="isAnalysis">
      <div class="tit">答案解析</div>
      <div class="txt">正确答案：<span>{{ dItem.answerOpt }}</span></div>
      <div class="txt">您的答案：<span>{{ dItem.opaVal }}</span></div>
      <div class="exp">
        <p class="name">解析：</p>
        <p class="nr" v-html="dItem.question_analysis"></p>
      </div>
    </div> -->
  </div>
</template>

<script>
export default {
  props: ['dItem', 'currentNum', 'questionsData', 'item', 'requestData2', 'requestData'],
  data() {
    return {
      opaKey: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
    }
  },
  methods: {
    selectRadio(cData, checkId, index, oData) {
      if (!this.isExamEnd) {
        return false
      }
      const opa = this.opaKey
      cData.opaVal = opa[index]
      cData.activeIndex = index
      if (this.requestData[oData.id]) {
        if (!this.requestData[oData.id][cData.id]) {
          this.requestData[oData.id][cData.id] = {
            sign: false,
            answer: [checkId]
          }
        } else {
          this.requestData[oData.id][cData.id].answer = [checkId]
        }
      } else {
        this.requestData[oData.id] = {
          [cData.id]: {
            sign: false,
            answer: [checkId]
          }
        }
      }
      this.$forceUpdate()
    },
    // 多选事件
    selectCheckbox(opt, checkId, cData, oData, index) {
      if (!this.isExamEnd) {
        return false
      }
      opt.active === undefined ? opt.active = true : opt.active = !opt.active
      if (opt.active) {
        if (this.requestData[oData.id]) {
          if (this.requestData[oData.id][cData.id]) {
            const arr = this.requestData[oData.id][cData.id].answer
            this.requestData[oData.id][cData.id] = {
              sign: this.requestData[oData.id][cData.id].sign
            }
            arr.push(checkId)
            this.requestData[oData.id][cData.id].answer = arr
          } else {
            this.requestData[oData.id][cData.id] = {
              sign: false,
              answer: [checkId]
            }
          }
        } else {
          this.requestData[oData.id] = {
            [cData.id]: {
              sign: false,
              answer: [checkId]
            }
          }
        }
      } else {
        const index = this.requestData[oData.id][cData.id].answer.indexOf(checkId)
        this.requestData[oData.id][cData.id].answer.splice(index, 1)
      }
      const opa = this.opaKey
      const opaArr = []
      cData.question_options.map((item, i) => {
        if (item.active) {
          opaArr.push(opa[i])
        }
        cData.opaVal = opaArr.toString().replace(new RegExp(',', 'g'), '')
      })
      console.log(this.requestData)
      this.$forceUpdate()
    }
  }
  // props: {
  //   dItem: {
  //     type: Object,
  //     default () {
  //       return {}
  //     }
  //   },
  //   currentNum:
  // }
  // :dItem="dItem" :currentNum="currentNum" :questionsData="questionsData"
}
</script>

<style lang="scss" scoped>
</style>
