<template>
<div class="quillWrapper">
  <div ref="quillContainer" :id="id" :style="{height: height}"></div>
  <input
    v-if="useCustomImageHandler" 
    @change="emitImageInfo($event)" 
    ref="fileInput" 
    id="file-upload" 
    type="file" 
    style="display:none;" 
    accept="image/png, image/jpeg">
</div>
</template>
<script>
import Quill from 'quill'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
var defaultToolbar = [
  [{ header: [1, 2, 3, 4, false] }],
  [{ size: ['small', false, 'large', 'huge']}, { color: [] }, { background: [] }, { align: [] }],
  ['bold', 'italic', 'underline', 'strike'],
  ['blockquote', 'image'],
  [{ list: 'ordered'},
    { list: 'bullet' },
    { indent: '-1'},
    { indent: '+1' }
  ],
  ['clean']
]

export default {
  name: 'vue-editor',
  props: {
    value: String,
    height: {
      default: '400px',
      type: String
    },
    id: {
      type: String,
      default: 'quill-container'
    },
    placeholder: String,
    disabled: Boolean,
    editorToolbar: Array,
    useCustomImageHandler: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      quill: null,
      editor: null,
      toolbar: this.editorToolbar ? this.editorToolbar : defaultToolbar
    }
  },
  mounted () {
    this.initializeVue2Editor()
    this.handleUpdatedEditor()
  },
  watch: {
    value (val) {
      if (val !== this.editor.innerHTML && !this.quill.hasFocus()) {
        this.editor.innerHTML = val
      }
    },
    disabled (status) {
      this.quill.enable(!status)
    }
  },
  methods: {
    initializeVue2Editor () {
      this.setQuillElement()
      this.setEditorElement()
      this.checkForInitialContent()
    },
    setQuillElement () {
      this.quill = new Quill(this.$refs.quillContainer, {
        modules: {
          toolbar: this.toolbar
        },
        placeholder: this.placeholder ? this.placeholder : '',
        theme: 'snow',
        readOnly: this.disabled ? this.disabled : false
      })
      console.log(this.quill)
      this.checkForCustomImageHandler()
    },
    setEditorElement () {
      this.editor = document.querySelector(`#${this.id} .ql-editor`)
    },
    checkForInitialContent () {

      this.editor.innerHTML = this.value || ''
    },
    checkForCustomImageHandler () {
      this.useCustomImageHandler === true ? this.setupCustomImageHandler() : ''
    },
    setupCustomImageHandler () {
      let toolbar = this.quill.getModule('toolbar')

      toolbar.addHandler('image', this.customImageHandler)
    },
    handleUpdatedEditor () {
      this.quill.on('text-change', () => {
        this.$emit('input', this.editor.innerHTML)
      })
    },
    customImageHandler (image, callback) {
      this.$refs.fileInput.click()
    },
    emitImageInfo ($event) {
      let file = $event.target.files[0]
      let Editor = this.quill
      let range = Editor.getSelection()
      let cursorLocation = range.index

      this._uploadImage(file, Editor, cursorLocation)
    },
    _uploadImage (file, Editor, cursorLocation) {
      let formData = new FormData()

      formData.append('file', file)
      this.$http.post('http://api.medmeeting.com/v1/files', formData, ).then((res) => {
        Editor.insertEmbed(cursorLocation, 'image', res.data.extra.absQiniuImgHash)
      })
    }
  }
}
</script>

<style lang ="less">
  .ql-snow{
    color:#666;
    &.ql-container, &.ql-toolbar{
      border:1px solid #f1f1f1;
      
    }
    &.ql-container{
      background: #fff;
      box-shadow:0px 1px 3px #f1f1f1 inset;
    }
    &.ql-toolbar{
      button:hover, 
      button:focus,
      button.ql-active,
      .ql-picker-label:hover,
      .ql-picker-label.ql-active,
      .ql-picker-item:hover,
      .ql-picker-item.ql-selected{
        color: #3094fa;
      }
      button:hover .ql-stroke,
      button:focus .ql-stroke,
      button.ql-active .ql-stroke,
      .ql-picker-label:hover .ql-stroke,
      .ql-picker-label.ql-active .ql-stroke,
      .ql-picker-item:hover .ql-stroke,
      .ql-picker-item.ql-selected .ql-stroke,
      button:hover .ql-stroke-miter,
      button:focus .ql-stroke-miter,
      button.ql-active .ql-stroke-miter,
      .ql-picker-label:hover .ql-stroke-miter,
      .ql-picker-label.ql-active .ql-stroke-miter,
      .ql-picker-item:hover .ql-stroke-miter,
      .ql-picker-item.ql-selected .ql-stroke-miter{
        stroke: #3094fa;
      }
      button:hover .ql-fill,
      button:focus .ql-fill,
      button.ql-active .ql-fill,
      .ql-picker-label:hover .ql-fill,
      .ql-picker-label.ql-active .ql-fill,
      .ql-picker-item:hover .ql-fill,
      .ql-picker-item.ql-selected .ql-fill,
      button:hover .ql-stroke.ql-fill,
      button:focus .ql-stroke.ql-fill,
      button.ql-active .ql-stroke.ql-fill,
      .ql-picker-label:hover .ql-stroke.ql-fill,
      .ql-picker-label.ql-active .ql-stroke.ql-fill,
      .ql-picker-item:hover .ql-stroke.ql-fill,
      .ql-picker-item.ql-selected .ql-stroke.ql-fill{
        fill:#3094fa;
      }
    }
    .ql-picker{
      line-height: 24px;
      &.ql-header{

        .ql-picker-label{
          background: #f9f9f9;
        }
        .ql-picker-label,
        .ql-picker-item{
          &:before{
            content: '正文';
          }
          &[data-value="1"]::before{
            content: '标题一'
          }
          &[data-value="2"]::before{
            content: '标题二'
          }
          &[data-value="3"]::before{
            content: '标题三'
          }
          &[data-value="4"]::before{
            content: '标题四'
          }
          &[data-value="5"]::before{
            content: '标题五'
          }
          &[data-value="6"]::before{
            content: '标题六'
          }
        }
      }
      &.ql-size{
        .ql-picker-label{
          background: #f9f9f9;
        }
        .ql-picker-label,
        .ql-picker-item{
          &::before{
            content: '正常'
          }
          &[data-value=small]::before{
            content: '小';
          }
          &[data-value=large]::before{
            content: '大';
          }
          &[data-value=huge]::before{
            content: '超大';
          }
        }
      }
    }
  }
</style>

