<template>
  <div class="question-pending">
    <div class="type">
      {{ questionInfo.questionType }}
    </div>
    <p class="question">
      {{ questionInfo.question }}
    </p>
    <button
      v-for="(option, index) in questionInfo.answerOptions"
      :key="index"
      :disabled="isSubmitted"
      class="option"
      :class="{
        selected: selectedIdxList[index],
        rightOption: questionInfo.rightOptionIdx.includes(index),
        wrongOption: !questionInfo.rightOptionIdx.includes(index),
        submitted: isSubmitted,
        notSubmitted: !isSubmitted,
      }"
      @click="onClickOption(index)"
    >
      <div class="option-text">
        {{ option }}
      </div>
      <div
        v-show="isSubmitted && selectedIdxList[index] && questionInfo.rightOptionIdx.includes(index)"
        class="result-tip"
      >
        <img
          class="correct-icon"
          src="@/assets/images/correct.png"
          alt=""
          draggable="false"
        >
        <span class="right-tip-text">恭喜你，回答正确</span>
      </div>
      <div
        v-show="isSubmitted && selectedIdxList[index] && !questionInfo.rightOptionIdx.includes(index)"
        class="result-tip"
      >
        <img
          class="wrong-icon"
          src="@/assets/images/wrong.png"
          alt=""
          draggable="false"
        >
        <span class="wrong-tip-text">很遗憾，回答错误</span>
      </div>
    </button>
  </div>
</template>

<script>
// import browser from "@/utils/browser";

export default {
  props: [
  ],
  data() {
    return {
      selectedIdxList: [],
    }
  },
  computed: {
    ...globalMapState([
      'questionInfo',
      'isSubmitted',
      'answerRecord',
    ]),
    canSubmit() {
      if (this.questionInfo.questionType === '单选题' || this.questionInfo.questionType === '判断题') {
        return this.selectedIdxList.filter((item) => {
          return !!item
        }).length > 0
      } else if (this.questionInfo.questionType === '多选题') {
        return this.selectedIdxList.filter((item) => {
          return !!item
        }).length > 1
      } else {
        return false
      }
    },
    isCorrect() {
      if (this.questionInfo.rightOptionIdx.length !== this.selectedIdxList.filter((item) => {
        return !!item
      }).length) {
        return false
      }
      for (const iterator of this.questionInfo.rightOptionIdx) {
        if (!this.selectedIdxList[iterator]) {
          return false
        }
      }
      return true
    }
  },
  watch: {
  },
  async mounted() {
    if (this.answerRecord) {
      // this.selectedIdxList = []
      this.selectedIdxList = [...JSON.parse(this.answerRecord.options)]
    } else {
      this.selectedIdxList = new Array(this.questionInfo.answerOptions.length)
      this.selectedIdxList.forEach(element => {
        return !!element
      })
    }
  },
  methods: {
    ...globalMapMutations([
      'setIsSubmitted',
    ]),
    onClickOption(idx) {
      if (this.questionInfo.questionType === '单选题' || this.questionInfo.questionType === '判断题') {
        this.selectedIdxList = new Array(this.questionInfo.answerOptions.length)
        this.selectedIdxList.forEach(element => {
          return !!element
        })
        this.$set(this.selectedIdxList, idx, true)
        this.$emit('submit')
      } else if (this.questionInfo.questionType === '多选题') {
        this.$set(this.selectedIdxList, idx, !this.selectedIdxList[idx])
      }
    }
  }
}
</script>

<style lang="less" scoped>
.question-pending {
  flex: 1 0 1px;
  width: calc(100% - 150px * 2);
  margin-top: 10px;
  counter-reset: count;
  > .type {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 24px;
    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
    font-weight: bold;
    color: #693D2F;
  }
  > p.question {
    margin-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 20px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #693D2F;
  }
  > button.option {
    margin-top: 6px;
    height: 45px;
    padding-left: 10px;
    padding-right: 50px;
    padding-top: 5px;
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #693D2F;
    counter-increment: count;
    &.notSubmitted:hover {
      color: #5f9533;
    }
    &.notSubmitted.selected {
      background-image: url(@/assets/images/option-correct-bg.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      color: #5f9533;
    }
    &.submitted {
      pointer-events: none;
    }
    &.submitted.selected.rightOption {
      background-image: url(@/assets/images/option-correct-bg.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      color: #5f9533;
    }
    &.submitted.selected.wrongOption {
      background-image: url(@/assets/images/option-wrong-bg.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
    }
    > .option-text {
      &::before {
        content: counter(count, upper-alpha);
        margin-right: 0.5em;
      }
    }
    > .result-tip {
      display: inline-flex;
      align-items: center;
      > img.correct-icon {
        width: 16px;
        height: 12px;
        margin-right: 9px;
      }
      > img.wrong-icon {
        width: 13px;
        height: 13px;
        margin-right: 9px;
      }
      > .right-tip-text {
        font-size: 16px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #3E7016;
      }
      > .wrong-tip-text {
        font-size: 16px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #693D2F;
      }
    }
  }
}
</style>