<template>
  <view>
    <div v-if="!readonly">
      <!-- <QuillEditor class="ql-editor"
            :disabled="true" theme="snow" contentType="html"
            v-model:content="_value" ref="myQuillEditor" :options="editorOption">
                </QuillEditor> -->
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
        ref="editorToolbarRef"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>
    <div v-else v-html="_value"></div>
  </view>
</template>
<script setup>
import "@wangeditor/editor/dist/css/style.css"; // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted, computed, nextTick } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { DomEditor } from '@wangeditor/editor'
// import { quillEditor as newQuillEditor } from "vue-quill-editor";
// import "quill/dist/quill.core.css"; // import styles
// import "quill/dist/quill.snow.css"; // for snow theme
// import "quill/dist/quill.bubble.css"; // for bubble theme
// import { QuillEditor } from '@vueup/vue-quill'
// import '@vueup/vue-quill/dist/vue-quill.snow.css';

const props = defineProps({
  formProps: {
    type: Object,
    default: () => {
      return {};
    },
  },
  modelValue: Object,
  readonly: Boolean,
});

const _value = computed({
  get() {
    return props.modelValue ? props.modelValue : "11223344";
  },
  set(val) {
    emits("update:modelValue", val);
  },
});

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

const mode = ref("default"); // or 'simple'
// 内容 HTML
const valueHtml = ref("<p>hello</p>");

const toolbarConfig = {};
const editorConfig = { placeholder: "请输入内容..." };
toolbarConfig.toolbarKeys  = [
    "headerSelect",
        "blockquote",
        "|",
        "bold",
        "underline",
        "italic",
        {
            "key": "group-more-style",
            "title": "更多",
            "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M204.8 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path><path d=\"M505.6 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path><path d=\"M806.4 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path></svg>",
            "menuKeys": [
                "through",
                "code",
                "sup",
                "sub",
                "clearStyle"
            ]
        },
        "color",
        "bgColor",
        "|",
        "fontSize",
        "fontFamily",
        "lineHeight",
        "|",
        "bulletedList",
        "numberedList",
        "todo",
        {
            "key": "group-justify",
            "title": "对齐",
            "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z\"></path></svg>",
            "menuKeys": [
                "justifyLeft",
                "justifyRight",
                "justifyCenter",
                "justifyJustify"
            ]
        },
        {
            "key": "group-indent",
            "title": "缩进",
            "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z\"></path></svg>",
            "menuKeys": [
                "indent",
                "delIndent"
            ]
        },
        "|",
        // "emotion",
        "insertLink",
        {
            "key": "group-image",
            "title": "图片",
            "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z\"></path></svg>",
            "menuKeys": [
                "insertImage",
                "uploadImage"
            ]
        },
        // {
        //     "key": "group-video",
        //     "title": "视频",
        //     "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M981.184 160.096C837.568 139.456 678.848 128 512 128S186.432 139.456 42.816 160.096C15.296 267.808 0 386.848 0 512s15.264 244.16 42.816 351.904C186.464 884.544 345.152 896 512 896s325.568-11.456 469.184-32.096C1008.704 756.192 1024 637.152 1024 512s-15.264-244.16-42.816-351.904zM384 704V320l320 192-320 192z\"></path></svg>",
        //     "menuKeys": [
        //         "insertVideo",
        //         "uploadVideo"
        //     ]
        // },
        "insertTable",
        "codeBlock",
        "divider",
        "|",
        "undo",
        "redo",
        "|",
        // "fullScreen"
]
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
const editorToolbarRef = ref(null)
onMounted(() => {
    nextTick(() => {
        console.log(113344, editorRef.value.getConfig());
        console.log(113344, editorRef.value.getAllMenuKeys());
    })
});

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

const editorOption = {
  // modules: {
  //   toolbar: [
  //    'bold', 'italic', 'underline'
  //     // ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
  //     // ["blockquote", "code-block"], //引用，代码块

  //     // [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
  //     // [{ list: "ordered" }, { list: "bullet" }], //列表
  //     // [{ script: "sub" }, { script: "super" }], // 上下标
  //     // [{ indent: "-1" }, { indent: "+1" }], // 缩进
  //     // [{ direction: "rtl" }], // 文本方向

  //     // [{ size: ["small", false, "large", "huge"] }], // 字体大小
  //     // [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题

  //     // [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
  //     // [{ font: [] }], //字体
  //     // [{ align: [] }], //对齐方式

  //     // ["clean"], //清除字体样式
  //     // ["image"], //上传图片、上传视频
  //   ],
  // },
  // theme: "snow",
};

function onEditorBlur(event) {
  // 失去焦点事件
  console.log("blur", event);
}

function onEditorFocus(val) {}
function onEditorChange(val) {}
</script>

<style lang="less" scoped>
.ql-editor {
  padding: 0;
}
</style>
