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

import { usePlacementDataStore } from "@/modules/05_placement/store";

import type { ItemTabs } from "@/modules/05_placement/interface/request/Main";

import ProbationPage from "@/modules/05_placement/components/probation/MainProbation.vue";
import AppointPage from "@/modules/05_placement/components/probation/MainAppoint.vue";

const store = usePlacementDataStore();

const tabsManu = ref<ItemTabs[]>([
  { label: "รายการผู้ทดลองปฏิบัติหน้าที่ราชการ", name: "probation" },
  { label: "แต่งตั้งคณะกรรมการฯ", name: "appoint" },
]);
</script>
<template>
  <div class="toptitle text-dark col-12 row items-center">
    รายการผู้ทดลองปฏิบัติหน้าที่ราชการ
  </div>

  <q-card flat bordered class="col-12">
    <q-tabs
      v-model="store.tabsMain"
      inline-label
      align="left"
      indicator-color="primary"
      active-color="primary bg-teal-1"
    >
      <q-tab
        v-for="(tab, index) in tabsManu"
        :key="index"
        :name="tab.name"
        :label="tab.label"
      />
    </q-tabs>
    <q-separator />
    <q-tab-panels v-model="store.tabsMain" animated>
      <q-tab-panel name="probation" class="q-pa-sm">
        <!-- รายการผู้ทดลองปฏิบัติหน้าที่ราชการ -->
        <ProbationPage />
      </q-tab-panel>

      <q-tab-panel name="appoint" class="q-pa-none">
        <!-- แต่งตั้งคณะกรรมการฯ -->
        <AppointPage />
      </q-tab-panel>
    </q-tab-panels>
  </q-card>
</template>
