<template>
  <div class="arrow-container">
    <div class="prev">
      <template v-if="previousQuestionOrder">
        <router-link
          class="qm-primary-button"
          :to="{
            path: `/online-exam/exam/${$route.params.examId}/examRecordData/${$route.params.examRecordDataId}/order/${previousQuestionOrder}`,
          }"
          ondragstart="return false;"
        >
          上一题
        </router-link>
      </template>

      <template v-else>
        <div>上一题</div>
      </template>
    </div>
    <div class="tips">A、B、C、D来勾选选项。Y、N来勾选判断题。</div>
    <div class="next">
      <template v-if="nextQuestionOrder">
        <router-link
          class="qm-primary-button"
          ondragstart="return false;"
          :to="{
            path: `/online-exam/exam/${$route.params.examId}/examRecordData/${$route.params.examRecordDataId}/order/${nextQuestionOrder}`,
          }"
        >
          下一题
        </router-link>
      </template>

      <template v-else>
        <div>下一题</div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: "ArrowNavView",
  props: {
    previousQuestionOrder: { type: Number, default: 0 },
    nextQuestionOrder: { type: Number, default: 0 },
  },
  data() {
    return {};
  },
  created: function() {
    window.addEventListener("keyup", this.keyup);
  },
  beforeDestroy() {
    window.removeEventListener("keyup", this.keyup);
  },
  methods: {
    keyup() {
      // console.log(e);
      // console.log(document.activeElement.type);
      // if (
      //   ["BODY", "A", "BUTTON", "DIV"].includes(
      //     document.activeElement.tagName
      //   ) ||
      //   (["INPUT"].includes(document.activeElement.tagName) &&
      //     ["checkbox", "radio"].includes(document.activeElement.type))
      // ) {
      //   if (e.code === "ArrowRight" && this.nextQuestionOrder) {
      //     this.goToNextQuestion();
      //   }
      //   if (e.code === "ArrowLeft" && this.previousQuestionOrder) {
      //     this.goToPreviousQuestion();
      //   }
      // }
    },
    goToNextQuestion() {
      this.$router.push({
        path: `/online-exam/exam/${this.$route.params.examId}/examRecordData/${this.$route.params.examRecordDataId}/order/${this.nextQuestionOrder}`,
      });
    },
    goToPreviousQuestion() {
      this.$router.push({
        path: `/online-exam/exam/${this.$route.params.examId}/examRecordData/${this.$route.params.examRecordDataId}/order/${this.previousQuestionOrder}`,
      });
    },
  },
};
</script>

<style scoped>
.arrow-container {
  display: grid;
  grid-template-columns: 120px 1fr 120px;
  align-items: center;
  justify-items: center;

  border-top: 1px solid #eeeeee;
}
.prev,
.tips,
.next {
  display: grid;
  align-items: center;
  justify-items: center;
}
</style>
