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

/**importType*/
import type { DataRows } from "@/modules/09_leave/interface/response/leave";

/**importStroe*/
import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
import { useLeavelistDataStoreTest } from "@/modules/09_leave/stores/ListLeave";

/**importComponets*/
import TableList from "@/modules/09_leave/components/2_Leave/TableList.vue";
import ToolBar from "@/modules/09_leave/components/2_Leave/ToolBar.vue";

const leaveStore = useLeavelistDataStore();
const APIDATA = useLeavelistDataStoreTest();
const { fetchList, clearFilter } = leaveStore;

onMounted(() => {
  fecthLeaveList();
});
/** เรียกข้อมูลจาก API*/
function fecthLeaveList() {
  const data = APIDATA.data;

  fetchList(data); /** ส่งข้อมูลไป stores*/
}

/** เปลี่ยน TAB*/
function changTab() {
  clearFilter();
  fecthLeaveList();
}
</script>
<template>
  <div class="toptitle text-dark col-12 row items-center">รายการลา</div>
  <div>
    <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
      <ToolBar />
      <TableList />
    </q-card>
  </div>
</template>
