<script setup>
import { uploadImagesInBatches } from "@/utils/uploadImg.ts";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

import "@wangeditor/editor/dist/css/style.css";
import { onBeforeUnmount, onMounted, shallowRef } from "vue";

const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
  },
});

// 引入 css

const emit = defineEmits(["update:modelValue"]);

const mode = "default";
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();
const localForm = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});

watch(
  () => localForm.value,
  (newVal) => {
    emit("update:modelValue", newVal);
  },
  { immediate: true, deep: true }
);
// 内容 HTML
const valueHtml = ref("");

// 模拟 ajax 异步获取内容
onMounted(() => {
  // setTimeout(() => {
  //   valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
  // }, 1500)
});

const toolbarConfig = {};
const editorConfig = {
  placeholder: "请输入内容...",
  MENU_CONF: {},
};

editorConfig.MENU_CONF.uploadImage = {
  // 自定义上传
  async customUpload(file, insertFn) {
    const files = [file];
    try {
      const res = await uploadImagesInBatches(files);
      for (let i = 0; i < res.length; i++) {
        insertFn(res[i].url);
      }
    } catch (error) {
      console.log("error", error);
    }
  },
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

function handleCreated(editor) {
  editorRef.value = editor; // 记录 editor 实例，重要！
}

function handleChange(editor) {
  const dom = editor.getHtml();
  emit("update:modelValue", dom);
}
</script>

<template>
  <div>
    <client-only>
      <Toolbar
        style="border-bottom: 1px solid rgb(240 240 240)"
        :editor="editorRef"
        :default-config="toolbarConfig"
        :mode="mode"
      />
      <Editor
        v-model="localForm"
        class="editor"
        style="max-height: 500px; min-height: 100px; overflow-y: auto"
        :default-config="editorConfig"
        :mode="mode"
        @on-created="handleCreated"
        @on-change="handleChange"
      />
    </client-only>
  </div>
</template>

<style scoped lang="scss">
.editor .w-e-text {
  line-height: 1.2; /* 行高为字体大小的 2 倍 */
}
</style>
