<template lang="html">
  <div ref="editor"></div>
</template>

<script>
import '../../../../static/ueditor/ueditor.config';
import '../../../../static/ueditor/ueditor.all.min';
import '../../../../static/ueditor/lang/zh-cn/zh-cn';
import defaultConfig from './config';

export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    config: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      id: new Date().getTime() + '_ueditorId',
      conf: defaultConfig
    }
  },
  mounted() {
    this.$nextTick(function f1() {
      // 保证 this.$el 已经插入文档
      this.$refs.editor.id = this.id;
      this.editor = UE.getEditor(this.id, this.conf);

      this.editor.ready(function f2() {
        this.editor.setContent(this.value);

        this.editor.addListener("contentChange", function() {
          const wordCount = this.editor.getContentLength(true);
          const content = this.editor.getContent();
          const plainTxt = this.editor.getPlainTxt();
          this.$emit('input', { wordCount: wordCount, content: content, plainTxt: plainTxt });
        }.bind(this));

        this.$emit('ready', this.editor);
      }.bind(this));
    });
  },
  watch: {
    value(val, oldVal) {
      this.editor = UE.getEditor(this.id, this.conf);
      if (val !== null) {
        this.editor.setContent(val);
      }
    },
    config(val) {
      for (var key in this.config) {
        this.conf[key] = this.config[key]
      }
    }
  },
  methods: {
  }
}
</script>

<style lang="css" scoped>
</style>
