<template>
  <div class="relative min-h-[300px]">
    <a-space style="margin-bottom: 20px">
      <a-button type="primary"  @click="openEdit">编辑</a-button>
    </a-space>
    <MdPreview v-if="data.requirement" class="max-w-5xl" :modelValue="data.requirement" />
    <a-empty
      v-else
      image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
      :image-style="{
      height: '60px'
    }"
    >
      <template #description>
        <span class="ele-text-placeholder">类似腾讯文档的功能，支持多人编辑</span>
      </template>
    </a-empty>
  </div>
  <!-- 编辑弹窗 -->
  <AppProfileEdit v-model:visible="showEdit" :data="data" @done="reload" />
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { MdPreview } from 'md-editor-v3';
  import 'md-editor-v3/lib/preview.css';
  import gfm from '@bytemd/plugin-gfm';
  import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
  import highlight from '@bytemd/plugin-highlight';
  import 'bytemd/dist/index.min.css';
  import 'github-markdown-css/github-markdown-light.css';
  import 'github-markdown-css/github-markdown-light.css';
  import AppProfileEdit from './app-profile-edit.vue';

  defineProps<{
    appId: number;
    data: any;
  }>();

  const emit = defineEmits<{
    (e: 'done'): void;
  }>();

  // 是否显示编辑弹窗
  const showEdit = ref(false);

  /* 打开编辑弹窗 */
  const openEdit = () => {
    showEdit.value = true;
  };

  const reload = () => {
    emit('done');
  };

  // 插件
  const plugins = ref([
    gfm({
      locale: zh_HansGfm
    }),
    highlight()
  ]);
</script>
<style lang="less">
  .app-profile * {
    max-width: 1000px;
  }
</style>
