<template>
  <div>
    <!-- 编辑器 -->
    <byte-md-editor
      v-model:value="content"
      :locale="zh_Hans"
      :plugins="plugins"
      uploadImages
      height="500px"
      :editorConfig="{ lineNumbers: true }"
    />
    <a-button
      type="primary"
      class="ele-btn-icon"
      style="margin-top: 10px"
      @click="saveContent"
    >
      <span>保存</span>
    </a-button>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { message } from 'ant-design-vue';
  import { App } from '@/api/dashboard/appstore/model';
  import { updateApp } from '@/api/dashboard/appstore';
  // 中文语言文件
  import zh_Hans from 'bytemd/locales/zh_Hans.json';
  // 链接、删除线、复选框、表格等的插件
  import gfm from '@bytemd/plugin-gfm';
  // 插件的中文语言文件
  import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
  // 预览界面的样式，这里用的 github 的 markdown 主题
  import 'github-markdown-css/github-markdown-light.css';
  import highlight from '@bytemd/plugin-highlight';

  const props = defineProps<{
    // 弹窗是否打开
    visible: boolean;
    // 修改回显的数据
    data?: App | null;
    showView?: boolean;
  }>();

  // 编辑器内容，双向绑定
  const content = ref<any>('');

  // 插件
  const plugins = ref([
    gfm({
      locale: zh_HansGfm
    }),
    highlight()
  ]);

  // 保存应用详情
  const saveContent = () => {
    const appForm = {
      appId: props.data?.appId,
      content: content.value
    };
    updateApp(appForm)
      .then((msg) => {
        message.success('保存成功');
      })
      .catch((e) => {
        message.error(e.message);
      });
  };

  // 加载内容
  const setContent = () => {
    content.value = props.data?.content;
  };

  setContent();
</script>

<script lang="ts">
  import * as MenuIcons from '@/layout/menu-icons';

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