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

const route = useRoute();
const router = useRouter();

// 借用是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;
});
const toggleQuestion = (isNext: boolean) => {
  const callback = () => {
    let path = isNext
      ? `/online-exam/exam/${route.params.examId}/examRecordData/${route.params.examRecordDataId}/order/${nextQuestionOrder}`
      : `/online-exam/exam/${route.params.examId}/examRecordData/${route.params.examRecordDataId}/order/${previousQuestionOrder}`;
    void router.push(path);
  };
  const { canToggle, rejectHandler } = useCheckMultipleAnswer();
  if (!canToggle) {
    rejectHandler(callback);
    return;
  } else {
    callback();
  }
};
</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> -->
        <a
          class="qm-primary-button"
          ondragstart="return false;"
          style="cursor: pointer"
          @click="toggleQuestion(false)"
          >上一题</a
        >
      </template>

      <template v-else>
        <div>上一题</div>
      </template>
    </div>
    <!-- <div class="tips">A、B、C、D可勾选选项。</div> -->
    <div></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> -->
        <a
          class="qm-primary-button"
          ondragstart="return false;"
          style="cursor: pointer"
          @click="toggleQuestion(true)"
          >下一题</a
        >
      </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>
