<template>
  <div class="editor-wrapper">
    <div :id="editorId"></div>

  </div>
</template>

<script>
  import Editor from 'wangeditor'
  import 'wangeditor/release/wangEditor.min.css'
  import { uploadImgOnce } from '@/api/data'
  import { oneOf } from '@/utils/util'

  export default {
    name: 'Editor',

    props: {
      value: {
        type: String,
        default: ''
      },
      /**
       * 绑定的值的类型, enum: ['html', 'text']
       */
      valueType: {
        type: String,
        default: 'html',
        validator: (val) => {
          return oneOf(val, ['html', 'text'])
        }
      },
      /**
       * @description 设置change事件触发时间间隔
       */
      changeInterval: {
        type: Number,
        default: 200
      },
      /**
       * @description 是否开启本地存储
       */
      cache: {
        type: Boolean,
        default: true
      }
    },
    computed: {
      editorId () {
        return `editor${this._uid}`
      }
    },
    methods: {
      setHtml (val) {
        this.editor.txt.html(val)
      },
	  getTxt () {
		return this.editor.txt.text()
	  },
      getEdior () {
        return new Editor(`#${this.editorId}`)
      },
      clearText () {
        this.editor.txt.clear()
      },
      randomStr (len) {
        len = len || 32
        let chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
        let maxPos = chars.length
        let pwd = ''
        for (let i = 0; i < len; i++) {
          pwd += chars.charAt(Math.floor(Math.random() * maxPos))
        }
        return pwd
      },
      createFileName (filename) {
        let pos = filename.lastIndexOf('.')
        let suffix = filename.substring(pos)
        return this.randomStr(20) + suffix
      }

    },
    mounted () {
      let _this = this
      this.editor = new Editor(`#${this.editorId}`)
      this.editor.customConfig.zIndex = 100
      this.editor.customConfig.onchange = (html) => {
        let text = this.editor.txt.text()
        if (this.cache) localStorage.editorCache = html
        this.$emit('input', this.valueType === 'html' ? html : text)
        this.$emit('on-change', html, text)
      }
      this.editor.customConfig.onchangeTimeout = this.changeInterval
      this.editor.customConfig.uploadImgServer = process.env.VUE_APP_API_BASE_URL + '/upload'
      this.editor.customConfig.uploadFileName = 'file'
      this.editor.customConfig.uploadImgParams = {
          savePathType: 'web'
      }
      this.editor.customConfig.uploadImgHooks = {
          before: function (xhr, editor, files) {
              console.log(xhr, editor, files)
              // 图片上传之前触发
              // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
              
              // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
              // return {
              //     prevent: true,
              //     msg: '放弃上传'
              // }
          },
          success: function (xhr, editor, result) {
            console.log(xhr, editor, result)
              // 图片上传并返回结果，图片插入成功之后触发
              // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
          },
          fail: function (xhr, editor, result) {
              console.log(xhr, editor, result)
              // 图片上传并返回结果，但图片插入错误时触发
              // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
          },
          error: function (xhr, editor) {
               console.log(xhr, editor)
              // 图片上传出错时触发
              // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
          },
          timeout: function (xhr, editor) {
              // 图片上传超时时触发
              // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
          },
          // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
          // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
          customInsert: function (insertImg, result, editor) {
              // console.log(insertImg, result, editor)
              // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
              // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
              // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
              insertImg(result.data)
              // result 必须是一个 JSON 格式字符串！！！否则报错
          }
        }

      // create这个方法一定要在所有配置项之后调用
      this.editor.create()
      this.editor.txt.clear()
      // 如果本地有存储加载本地存储内容
      let html = this.value || localStorage.editorCache
      if (html) this.editor.txt.html(html)
    }
  }
</script>

<style lang="less">
  /*.editor-wrapper *{*/
  /*  z-index: 100 !important;*/
  /*}*/
</style>
