div
<script setup lang="ts">
import { ref, onMounted } from "vue";
import ListPosition from "@/modules/01_metadataNew/components/position/01ListPosition.vue";
import ListType from "@/modules/01_metadataNew/components/position/02ListType.vue";
import ListExecutive from "@/modules/01_metadataNew/components/position/04ListExecutive.vue";
import { usePositionDataStore } from "../stores/positionListStore";
// const store.pathLocation = ref<string>("list_position");
const tabs = ref<Array<any>>([]);
const store = usePositionDataStore();

onMounted(() => {
  const tabsPerson = [
    { label: "ตำแหน่ง", value: "list_position" },
    { label: "รายการประเภทตำแหน่ง", value: "list_type" },
    { label: "ตำแหน่งทางการบริหาร", value: "list_executive" },
  ];
  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-panel name="list_executive">
        <ListExecutive v-if="store.pathLocation == 'list_executive'" />
      </q-tab-panel>
    </q-tab-panels>
  </q-card>
</template>

<style scoped></style>
