<template>
  <div
    class="question-view"
    :class="{
      isDescInline,
    }"
    :style="{
      backgroundImage: questionInfo?.questionType === '连线题' ? `url(${require('@/assets/images/bg-long.png')})` : `url(${require('@/assets/images/bg-short.png')})`,
      width: questionInfo?.questionType === '连线题' ? '804px' : '800px',
      height: questionInfo?.questionType === '连线题' ? '793px' : '520px',
    }"
  >
    <button
      class="close"
      :style="{
        top: questionInfo?.questionType === '连线题' ? '43px' : '40px',
        right: questionInfo?.questionType === '连线题' ? '37px' : '45px',
      }"
      @click="onClickClose"
    >
      <img
        src="@/assets/images/close.png"
        alt="关闭"
        draggable="false"
      >
    </button>
    <div class="title-wrapper">
      <h1>知识问答</h1>
    </div>
    <QuestionInner
      v-show="isDescInline || !isShowDesc"
      ref="question-inner"
      @canSubmitChange="onCanSubmitChange"
      @submit="onSubmit"
    />
    <AnswerDesc
      v-if="!isDescInline"
      v-show="isShowDesc"
    />
    <div
      v-if="isDescInline && isShowDesc"
      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 === '连线题') && canSubmit"
      class="submit"
      @click="onSubmit"
    >
      提交答案
    </button>
    <div
      v-show="(!isShowDesc || (isShowDesc && isDescInline)) && isSubmitted && $refs['question-inner']?.isCorrect"
      class="button-wrapper-correct"
    >
      <button
        v-if="questionInfo?.descText && !isDescInline"
        class="watch-desc"
        @click="onClickWatchDesc"
      >
        答案解析
      </button>
      <button
        class="next"
        @click="onClickNext"
      >
        {{ remainingQuestionNumber ? `下一题（${remainingQuestionNumber}）` : `完成答题` }}
      </button>
    </div>
    <div
      v-show="(!isShowDesc || (isShowDesc && isDescInline)) && isSubmitted && !$refs['question-inner']?.isCorrect"
      class="button-wrapper-wrong"
    >
      <button
        class="next"
        @click="onClickNext"
      >
        {{ remainingQuestionNumber ? `下一题（${remainingQuestionNumber}）` : `完成答题` }}
      </button>
      <button
        class="retry"
        @click="onClickRetry"
      >
        重新答题
      </button>
      <button
        v-if="!isDescInline"
        class="watch-desc"
        :class="{
          disabled: !questionInfo?.descText
        }"
        @click="onClickWatchDesc"
      >
        答案解析
      </button>
    </div>
    <button
      v-show="!isDescInline && isShowDesc"
      class="return-question"
      @click="isShowDesc = false"
    >
      返回题目
    </button>
  </div>
</template>

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

