<template>
  <div style="border: 1px solid #ccc">
    <!-- 工具栏 -->
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
    <!-- 编辑器 -->
    <Editor :style="`height: ${props.heightNumber}px; overflow-y: hidden`" v-model="editorVal" :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" @onChange="handChange" />
  </div>
</template>

<script setup>
import { compressImage } from "@/utils/tools.js";
import "@wangeditor/editor/dist/css/style.css";
import { qcckPost } from "@/api/qcckApi.js";
import { ElMessage } from "element-plus";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import {
  ref,
  onMounted,
  shallowRef,
  onBeforeUnmount,
  defineEmits,
  defineProps,
  watch
} from "vue";
const props = defineProps({
  // 编辑器内容
  modelValue: {
    type: String,
    default: ""
  },
  markitVal: {
    type: String,
    default: ""
  },
  placeholder: {
    type: String,
    default: "请输入内容。。。。"
  },
  heightNumber: {
    type: Number,
    default: 500
  }
});
const editorVal = ref("");
const editorRef = shallowRef();
const mode = "default";
const valueHtml = ref(""); //内容
//工具配置
const toolbarConfig = {
  excludeKeys: ["blockquote", "codeBlock"] //清除不必要的工具，引用和代码块
};
const emits = defineEmits(["update:modelValue", "changeFn"]);
//编辑器配置
const editorConfig = {
  withCredentials: true, //允许跨域
  placeholder: props.placeholder, //提示语
  MENU_CONF: {
    uploadImage: {
      // 自定义上传图片
      async customUpload(file, insertFn) {
        let fileBlob = await compressImage(file);
        let fileData = new File([fileBlob], fileBlob.name, {
          type: fileBlob.type
        });
        if (fileData.size > 2 * 1024 * 1024) {
          ElMessage({
            message: "图片超过2MB",
            type: "success"
          });
        } else {
          await uploadFn(fileData, insertFn);
        }
      }
      // server: "/mosty-api/mosty-base/minio/image/upload",
      // base64LimitSize: 10000 * 1024,
    },
    uploadVideo: {
      // 自定义上传视频
      async customUpload(file, insertFn) {
        await uploadFn(file, insertFn);
      }
    }
  }
};
watch(
  [() => props.markitVal, () => editorRef.value],
  (val) => {
    // if (val) editorRef.value = val;
    if ((val[0] && val[1]) || val[0] == "") {
      editorVal.value = val[0];
    }
  },
  { deep: true, immediate: true }
);

const uploadFn = (file, insertFn) => {
  let param = new FormData();
  param.append("file", file);
  qcckPost(param, "/mosty-base/minio/image/upload").then((res) => {
    insertFn(res);
  });
};
//编辑器创建成功
const handleCreated = (editor) => {
  editorRef.value = editor;
};
//内容发生变化
const handChange = (editor) => {
  // console.log(editor.getHtml(),'editor.getText()');
  // 判断是否是一个空段落，是空就传空文本
  if (editor.isEmpty()) {
    emits("changeFn", editor.getText());
  } else {
    emits("changeFn", editor.getHtml());
  }
};

onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor) editor.destroy();
});
</script>

<style lang="scss" scoped>
</style>