<script setup lang="ts">
import { ref, onMounted, watch } 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 {
  DataResTime,
  TableRowsTime,
} from "@/modules/09_leave/interface/response/work";

/** importComponents */
import ToolBar from "@/modules/09_leave/components/02_WorkList/ToolBar.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";

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

/** ตัวแปร querySting*/
const keyword = ref<string>(""); //keyword ค้นหา
const filetStatus = ref<string>("ALL"); //*สถานะ
const roleStatus = ref<string>("ALL"); //*ประเภทตำแหน่ง

/** ข้อมูลตาราง*/
const rows = ref<TableRowsTime[]>([]);
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: "checkInStatus",
    align: "left",
    label: "สถานะ",
    sortable: true,
    field: "checkInStatus",
    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",
  },
  {
    name: "checkOutStatus",
    align: "left",
    label: "สถานะ",
    sortable: false,
    field: "checkOutStatus",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);
const visibleColumns = ref<string[]>([
  "no",
  "fullName",
  "profileType",
  "checkInTime",
  "checkInLocation",
  "checkInStatus",
  "checkOutTime",
  "checkOutLocation",
  "checkOutStatus",
]);

/** ฟังก์ชันเรียกข้อมูลรายการลงเวลาที่ประมวลผลแล้ว*/
async function fetchListTimeRecord() {
  showLoader();
  const date = new Date(workStore.selectDate as string | Date);
  const querySting = {
    ...params.value,
    startDate: dateToISO(date), //*วันที่เริ่ม
    endDate: dateToISO(date), //*วันที่สิ้นสุด
    status: filetStatus.value, //*สถานะ
    keyword: keyword.value.trim(), //keyword ค้นหา
    profileType: roleStatus.value.trim(), //keyword ค้นหา
  };

  await http
    .get(config.API.timeRecord(), {
      params: {
        ...querySting,
      },
    })
    .then((res) => {
      const result = res.data.result;
      pagination.value.rowsNumber = result.total;
      if (result.data.length > 0) {
        rows.value = result.data.map((e: DataResTime) => ({
          id: e.id,
          fullName: e.fullName,
          profileType: e.profileType,
          checkInDate: e.checkInDate ? date2Thai(e.checkInDate) : "-",
          checkInTime: e.checkInTime,
          checkInLocation: e.checkInLocation,
          checkInLat: e.checkInLat ? e.checkInLat : "",
          checkInLon: e.checkInLon ? e.checkInLon : "",
          checkInStatus: e.checkInStatus
            ? workStore.convertSatatus(e.checkInStatus)
            : "-",
          checkOutDate: e.checkOutDate ? date2Thai(e.checkOutDate) : "-",
          checkOutLocation: e.checkOutLocation ? e.checkOutLocation : "-",
          checkOutTime: e.checkOutTime ? e.checkOutTime : "-",
          checkOutLat: e.checkOutLat ? e.checkOutLat : "",
          checkOutLon: e.checkOutLat ? e.checkOutLon : "",
          checkOutStatus: e.checkOutStatus
            ? workStore.convertSatatus(e.checkOutStatus)
            : "-",
        }));
      } else {
        rows.value = [];
      }
    })
    .catch((err) => {
      messageError($q, err);
      rows.value = [];
    })
    .finally(() => {
      hideLoader();
    });
}

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

/** Hook*/
onMounted(async () => {
  workStore.columns = columns.value;
  workStore.visibleColumns = visibleColumns.value;
  await fetchListTimeRecord();
});
</script>

<template>
  <!-- Toolbar -->
  <ToolBar
    v-model:filetStatus="filetStatus"
    v-model:role-status="roleStatus"
    v-model:keyword="keyword"
    :on-search-data="onSearchData"
  />

  <!-- ตาราง -->
  <TableList
    :rows="rows.length > 0 ? rows : []"
    :tab="'time-record'"
    :fetchData="fetchListTimeRecord"
    :on-request="onRequest"
    v-model:pagination="pagination"
  />
</template>

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