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

import { usePersonalDataStore } from "@/modules/01_metadata/stores/personalStore";

import type { MainTabs } from "@/modules/01_metadata/interface/index/Main";

import ListPrefix from "@/modules/01_metadata/components/personal/01_Prefix.vue"; // คำนำหน้าชื่อ
import ListRank from "@/modules/01_metadata/components/personal/02_Rank.vue"; //ยศ
import ListGender from "@/modules/01_metadata/components/personal/03_Gender.vue"; // เพศ
import ListRelationship from "@/modules/01_metadata/components/personal/04_Relationship.vue"; //สถานภาพ
import ListBloodGroup from "@/modules/01_metadata/components/personal/05_BloodGroup.vue"; // กลุ่มเลือด
import ListReligion from "@/modules/01_metadata/components/personal/06_Religion.vue"; // ศาสนา
import ListProvince from "@/modules/01_metadata/components/personal/07_Province.vue"; // จังหวัด
import ListEducation from "@/modules/01_metadata/components/personal/08_EducationLevel.vue"; //  ระดับการศึกษา

const store = usePersonalDataStore();

const tabs = ref<Array<MainTabs>>([]); // รายการ Tab

/** HOOK*/
onMounted(() => {
  const tabsPerson = [
    { label: "คำนำหน้าชื่อ", value: "list_prefix" },
    { label: "ยศ", value: "list_rank" },
    { label: "เพศ", value: "list_gender" },
    { label: "สถานภาพ", value: "list_relationship" },
    { label: "กลุ่มเลือด", value: "list_bloodGroup" },
    { label: "ศาสนา", value: "list_religion" },
    { label: "จังหวัด", value: "list_province" },
    { label: "ระดับการศึกษา", value: "list_education" },
  ];
  tabs.value = tabsPerson;
});
</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="store.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="store.currentTab = tab.value"
          :label="tab.label"
          :name="tab.value"
          class="q-py-xs"
        />
      </q-tabs>
      <q-separator />

      <!-- person -->
      <q-tab-panels v-model="store.currentTab" animated>
        <q-tab-panel name="list_prefix">
          <ListPrefix v-if="store.currentTab == 'list_prefix'" />
        </q-tab-panel>
        <q-tab-panel name="list_rank">
          <ListRank v-if="store.currentTab == 'list_rank'" />
        </q-tab-panel>
        <q-tab-panel name="list_gender">
          <ListGender v-if="store.currentTab == 'list_gender'" />
        </q-tab-panel>
        <q-tab-panel name="list_relationship">
          <ListRelationship v-if="store.currentTab == 'list_relationship'" />
        </q-tab-panel>
        <q-tab-panel name="list_bloodGroup">
          <ListBloodGroup v-if="store.currentTab == 'list_bloodGroup'" />
        </q-tab-panel>
        <q-tab-panel name="list_religion">
          <ListReligion v-if="store.currentTab == 'list_religion'" />
        </q-tab-panel>
        <q-tab-panel name="list_province">
          <ListProvince v-if="store.currentTab == 'list_province'" />
        </q-tab-panel>
        <q-tab-panel name="list_education">
          <ListEducation v-if="store.currentTab == 'list_education'" />
        </q-tab-panel>
      </q-tab-panels>
    </div>
  </q-card>
</template>

<style scoped></style>
