<template>
  <div class="answer-desc">
    <div class="type">
      {{ questionInfo.questionType }}
    </div>
    <p class="question">
      {{ questionInfo.question }}
    </p>
    <div class="answer">
      正确答案：{{ rightAnswersForShow }}
    </div>
    <p 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>
</template>

<script>
const alphabet = ['A', 'B', 'C', 'D', 'E', 'F', 'G']

export default {
  computed: {
    ...globalMapState([
      'questionInfo',
    ]),
    rightAnswersForShow() {
      return this.questionInfo.rightOptionIdx.map((idx) => {
        return alphabet[idx]
      }).join('')
    },
  }
}
</script>

<style lang="less" scoped>
.answer-desc {
  flex: 1 0 1px;
  width: calc(100% - 170px * 2);
  margin-top: 10px;
  overflow: auto;
  padding-right: 8px;
  > .type {
    font-size: 24px;
    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
    font-weight: bold;
    color: #8F4831;
  }
  > p.question {
    margin-top: 10px;
    font-size: 20px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #693D2F;
  }
  > .answer {
    margin-top: 14px;
    font-size: 20px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #693D2F;
    line-height: 25px;
  }
  > p.desc {
    margin-top: 10px;
    font-size: 20px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #693D2F;
    line-height: 25px;
  }
  > img.desc-img {
    margin-top: 10px;
    width: 100%;
  }
}
</style>