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

import { usePositionEmployeeDataStore } from "../stores/positionEmployeeStore";

import type { MainTabs } from "@/modules/01_metadata/interface/index/Main";

import ListPosition from "@/modules/01_metadata/components/position-employee/01_PositionMain.vue"; //ตำแหน่ง
import ListType from "@/modules/01_metadata/components/position-employee/02_GroupMain.vue"; // รายการกลุ่มงาน

const store = usePositionEmployeeDataStore();

const tabs = ref<Array<MainTabs>>([]); // รายการ Tab

/**
 * hook ทำงานเมื่อ Components ถูกเรียกใช้งาน
 */
onMounted(() => {
  const tabsPerson = [
    { label: "ตำแหน่ง", value: "list_position" },
    { label: "รายการกลุ่มงาน", value: "list_type" },
  ];
  tabs.value = tabsPerson;
});
</script>

<template>
  <div class="toptitle text-dark col-12 row items-center">
    ข้อมูลตำแหน่งลูกจ้างประจำ
  </div>

  <q-card flat bordered>
    <q-tabs
      dense
      v-model="store.pathLocation"
      align="left"
      indicator-color="primary"
      active-color="primary bg-teal-1"
      inline-label
      class="text-body2 text-grey-7"
    >
      <q-tab
        v-for="tab in tabs"
        :key="tab.value"
        v-on:click="store.pathLocation = tab.value"
        :label="tab.label"
        :name="tab.value"
        class="q-py-xs"
      />
    </q-tabs>
    <q-separator />

    <q-tab-panels v-model="store.pathLocation" animated>
      <q-tab-panel name="list_position">
        <ListPosition v-if="store.pathLocation == 'list_position'" />
      </q-tab-panel>

      <q-tab-panel name="list_type">
        <ListType v-if="store.pathLocation == 'list_type'" />
      </q-tab-panel>
    </q-tab-panels>
  </q-card>
</template>

<style scoped></style>
