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";
const currentTab = ref<string>("list_position");
const tabs = ref<Array<any>>([]);

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 class="q-pa-md">
    <q-tabs
      dense
      v-model="currentTab"
      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="currentTab = tab.value"
        :label="tab.label"
        :name="tab.value"
        class="q-py-xs"
      />
    </q-tabs>
    <q-separator size="2px" />
    <ListPosition v-if="currentTab == 'list_position'"/>
    <ListType v-if="currentTab == 'list_type'"/>
    <ListExecutive v-if="currentTab == 'list_executive'"/>
  </q-card>
</template>

<style scoped></style>
