<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useDisciplineResultStore } from "@/modules/11_discipline/store/ResultStore";

import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";

import Table from "@/modules/11_discipline/components/4_Result/Table.vue";

const $q = useQuasar(); // show dialog
const router = useRouter();
const mixin = useCounterMixin();
const store = useDisciplineResultStore();
const { showLoader, hideLoader, messageError } = mixin;
const { fetchList } = store;

const filter = ref<string>("");
const status = ref<string>("DONE");
const total = ref<number>(0);
const totalList = ref<number>(1);
const pagination = ref({
  sortBy: "createdAt",
  descending: true,
  page: 1,
  rowsPerPage: 10,
});

/** function เรียกรายการสรุปผลการพิจารณาทางวินัย*/
async function fetchListResult() {
  showLoader();
  await http
    .get(
      config.API.listResult() +
        `?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&keyword=${filter.value.trim()}&status=${status.value}`
    )
    .then(async (res) => {
      const data = res.data.result.data;
      totalList.value = Math.ceil(
        res.data.result.total / pagination.value.rowsPerPage
      );
      total.value = res.data.result.total;
      await fetchList(data);
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * ไปหน้าแก้ไข
 * @param id ไอดีเฉพาะ รายบุคคล
 */
function openEdit(id: string) {
  router.push(`/discipline-result/${id}`);
}
/**
 * ไปหน้าแก้ไข
 * @param id ไอดีเฉพาะ รายบุคคล
 */
function openDetail(id: string) {
  router.push(`/discipline-result-detail/${id}`);
}

function filterStatus(statusReturn: string) {
  status.value = statusReturn;
  getSearch();
}

function getSearch() {
  pagination.value.page = 1;
  fetchListResult();
}

watch(
  () => pagination.value.rowsPerPage,
  async () => {
    getSearch();
  }
);

/**เมื่อเริ่มโหลดหน้า
 * ส่งข้อมูลจำลองไปยัง store
 */
onMounted(async () => {
  await fetchListResult();
});
</script>

<template>
  <div class="toptitle text-dark col-12 row items-center">
    รายการสรุปผลการพิจารณาความผิดทางวินัย
  </div>
  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
    <div>
      <Table
        style="max-height: 80vh"
        :rows="store.rows"
        :columns="store.columns"
        :visible-columns="store.visibleColumns"
        v-model:inputfilter="filter"
        v-model:inputvisible="store.visibleColumns"
        :nornmalData="true"
        :paging="true"
        :titleText="''"
        :fetchListResult="fetchListResult"
        :get-search="getSearch"
        v-model:open-edit="openEdit"
        v-model:open-detail="openDetail"
        :filterStatus="filterStatus"
        v-model:pagination="pagination"
        v-model:total="total"
        v-model:total-list="totalList"
      >
      </Table>
    </div>
  </q-card>
</template>

<style></style>
