<template>
  <a-modal
    width="80%"
    :visible="visible"
    :confirm-loading="loading"
    :title="'富文本转MarkDown'"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    :footer="null"
  >
    <!-- 编辑器 -->
    <byte-md-editor
      v-model:value="content"
      :locale="zh_Hans"
      :plugins="plugins"
      height="600px"
      :editorConfig="{ lineNumbers: true }"
    />
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import ByteMdEditor from '@/components/ByteMdEditor/index.vue';
  // 中文语言文件
  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 { copyText } from '@/utils/common';
  import { htmlToText } from "ele-admin-pro";

  const props = defineProps<{
    // 弹窗是否打开
    visible: boolean;
  }>();

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

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

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

  /* 更新visible */
  const updateVisible = (value: boolean) => {
    emit('update:visible', value);
  };

  /* 保存编辑 */
  // const save = () => {
  //   copyText(content.value);
  //   console.log('复制成功');
  // };

  watch(
    () => props.visible,
    (visible) => {
      if (visible) {
      } else {
      }
    }
  );
</script>
