一级标题

<template>
  <div>
    <MdEditor
        :id="editorId"
        ref="editorRef"
        v-model="content"
        :theme="theme"
        :preview-theme="previewTheme"
        :code-theme="codeTheme"
        style="height: calc(100vh - 56px)"
        @on-save="onSave"
        @on-upload-img="onUploadImg"
        @on-get-catalog="onGetCatalog"
    />
    <FormArticle
        ref="addUpdateRef"
        :visible="addUpdateModal.visible"
        @close="addUpdateModal.visible = false"
        @success="addUpdateCallback"
    />
  </div>
</template>

<script setup>
import { useAppStore } from "~/composables/useAppStore.js";
import { Message } from '@arco-design/web-vue';
import {MdEditor} from 'hicode-editor';
import 'hicode-editor/lib/style.css';

definePageMeta({
  middleware: 'admin',
  layout: 'creative',
  index: 1,
})

const appStore = useAppStore();
const route = useRoute();

const content = ref('')
const catalog = ref([])
const editorRef = ref()
const theme = ref('light')
const previewTheme = ref('default')
const codeTheme = ref('gradient')
const editorId = ref('blog-markdown-editor')

const onUploadImg = async (files, callback) => {
  const res = await Promise.all(
      files.map((file) => {
        return new Promise((resolve, reject) => {
          const form = new FormData();
          form.append('file', file);
          $fetch(`/api/article/content/uploadImg`, {
            baseURL: import.meta.env.VITE_API_BASE_URL,
            method: 'POST',
            headers: {
              qc: appStore.getToken(),
              contentType: 'multipart/form-data',
            },
            body: form,
            onResponse({response}) {
              const resp = response._data
              if (resp.code === 200) {
                resolve(resp)
              } else {
                reject(resp);
              }
            },
            onRequestError() {
              reject();
            },
            onResponseError() {
              reject();
            }
          })
        });
      })
  );
  callback(res.map((item) => item.data));
}

const onGetCatalog = (list) => {
  catalog.value = list;
}

const onSave = (item) => {
  // addData()
  addUpdateData()
}

const addData = (articleId) => {
  $fetch(`/api/article/content/update`, {
    baseURL: import.meta.env.VITE_API_BASE_URL,
    method: 'POST',
    headers: {
      qc: appStore.getToken()
    },
    body: {
      articleId: articleId,
      markdown: content.value,
      catalog: catalog.value,
    },
    onResponse({response}) {
      const resp = response._data
      if (resp.code === 200) {
        Message.success('处理成功')
        navigateTo(`/console/article`)
      } else {
        Message.error(resp.message)
      }
    },
    onRequestError() {
      Message.error('请求失败')
    },
    onResponseError() {
      Message.error('请求出现问题')
    }
  })
}

const addUpdateRef = ref()
const addUpdateModal = ref({
  visible: false,
})

const addUpdateData = () => {
  addUpdateModal.value.visible = true
  nextTick(() => {
    addUpdateRef.value.reset()
    if (route.query.id) {
      console.log(route.query.id)
      addUpdateRef.value.setData(route.query.id)
    }
  })
}

const addUpdateCallback = (articleId) => {
  addUpdateModal.value.visible = false;
  addData(articleId)
}

onMounted(() => {
  // 加载文档版本介绍信息
  console.log(route.query.id)
  if (route.query.id) {
    $fetch(`/api/article/content/get/${route.query.id}`, {
      baseURL: import.meta.env.VITE_API_BASE_URL,
      method: 'POST',
      headers: {
        qc: appStore.getToken()
      },
      onResponse({response}) {
        const resp = response._data
        if (resp.code === 200) {
          content.value = resp.data?.markdown
        } else {
          Message.error(resp.message)
        }
      },
      onRequestError() {
        Message.error('请求失败')
      },
      onResponseError() {
        Message.error('请求出现问题')
      }
    })
  }
})
</script>

<style scoped>

</style>