<script setup lang="ts">
import { ref, onMounted } from "vue";
//import Stores
import { useCounterMixin } from "@/stores/mixin";
import { useWorklistDataStore } from "../stores/WorkStore";
//import Components
import TableList from "../components/1_Work/TableList.vue";
// use Store
const mixin = useCounterMixin();
const workStore = useWorklistDataStore();
const { date2Thai } = mixin;
const { fetchList } = workStore;

onMounted(() => {
  fecthWorkList();
});
//เรียกข้อมูลรายการลงเวลาปฏิบัติงาน
function fecthWorkList() {
  const listData = [
    {
      fullName: "นายกัณฐิมา  กาฬสินธ์ุ",
      timeIn: "8:04",
      coordinatesIn: "สำนักงาน",
      latIn: "18.7903",
      longIn: "99.0029",
      timeOut: "18:04",
      coordinatesOut: "สำนักงาน",
      latOut: "18.7903",
      longOut: "99.0029",
      status: "1",
    },
    {
      fullName: "นายนครชัย วันดี",
      timeIn: "8:04",
      coordinatesIn: "สำนักงาน",
      latIn: "18.7903",
      longIn: "99.0029",
      timeOut: "18:04",
      coordinatesOut: "สำนักงาน",
      latOut: "18.7903",
      longOut: "99.0029",
      status: "2",
    },
    {
      fullName: "นายปิยรมย์ ศิริธาราฟ",
      timeIn: "8:04",
      coordinatesIn: "สำนักงาน",
      latIn: "18.7903",
      longIn: "99.0029",
      timeOut: "18:04",
      coordinatesOut: "สำนักงาน",
      latOut: "18.7903",
      longOut: "99.0029",
      status: "3",
    },
    {
      fullName: "นางสาวปลาทอง ใจกล้า",
      timeIn: "8:04",
      coordinatesIn: "สำนักงาน",
      latIn: "18.7903",
      longIn: "99.0029",
      timeOut: "18:04",
      coordinatesOut: "สำนักงาน",
      latOut: "18.7903",
      longOut: "99.0029",
      status: "1",
    },
  ];
  fetchList(listData); // ส่งข้อมูลไปยัง stores
}
</script>
<template>
  <div class="toptitle text-dark col-12 row items-center">
    รายการลงเวลาปฏิบัติงาน
  </div>
  <div>
    <q-card flat bordered class="col-12 q-mt-sm">
      <div class="q-pa-md">
        <TableList /></div
    ></q-card>
  </div>
</template>

<style scoped></style>
