<template>

  <!-- Banner -->
  <Banner :layout="layout" />

  <!-- 主体部分 -->
  <div class="clearfix p-5">
    <div class="m-page">
      <div class="sitemp h-[32px] flex justify-between">
        <h2>{{ page.title }}</h2>
      </div>
      <div class="content text-lg" v-html="page.design?.content"></div>
    </div>
  </div>
</template>
<script setup lang="ts">

import { useLayout, usePage} from "~/composables/configState";
import type {CmsNavigation} from "~/api/cms/cmsNavigation/model";
import {paramsId} from "~/utils/common";
import {getCmsNavigation, listCmsNavigation} from "~/api/cms/cmsNavigation";

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


// 加载页面布局
const reload = async () => {
  getCmsNavigation(paramsId()).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.path,
    () => {
      reload();
    },
    { immediate: true }
);
</script>

<style lang="scss">
.content {
  padding-top: 15px;
  padding-bottom: 30px;
  overflow: hidden;
}
.content p{
}
.content img{
  padding: 5px 0;
  max-width: 100%;
  height: auto;
}
.content video {
  width: 100%;
  height: auto;
}
</style>
