<template>
  <a-descriptions title="协同文档" :bordered="false">
    <template #extra>
      <a @click="openEdit">编辑</a>
    </template>
  </a-descriptions>
  <byte-md-viewer :value="data.requirement" :plugins="plugins" />
  <a-empty
    v-if="data.requirement == ''"
    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-button type="primary" @click="openEdit">编辑</a-button>
  </a-empty>
  <!-- 编辑弹窗 -->
  <AppProfileEdit v-model:visible="showEdit" :data="data" @done="reload" />
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  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>
