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

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";

/**importType*/
import type {
  QuerySting,
  DateFilter,
} from "@/modules/09_leave/interface/request/leave";

import TableList from "@/modules/09_leave/components/05_Leave/TableList.vue";
import ToolBar from "@/modules/09_leave/components/05_Leave/ToolBarLeave.vue";

const mixin = useCounterMixin();
const leaveStore = useLeavelistDataStore();
const { showLoader, hideLoader, messageError } = mixin;
const { fetchListLeaveReject } = leaveStore;
const dataToobar = ref<any[]>([]);
const $q = useQuasar(); //ใช้ noti quasar

const total = ref<number>(0);
const totalList = ref<number>(1);

const querySting = reactive<QuerySting>({
  year: leaveStore.filter.year, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
  type: leaveStore.filter.type, //*Id ประเภทการลา
  status: leaveStore.filter.status, //*สถานะการของลา
  page: 1, //*สถานะการของลา
  pageSize: 10, //*สถานะการของลา
  keyword: leaveStore.filter.keyword, //keyword ค้นหา
});
//** เรียกข้อมูลจาก API*/
async function fecthLeaveList() {
  leaveStore.rows = [];
  querySting.keyword = querySting.keyword.trim()
  querySting.status = await (querySting.status == null
    ? "ALL"
    : querySting.status);
  querySting.type = await (querySting.type == null
    ? "00000000-0000-0000-0000-000000000000"
    : querySting.type);

  if (querySting.status != null && querySting.type != null) {
    showLoader();
    await http
      .post(config.API.leaveListDelete(), querySting)
      .then((res) => {
        const data = res.data.result;
        totalList.value = Math.ceil(
          res.data.result.total / querySting.pageSize
        );
        total.value = res.data.result.total;
        fetchListLeaveReject(data.data); /** ส่งข้อมูลไป stores*/
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  }
}

/** function เรียกข้อมูลสถานะ*/
async function fetchOption() {
  await http
    .get(config.API.leaveType())
    .then((res) => {
      dataToobar.value = res.data.result;
    })
    .catch((err) => {
      messageError($q, err);
    });
}

function getSearch() {
  querySting.page = 1;
  fecthLeaveList();
}

watch(
  () => querySting.pageSize,
  async () => {
    getSearch();
  }
);

onMounted(async () => {
  await Promise.all([fetchOption(), fecthLeaveList()]);
});
</script>
<template>
  <ToolBar
    :dataToobar="dataToobar"
    v-model:query-sting="querySting"
    :get-list="fecthLeaveList"
    :get-search="getSearch"
  />
  <TableList
    v-model:total="total"
    v-model:total-list="totalList"
    v-model:pagination="querySting"
    :dataToobar="dataToobar"
    :getList="fecthLeaveList"
  />
</template>

<style scoped></style>
