<template>
  <AdminLayout>
    <Breadcrumb currentPageText="Üye Profil" />
    <tabs :tabList="tabList" v-if="loaded">
      <template #uyebilgileri>
        <tab-uye-bilgileri />
      </template>
      <template #yetkilikisikurum>
        <tab-uye-yetkili-oldugu-kisi-kurum />
      </template>
      <template #onaydurumu>
        <tab-uye-onay-durumu v-if="usersStore.isPanelUser" />
        <tab-uye-onay-durumu-user v-else />
      </template>
    </tabs>
  </AdminLayout>
</template>
<script setup lang="ts">
  import { ref, onBeforeMount, watch } from 'vue'
  import { useRoute } from 'vue-router'
  const route = useRoute()
  import { useGlobalStore } from '@/stores/globalStore'
  const globalStore = useGlobalStore()
  import { useUsersStore } from '@/stores/usersStore'
  const usersStore = useUsersStore()
  import { useDataStore } from '@/stores/dataStore'
  const dataStore = useDataStore()

  import AdminLayout from '@/layouts/AdminLayout.vue'
  import TabUyeBilgileri from '../components/TabUyeBilgileri.vue'
  import TabUyeYetkiliOlduguKisiKurum from '../components/TabUyeYetkiliOlduguKisiKurum.vue'
  import TabUyeOnayDurumu from '../components/TabUyeOnayDurumu.vue'
  import TabUyeOnayDurumuUser from '../components/TabUyeOnayDurumuUser.vue'

  const loaded = ref<boolean>(false)
  const tabList = ref<Record<string, any>[]>([])

  const CreateTabs = () => {
    tabList.value.push({ text: 'Üye Bilgileri', id: 'uyebilgileri' })
    if (usersStore.isAraciFirma && usersStore.userApproveId === 4)
      tabList.value.push({ text: 'Yetkili Olduğum Kişi/Kurum', id: 'yetkilikisikurum' })

    if (!usersStore.isPanelUser) tabList.value.push({ text: 'Onay Durumu', id: 'onaydurumu' })
  }

  onBeforeMount(() => {
    CreateTabs()
    loaded.value = true
  })

  watch(
    () => usersStore.userApproveId,
    () => {
      tabList.value = []
      CreateTabs()
    }
  )
</script>
