<template>
  <div>
    <QuillEditor ref="myQuillEditor"
      theme="snow"
      class="quill-editor customEditor"
      v-model:content="content"
      :options="data.editorOption"
      contentType="html"
      @update:content="setValue()"
    />
  </div>
</template>

<script setup>
import { QuillEditor,Quill } from '@vueup/vue-quill'
import { reactive, onMounted, ref, toRaw, watch,computed  } from 'vue'
// import { backsite } from '@/api'
const sizes =[false, '42px', '36px', '26px', '24px', '22px', '18px', '16px','15px', '14px', '12px', '10.5px', '9px', '7.5px','6.5px', '5.5px','5px']
let fontSizeStyle = Quill.import("attributors/style/size");
fontSizeStyle.whitelist = sizes;
Quill.register(fontSizeStyle, true);
const fonts = [false,'SimSun','KaiTi','FangSong','SimHei','Microsoft-YaHei','PmingLiu','Impact','Georgia','Tahoma','Arial','Verdana']
var Font = Quill.import("formats/font");
Font.whitelist = fonts; // 将字体加入到白名单
Quill.register(Font, true);
const Embed = Quill.import("blots/embed");
class DividerBlot extends Embed  {
    static create(value) {
      let node = super.create();
      node.innerHTML = value.text
      node.setAttribute('contenteditable', false);
      node.setAttribute('class', 'at-some-one');
      return node;
    }
    static value(node) {
      return {
        text: node.innerHTML.trim()
      };
    }
 }
DividerBlot.blotName = 'atusertag';
DividerBlot.tagName = 'span';
DividerBlot.className = 'user-at-span';
Quill.register(DividerBlot);

const titleConfig = [
                {Choice:'.ql-bold', title:'加粗'},
                {Choice:'.ql-italic', title:'斜体'},
                {Choice:'.ql-underline', title:'下划线'},
                {Choice:'.ql-header', title:'段落格式'},
                {Choice:'.ql-strike', title:'删除线'},
                {Choice:'.ql-blockquote', title:'块引用'},
                {Choice:'.ql-code', title:'插入代码'},
                {Choice:'.ql-code-block', title:'插入代码段'},
                // {Choice:'.ql-font', title:'字体'},
                // {Choice:'.ql-size', title:'字体大小'},
                {Choice:'.ql-list[value="ordered"]', title:'编号列表'},
                {Choice:'.ql-list[value="bullet"]', title:'项目列表'},
                {Choice:'.ql-direction', title:'文本方向'},
                {Choice:'.ql-header[value="1"]', title:'h1'},
                {Choice:'.ql-header[value="2"]', title:'h2'},
                {Choice:'.ql-align', title:'对齐方式'},
                {Choice:'.ql-color', title:'字体颜色'},
                {Choice:'.ql-background', title:'背景颜色'},
                {Choice:'.ql-image', title:'图像'},
                {Choice:'.ql-video', title:'视频'},
                {Choice:'.ql-link', title:'添加链接'},
                {Choice:'.ql-formula', title:'插入公式'},
                {Choice:'.ql-clean', title:'清除字体格式'},
                {Choice:'.ql-script[value="sub"]', title:'下标'},
                {Choice:'.ql-script[value="super"]', title:'上标'},
                {Choice:'.ql-indent[value="-1"]', title:'向左缩进'},
                {Choice:'.ql-indent[value="+1"]', title:'向右缩进'},
                {Choice:'.ql-header .ql-picker-label', title:'标题大小'},
                {Choice:'.ql-header .ql-picker-item[data-value="1"]', title:'标题一'},
                {Choice:'.ql-header .ql-picker-item[data-value="2"]', title:'标题二'},
                {Choice:'.ql-header .ql-picker-item[data-value="3"]', title:'标题三'},
                {Choice:'.ql-header .ql-picker-item[data-value="4"]', title:'标题四'},
                {Choice:'.ql-header .ql-picker-item[data-value="5"]', title:'标题五'},
                {Choice:'.ql-header .ql-picker-item[data-value="6"]', title:'标题六'},
                {Choice:'.ql-header .ql-picker-item:last-child', title:'标准'},
                //{Choice:'.ql-size .ql-picker-item[data-value="small"]', title:'小号'},
                //{Choice:'.ql-size .ql-picker-item[data-value="large"]', title:'大号'},
                //{Choice:'.ql-size .ql-picker-item[data-value="huge"]', title:'超大号'},
                //{Choice:'.ql-size .ql-picker-item:nth-child(2)', title:'标准'},
                {Choice:'.ql-align .ql-picker-item:first-child', title:'居左对齐'},
                {Choice:'.ql-align .ql-picker-item[data-value="center"]', title:'居中对齐'},
                {Choice:'.ql-align .ql-picker-item[data-value="right"]', title:'居右对齐'},
                {Choice:'.ql-align .ql-picker-item[data-value="justify"]', title:'两端对齐'}
            ]

const props = defineProps(['value','myConfig','toolbarOptions'])
const emit = defineEmits(['updateValue','imgClick','initQuill'])
const content = ref('')
const myQuillEditor = ref()
watch(() => props.value, (val) => {
    console.log(toRaw(myQuillEditor.value))
    const text = toRaw(myQuillEditor.value).getHTML()
    if (text !== val) {
        toRaw(myQuillEditor.value).setHTML(val)
    }
   })
const toolbarOptions = computed(() => {
  return props.toolbarOptions;
});


const fileBtn = ref()
const data = reactive({
  content: '',
  editorOption: {
    modules: {
      toolbar: toolbarOptions
    },
    placeholder: '请输入内容...'
  }
})

const imgHandler = (state) => {
  if (state) {
    emit('imgClick', state)
  }
}
const setValue = () => {
  const text = toRaw(myQuillEditor.value).getHTML()
  emit('updateValue', text)
}

onMounted(() => {
  {
    if (document.getElementsByClassName('ql-editor') && document.getElementsByClassName('ql-editor').length > 0) {
        document.getElementsByClassName('ql-editor')[0].dataset.placeholder = '';
        for (let item of titleConfig) {
            let tip = document.querySelector('.quill-editor ' + item.Choice);
            if (!tip) continue;
            tip.setAttribute('title', item.title);
        }
    }
  }
  const quill = toRaw(myQuillEditor.value).getQuill()
  if (myQuillEditor.value) {
    quill.getModule('toolbar').addHandler('image', imgHandler)
  }
  toRaw(myQuillEditor.value).setHTML(props.value)
  let obj = {};
  obj.quill = quill;
  emit('initQuill',obj);
})
</script>

