<template>
  <ClientOnly>
    <TopMenu @changetab="changeTab" />
  </ClientOnly>
  <ClientOnly>
    <div class="container blockdiv pb-2">
      <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>
        <a class="ml-3" @click="refresh()">
          <SvgIcon
            v-bind="{ name: 'refresh.svg', type: 'primary', size: 20 }"
          ></SvgIcon>
        </a>
      </div>
      <KeepAlive>
        <component
          :is="componentMap[vbind.component]"
          v-bind="vbind"
          :key="componentKey"
          v-if="componentKey"
        />
      </KeepAlive>
    </div>
  </ClientOnly>
</template>
<script setup>
const { $createMeta, $store, $copy, $id } = useNuxtApp();
const componentMap = {};
const componentKey = ref();
var vbind = {};
var tab, subtab, currentTab;
const toPascalCase = (str) => {
  if (!str || typeof str !== 'string') return str;
  return str
    .split('/')
    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
    .join('');
};
function changeTab(_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 || toPascalCase(vbind.component);
  componentKey.value = vbind.component;
  $store.commit('tabinfo', { tab, subtab, current: currentTab, vbind });
  let meta = {
    title: currentTab[$store.lang],
    image: undefined,
    description: 'Utopia',
    type: 'article',
    keywords: 'utopia',
  };
  useHead($createMeta(meta));
}
function refresh() {
  const copy = $copy(componentKey.value) + $id();
  componentKey.value = undefined;
  setTimeout(() => (componentKey.value = copy));
}
</script>
