<style lang="stylus">
img{
  max-width:100% !important;
}
</style>

<template>
  <div>
    <div v-if="showonly" v-html="valueInner" class="overflow-hidden" style="word-break: break-all;"></div>
    <template v-else>
      <q-editor
        ref="editor_ref"
        :toolbar="toolbar"
        :definitions="definitions"
        v-model="valueInner"
        @paste.native="evt => pasteCapture(evt)"
        @input="$emit('input', valueInner)"
      ></q-editor>
      <kyb-upload style="display: none;" ref="uploader" @upload-end="fileUploaded($event)" />
    </template>
  </div>
</template>
<script>
export default {
  name: 'kyb-html-editor',
  model: {
    prop: 'value',
    event: 'input'
  },
  props: {
    value: { type: String, default: '' },
    desc: String,
    toolbar: {
      type: Array,
      default() {
        return [
          [
            //
            {
              label: this.$q.lang.editor.formatting,
              icon: this.$q.iconSet.editor.formatting,
              list: 'no-icons',
              options: ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'code']
            },
            {
              label: this.$q.lang.editor.fontSize,
              icon: this.$q.iconSet.editor.fontSize,
              fixedLabel: true,
              fixedIcon: true,
              list: 'no-icons',
              options: [
                'size-1',
                'size-2',
                'size-3',
                'size-4',
                'size-5',
                'size-6',
                'size-7'
              ]
            },
            'removeFormat',
            //
            'left',
            'center',
            'right',
            'justify',
            //
            'bold',
            'italic',
            'strike',
            'underline',
            'subscript',
            'superscript',
            //
            'hr',
            'link',
            //
            'undo',
            'redo',
            //
            'fullscreen',
            //
            'upload'
          ]
        ]
      }
    },
    definitions: {
      type: Object,
      default() {
        return {
          upload: {
            icon: 'cloud_upload',
            handler: () => {
              this.uploadIt()
            }
          }
        }
      }
    },
    showonly: Boolean
  },
  data() {
    return {
      valueInner: this.value
    }
  },
  watch: {
    value(newValue) {
      this.valueInner = newValue
    }
  },
  methods: {
    fileUploaded(fileIds) {
      const edit = this.$refs.editor_ref
      fileIds.split(',').forEach(fileId => {
        edit.caret.restore()
        edit.runCmd(
          'insertHTML',
          `&nbsp;<img src="${this.__genImgUrlServiceFile(fileId)}" />&nbsp;`
        )
      })
      edit.focus()
      this.$refs.uploader.reset()
    },
    pasteCapture(evt) {
      let text, onPasteStripFormattingIEPaste
      evt.preventDefault()
      if (evt.originalEvent && evt.originalEvent.clipboardData.getData) {
        text = evt.originalEvent.clipboardData.getData('text/plain')
        this.$refs.editor_ref.runCmd('insertText', text)
      } else if (evt.clipboardData && evt.clipboardData.getData) {
        text = evt.clipboardData.getData('text/plain')
        this.$refs.editor_ref.runCmd('insertText', text)
      } else if (window.clipboardData && window.clipboardData.getData) {
        if (!onPasteStripFormattingIEPaste) {
          onPasteStripFormattingIEPaste = true
          this.$refs.editor_ref.runCmd('ms-pasteTextOnly', text)
        }
        onPasteStripFormattingIEPaste = false
      }
    },
    uploadIt() {
      this.$refs.uploader.pick()
    }
  },
  mounted() {}
}
</script>
