<style lang="scss">
.eagle-editor {
  .ql-toolbar {
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
    border-color: #dcdfe6 !important;
  }
  .custom-height {
    .ql-container {
      border-bottom-left-radius: 4px !important;
      border-bottom-right-radius: 4px !important;
      border-color: #dcdfe6 !important;
      white-space: pre !important;
    }
  }
  .height-100 {
    .ql-container {
      height: 100px !important;
    }
  }
  .height-200 {
    .ql-container {
      height: 200px !important;
    }
  }
  .height-400 {
    .ql-container {
      height: 400px !important;
    }
  }
}
</style>

<template>
  <div class="eagle-editor">
    <quill-editor :class="`custom-height height-${height}`" ref="myQuillEditor" v-model="content" :options="editorOption" @ready="onEditorReady"></quill-editor>
  </div>
</template>

<script>
export default {
  name: 'Editor',
  props: {
    value: String,
    url: String,
    height: {
      type: [String, Number],
      default: 400
    },
    headers: {
      type: Object,
      default() {
        return {};
      }
    },
    QuillWatch: [Object, Function]
  },
  watch: {
    value(val) {
      this.content = val;
    },
    content(val) {
      this.$emit('input', val);
    }
  },
  mounted() {
    this.content = this.value;
    this.$emit('input', this.content);
  },
  data() {
    return {
      content: undefined,
      quill: undefined,
      editorOption: {
        placeholder: '请输入内容',
        modules: {
          ImageExtend: {
            loading: true,
            name: 'img',
            headers: (xhr) => {
              Object.keys(this.headers).forEach(key => {
                xhr.setRequestHeader(key, this.headers[key]);
              })
            },
            action: this.url,
            response: (response) => {
              const { result = [] } = response;
              const url = result[0];
              return url;
            }
          },
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'],
              ['blockquote', 'code-block'],
              [{'header': 1}, {'header': 2}],
              [{'list': 'ordered'}, {'list': 'bullet'}],
              [{'script': 'sub'}, {'script': 'super'}],
              [{'indent': '-1'}, {'indent': '+1'}],
              [{'direction': 'rtl'}],
              [{'size': ['12px', '14px', '16px', '18px', '20px', '24px', '32px']}],
              [{'header': [1, 2, 3, 4, 5, 6, false]}],
              [{'color': []}, {'background': []}],
              [{'font': ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif']}],
              [{'align': []}],
              ['clean'],
              ['link', 'image', 'video']
            ],
            handlers: {
              'image': function () {
                if (this.QuillWatch) {
                  this.QuillWatch.emit(this.quill.id)
                }
              }
            }
          }
        }
      },
    }
  },
  methods: {
    onEditorReady(quill) {
      this.quill = quill;
    },
  },
}
</script>
