<template>
  <div>
    <VueUeditorWrap
      class="ueditor"
      @beforeInit="addCustomButtom"
      :id="setSessionid()"
      @ready="readyCustom"
      v-model="content"
      :config="config"
    ></VueUeditorWrap>
    <el-dialog v-if="uploadDiolagVisible" :visible.sync="uploadDiolagVisible"  append-to-body title="图片上传">
      <el-form>
        <el-form-item label="上传图片">
          <uploadFile :url.sync="imgUrl" :imgWidth.sync="imgWidth" type="image" width="auto" height="auto" />
        </el-form-item>
        <el-form-item>
        <el-button type="primary"  @click="saveImg()">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
import uploadFile from '@/components/uploadFile'
export default {
  components: {
    VueUeditorWrap,
    uploadFile
  },
  props: {
    btnShow: {
      type: Boolean,
      default: false
    },
    comeContent: {
      type: String,
      default: ''
    },
    zIndex: {
      type: Number,
      default: 999
    },
    isDisabled: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      content: '',
      editor: null,
      config: {
        toolbars: [
          [
            'source', // 源代码
            'undo', // 撤销
            'redo', // 重做
            'bold', // 加粗
            'indent', // 首行缩进
            // 'snapscreen', //截 图
            'italic', // 斜体
            'underline', // 下划线
            'strikethrough', // 删除线
            'subscript', // 下标
            'fontborder', // 字符边框
            'superscript', // 上标
            'formatmatch', // 格式刷
            'blockquote', // 引用
            // 'pasteplain', // 纯文本粘贴模式
            'selectall', // 全选
            // 'preview', // 预览
            'horizontal', // 分隔线
            'removeformat', // 清除格式
            // 'time', // 时间
            // 'date', // 日期
            'unlink', // 取消链接
            /* 'insertrow', // 前插入行
            'insertcol', // 前插入列
            'mergeright', // 右合并单元格
            'mergedown', // 下合并单元格
            'deleterow', // 删除行
            'deletecol', // 删除列
            'splittorows', // 拆分成行
            'splittocols', // 拆分成列
            'splittocells', // 完全拆分单元格
            'deletecaption', // 删除表格标题
            'inserttitle', // 插入标题
            'mergecells', // 合并多个单元格
            'deletetable', // 删除表格
            'cleardoc', // 清空文档
            'insertparagraphbeforetable', //" 表格前插入行"
            'insertcode', // 代码语言 */
            'fontfamily', // 字体
            'fontsize', // 字号
            'paragraph', // 段落格式
            // 'edittable', // 表格属性
            // 'edittd', // 单元格属性
            'link', // 超链接
            // 'emotion', // 表情
            'spechars', // 特殊字符
            // 'searchreplace', // 查询替换
            'justifyleft', // 居左对齐
            'justifyright', // 居右对齐
            'justifycenter', // 居中对齐
            'justifyjustify', // 两端对齐
            'forecolor', // 字体颜色
            'backcolor', // 背景色
            'lineheight' // 行间距
            /* 'insertorderedlist', // 有序列表
            'insertunorderedlist', // 无序列表
            'directionalityltr', // 从左向右输入
            'directionalityrtl', // 从右向左输入
            'rowspacingtop', // 段前距
            'rowspacingbottom', // 段后距
            'pagebreak', // 分页
            'imagenone', // 默认
            'imageleft', // 左浮动
            'imageright', // 右浮动
            'imagecenter', // 居中
            'wordimage', // 图片转存
            'edittip ', // 编辑提示
            'customstyle', // 自定义标题
            'touppercase', // 字母大写
            'tolowercase', // 字母小写
            'inserttable' // 插入表格 */
          ]
        ],
        zIndex: this.zIndex,
        autoHeightEnabled: false, // 编译器不自动被内容撑高
        autoFloatEnabled: false,
        initialFrameHeight: 300, // 初始容器高度
        initialFrameWith: '100%',
        postParams: this.postParams,
        // serverUrl: process.env.baseUrl + '/product/uploadFiles', // 上传文件地址
        UEDITOR_HOME_URL: 'https://admin.meta-autotv.com/ueditor/' // UEditor资源文件的存放路径
      },
      imgUrl: '',
      uploadDiolagVisible: false,
      imgWidth: 0
    }
  },
  watch: {
    content(val) {
      this.$emit('editorChange', val)
    },
    comeContent: {
      handler(newVal, oldVal) {
        this.content = newVal
       },
      immediate: true,
      deep: true
    }
  },
  mounted() {

  },
  methods: {
    readyCustom(editor) {
      this.editor = editor
      console.log(this.isDisabled)
      if (this.isDisabled) this.editor.options.readonly = true
    },
    saveImg() {
        let imageHtml = '<p><img src=\"' + this.imgUrl + '\"/></p>'
        if (this.imgWidth > 800) {
            imageHtml = '<p><img width="100%" src=\"' + this.imgUrl + '\"/></p>'
        }
      this.editor.execCommand('inserthtml', imageHtml)
      this.uploadDiolagVisible = false
    },
    addCustomButtom(editorId) {
            let _this = this
            window.UE.registerUI('test-button', function(editor, uiName) {
              // 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
              editor.registerCommand(uiName, {
                  execCommand: () => {
                      _this.imgUrl = ''
                      _this.uploadDiolagVisible = true
                      _this.editor = editor
                  }
              })
              // 创建一个 button
              var btn = new window.UE.ui.Button({
                  // 按钮的名字
                  name: uiName,
                  // 提示
                  title: '图片上传',
                  // 需要添加的额外样式，可指定 icon 图标，图标路径参考常见问题 2
                  cssRules: 'background-position: -380px 0;',
                  // 点击时执行的命令
                  onclick: function() {
                      // 这里可以不用执行命令，做你自己的操作也可
                      editor.execCommand(uiName)
                  }
              })

              // 当点到编辑内容上时，按钮要做的状态反射
              editor.addListener('selectionchange', function() {
              var state = editor.queryCommandState(uiName)
                  if (state === -1) {
                      btn.setDisabled(true)
                      btn.setChecked(false)
                  } else {
                      btn.setDisabled(false)
                      btn.setChecked(state)
                  }
              })
              // 因为你是添加 button，所以需要返回这个 button
              return btn
          } /* 指定这个 UI 是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */)
    },
    setSessionid(num) {
      var len = num || 32
      var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
      var maxPos = chars.length
      var pwd = ''
      for (var i = 0; i < len; i++) {
        pwd += chars.charAt(Math.floor(Math.random() * maxPos))
      }
      return pwd
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep.ueditor{
  .edui-editor{
    width: 100% !important;
  }
}
</style>
