<template>
  <div id="vditor" ref="vditorForm"/>
</template>
<script lang="ts" setup>
import Vditor from 'vditor';
import 'vditor/dist/index.css';
import useUserStore from '@/stores/modules/user';
import configs from '@/config'

const props = withDefaults(
    defineProps<{
      content?: string
    }>(),
    {
      content: '',
    }
)

const userStore = useUserStore()
const vditor = ref<Vditor | null>(null);
onMounted(() => {
  console.log(props.content)
  vditor.value = new Vditor('vditor', {
    value:props.content,
    upload: {
      accept: 'image/*,.mp3, .wav, .rar',
      headers:{Token:userStore.token},
      url: `${configs.baseUrl}${configs.urlPrefix}/upload/image`,
      multiple:false,
      fieldName:'file',
      filename (name) {
        return name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').
        replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').
        replace('/\\s/g', '')
      },
    },
    // after: () => {
    //   vditor.value.setValue()
    // },

  });
});
defineExpose({
  vditor
})
</script>
<style>
#vditor {
  width: 100% !important;
}
</style>