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

import { useRoute, useRouter } from "vue-router";

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

import TabInformation from "@/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue";
import TabIDP from "@/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue";

const router = useRouter();
const route = useRoute();
const store = useRegistryNewDataStore();

const isIDP = ref<boolean | null>(null);
const isEmployee = ref<boolean>(
  route.name?.toString() == "registryNewRequestEditEMP" ? true : false
);

onBeforeMount(async () => {
  isIDP.value = await (route.name?.toString() == "registryNewRequestEditEMP"
    ? false
    : true);
});

onMounted(() => {
  store.tabs = !isIDP.value ? "Main" : store.tabs;
});
</script>

<template>
  <div class="row items-center">
    <div class="toptitle text-dark row items-center q-py-xs">
      <q-btn
        icon="mdi-arrow-left"
        unelevated
        round
        dense
        flat
        color="primary"
        class="q-mr-sm"
        @click="router.go(-1)"
      />
      รายการคำร้องขอแก้ไขทะเบียนประวัติ
      {{ `(${isEmployee ? "ลูกจ้างประจำ" : "ข้าราชการ กทม.สามัญ"})` }}
    </div>
  </div>

  <q-card class="q-mt-sm">
    <q-card-section style="padding: 0px">
      <q-separator />
      <q-tabs
        v-if="isIDP"
        v-model="store.tabs"
        inline-label
        align="left"
        indicator-color="primary"
        active-color="primary bg-teal-1"
      >
        <q-tab
          v-for="(tab, index) in store.tabsManu"
          :key="index"
          :name="tab.id"
          :label="tab.name"
        />
      </q-tabs>
      <q-separator />

      <q-tab-panels v-model="store.tabs" animated>
        <q-tab-panel style="padding: 0px" name="Main">
          <TabInformation />
        </q-tab-panel>

        <q-tab-panel style="padding: 0px" name="IDP">
          <TabIDP :is-idp="isIDP" />
        </q-tab-panel>
      </q-tab-panels>
    </q-card-section>
  </q-card>
</template>

<style scoped></style>
