<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
        class="split"
      >
      <template v-slot:before>
        <div class=""><!--  bg-tab-regi  -->
          <q-tabs
            v-model="store.tabMain" 
            vertical 
            
            class="text-grey-6 text-weight-light" 
            active-class="bg-white text-blue-8 text-weight-bold bg-blue-1"
            ><!-- indicator-color="transparent" -->
            <q-tab
              class="q-py-sm"
              v-for="(tab, index) in itemsTab"
              :key="index"
              :name="tab.name"
              :icon="tab.icon"
              :label="tab.label"
              
            /><!-- hover-tab  -->
          </q-tabs>
        </div>
      </template>

      <template v-slot:after>
        <q-tab-panels
          v-model="store.tabMain"
          animated
          swipeable
          vertical
          transition-prev="jump-up"
          transition-next="jump-up"
          class="q-pa-none"
        ><!--  split -->
          <q-tab-panel
            v-for="(tab, index) in itemsTab"
            :key="index"
            :name="tab.name"
            class="q-pa-none"
            
          >
            <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;
}
.bg-tab-regi{
  background-color: #273238;
} 
.split{
  border-radius: 10px !important;
}
</style>
