<script setup lang="ts">
import { store } from "@/store/store";
import { useRoute } from "vue-router";

const route = useRoute();

// 借用是0的时候不显示此button
const previousQuestionOrder = $computed(() => {
  const order = +route.params.order;
  return order > 1 ? order - 1 : 0;
});

const nextQuestionOrder = $computed(() => {
  const order = +route.params.order;
  return order < store.exam.examQuestionList.length ? order + 1 : 0;
});
</script>

<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>

<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>