export default {
  components: {
    QuestionInner,
    AnswerDesc,
  },
  props: [
  ],
  data() {
    return {
      isShowDesc: false,
      canSubmit: false,
    }
  },
  computed: {
    ...globalMapState([
      'questionInfo',
      'isSubmitted',
    ]),
    remainingQuestionNumber() {
      return globalUtils.getRemainingQuestionNumber(this.questionInfo.id)
    },
    isDescInline() {
      return this.questionInfo?.id === '3.1.1' || this.questionInfo?.id === '3.1.2'
    },
  },
  watch: {
  },
  mounted() {
  },
  methods: {
    ...globalMapMutations([
      'setIsSubmitted',
      'setAnswerRecord',
      'setQuestionInfo',
    ]),
    onClickClose() {
      window.parent.document.getElementById('closepop').click()
    },
    onCanSubmitChange(p) {
      this.canSubmit = p
    },
    onSubmit() {
      if (this.canSubmit) {
        this.setIsSubmitted(true)
        globalApi.submitAnswer(
          this.$refs['question-inner']?.isCorrect,
          this.questionInfo.id,
          this.$refs['question-inner']?.selectedIdxList,
          this.questionInfo.badgeTypeCode,
        )
        if (this.isDescInline) {
          this.isShowDesc = true
        }
      }
    },
    onClickWatchDesc() {
      this.isShowDesc = true
    },
    onClickRetry() {
      this.setIsSubmitted(false)
      this.setAnswerRecord(null)
      this.isShowDesc = false
      this.$refs['question-inner'].resetSelectedIdxList()
    },
    onClickNext() {
      if (this.remainingQuestionNumber) {

        this.setIsSubmitted(false)
        this.setAnswerRecord(null)
        this.isShowDesc = false

        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-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  display: flex;
  flex-direction: column;
  align-items: center;
  > button.close {
    position: absolute;
    width: 32px;
    height: 34px;
    > img {
      width: 100%;
      height: 100%;
    }
  }
  > .title-wrapper {
    flex: 0 0 auto;
    text-align: center;
    margin-top: 45px;
    width: 250px;
    height: 55px;
    background-image: url(@/assets/images/title-bottom-line-thin.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    > h1 {
      font-size: 36px;
      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;
    }
  }
  > button.submit {
    flex: 0 0 auto;
    margin-top: 10px;
    margin-bottom: 70px;
    width: 150px;
    height: 40px;
    background-image: url(@/assets/images/btn-main-bg.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    font-size: 20px;
    font-family: LiSu-Regular, LiSu;
    font-weight: 400;
    color: #FFFFFF;
  }
  > .button-wrapper-correct {
    flex: 0 0 auto;
    margin-top: 10px;
    margin-bottom: 70px;
    > button {
      width: 149px;
      height: 40px;
      &.watch-desc {
        background-image: url(@/assets/images/btn-normal-bg.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        margin-right: 15px;
      }
      &.next {
        background-image: url(@/assets/images/btn-main-bg.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
      }
    }
  }
  > .button-wrapper-wrong {
    flex: 0 0 auto;
    margin-top: 10px;
    margin-bottom: 70px;
    > button.next {
      display: block;
      width: 313px;
      height: 40px;
      background-image: url(@/assets/images/btn-main-long-bg.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center center;
      font-size: 20px;
      font-family: LiSu-Regular, LiSu;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 32px;
      margin-bottom: 8px;
    }
    > button.retry {
      width: 149px;
      height: 40px;
      background-image: url(@/assets/images/btn-normal-bg.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      font-size: 20px;
      font-family: LiSu-Regular, LiSu;
      font-weight: 400;
      color: #8F4831;
      margin-right: 15px;
    }
    > button.watch-desc {
      width: 149px;
      height: 40px;
      background-image: url(@/assets/images/btn-normal-bg.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      font-size: 20px;
      font-family: LiSu-Regular, LiSu;
      font-weight: 400;
      color: #8F4831;
      &.disabled {
        opacity: 0.5;
        pointer-events: none;
      }
    }
  }
  > button.return-question {
    flex: 0 0 auto;
    margin-top: 10px;
    margin-bottom: 70px;
    display: block;
    width: 313px;
    height: 40px;
    background-image: url(@/assets/images/btn-main-long-bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    font-size: 20px;
    font-family: LiSu-Regular, LiSu;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 32px;
  }
}

.question-view.isDescInline {
  width: 804px;
  height: 793px;
  background-image: url(@/assets/images/bg-long.png);
  > button.close {
    top: 43px;
    right: 38px;
    > img {
    }
  }
  > .title-wrapper {
    margin-top: 28px;
    > h1 {
    }
  }
  > .question-inner {
    flex: 0 0 auto;
  }
  > .answer-desc-inline {
    margin-top: 10px;
    flex: 1 0 1px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100% - 150px * 2);
    overflow: auto;
    > p.desc {
      height: 74px;
      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;
      padding-right: 10px;
    }
    > img.desc-img {
      margin-top: 10px;
      flex: 1 0 1px;
      max-width: 100%;
    }
  }
  > .button-wrapper-correct {
    margin-bottom: 20px;
  }
  > .button-wrapper-wrong {
    margin-bottom: 20px;
  }
}
</style>