<template>
  <div
    class="question-view"
    :style="{
      width: initialWrapperWidth + 'px',
      height: initialWrapperHeight + 'px',
      transform: wrapperTransformCss,
    }"
  >
    <button
      class="close"
      @click="onClickClose"
    >
      <img
        src="@/assets/images/close.png"
        alt="关闭"
        draggable="false"
      >
    </button>
    <div class="title-wrapper">
      <h1>知识问答</h1>
    </div>
    <QuestionInner
      ref="question-inner"
      @submit="onSubmit"
    />
    <div
      v-show="isSubmitted"
      class="answer-desc-inline"
    >
      <p
        v-if="questionInfo.descText"
        class="desc"
      >
        {{ questionInfo.descText }}
      </p>
      <img
        v-for="(item, index) in questionInfo.descImg"
        :key="index"
        v-viewer="{
          button: true,
          navbar: false,
          title: false,
          toolbar: false,
          tooltip: false,
          movable: true,
          zoomable: true,
          rotatable: true,
          scalable: true,
          transition: false,
          fullscreen: false,
          keyboard: true,
          loop: false,
        }"
        :src="require(`@/assets/images/quiz-img/${questionInfo.id}-${item}`)"
        alt=""
        class="desc-img"
      >
    </div>
    <button
      v-show="!isSubmitted && (questionInfo?.questionType === '多选题' || questionInfo.questionType === '连线题') && $refs['question-inner']?.canSubmit"
      class="submit"
      @click="onSubmit"
    >
      提交答案
    </button>
    <div
      v-show="isSubmitted"
      class="button-wrapper-submitted"
    >
      <button
        v-show="!$refs['question-inner']?.isCorrect"
        class="retry"
        @click="onClickRetry"
      >
        重新答题
      </button>
      <button
        class="next"
        @click="onClickNext"
      >
        {{ remainingQuestionNumber ? `下一题（${remainingQuestionNumber}）` : `完成答题` }}
      </button>
    </div>
  </div>
</template>

<script>
// import browser from "@/utils/browser";
import QuestionInner from "@/views/QuestionInner.vue"
import quizData from "@/quizData.js"

export default {
  components: {
    QuestionInner,
  },
  props: [
  ],
  data() {
    return {
    }
  },
  computed: {
    ...globalMapState([
      'questionInfo',
      'isSubmitted',
    ]),
    remainingQuestionNumber() {
      return globalUtils.getRemainingQuestionNumber(this.questionInfo.id)
    },
    initialWrapperWidth() {
      return 338
    },
    initialWrapperHeight() {
      return 596
    },
    wrapperTransformCss() {
      const WHRateViewport = window.innerWidth / window.innerHeight
      const WHRateComp = this.initialWrapperWidth / this.initialWrapperHeight
      if (WHRateViewport >= WHRateComp) { // 视口矮宽
        return `translate(-50%, -50%) scale(${window.innerHeight / this.initialWrapperHeight * 0.9})`
      } else {
        return `translate(-50%, -50%) scale(${window.innerWidth / this.initialWrapperWidth * 0.9})`
      }
    }
  },
  watch: {
  },
  async mounted() {
  },
  methods: {
    ...globalMapMutations([
      'setIsSubmitted',
      'setAnswerRecord',
      'setQuestionInfo',
    ]),
    onClickClose() {
      window.parent.document.getElementById('closepop').click()
    },
    onSubmit() {
      if (this.$refs['question-inner']?.canSubmit) {
        this.setIsSubmitted(true)
        globalApi.submitAnswer(
          this.$refs['question-inner']?.isCorrect,
          this.questionInfo.id,
          this.$refs['question-inner']?.selectedIdxList,
          this.questionInfo.badgeTypeCode,
        )
      }
    },
    onClickRetry() {
      this.setIsSubmitted(false)
      this.setAnswerRecord(null)
      this.$refs['question-inner'].resetSelectedIdxList()
    },
    onClickNext() {
      if (this.remainingQuestionNumber) {
        this.setIsSubmitted(false)
        this.setAnswerRecord(null)

        const newId = globalUtils.getNextQuestionId(this.questionInfo.id)
        const quizInfo = quizData.find((item) => {
          return item.id === newId
        })
        this.setQuestionInfo(quizInfo)

        this.$refs['question-inner'].resetSelectedIdxList()
      } else {
        this.onClickClose()
      }
    },
  }
}
</script>

<style lang="less" scoped>
.question-view {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-image: url(@/assets/images/share-bg-mobile.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  display: flex;
  flex-direction: column;
  align-items: center;
  > button.close {
    position: absolute;
    top: 40px;
    right: 25px;
    width: 21px;
    height: 21px;
    > img {
      width: 100%;
      height: 100%;
    }
  }
  > .title-wrapper {
    flex: 0 0 auto;
    text-align: center;
    margin-top: 38px;
    width: 200px;
    height: 55px;
    background-image: url(@/assets/images/title-decorator-mobile.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    > h1 {
      font-size: 24px;
      font-family: LiSu-Regular, LiSu;
      font-weight: 400;
      line-height: 42px;
      color: #9A2D0A;
      background: linear-gradient(177deg, #9A2D0A 0%, #D1672B 100%);
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  > .answer-desc-inline {
    margin-top: 10px;
    flex: 1 0 1px;
    margin-bottom: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100% - 30px * 2);
    overflow: auto;
    padding-left: 6px;
    padding-right: 6px;
    > p.desc {
      overflow: auto;
      flex: 0 0 auto;
      font-size: 14px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #A4573F;
      line-height: 17px;
      letter-spacing: 1px;
    }
    > img.desc-img {
      margin-top: 10px;
      width: 100%;
    }
  }
  > button.submit {
    flex: 0 0 auto;
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 116px;
    height: 31px;
    background-image: url(@/assets/images/btn-main-bg.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    font-size: 16px;
    font-family: LiSu-Regular, LiSu;
    font-weight: 400;
    color: #FFFFFF;
  }
  > .button-wrapper-submitted {
    flex: 0 0 auto;
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    > button {
      width: 116px;
      height: 31px;
      font-size: 16px;
      font-family: LiSu-Regular, LiSu;
      margin-right: 20px;
      font-weight: 400;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      margin-right: 15px;
      display: inline-block;
      &:last-of-type {
        margin-right: 0;
      }
      &.retry {
        background-image: url(@/assets/images/btn-normal-bg.png);
        color: #8F4831;
      }
      &.next {
        background-image: url(@/assets/images/btn-main-bg.png);
        color: #fff;
      }
    }
  }
}
</style>