<template>
  <div>
    <!-- 单选多选判断题(题目描述dom结构一样，只那选项区分) -->
    <template v-if="questionData.question_item_type == 1 || questionData.question_item_type == 2 || questionData.question_item_type == 6">
      <div class="title-type">
        <div class="type">{{ questionData.question_item_title }}</div>
        <div class="num">{{ questionData.q_order }}/{{ questionParams.question.total_question_count }}</div>
      </div>
      <div class="title">
        <div class="num">{{ questionData.q_order }}.</div><div class="des" v-html="questionData.content"></div>
      </div>
      <!-- <div class="describe" ></div> -->
      <ul :class="questionData.question_item_type == 2 ? 'check-option' : 'radio-option'">
        <template v-for="(item, index) in questionData.options">
          <li
            :key="index"
            :class="questionParams.answerRecord[questionData.question_item_id]
              ? questionParams.answerRecord[questionData.question_item_id][questionData.id]
                ? questionParams.answerRecord[questionData.question_item_id][questionData.id].answer.find(id => { return id === item.id })
                  ? 'active'
                  : ''
                : ''
              : ''"
            >
            <div @click="changeOptions(questionData.question_item_type, questionData.question_item_id, questionData.id, item.id)">
              <div class="icon"></div>
              <div class="txt" v-html="item.option"></div>
            </div>
          </li>
        </template>
      </ul>
    </template>
    <!-- 复合题 -->
    <template v-if="questionData.question_item_type == 5">
      <div class="title-type">
        <div class="type">{{ questionData.question_item_title }}</div>
        <div class="num">{{ questionData.q_order }}/{{ questionParams.question.total_question_count }}</div>
      </div>
      <div class="case-que">
        <div class="stem" v-html="questionData.common_content"></div>
        <ul class="topics" :style="{height: contentHeight - 60 + 'px'}">
          <template v-for="(item, index) in questionData.list">
            <li :key="'type5' + index">
              <div class="title">
                <div class="num">{{ item.q_order }}.</div><div class="des" v-html="item.content"></div>
              </div>
              <ul :class="item.type == 2 ? 'check-option' : 'radio-option'"><!-- radio-option check-option -->
                <template v-if="item.options">
                  <template v-for="(items, cIndex) in item.options">
                    <li
                      :id="items.id"
                      :key="'c' + cIndex"
                      :class="questionParams.answerRecord[questionData.question_item_id]
                        ? questionParams.answerRecord[questionData.question_item_id][questionData.id]
                          ? questionParams.answerRecord[questionData.question_item_id][questionData.id].answer.find(id => { return id === items.id })
                            ? 'active'
                            : ''
                          : ''
                        : ''"
                      >
                      <div @click="changeOptions(item.type, questionData.question_item_id, questionData.id, items.id)">
                        <div class="icon"></div>
                        <div class="txt">{{items.option}}</div>
                      </div>
                    </li>
                  </template>
                </template>
              </ul>
            </li>
          </template>
        </ul>
      </div>
    </template>
  </div>
