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

/** importComponents*/
import Profile from "@/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue";
import NameChangeHistory from "@/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue";
import Address from "@/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue";
import Family from "@/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue";
import Education from "@/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue";
import SpecialSkill from "@/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue";

const tab = ref<string>("1");
</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 />
      </q-tab-panel>
      <q-tab-panel name="2">
        <NameChangeHistory />
      </q-tab-panel>
      <q-tab-panel name="3">
        <Address />
      </q-tab-panel>
      <q-tab-panel name="4">
        <Family />
      </q-tab-panel>
      <q-tab-panel name="5">
        <Education />
      </q-tab-panel>
      <q-tab-panel name="6">
        <SpecialSkill />
      </q-tab-panel>
    </q-tab-panels>
  </q-card>
</template>

<style scoped></style>
