<template>
  <div class="relative">
    <a-space style="margin-bottom: 20px">
      <a-button type="primary"  @click="openEdit">编辑</a-button>
    </a-space>
    <MdPreview v-if="data.content" class="max-w-5xl" :modelValue="data.content" />
    <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>

  <!-- 编辑弹窗 -->
  <ProjectAboutEdit 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 ProjectAboutEdit from './app-about-edit.vue';

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

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

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

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

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

</script>
