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

import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
import { checkPermission } from "@/utils/permissions";
import { useRoute } from "vue-router";

/** import Components */
import Tab1 from "@/modules/09_leave/components/02_WorkList/Tab1.vue";
import Tab2 from "@/modules/09_leave/components/02_WorkList/Tab2.vue";
import Tab3 from "@/modules/09_leave/components/02_WorkList/Tab3_Processed_Late.vue";
import Tab4_Pending from "@/modules/09_leave/components/02_WorkList/Tab4_Pending.vue";

const stores = useWorklistDataStore();
const route = useRoute();
const { tabs } = toRefs(stores);

const isPermissionTab3 = computed(() => {
  return (
    checkPermission(route)?.attrOwnership === "OWNER" ||
    (checkPermission(route)?.attrOwnership === "STAFF" &&
      checkPermission(route)?.attrIsUpdate)
  );
});

const isPermissionTab4 = computed(() => {
  return checkPermission(route)?.attrOwnership === "OWNER";
});
</script>

<template>
  <div class="row">
    <span class="toptitle text-dark item-center">รายการลงเวลาปฏิบัติงาน</span>
  </div>

  <q-card bordered flat>
    <q-tabs
      v-model="tabs"
      dense
      align="left"
      inline-label
      class="rounded-borders"
      indicator-color="primary"
      active-bg-color="teal-1"
      active-class="text-primary"
    >
      <q-tab name="1" label="รายการลงเวลาที่ประมวลผลแล้ว" />
      <q-tab name="2" label="รายการลงเวลา" />
      <q-tab
        v-if="isPermissionTab3"
        name="3"
        label="ประมวลผลการขาดราชการ/มาสาย"
      />
      <q-tab v-if="isPermissionTab4" name="4" label="รอประมวลผล/มาสาย" />
      <!-- เพิ่มแท็บใหม่ -->
    </q-tabs>

    <q-separator />
    <div class="q-pa-sm">
      <q-tab-panels v-model="tabs" animated>
        <q-tab-panel name="1">
          <Tab1 />
        </q-tab-panel>

        <q-tab-panel name="2">
          <Tab2 />
        </q-tab-panel>
        <q-tab-panel name="3">
          <Tab3 />
        </q-tab-panel>
        <q-tab-panel name="4">
          <Tab4_Pending />
        </q-tab-panel>
      </q-tab-panels>
    </div>
  </q-card>
</template>

<style scoped></style>
