NSG_PORTAL_V2/pages/bai-viet/[slug].vue

/*
- LayoutType: None=0 | Normal=1 | Short=2 | Long=3 | Page=4 | Other=5
- ContentType: None=0 | Normal=1 | Photo=2 | Video=3 | Graphic=4 | Document=5 | Reaction=6 (Poll,Quiz) | Other=7
- Type: None=0 | Editorial=1 | General=2 | Reportage=3 | Interview=4 | Survey=5 | Tutorial=6 | Podcast=7 | Broadcast=8 | TalkShow=9 | LiveStream=10 | Translation=11 | Promotion=12 | Other=13
*/

<script setup lang="ts">
import _cloneDeep from 'lodash/cloneDeep';

import DynamicTemplate from "~/components/dynamic-page/page/templates/index.vue";
import DynamicSection from "~/components/dynamic-page/page-section/templates/index.vue";

const route = useRoute();

import { useDynamicPageStore } from '~/stores/dynamic-page';
import { useArticleStore } from '~/stores/articles';
const { currentPage, sectionPublished, componentPublished } = storeToRefs(useDynamicPageStore());
const { currentArticle } = storeToRefs(useArticleStore());

const store = reactive({
  dynamicPage: useDynamicPageStore(),
  article: useArticleStore(),
});

(async () => {
  try {
    await store.article.getArticleBySlug(route.params.slug);
  } catch (error) {
    console.error("Error fetching data:", error);
  }
})();

const loadPage = async (contentType: string | number) => {
  await store.dynamicPage.fetchPageByCode(contentType);
  store.dynamicPage.setSectionPublished();
  store.dynamicPage.setComponentPublished();
} 

watch(currentArticle, async () => {
  let isContentType : string = '';
  switch (currentArticle.value?.contentType) {
    case 1:
        isContentType = 'trang-doi-song'
        break;
    case 2:
        isContentType = 'ArticleLayoutImage'
        break;

    case 3:
        isContentType = 'trang-chi-tiet-podcast'
        break;

    case 4:
        isContentType = 'trang-chi-tiet-video-clip'
        break;

    case 5:
        if (currentArticle.value?.layoutType === 4) {
          isContentType = 'trang-chi-tiet-emagazine' 
          break;
        }
        if (currentArticle.value?.layoutType === 3) {
          isContentType = 'trang-chi-tiet-infographics' 
          break;
        }
        // else {
        //   isContentType = 'trang-chi-tiet-emagazine'
        //   break;
        // }
    default:
        isContentType = 'trang-chi-tiet-emagazine'
        break;
  }
  await loadPage(isContentType);
}, { deep: true })

useSeoMeta({
  title: () => currentArticle.value?.title?.replace(/<[^>]+>/g, ''),
  description: () => currentArticle.value?.intro,
  ogTitle: () => currentArticle.value?.title,
  ogImage: () => currentArticle.value?.thumbnail,
  ogDescription: () => currentArticle.value?.intro,
  twitterCard: 'summary_large_image',
})

onMounted(() => {
  console.log(document.querySelectorAll('document'), '12')
})
</script>

<template>
  <main class="h-screen" v-if="currentPage && currentPage.settings">
    <DynamicTemplate :settings="currentPage.settings">
      <template v-if="sectionPublished && sectionPublished.length > 0">
        <DynamicSection
          v-for="(section, index) in sectionPublished"
          :key="index"
          :settings="section.settings"
          :content="section.content ? JSON.parse(section.content) : null"
          :section="section"
        />
      </template>
    </DynamicTemplate>
  </main>
</template>