<template>
  <a-descriptions title="项目介绍" :bordered="false">
    <template #extra>
      <a @click="openEdit">编辑</a>
    </template>
  </a-descriptions>
  <byte-md-viewer :value="data.content" :plugins="plugins" />
  <a-empty
    v-if="data.content == ''"
    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>
  <!-- 编辑弹窗 -->
  <AppAboutEdit 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 AppAboutEdit 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');
  };

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