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

  <Comments :data="form" />
</template>
<script setup lang="ts">
  import type { ApiResult } from '~/api';
  import { useServerRequest } from '~/composables/useServerRequest';
  import { useWebsite } from '~/composables/configState';
  import { getIdBySpm } from '~/utils/common';
  import useFormData from '~/utils/use-form-data';
  import PageBanner from './components/PageBanner.vue';
  import type { Form } from '~/api/cms/form/model';
  import Comments from "~/pages/form/components/Comments.vue";

  // 引入状态管理
  const route = useRoute();
  const website = useWebsite();

  // 配置信息
  const { form, assignFields } = useFormData<Form>({
    formId: undefined,
    name: '',
    photo: '',
    background: '',
    video: '',
    layout: '',
    comments: '',
    status: undefined,
    createTime: ''
  });

  // 请求数据
  const reload = async () => {
    // 要求登录
    // if (!token.value || token.value == '') {
    //   openSpmUrl('/passport/login');
    //   return;
    // }
    // 存在spm(优先级高)
    const { data: item } = await useServerRequest<ApiResult<Form>>('/cms/form/' + getIdBySpm(5));
    if (item.value?.data) {
      assignFields(item.value.data);
      form.comments = item.value?.data?.comments;
    }

    // seo
    useHead({
      title: `${form.name} - ${website.value.websiteName}`,
      bodyAttrs: {
        class: 'page-container'
      }
    });
  };

  watch(
    () => route.path,
    path => {
      console.log(path, '=>Path');
      reload();
    },
    { immediate: true }
  );
</script>
