<template>
  <div
    class="question-judge"
  >
    <button
      class="close"
      @click="onClickClose"
    >
      <img
        src="@/assets/images/close.png"
        alt="关闭"
        draggable="false"
      >
    </button>
    <div class="title-wrapper">
      <h1>知识问答</h1>
    </div>
    <div class="question-wrapper">
      <div class="type">
        {{ questionInfo.questionType }}
      </div>
      <p class="question">
        {{ questionInfo.question }}
      </p>
      <button
        v-for="(option, index) in questionInfo.answerOptions"
        :key="index"
        class="option"
      >
        {{ option }}
      </button>
    </div>
    <button class="submit">
      提交答案
    </button>
  </div>
</template>

<script>
// import browser from "@/utils/browser";

export default {
  data() {
    return {
    }
  },
  computed: {
    ...globalMapState([
      'questionInfo',
    ])
  },
  watch: {
  },
  async mounted() {
  },
  methods: {
    onClickClose() {
      window.parent.document.getElementById('closepop').click()
    },
  }
}
</script>

<style lang="less" scoped>
.question-judge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 520px;
  background-image: url(@/assets/images/bg-short.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: 45px;
    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;
    }
  }
  > .question-wrapper {
    flex: 1 0 1px;
    width: calc(100% - 160px * 2);
    margin-top: 10px;
    counter-reset: count;

    > .type {
      font-size: 24px;
      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
      font-weight: bold;
      color: #693D2F;
    }
    > p.question {
      margin-top: 10px;
      font-size: 20px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #693D2F;
    }
    > button.option {
      margin-top: 20px;
      width: 100%;
      text-align: left;
      display: block;
      font-size: 20px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #693D2F;
      counter-increment: count;
      &:hover {
        color: #728f43;
      }
      &::before {
        content: counter(count, upper-alpha);
        margin-right: 0.5em;
      }
    }
  }
  > button.submit {
    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;
  }
}
</style>