<template>
  <!-- Banner -->
  <Banner :layout="layout" />
  <!-- 主体部分 -->
  <div class="xl:w-screen-xl m-auto py-4 px-4 sm:px-0">
    <el-page-header :icon="ArrowLeft" @back="goBack">
      <template #content>
        <span class="text-large font-600"> {{ page.title || '页面标题' }} </span>
      </template>
      <el-card shadow="hover" class="my-5 sm:my-10 sm:px-2">
        <el-image v-if="page?.design?.photo" :src="page?.design?.photo" class="right max-w-lg" />
        <!-- 新闻详细 -->
        <div class=" bg-white">
          <!-- 内容组件 -->
          <Content class="content text-lg py-3" :data="page.design?.content" />

          <h3 class="tag" @click="copyText(locationUrl())">{{ $t('articleUrl') }}：{{ locationUrl() }} </h3>
        </div>
      </el-card>
    </el-page-header>
  </div>

</template>
<script setup lang="ts">
import {useLayout, usePage} from "~/composables/configState";
import type {CmsNavigation} from "~/api/cms/cmsNavigation/model";
import {copyText, getNavIdByParamsId, getViews, locationUrl, paramsId} from "~/utils/common";
import Left from "~/components/Left.vue";
import { ArrowLeft,View } from '@element-plus/icons-vue'
import {getCmsNavigation, listCmsNavigation} from "~/api/cms/cmsNavigation";
import Content from "~/components/Content.vue";
import Tags from "~/components/Tags.vue";
import { useHead } from 'unhead';

// 引入状态管理
const route = useRoute();
const router = useRouter();
const navId = ref();
const layout = useLayout();
const page = usePage();
const category = ref<CmsNavigation[]>([]);

const goBack = () => {
  router.back();
}

// 加载页面布局
const reload = async () => {
  try {
    const data = await getCmsNavigation(navId.value)
    if (!data) return

    page.value = data
    layout.value.banner = data.banner

    // 更新 SEO
    const title = data?.title || ''
    const description = data.comments || data.title || ''
    const appName = useRuntimeConfig().public.appName

    useHead({
      title,
      meta: [
        { name: 'description', content: description },
        { name: 'keywords', content: title },
        { property: 'og:title', content: title },
        { property: 'og:description', content: description }
      ]
    })

    // 二级栏目分类
    if(data.parentId && data.parentId > 0){
      const list = await listCmsNavigation({
        parentId: data.parentId == 0 ? data.navigationId : data.parentId
      })
      category.value = list
    }
  } catch (error) {
    console.error('Failed to load page data:', error)
  }
}

watch(
    () => route.params.id,
    (id) => {
      navId.value = getNavIdByParamsId(id);
      reload();
    },
    { immediate: true }
);
</script>

<style lang="scss">
</style>
