<template>
  <a-layout has-sider>
    <a-layout-sider
      :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0, top: 0, bottom: 0 }"
    >
      <Logo />
      <Menu />
    </a-layout-sider>
    <a-layout :style="{ marginLeft: '200px' }">
      <a-layout-content :style="{ margin: '16px 16px 0', overflow: 'initial' }">
        <div :style="{ padding: '24px', background: '#fff', textAlign: 'center' }">
          <div v-if="record" class="bg-white p-5">
            <h1 class="text-center py-3 font-bold">{{ record.title }}</h1>
            <div class="head"></div>
            <!-- 内容组件 -->
            <div v-html="record.content"></div>
          </div>
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script lang="ts" setup>
import {ref, watch} from 'vue';
import {useRouter} from 'vue-router';
import {getCmsArticle} from "@/api/cms/cmsArticle";
import {CmsArticle} from "@/api/cms/cmsArticle/model";
import {listCmsNavigation} from "@/api/cms/cmsNavigation";
import {CmsNavigation} from "@/api/cms/cmsNavigation/model";
import {toTreeData} from 'ele-admin-pro';
import Logo from "@/components/Home/Logo.vue";
import Menu from "@/components/Home/Menu.vue";

const {currentRoute} = useRouter();
const articleId = ref<number>(0);
const record = ref<CmsArticle>();
// 栏目数据
const navigationList = ref<CmsNavigation[]>();
const selectedKeys = ref(['1']);
const openKeys = ref(['sub1']);
const current = ref<string[]>(['mail']);

const reload = () => {
  // 刷新页面
  getCmsArticle(articleId.value).then((data) => {
    record.value = data;
  })
  // 加载栏目数据
  if (!navigationList.value) {
    listCmsNavigation({
      lang: localStorage.getItem('i18n-lang') || undefined
    }).then((res) => {
      navigationList.value = toTreeData({
        data: res?.map((d) => {
          d.value = d.navigationId;
          d.label = d.title;
          d.key = d.title;
          if (!d.component) {
            d.disabled = true;
          }
          if (d.model == 'index' || d.model == 'page' || d.model == 'order' || d.model == 'links') {
            d.disabled = true;
          }
          return d;
        }),
        idField: 'navigationId',
        parentIdField: 'parentId'
      });
    });
  }
};

watch(
  () => currentRoute.value.params.id,
  (id) => {
    articleId.value = Number(id);
    reload()
  },
  {immediate: true}
);
</script>
<script lang="ts">
import * as MenuIcons from '@/layout/menu-icons';

export default {
  name: 'CmsDocs',
  components: MenuIcons
};
</script>
