<template>
  <div class="mask">
    <div>
      <div class="dialog">
        <div class="title">
          <span>错题学习</span>
        </div>
        <div class="mid">
          <!-- <div class="mid-line1">亲爱的考生：</div> -->
          <div class="mid-line2">{{ no + 1 }}.{{ question.issue }}</div>
          <div class="mt9 topic-select">
            <div
              v-for="(item, index) in question.optsArr"
              :key="index"
              class="topic-select-item"
            >
              {{ letter[index] }}.<span>{{ item }}</span>
            </div>
            <!-- <div class="topic-select-item">B.<span>xx</span></div> countdown-->
          </div>
          <!-- <div class="mid-line3" v-if="correctScore >= 90">再接再励</div> -->
          <!-- <div class="mid-line3">技巧：{{ explainJq }}</div> -->
        </div>
        <div v-if="question.image" class="image">
          <image
            mode="heightFix"
            class="answer-image"
            :src="question.image"
          ></image>
        </div>
        <div class="bottom">
          <view class="answer">
            正确答案：{{ answerLetter }}&nbsp; 您的答案：{{ userAnswerLetter }}
          </view>
          <button
            @click="
              () => {
                $emit('close');
              }
            "
          >
            关闭
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      option: {},
      letter: ["A", "B", "C", "D", "E", "F"],
    };
  },
  methods: {
    back() {
      let page = getCurrentPages()[0];
      let params = page.$page.fullPath.split("?")[1];
      uni.navigateTo({
        url: `/pages/mockExam/begin?${params}`,
      });
    },
  },
  computed: {
    answerLetter() {
      let arr = [];
      if (this.question.questionType == 3) {
        this.question.answer.split("-").forEach((element) => {
          arr.push(this.letter[this.question.optsArr.indexOf(element)]);
        });
        return arr.sort().join();
      } else {
        return this.letter[this.question.optsArr.indexOf(this.question.answer)];
      }
    },
    userAnswerLetter() {
      let arr = [];
      if (this.question.questionType == 3) {
         this.question.userAnswer.forEach((element) => {
          arr.push(this.letter[this.question.optsArr.indexOf(element)]);
        });
        return arr.sort().join();
      } else {
        return this.letter[
          this.question.optsArr.indexOf(this.question.userAnswer)
        ];
      }
    },
  },
  // setup(props, { emit }) {
  //   const state = reactive({
  //     count: 0,
  //   });
  //   const phone = new Phone();
  //   const backView = phone.backView.bind(phone);
  //   const time = ref(8);
  //   const timer = window.setInterval((e) => {
  //     time.value = time.value - 1;
  //     if (time.value === 0) {
  //       window.clearInterval(timer);
  //       // backView()
  //       router.push({
  //         name: 'examBegin',
  //         query: {
  //           ...router.currentRoute.value.query,
  //         },
  //       });
  //     }
  //   }, 1000);
  //   const sendPaper = () => {
  //     emit('confirm');
  //   };
  //   const cancelSubmit = () => {
  //     emit('cancel');
  //   };

  //   return {
  //     ...toRefs(state),
  //     props,
  //     sendPaper,
  //     cancelSubmit,
  //     time,
  //     timer,
  //     router,
  //     backView,
  //   };
  // },
  //correct
  destroyed() {
    clearInterval(this.timer);
  },
  mounted() {},
  props: {
    no: {
      type: Number,
      default: 1,
    },
    question: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.image {
  display: flex;
  justify-content: center;
  .answer-image {
    height: 74rpx;
  }
}

button {
  border-radius: 0;
  border: none;
}
.topic-select {
  display: flex;
  width: 100%;
  padding-left: 10rpx;
  padding-right: 10rpx;
  font-size: 14rpx;
  flex-wrap: wrap;
}
.topic-select-item {
  width: 100%;
  font-size: 14rpx;
  text-align: left;
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 750rpx;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.65);
  z-index: 10;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  .dialog {
    width: 400rpx;
    background: #fff;
    .title {
      width: 100%;
      line-height: 40rpx;
      height: 40rpx;
      background: #306ace;
      color: #fff;
      font-size: 12rpx;
      text-align: center;
    }
    .mid {
      width: 100%;
      background: #fff;

      padding-left: 10rpx;
      padding-right: 10rpx;
      font-size: 14rpx;
      .mid-line1 {
        line-height: 25rpx;
        height: 25rpx;
        text-align: left;
      }
      .mid-line2 {
        text-align: left;
        line-height: 30rpx;
      }
      .mid-line3 {
        text-align: left;
        line-height: 30rpx;
      }
      .mid-line4 {
        text-align: left;
        line-height: 30rpx;
      }
    }
    .bottom {
      background: #306ace;
      width: 100%;
      height: 70rpx;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      align-items: flex-start;
      align-content: flex-start;
      .answer {
        width: 100%;
        font-size: 12rpx;
        line-height: 24rpx;
        color: #d8d8d8;
        text-indent: 1em;
      }

      button:nth-child(1) {
        height: 30rpx;
        margin-top: 10rpx;
        line-height: 30rpx;
      }
      .bottom-line {
        width: 100%;
        text-align: center;
        color: #fff;
        font-size: 12rpx;
        margin-top: 5rpx;
      }
      button:nth-child(2) {
        height: 30rpx;
        line-height: 30rpx;
      }
    }
  }
}
</style>