<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>
  </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;
  }
}
</style>