import Quill from "quill"
import 'quill/dist/quill.snow.css'

// 富文本组件
export default {
  name: 'QuillRichInput',
  props: ['readonly', 'placeholder', 'scroll', 'modelValue', 'mode'],
  data() {
    return {
      ReadOnlyMode: false,
      Placeholder: '在这里输入描述信息...',
      ScrollingContainer: null,
      editor: null,
      content: ''
    }
  },
  watch: {
    readonly(val) {
      this.ReadOnlyMode = val
    },
    placeholder(val) {
      if (val) this.Placeholder = val
    },
    scroll(val) {
      this.ScrollingContainer = val
    },
    // modelValue(val) {
    //   // 这样不行，会导致编辑时富文本内容是反过来的...
    //   //console.log('[modelValue] val is: ', val)
    //   this.editor && this.editor.setContents(JSON.parse(val), "user")
    // }
    modelValue(val) {
      // 如果 mode 是 detail 就不允许编辑
      if (this.mode === 'detail') this.editor && this.editor.enable(false)
      // 只在 mode 不为 create 的时候，才加载数据
      if (val && this.mode !== 'create') {
        // this.mode 会比 modelValue 先获得值
        this.content = JSON.parse(val)
        this.editor && this.editor.setContents(this.content, "user")
      } else if (val === null || val === undefined) {
        // 当 modelValue 传入空时，清空内容
        this.editor && this.editor.setContents('\n', "user")
      }
    },
    content(val) {
      this.$emit('update:modelValue', { subject: 'richInput', payload: { data: val } })
    }
  },
  mounted() {
    /** https://blog.csdn.net/qq_36947168/article/details/119486710 */
    /** https://quilljs.com/docs/modules/toolbar/ */
    const toolbarOptions = [
      [{ 'font': [] }],
      [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
      ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
      [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
      ['blockquote', 'code-block'],
      [{ 'header': 1 }, { 'header': 2 }],               // custom button values
      [{ 'list': 'ordered' }, { 'list': 'bullet' }],
      // [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
      [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
      [{ 'direction': 'rtl' }],                         // text direction
      // [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
      [{ 'align': [] }],
      // ['clean']                                         // remove formatting button
    ];

    this.editor = new Quill(this.$refs['quill-editor'], {
      modules: {
        toolbar: toolbarOptions
      },
      theme: 'snow',
      readOnly: this.ReadOnlyMode,
      placeholder: this.Placeholder,
      scrollingContainer: this.ScrollingContainer
    })

    this.editor.on('text-change', (delta, oldDelta, source) => {
      this.content = this.editor.getContents()
      // this.$emit('update:modelValue', { subject: 'richInput', payload: { data: this.editor.getContents() } })
    })
  },
  methods: {
  },
  render: function (h) {
    return h('div', { ref: 'quill-editor', domProps: { id: 'quill-editor' } })
  }
}