<template>
    <Editor id="tinymce-editor" v-model="faNode[nodeKey]" :init="editorInit" :disabled="disabled" @onClick="handleClick" />
</template>
<script>
// 引入组件
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
// 引入富文本编辑器主题的js和css
import 'tinymce/themes/silver/theme'
// 扩展插件
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount' // 字数统计插件
import 'tinymce/plugins/paste'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/fullscreen'

let OSS = require('ali-oss')
import { getCredit } from '@/components/api/index.js'

export default {
  name: 'mgEditor',
  components: {
    Editor
  },
  props: {
    item: {
      type: Object,
      required: true
    },
    faNode: {
      type: Object,
      required: true
    },
    nodeKey: {
      type: String,
      required: true
    },
    type: {
      type: String,
      default: 'input'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default() {
        return `请填写${this.item.label}`
      }
    },
    plugins: {
      type: [String, Array],
      default: 'link advlist lists image code wordcount table fullscreen preview paste'
    },
    toolbar: {
      type: [String, Array],
      default: 'formatselect styleselect | visualaid bold italic forecolor backcolor | link image | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent'
    }
  },
  data() {
    return {
      editorInit: {
        selector: '#tinymce-editor',
        language_url: '/tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/tinymce/skins/ui/oxide',
        content_css: '/tinymce/skins/content/default/content.css',
        height: 500,
        plugins: this.plugins,
        toolbar: this.toolbar,
        statusbar: true, // 底部的状态栏
        menubar: true, // 最上方的菜单
        branding: false, // 水印“Powered by TinyMCE”
        placeholder: '在这里输入文字',
        images_upload_handler: this.imagesUploadHandler
      }
    }
  },
  created() {
    this.getAliToken()
  },
  mounted() {
    tinymce.init({})
  },
  methods: {
    handleClick(e) {
      this.$emit('onClick', e, tinymce)
    },
    getAliToken() {
      getCredit().then(res => {
        client = new OSS(res.data)
      })
    },
    async upload(ObjName, fileUrl) {
      try {
        let result = await client.multipartUpload(`${ObjName}`, fileUrl, {
          progress: function (p) {
            progress = p * 100
          }
        })
        return result
      } catch (e) {
        console.log(e)
      }
    },
    getFileNameUUID() {
      function rx() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
      }
      return `${+new Date()}_${rx()}${rx()}`
    },
    imagesUploadHandler(blobInfo, success, failure) {
      const blob = blobInfo.blob()
      let objName = this.getFileNameUUID()
      let obj = blob.name;
      let index = obj.lastIndexOf(".")
      obj = obj.substring(index, obj.length)
      objName = this.getFileNameUUID() + blob.name
      let fileDir = this.item.fileDir || 'platform/'
      let url = fileDir + 'system/tinymce/' + objName
      this.upload(url, blob).then(res => {
        if (res && res.name) {
          const imgUrl = '//magicargo-platform-test1.oss-cn-hangzhou.aliyuncs.com/' + res.name
          success(imgUrl)
        } else {
          failure('上传失败')
        }
      });
    }
  }
}
</script>
<style scoped>
.wp100 {
  width: 100%;
}
</style>
