<template>
  <div class="question-inner">
    <div class="type">
      {{ questionInfo.questionType }}
    </div>
    <p class="question">
      {{ questionInfo.question }}
    </p>

    <div class="wrapper-1">
      <div class="left">
        <button />
      </div>

      <div class="svg-wrapper" />

      <div class="right">
        <button />
      </div>
    </div>
    <!-- <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.selectedIdxList.length) {
        return true
      } else {
        return false
      }
    },
    isCorrect() {
      if (JSON.stringify(this.selectedIdxList) === JSON.stringify(this.questionInfo.answerOptions)) {
        return true
      } else {
        return false
      }
    }
  },
  watch: {
  },
  async mounted() {
    if (this.answerRecord) {
      // this.selectedIdxList = []
      this.selectedIdxList = [...JSON.parse(this.answerRecord.options)]
    }
  },
  methods: {
  }
}
</script>

<style lang="less" scoped>
.question-inner {
  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;
  }

  > .wrapper-1 {
    position: relative;
    width: 100%;
    height: 350px;
    background: blue;
    > .left {
      position: absolute;
      top: 0;
      left: 0;
      width: 30%;
      height: 100%;
    }
    > .svg-wrapper {
      position: absolute;
      top: 0;
      left: 30%;
      right: 30%;
      height: 100%;
      background: red;
    }
    > .right {
      position: absolute;
      top: 0;
      right: 0;
      width: 30%;
      height: 100%;
    }
  }

  > 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>