<template>
  <div class="ueditor">
    <vue-ueditor-wrap
      v-if="ueditorShow"
      ref="ueditor"
      v-model="editorContent"
      :destroy="false"
      :config="ueditorConfig"
      @ready="ready"
      :key="timestamp"
    ></vue-ueditor-wrap>
  </div>
</template>

<script>

import VueUeditorWrap from 'vue-ueditor-wrap';
const BASE_URL = '/server-api/v1'

export default {
  name: 'Ueditor',
  props: {
    contentRichText: {
      type: String,
      default: '',
    },
    primaryKey: {
      type: String,
      default: ''
    },
    autoHeight: {
      type: Boolean,
      default: false
    },
    height: {
      type: Number,
      default: 300
    },
  },
  components: {
    VueUeditorWrap
  },
  mounted() {
    this.editorContent = this.contentRichText;
    this.init()
  },
  watch: {
    contentRichText: {
      handler() {
        this.editorContent = this.contentRichText
      },
      deep: true,
    },
    editorContent() {
      this.$emit('update:contentRichText', this.editorContent)
      this.$emit('change', this.editorContent)
    },
    autoHeight(){
      this.init()
    },
    height(){
      this.init()
    }
  },
  data() {
    return {
      ueditorShow: false,
      timestamp: new Date().getTime(),
      editorContent: '',
      ueditorConfig: null,
      config: {
        UEDITOR_HOME_URL: process.env.NODE_ENV === 'development' ? 'http://sit-rent-business.block-os.com/static/UEditor/' : location.protocol + '//' + location.host + '/static/UEditor/',
        // 编辑器不自动被内容撑高
        autoFloatEnabled: false,

        // 编辑器不自动被内容撑高
        autoHeightEnabled: this.autoHeight,
        // 初始容器高度
        initialFrameHeight: this.height,
        // 初始容器宽度
        initialFrameWidth: '100%',
        // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
        // serverUrl: location.protocol + '//' + location.host + '/merchant-management/v1/ueditor/exec',
        serverUrl: location.protocol + '//' + location.host + BASE_URL + '/ueditor/exec',
        // serverUrl: BASE_URL + 'ueditor/exec',
        toolbars: [
          [
            'source', //源代码
            '|',
            'undo', //撤销
            'redo', //重做
            '|',
            'pasteplain', //纯文本粘贴模式
            'removeformat', //清除格式
            'searchreplace', //查询替换
            '|',
            // 'map', //Baidu地图
            'simpleupload', //单图上传
            // 'insertimage', //单图上传
            // 'insertvideo', //视频
            'link', //超链接
            'emotion', //表情
            'spechars', //特殊字符
            'insertorderedlist', //有序列表
            'insertunorderedlist', //无序列表
            '|',
            'autotypeset', //自动排版
            'touppercase', //字母大写
            'tolowercase', //字母小写
            'backcolor', //背景色
          ],
          [
            'bold', //加粗
            'indent', //首行缩进
            'italic', //斜体
            'underline', //下划线
            'strikethrough', //删除线
            '|',
            'subscript', //下标
            'superscript', //上标
            '|',
            'blockquote', //引用
            'horizontal', //分隔线
            '|',
            'fontfamily', //字体
            'fontsize', //字号
            'lineheight', //行间距
            'paragraph', //段落格式
            'forecolor', //字体颜色
            '|',
            'justifyleft', //居左对齐
            'justifyright', //居右对齐
            'justifycenter', //居中对齐
            'justifyjustify', //两端对齐
            '|',
            'imagenone', //默认
            'imageleft', //左浮动
            'imageright', //右浮动
            'imagecenter', //居中
            'inserttable', //插入表格
          ]
        ]
      }
    }
  },

  methods: {
    init(){
      this.ueditorShow = false;
      this.ueditorConfig = null;
      this.ueditorConfig = this.$options.data().config;
      this.ueditorConfig.autoHeightEnabled = this.autoHeight;
      this.ueditorConfig.initialFrameHeight = this.height;
      setTimeout(()=>{
        this.ueditorShow = true;
      },200)
    },
    ready(editorInstance) {
      this.editorInstance = editorInstance
    },
    characterText(text) {
      this.editorInstance.focus();
      this.editorInstance.execCommand('inserthtml', text)
    }
  }
}
</script>

<style scoped>
  .ql-container.ql-snow {
    min-height: 500px;
  }s
  .ueditor>>>.edui-combox-body{
    height: 25px !important;
  }
  .ueditor>>>.edui-button-body{
    height: 20px !important;
  }

</style>
