<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'
  import storage from 'store'
  import { ACCESS_TOKEN } from '@/store/mutation-types'
  export default {
    /* eslint-disable */
    name: 'UE',
    components: { 'vue-ueditor-wrap': VueUeditorWrap },
    data() {
      return {
        msg: '',
        id: 'ueditor' + Math.random(),
        editorConfig: {
          lang: 'zh-cn',
          UEDITOR_HOME_URL: 'static/plugins/ueditor/',
          // serverUrl: '//ueditor.szcloudplus.com/cos'
          serverUrl: process.env.VUE_APP_API_BASE_URL +  '/sys/ueditor/config',
          // headers: {
          //   Authorization: storage.get(ACCESS_TOKEN)
          // }
        },
      }
    },
    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 = {
      //       lang: 'zh-cn',
      //       UEDITOR_HOME_URL: '/static/plugins/ueditor/',
      //       serverUrl: '/dawa/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>