<template>
  <div style="position: relative; width: 100%">
    <vue-ueditor-wrap v-model="msg" :config="editorConfig" :editor-id="id" />
  </div>
</template>
<script>
  import VueUeditorWrap from 'vue-ueditor-wrap'
  export default {
    /* eslint-disable */
    name: 'UE',
    components: { 'vue-ueditor-wrap': VueUeditorWrap },
    data() {
      return {
        msg: '',
        id: 'ueditor' + Math.random(),
        editorConfig: {
          UEDITOR_HOME_URL: '/static/plugins/ueditor/',
          serverUrl: '/api/sys/ueditor/config',
        },
      }
    },
    props: {
      // 已实现v-model语法糖，调用时数据绑定请直接用v-model
      value: {
        type: String,
        default: '',
      },
      config: {
        type: Object,
        default: () => ({
          initialFrameWidth: '100%',
          initialFrameHeight: 300,
          zIndex: 10001,
        }),
      },
    },
    model: {
      event: 'change',
      prop: 'value',
    },
    watch: {
      config: {
        immediate: true,
        handler: function (config) {
          const defaults = {
            UEDITOR_HOME_URL: '/static/plugins/ueditor/',
            serverUrl: '/api/sys/ueditor/config',
          }
          this.editorConfig = { ...defaults, ...config }
        },
      },
      msg: function (value) {
        this.$emit('change', value)
      },
      value: {
        immediate: true,
        handler: function (newValue, oldValue) {
          if (newValue == oldValue) return
          this.msg = newValue
        },
      },
    },
    methods: {},
    mounted() {},
    destroyed() {},
  }
</script>
<style lang="less" scoped>
  ::v-deep .edui-box {
    line-height: 1;
  }

  ::v-deep .edui-toolbar {
    line-height: 1;
  }
</style>