</template>
<script>
import action from '@action'
import Bus from '@/components/common/bus.js'
export default {
  components: {
  },
  props: {
    contentHeight: { type: Number, default: () => {} },
    questionParams: { type: Object, default: () => {} }
  },
  data() {
    return {
      questionData: {},
      clearTime: null
    }
  },
  created() {
  },
  mounted() {
    this.dataCombined()
  },
  methods: {
    // 重组数据
    dataCombined() {
      this.questionParams.question.question_items.map((item, index) => {
        if (parseInt(item.question_item_type) === 5) {
          item.question_list.map(cItem => {
            const currentItem = cItem.list.find(items => { return items.q_order === this.questionParams.questionIndex + 1 })
            if (currentItem) {
              this.questionData = {}
              this.questionData.common_content = cItem.common_content
              this.questionData.list = cItem.list.map(k => {
                if (k.q_order === this.questionParams.questionIndex + 1) {
                  this.questionData.id = k.id
                  this.questionData.q_order = k.q_order
                  typeof k.options === 'string' && (k.options = JSON.parse(k.options))
                  return k
                } else {
                  return {
                    content: k.content,
                    q_order: k.q_order
                  }
                }
              })
              const key = ['question_item_id', 'question_item_title', 'question_item_type']
              key.map(k => {
                this.questionData[k] = item[k]
              })
            }
          })
        } else {
          const currentItem = item.question_list.find(items => { return items.q_order === this.questionParams.questionIndex + 1 })
          if (currentItem) {
            this.questionData = currentItem
            const key = ['question_item_id', 'question_item_title', 'question_item_type']
            key.map(k => {
              this.questionData[k] = item[k]
            })
            typeof this.questionData.options === 'string' && (this.questionData.options = JSON.parse(currentItem.options))
          }
        }
      })
    },
    // 选项选择
    changeOptions(type, pId, cId, optId) {
      if (parseInt(type) !== 2) {
        this.questionParams.answerRecord[pId]
          ? this.questionParams.answerRecord[pId][cId]
            ? this.questionParams.answerRecord[pId][cId].answer = [optId]
            : this.questionParams.answerRecord[pId][cId] = {
              answer: [optId],
              sign: false
            }
          : this.questionParams.answerRecord[pId] = {
            [cId]: {
              answer: [optId],
              sign: false
            }
          }
      } else {
        this.questionParams.answerRecord[pId]
          ? this.questionParams.answerRecord[pId][cId]
            ? (() => {
              const optChack = this.questionParams.answerRecord[pId][cId].answer.findIndex(item => { return item === optId })
              if (optChack === -1) {
                this.questionParams.answerRecord[pId][cId].answer.push(optId)
              } else {
                this.questionParams.answerRecord[pId][cId].answer.splice(optChack, 1)
              }
            })()
            : this.questionParams.answerRecord[pId][cId] = {
              answer: [optId],
              sign: false
            }
          : this.questionParams.answerRecord[pId] = {
            [cId]: {
              answer: [optId],
              sign: false
            }
          }
      }
      console.log(this.countQuetion)
      Bus.$emit('monitoringChanges')
      this.$forceUpdate()
    },
    setCache() {
      const param = {
        answer: JSON.stringify(this.questionParams.answerRecord)
      }
      action.Exam.setCache(this.$route.params.examId, param).then(res => {
      }).catch(err => {
        if (err.message.indexOf('error') !== -1) {
          this.$confirm('网络异常，请保持网络通畅', '提示', {
            confirmButtonText: '退出考试',
            cancelButtonText: '重新提交',
            type: 'warning'
          }).then(() => {
            this.$router.replace({
              path: `/login/${JSON.parse(window.localStorage.getItem('examInfo')).exam_id}`
            })
          }).catch(() => {
            this.endExamRequest()
          })
        } else {
          this.$alert(err.message, {
            callback: action => {}
          })
        }
      })
    },
    // 标记
    onSignHandle() {
      const pId = this.questionData.question_item_id
      const cId = this.questionData.id
      this.questionParams.answerRecord[pId]
        ? this.questionParams.answerRecord[pId][cId]
          ? this.questionParams.answerRecord[pId][cId].sign
            ? this.questionParams.answerRecord[pId][cId].sign = false
            : this.questionParams.answerRecord[pId][cId].sign = true
          : this.questionParams.answerRecord[pId][cId] = {
            sign: true,
            answer: []
          }
        : this.questionParams.answerRecord[pId] = {
          [cId]: {
            sign: true,
            answer: []
          }
        }
      this.signCallback()
    },
    signCallback() {
      const pId = this.questionData.question_item_id
      const cId = this.questionData.id
      let isSign = false
      this.questionParams.answerRecord[pId]
        ? this.questionParams.answerRecord[pId][cId]
          ? isSign = this.questionParams.answerRecord[pId][cId].sign
          : isSign = false
        : isSign = false
      this.$emit('isSign', isSign)
      Bus.$emit('monitoringChanges')
    },
    createTag() {
      if ($('math').length) {
        if ($('.MathTag').length) {
          $('.MathTag').remove()
          this.addTag()
        } else {
          this.addTag()
        }
      }
    },
    addTag() {
      const cdn = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=MML_HTMLorMML'
      const script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = cdn
      script.className = 'MathTag'
      const script2 = document.createElement('script')
      script2.type = 'text/javascript'
      script2.innerHTML = 'window.MathJax = { MathML: { extensions: ["mml3.js", "content-mathml.js"]}}'
      script2.className = 'MathTag'
      $('body').append(script2)
      $('body').append(script)
    }
  },
  computed: {
    changeQuestionIndex() {
      return this.questionParams.questionIndex
    }
  },
  watch: {
    changeQuestionIndex(newV, oldV) {
      this.dataCombined()
      this.setCache()
      this.signCallback()
      this.$nextTick(() => {
        this.createTag()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.title-type{
  width: 100%;
  height: 45px;
  border-bottom:1px solid #ccc;
  display: flex;
  align-items: center;
  .type{
    font-size: 18px;
    color: #222222;
  }
  .num{
    margin-left: auto;
    font-size: 18px;
    color: #222222;
  }
}

.title{
  font-size: 18px;
  font-weight: bold;
  color: #222222;
  line-height: 25px;
  display: flex;
  .num{
    font-size: 32px;
    font-weight: bold;
    color: #222222;
    line-height: 45px;
    margin-top: 5px;
  }
  .des{
    margin-left: 5px;
    padding-top: 18px;
    &::v-deep p{
      margin: 0;
    }
  }
}
.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;
    overflow: hidden;
    // align-items: center;
    div {
      float: left;
      cursor: pointer;
      .icon{
        width: 18px;
        height: 18px;
        border: 1px solid #999999;
        border-radius: 50%;
        margin-top: 3px;
        float: left;
      }
      .txt{
        max-width: 95%;
        font-size: 18px;
        color: #222222;
        line-height: 28px;
        margin-left: 10px;
        float: left;
        &::v-deep p{
          margin: 0;
        }
      }
    }
    // .icon{
    //   width: 18px;
    //   height: 18px;
    //   border: 1px solid #999999;
    //   border-radius: 50%;
    //   margin-top: 3px;
    // }
    // .txt{
    //   width: 95%;
    //   font-size: 18px;
    //   color: #222222;
    //   line-height: 28px;
    //   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>
