<script setup lang="ts">
import { ref, onMounted } from "vue";
import ListCompetency from "@/modules/14_KPI/components/competency/01ListCompetency.vue";
import ListLinkPosition from "@/modules/14_KPI/components/competency/02ListLinkPosition.vue";
import ListLinkGroup from "@/modules/14_KPI/components/competency/03ListLinkGroup.vue";
import ListCriteria from "@/modules/14_KPI/components/competency/04ListCriteria.vue";
import ListDetail from "@/modules/14_KPI/components/competency/05ListDetail.vue";

const currentTab = ref<string>("list_competency");
const tabs = ref<Array<any>>([]);

onMounted(() => {
  const tab = [
    { label: "รายการสมรรถนะ", value: "list_competency" },
    { label: "กลุ่มงาน", value: "list_linkPosition" },
    { label: "เชื่อมโยงกับกลุ่มงานและตำแหน่ง", value: "list_linkGroup" },
    { label: "เกณฑ์การประเมิน", value: "list_criteria" },
    { label: "การประเมินพฤติกรรมการปฏิบัติราชการ", value: "list_detail" },
  ];
  tabs.value = tab;
});
</script>

<template>
  <div class="toptitle text-dark col-12 row items-center">สมรรถนะ</div>

  <q-card flat bordered>
    <div class="text-subtitle1 text-grey-9">
      <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 />
      <!-- person -->

      <q-tab-panels v-model="currentTab" animated>
        <q-tab-panel name="list_competency">
          <ListCompetency v-if="currentTab == 'list_competency'" />
        </q-tab-panel>
        <q-tab-panel name="list_linkPosition">
          <ListLinkPosition v-if="currentTab == 'list_linkPosition'" />
        </q-tab-panel>
        <q-tab-panel name="list_linkGroup">
          <ListLinkGroup v-if="currentTab == 'list_linkGroup'" />
        </q-tab-panel>
        <q-tab-panel name="list_criteria">
          <ListCriteria v-if="currentTab == 'list_criteria'" />
        </q-tab-panel>
        <q-tab-panel name="list_detail">
          <ListDetail v-if="currentTab == 'list_detail'" />
        </q-tab-panel>
      </q-tab-panels>
    </div>
  </q-card>
</template>

<style scoped></style>
