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

import { useRegistryDetailNewDataStore } from "@/modules/04_registryNew/stores/DetailMain";

import PersonalInformationMain from "@/modules/04_registryNew/components/detail/PersonalInformation/Main.vue";
import GovernmentInformationMain from "@/modules/04_registryNew/components/detail/GovernmentInformation/Main.vue";
import salaryMain from "@/modules/04_registryNew/components/detail/Salary/Main.vue";
import AchievementMain from "@/modules/04_registryNew/components/detail/Achievement/Main.vue";
import OtherMaim from "@/modules/04_registryNew/components/detail/Other/Main.vue";

const store = useRegistryDetailNewDataStore();

const itemsTab = ref<any>([
  {
    name: "1",
    icon: "mdi-account",
    label: "ข้อมูลส่วนตัว",
  },
  {
    name: "2",
    icon: "mdi-account-tie",
    label: "ข้อมูลราชการ",
  },
  {
    name: "3",
    icon: "mdi-cash",
    label: "ข้อมูลเงินเดือน/ค่าจ้าง",
  },
  {
    name: "4",
    icon: "mdi-medal",
    label: "ข้อมูลผลงานและเครื่องราชฯ",
  },
  {
    name: "5",
    icon: "mdi-bookmark",
    label: "เอกสารหลักฐานและอื่นๆ",
  },
]);

const splitterModel = ref<number>(12);
</script>
<template>
  <q-splitter v-model="splitterModel" disable>
    <template v-slot:before>
      <q-tabs v-model="store.tabMain" vertical class="text-blue">
        <q-tab
          class="hover-tab"
          v-for="(tab, index) in itemsTab"
          :key="index"
          :name="tab.name"
          :icon="tab.icon"
          :label="tab.label"
        />
      </q-tabs>
    </template>

    <template v-slot:after>
      <q-tab-panels
        v-model="store.tabMain"
        animated
        swipeable
        vertical
        transition-prev="jump-up"
        transition-next="jump-up"
      >
        <q-tab-panel
          v-for="(tab, index) in itemsTab"
          :key="index"
          :name="tab.name"
        >
          <PersonalInformationMain v-if="store.tabMain === '1'" />
          <GovernmentInformationMain v-if="store.tabMain === '2'" />
          <salaryMain v-if="store.tabMain === '3'" />
          <AchievementMain v-if="store.tabMain === '4'" />
          <OtherMaim v-if="store.tabMain === '5'" />
        </q-tab-panel>
      </q-tab-panels>
    </template>
  </q-splitter>
</template>

<style scoped>
.hover-tab:hover {
  background-color: #0793f1;
  color: white !important;
  opacity: 1 !important;
}
</style>
