<script setup lang="ts">
import { ref, onMounted } from "vue";
import { usePersonalDataStore } from "@/modules/01_metadata/stores/personalStore";
import ListPrefix from "@/modules/01_metadata/components/personal/01ListPrefix.vue";
import ListRank from "@/modules/01_metadata/components/personal/02ListRank.vue";
import ListBloodGroup from "@/modules/01_metadata/components/personal/03ListBloodGroup.vue";
import ListGender from "@/modules/01_metadata/components/personal/04ListGender.vue";
import ListReligion from "@/modules/01_metadata/components/personal/05ListReligion.vue";
import ListRelationship from "@/modules/01_metadata/components/personal/06ListRelationship.vue";
import ListEducation from "@/modules/01_metadata/components/personal/07ListEducationLevel.vue";
import ListProvince from "@/modules/01_metadata/components/personal/08ListProvince.vue";

const store = usePersonalDataStore();
const tabs = ref<Array<any>>([]);

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>
