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

import http from "@/plugins/http";
import config from "@/app.config";
import { usePagination } from "@/composables/usePagination";

/** importType*/
import type { QTableProps } from "quasar";
import type {
  DataResLog,
  TableRows,
} from "@/modules/09_leave/interface/response/work";

/** importComponents */
import ToolBarDate from "@/modules/09_leave/components/02_WorkList/ToolBarDate.vue";
import TableList from "@/modules/09_leave/components/02_WorkList/TableList.vue";

/** importStores */
import { useCounterMixin } from "@/stores/mixin";
import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";

/** useStore */
const $q = useQuasar(); //ใช้ noti quasar
const workStore = useWorklistDataStore();
const { date2Thai, dateToISO, showLoader, hideLoader, messageError } =
  useCounterMixin();
const { pagination, params, onRequest } = usePagination("", fetchListLogRecord);

/** ตัวแปร QueryString*/
const keyword = ref<string>("");
const roleStatus = ref<string>("ALL");

/** ข้อมูลตาราง*/
const rows = ref<TableRows[]>([]);
const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: false,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "fullName",
    align: "left",
    label: "ชื่อ-นามสกุล",
    sortable: true,
    field: "fullName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "profileType",
    align: "left",
    label: "ประเภทตำแหน่ง",
    sortable: true,
    field: "profileType",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "checkInTime",
    align: "left",
    label: "เวลาเข้างาน",
    sortable: true,
    field: "checkInTime",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "checkInLocation",
    align: "left",
    label: "พิกัด",
    sortable: true,
    field: "checkInLocation",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "checkOutTime",
    align: "left",
    label: "เวลาออกงาน",
    sortable: true,
    field: "checkOutTime",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "checkOutLocation",
    align: "left",
    label: "พิกัด",
    sortable: true,
    field: "checkOutLocation",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);
const visibleColumns = ref<string[]>([
  "no",
  "fullName",
  "profileType",
  "checkInTime",
  "checkInLocation",
  "checkOutTime",
  "checkOutLocation",
]);

/** ฟังก์ชันเรียกข้อมูลรายการลงเวลาปฏิบัติงาน (รายการลงเวลา) */
async function fetchListLogRecord() {
  showLoader();
  const date = new Date(workStore.selectDate as string | Date);

  await http
    .get(config.API.logRecord(), {
      params: {
        ...params.value,
        startDate: dateToISO(date), //*วันที่เริ่ม
        endDate: dateToISO(date), //*วันที่สิ้นสุด
        keyword: keyword.value.trim(), //keyword ค้นหา
        profileType: roleStatus.value.trim(), //keyword ค้นหา
      },
    })
    .then((res) => {
      const result = res.data.result;
      pagination.value.rowsNumber = result.total;
      if (result.data.length > 0) {
        rows.value = result.data.map((e: DataResLog) => ({
          id: e.id,
          profileType: e.profileType,
          fullName: e.fullName,
          checkInDate: e.checkInDate && date2Thai(e.checkInDate),
          checkInTime: e.checkInTime ? e.checkInTime : "-",
          checkInLocation: e.checkInLocation ? e.checkInLocation : "-",
          checkInLat: e.checkInLat ? e.checkInLat : "",
          checkInLon: e.checkInLon ? e.checkInLon : "",
          checkOutDate: e.checkOutDate && date2Thai(e.checkOutDate),
          checkOutLocation: e.checkOutLocation ? e.checkOutLocation : "-",
          checkOutTime: e.checkOutTime ? e.checkOutTime : "-",
          checkOutLat: e.checkOutLat ? e.checkOutLat : "",
          checkOutLon: e.checkOutLon ? e.checkOutLon : "",
        }));
      } else {
        rows.value = [];
      }
    })
    .catch((err) => {
      messageError($q, err);
      rows.value = [];
    })
    .finally(() => {
      hideLoader();
    });
}

/*** ฟังก์ชันค้นหาข้อมูล */
async function onSearchData() {
  pagination.value.page = 1;
  await fetchListLogRecord();
}

/** Hook*/
onMounted(async () => {
  workStore.columns = columns.value;
  workStore.visibleColumns = visibleColumns.value;
  await fetchListLogRecord();
});
</script>
<template>
  <ToolBarDate
    v-model:keyword="keyword"
    v-model:role-status="roleStatus"
    :on-search-data="onSearchData"
  />

  <TableList
    :rows="rows.length > 0 ? rows : []"
    :tab="'log-record'"
    :fetchData="fetchListLogRecord"
    :on-request="onRequest"
    v-model:pagination="pagination"
  />
</template>

<style lang="sass" scoped></style>
