<template>
  <a-card class="ele-body">
    <a-spin :spinning="spinning">
      <a-typography-title :level="3" class="ele-text-center">{{
        form.title
      }}</a-typography-title>
      <a-divider dashed />
      <div class="content" v-html="form.content"></div>
    </a-spin>
  </a-card>
</template>

<script lang="ts" setup>
  import { ref, unref, watch } from 'vue';
  import { useRouter } from 'vue-router';
  import { setPageTabTitle } from '@/utils/page-tab-util';
  import { getArticle } from '@/api/cms/article';
  import { Article } from '@/api/cms/article/model';
  import useFormData from '@/utils/use-form-data';

  const { currentRoute } = useRouter();
  // 是否开启响应式布局
  const title = ref('');
  const spinning = ref(true);
  // 应用信息
  const { form, assignFields } = useFormData<Article>({
    articleId: undefined,
    title: '',
    content: '',
    createTime: ''
  });

  /**
   * 加载数据
   */
  const reload = (id: number) => {
    console.log(id);
    // 加载项目详情
    getArticle(id).then((data) => {
      assignFields(data);
      if (data.title) {
        title.value = data.title;
        // 修改页签标题
        setPageTabTitle(data.title);
      }
      spinning.value = false;
    });
  };

  watch(
    currentRoute,
    (route) => {
      const { params } = unref(route);
      const { id } = params;
      if (id) {
        reload(Number(id));
      }
    },
    { immediate: true }
  );
</script>

<script lang="ts">
  export default {
    name: 'ArticlePreview'
  };
</script>
<style>
  body {
    background: #f0f2f5;
  }
  .ele-body {
    margin: 0 auto;
    max-width: 1000px;
  }
  .content {
    padding: 10px;
  }
  * {
    max-width: 100%;
  }
</style>
