<template>
  <div class="data-check">
    <div class="check-menu">
      <div class="check-menu-body">
        <ul>
          <li v-for="item in dataList" :key="item.id">{{ item.examNumber }}</li>
        </ul>
      </div>
      <div class="check-menu-page">
        <div class="page-total">共{{ pagination.total }}页</div>
        <div class="page-jumper">
          <a-button @click="onPrevPage">
            <template #icon> <CaretLeftOutlined /></template>
          </a-button>
          <a-button @click="onNextPage">
            <template #icon> <CaretRightOutlined /></template>
          </a-button>
          <span>
            前往
            <a-input-number
              v-model:value="formData.oddNumber"
              :min="1"
              :max="10"
              :precision="0"
              :controls="false"
            ></a-input-number>
          </span>
        </div>
      </div>
    </div>
    <div class="check-body"></div>
    <div class="check-action"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import type { TableProps } from "ant-design-vue";
import { CaretLeftOutlined, CaretRightOutlined } from "@ant-design/icons-vue";

import useTable from "@/hooks/useTable";

import { DataCheckListFilter, DataCheckListItem } from "@/ap/types/dataCheck";
import { dataCheckList } from "@/ap/dataCheck";

defineOptions({
  name: "DataCheck",
});

const searchModel = reactive({
  examId: Number(route.params.examId),
  subjectCode: route.params.subjectCode,
});

const { dataList, loading, pagination, getList, toPage, setPageSize } =
  useTable<DataCheckListItem>(dataCheckList, searchModel, false);

setPageSize(30);

// page
function onPrevPage() {
  const { total, current } = pagination;
  if (current <= 1) {
    message.error("没有上一页了");
    return;
  }
  toPage(current);
}

function onNextPage() {
  const { total, current } = pagination;
  if (current >= total) {
    message.error("没有下一页了");
    return;
  }
  toPage(current);
}
</script>
