<template>
  <div class="page">
    <a-card :bordered="false">
      <!-- 编辑器 -->
      <byte-md-viewer :value="content" :plugins="plugins" />
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import 'bytemd/dist/index.min.css';
  import { computed, ref, watch } from 'vue';
  import 'github-markdown-css/github-markdown-light.css';
  import type { Docs } from '@/api/cms/docs/model';
  import ByteMdViewer from '@/components/ByteMdViewer/index.vue';
  // import { openUrl } from '@/utils/common';
  // 链接、删除线、复选框、表格等的插件
  import gfm from '@bytemd/plugin-gfm';
  import highlight from '@bytemd/plugin-highlight';
  // 内容样式，这里用的 github 的 markdown 主题
  import 'github-markdown-css/github-markdown-light.css';
  // 引入高亮css
  import 'highlight.js/styles/vs.css';
  // import { getDocsContent } from '@/api/cms/docs-content';
  import { useUserStore } from '@/store/modules/user';

  const props = defineProps<{
    // 文档 id
    current?: Docs | null;
  }>();

  // 插件
  const plugins = ref([gfm(), highlight()]);

  // 提交状态
  const loading = ref(false);
  // 编辑器内容，双向绑定
  const content = ref('');
  // const docsContentId = ref(0);
  // 是否是修改
  // const isUpdate = ref(false);
  // 当前用户信息
  const userStore = useUserStore();
  const loginUser = computed(() => userStore.info ?? {});
  /* 搜索 */
  // const reload = () => {
  //   getDocsContent(Number(props.current?.docsId))
  //     .then((res) => {
  //       content.value = String(res.content);
  //       docsContentId.value = Number(res.docsContentId);
  //       isUpdate.value = true;
  //     })
  //     .catch(() => {
  //       loading.value = false;
  //       content.value = '';
  //       isUpdate.value = false;
  //     });
  // };

  // 监听文档 id 变化
  watch(
    () => props.current?.docsId,
    () => {
      content.value = String(props.current?.content);
    }
  );
</script>
