<template>
  <ClientOnly>
    <TopMenu @changetab="changeTab" @langChanged="changeLang" />
  </ClientOnly>
  <ClientOnly>
    <div class="container blockdiv">
      <div class="fsb-18 mb-2 has-text-black" v-if="tab">
        <template v-if="subtab">
         <span>{{tab[store.lang]}}</span>
          <SvgIcon class="mx-2" v-bind="{name: 'right.svg', size: 17, type: 'has-text-black'}"></SvgIcon>
          <span>{{subtab[store.lang]}}</span>
        </template>
        <span v-else>{{tab[store.lang]}}</span>
      </div>
     <KeepAlive>
        <component :is="componentMap[vbind.component]" v-bind="vbind" :key="componentKey"/>
     </KeepAlive>
  </div>
</ClientOnly>
</template>
<script setup>
import { useStore } from '~/stores/index'
const store = useStore()
const { $createMeta, $id } = useNuxtApp()
const componentMap = {}
var vbind = {}
var tab, subtab, currentTab
var componentKey = ref()
const changeTab = function(_tab, _subtab) {
  tab = _tab
  subtab = _subtab
  currentTab = subtab || tab
  if(currentTab.detail) {
    vbind = store.lang==='en'? currentTab.detail_en || currentTab.detail : currentTab.detail
  }
  componentMap[vbind.component] = vbind.base || vbind.component
  componentKey.value = vbind.component
  store.commit('tabinfo', {tab: tab, subtab: subtab, current: currentTab, vbind: vbind})
  let meta = {
    title: currentTab[store.lang],
    image: undefined,
    description: 'Utopia - Account',
    type: 'article',
    keywords: 'Utopia, account'
  }
  useHead($createMeta(meta))
}
function changeLang(val) {
  changeTab(tab, subtab)
  componentKey.value = $id()
}
</script>