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

import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";

/** importComponents*/
//ประวัติส่วนตัว
const Profile = defineAsyncComponent(
  () =>
    import(
      "@/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue"
    )
);
//ประวัติการเปลี่ยนชื่อ
const NameChangeHistory = defineAsyncComponent(
  () =>
    import(
      "@/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue"
    )
);
//ข้อมูลที่อยู่
const Address = defineAsyncComponent(
  () =>
    import(
      "@/modules/04_registryPerson/components/detail/PersonalInformation/03_Address.vue"
    )
);
//ข้อมูลครอบครัว
const FamilyNew = defineAsyncComponent(
  () =>
    import(
      "@/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue"
    )
);
//ประวัติการศึกษา
const Education = defineAsyncComponent(
  () =>
    import(
      "@/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue"
    )
);
//ความสามารถพิเศษ
const SpecialSkill = defineAsyncComponent(
  () =>
    import(
      "@/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue"
    )
);

const storeRegistry = useRegistryNewDataStore();

const tab = ref<string>("1");
const props = defineProps({
  fetchDataPersonal: { type: Function, require: true },
});
</script>
<template>
  <div class="row items-center q-my-md">
    <div class="text-dark row items-center q-px-md">
      <q-icon name="mdi-account" class="q-mr-md" size="22px" />
      <div class="text-subtitle1 text-weight-bold">ข้อมูลส่วนตัว</div>
    </div>
  </div>

  <q-separator />
  <q-card>
    <q-tabs
      v-model="tab"
      active-color="blue-8"
      align="left"
      bordered
      narrow-indicator
      indicator-color="transparent"
      dense
      class="text-grey q-pl-sm"
    >
      <q-tab name="1" label="ประวัติส่วนตัว" />
      <q-tab name="2" label="ประวัติการเปลี่ยนชื่อ - นามสกุล" />
      <q-tab name="3" label="ข้อมูลที่อยู่" />
      <q-tab name="4" label="ข้อมูลครอบครัว" />
      <q-tab name="5" label="ประวัติการศึกษา" />
      <q-tab name="6" label="ความสามารถพิเศษ" />
    </q-tabs>
    <q-separator />

    <q-tab-panels v-model="tab" animated>
      <q-tab-panel name="1">
        <Profile
          :fetchDataPersonal="props.fetchDataPersonal"
          :is-leave="storeRegistry.isLeave"
        />
      </q-tab-panel>
      <q-tab-panel name="2">
        <NameChangeHistory
          :fetchDataPersonal="props.fetchDataPersonal"
          :is-leave="storeRegistry.isLeave"
        />
      </q-tab-panel>
      <q-tab-panel name="3">
        <Address :is-leave="storeRegistry.isLeave" />
      </q-tab-panel>
      <q-tab-panel name="4">
        <FamilyNew :is-leave="storeRegistry.isLeave" />
      </q-tab-panel>
      <q-tab-panel name="5">
        <Education :is-leave="storeRegistry.isLeave" />
      </q-tab-panel>
      <q-tab-panel name="6">
        <SpecialSkill :is-leave="storeRegistry.isLeave" />
      </q-tab-panel>
    </q-tab-panels>
  </q-card>
</template>

<style scoped></style>
