<!-- 文章详情 -->
<template>
  <PageBanner :form="form" />

  <div class="page-main md:w-screen-xl m-auto">
    <el-row :gutter="24">
      <el-col :span="18">
        <div class="p-6 leading-7 bg-white rounded-lg text-lg line-height-loose text-gray-600 content" v-html="form?.content">
        </div>
      </el-col>
      <el-col :span="6">
        <div class="p-4 leading-7 bg-white rounded-lg">
          点击排行
        </div>
        <div class="p-4 leading-7 bg-white rounded-lg mt-4">
          推荐文章
        </div>
      </el-col>
    </el-row>
  </div>

</template>
<script setup lang="ts">
import type {ApiResult} from "~/api";
import {useServerRequest} from "~/composables/useServerRequest";
import {useWebsite} from "~/composables/configState";
import type {BreadcrumbItem} from "~/types/global";
import type {Navigation} from "~/api/cms/navigation/model";
import {getIdBySpm, getSpmUrl, openSpmUrl} from "~/utils/common";
import type {Article} from "~/api/cms/article/model";
import useFormData from "~/utils/use-form-data";
import PageBanner from './components/PageBanner.vue';
import type {Company} from "~/api/system/company/model";

// 引入状态管理
const route = useRoute();
const website = useWebsite();
const breadcrumb = ref<BreadcrumbItem>();
const previousArticle = ref<Article>();
const nextArticle = ref<Article>();


// 配置信息
const { form, assignFields } = useFormData<Company>({
  companyId: undefined,
  companyName: undefined,
  companyLogo: undefined,
  shortName: undefined,
  domain: undefined,
  email: undefined,
  tenantId: undefined,
  tenantName: '',
  comments: '',
  nickname: undefined,
  version: undefined,
  createTime: undefined,
  title: '',
  parentName: '',
  categoryName: ''
});

// 请求数据
const reload = async () => {

  // 存在spm(优先级高)
  const { data: nav } = await useServerRequest<ApiResult<Company>>('/system/company/profileAll/' + getIdBySpm(5))
  if (nav.value?.data) {
    assignFields(nav.value.data)
    form.nickname = nav.value.data?.companyName;
    form.title = nav.value.data?.tenantName;
    form.categoryName = '应用详情';
  }

  // seo
  useHead({
    title: `${form.title} - ${website.value.websiteName}`,
    bodyAttrs: {
      class: "page-container",
    }
  });
  // 面包屑
  breadcrumb.value = form
}

watch(
    () => route.path,
    (path) => {
      console.log(path,'=>Path')

      reload();
    },
    { immediate: true }
);
</script>

<style lang="less">
.content {
  img {
    max-width: 100%;
  }
}
</style>
