<template>
  <div style="border: 1px solid #ccc;">
    <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editor"
        :defaultConfig="toolbarConfig"
        :mode="mode"
    />
    <Editor
        style="height: 500px; overflow-y: hidden;"
        v-model="html"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="onCreated"
    />
  </div>
</template>
<script>
import Vue from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default Vue.extend({
    components: { Editor, Toolbar },
    data() {
        return {
            editor: null,
            html: '',
            toolbarConfig: { },
            editorConfig: { 
              placeholder: '请输入内容...',
              MENU_CONF:{
                uploadImage: {
                  customUpload:this.update
                },
                uploadVideo: {
                  customUpload:this.update
                }
              } 
            },
            mode: 'default', // or 'simple'
        }
    },
    props: ['id','content'],
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
        //自定义上传
        update(file,insertFn) {
          let filename = file.name.substr(0,file.name.indexOf('.'))
          let ext = file.name.substr(file.name.indexOf('.') + 1)
          //资源上传请求配置
          let uploadRequest = {
              "classname": "system.attachment.huawei.OBS",
              "method": "getFileName",
              "content": {
                  "filename": filename,
                  "filetype": ext,
                  "parentid": JSON.parse(sessionStorage.getItem('folderid')).appfolderid
              }
          }
          //申请上传地址
          this.$api.requested(uploadRequest).then( res => {
            let url = res.data.uploadurl
            let obsfilename = res.data.serialfilename
            let config = {
              headers:{'Content-Type':'application/octet-stream'}
            }
            //上传华为云
            this.$upload.hw_upload(url, file, config).then(res => {
              if(res.statusText == 'OK') {
                let param = {
                  "classname": "system.attachment.huawei.OBS",
                  "method": "uploadSuccess",
                  "content": {
                    "serialfilename": obsfilename
                  }
                }
                //上传成功反馈
                this.$api.requested(param).then( res => {
                  let result = res.data.attachmentids
                  let param = {
                    "classname": "system.attachment.Attachment",
                    "method": "createFileLink",
                    "content": {
                      "ownertable": "SAT_SHAREMATERIAL",
                      "ownerid": this.id,
                      "usetype": "richtext",
                      "attachmentids": result
                    }
                  }
                  this.$api.requested(param).then(res => {
                    if (res.msg != '成功') {
                      this.$notify({
                        title: '提示',
                        message: '上传失败',
                        type: 'error'
                      })
                    } else {
                      //插入富文本
                      insertFn(res.data[0].url,filename,res.data[0].url)
                    }
                  })
                })
              }
              
            })
          })
        }
    },
    mounted() {
        // 模拟 ajax 请求，异步渲染编辑器
        setTimeout(() => {
          this.html = this.content
        }, 1000)
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }
})
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>