<template>
  <!-- Banner -->
  <Banner :layout="layout" />
  <!-- 主体部分 -->
  <div class="xl:w-screen-xl m-auto py-4 mt-2">
    <el-page-header :icon="ArrowLeft" @back="goBack">
      <template #content>
        <span class="text-large font-600 mr-3"> {{ page.title }} </span>
      </template>
      <el-card shadow="hover" class=" my-5">

        <!-- 新闻详细 -->
        <div class=" bg-white">
          <!-- 内容组件 -->
          <Content class="content text-lg py-3" :data="page.design?.content" />

          <h3 class="tag">{{ $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 {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";

// 引入状态管理
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 () => {
  getCmsNavigation(navId.value).then(data => {
    page.value = data
    layout.value.banner = data.banner;
    // 二级栏目分类
    if(data.parentId && data.parentId > 0){
      listCmsNavigation({
        parentId: data.parentId == 0 ? data.navigationId : data.parentId
      }).then(list => {
        category.value = list
      })
    }
    // seo
    useSeoMeta({
      description: data.comments || data.title,
      keywords: data.title,
      titleTemplate: `${data?.title}` + ' - %s',
    })
  })
}

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

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