<template>
  <!-- <div class="ql-container ql-snow">
    <div class="ql-editor"></div>
  </div> -->
  <div class="ql-editor">
    <QuillEditor
      ref="myQuillEditor"
      theme="snow"
      v-model:content="content"
      :options="data.editorOption"
      contentType="html"
      @update:content="setValue()"
    />
    <!-- 使用自定义图片上传 -->
    <input
      type="file"
      hidden
      accept=".jpg,.png"
      ref="fileBtn"
      @change="handleUpload"
    />
  </div>
</template>

<script setup>
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import { reactive, onMounted, ref, toRaw, watch } from "vue";
// import { backsite } from '@/api'

const props = defineProps(["value"]);
const emit = defineEmits(["updateValue"]);
const content = ref("");
const myQuillEditor = ref();
// watch(() => props.value, (val) => {
//   console.log(toRaw(myQuillEditor.value))
//   toRaw(myQuillEditor.value).setHTML(val)
// }, { deep: true })
const fileBtn = ref();
const data = reactive({
  content: "",
  editorOption: {
    modules: {
      toolbar: [
        ["bold", "italic", "underline", "strike"],
        [{ size: ["small", false, "large", "huge"] }],
        [{ font: [] }],
        [{ align: [] }],
        [{ list: "ordered" }, { list: "bullet" }],
        [{ indent: "-1" }, { indent: "+1" }],
        [{ header: 1 }, { header: 2 }],
        // ["image"],
        [{ direction: "rtl" }],
        [{ color: [] }, { background: [] }],
      ],
    },
    placeholder: "请输入内容...",
  },
});
const imgHandler = (state) => {
  if (state) {
    fileBtn.value.click();
  }
};
const setValue = () => {
  const text = toRaw(myQuillEditor.value).getHTML();
  emit("updateValue", text);
};
const handleUpload = (e) => {
  const files = Array.prototype.slice.call(e.target.files);
  // console.log(files, "files")
  if (!files) {
    return;
  }
  const formdata = new FormData();
  formdata.append("file", files[0]);
  backsite.uploadFile(formdata).then((res) => {
    if (res.data.url) {
      const quill = toRaw(myQuillEditor.value).getQuill();
      const length = quill.getSelection().index;
      // 插入图片，res为服务器返回的图片链接地址
      quill.insertEmbed(length, "image", res.data.url);
      // 调整光标到最后
      quill.setSelection(length + 1);
    }
  });
};
// 回显内容
const changeHtml = (val, notQuillSource = false) => {
  if (notQuillSource) {
    // 从非Quill环境导入原始HTML。
    toRaw(myQuillEditor.value).pasteHTML(val, "api");
  } else {
    toRaw(myQuillEditor.value).setHTML(val);
  }
  setValue();
};
// 聚焦
const getFocus = () => {
  if (myQuillEditor.value) {
    toRaw(myQuillEditor.value).focus();
  }
};

onMounted(() => {
  const quill = toRaw(myQuillEditor.value).getQuill();
  if (myQuillEditor.value) {
    quill.getModule("toolbar").addHandler("image", imgHandler);
  }
  toRaw(myQuillEditor.value).setHTML(props.value);
});

defineExpose({
  changeHtml,
  getFocus,
});
</script>
<style scoped lang="scss">
:deep(.ql-editor) {
  min-height: 180px;
}
:deep(.ql-formats) {
  height: 21px;
  line-height: 21px;
}
</style>
