<template>
  <div class="home">
    <div ref="htmlWangeditor"></div>
  </div>
</template>

<script>
  import {
    Loading
  } from 'element-ui';
  // import oss from "ali-oss"
  import wangEditor from 'wangeditor'
  // import {
  //   GetSts
  // } from '@/api/admin/common.js'

  import {clientArr} from '@/assets/admin/js/createOss.js'

  export default {
    props: {
      editorText: String,
      isDisable:{
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        editor: null,
        editorData: '',
        aliOss: "",
      }
    },
    mounted() {
      // if(!this.isDisable){
      //   this.setNewOss()
      // }
      clientArr().then(res=>{
        this.aliOss = res
      })

      this.creatWangEditor()
      // 文本回显
      this.editor.txt.html(this.editorText)
    },
    methods: {
      // async setNewOss() {
      //   let obj = await GetSts()
      //   obj = obj.data
      //   let client = new oss({
      //     region: "oss-cn-chengdu",
      //     accessKeyId: obj.AccessKeyId,
      //     accessKeySecret: obj.AccessKeySecret,
      //     stsToken: obj.SecurityToken,
      //     refreshSTSToken: async () => {
      //       let obj = await GetSts()
      //       obj = obj.data
      //       return {
      //         accessKeyId: obj.accessKeyId,
      //         accessKeySecret: obj.accessKeySecret,
      //         stsToken: obj.stsToken,
      //       }
      //     },
      //     refreshSTSTokenInterval: 900000,
      //     bucket: "jhnewshop",
      //   })
      //   this.aliOss = client
      // },
      creatWangEditor() {
        this.editor = new wangEditor(this.$refs.htmlWangeditor)

        this.editor.config.onchange = (newHtml) => {
          this.editorData = newHtml
          this.$emit('getNewEditorData', {
            data: newHtml,
          })
        }

        // this.editor.config.excludeMenus = [
        //   'video',
        // ]
        this.editor.config.showLinkImg = false

        let that = this
        that.editor.config.customUploadImg = async function(resultFiles, insertImgFn) {
          for (let i = 0; i < resultFiles.length; i++) {
            Loading.service({
              lock: true,
              text: '图片上传中',
              background: 'rgba(0, 0, 0, 0.7)'
            })
            await that.aliOss.put(resultFiles[i].name, resultFiles[i]).then(function(res) {
              // 上传图片，返回结果，将图片插入到编辑器中
              insertImgFn(res.url)
              Loading.service().close()
              that.popFun('成功', '图片上传成功', 'success')
            }).catch(function(err) {
              Loading.service().close()
              that.popFun('提示', '图片上传失败', 'error')
            })
          }
        }
        that.editor.config.customUploadVideo = async function (resultFiles, insertVideoFn) {
            // resultFiles 是 input 中选中的文件列表
            // insertVideoFn 是获取视频 url 后，插入到编辑器的方法
            for (var i = 0; i < resultFiles.length; i++) {
              Loading.service({
                lock: true,
                text: '视频上传中',
                background: 'rgba(0, 0, 0, 0.7)'
              })
              await that.aliOss.put(resultFiles[i].name, resultFiles[i]).then(function (res) {
                  // 上传视频，返回结果，将视频插入到编辑器中
                insertVideoFn(res.url)
                Loading.service().close()
                that.popFun('成功', '视频上传成功', 'success')
              }).catch(function (err) {
                Loading.service().close()
                that.popFun('提示', '视频上传失败', 'error')
              })
            } 
        }
        
        
        that.editor.create()
        if(that.isDisable){
          that.editor.disable()
        }
      },

      popFun(title, msg, type) {
        this.$notify({
          title: title,
          message: msg,
          type: type,
        });
      },
    },
    beforeDestroy() {
      // 调用销毁 API 对当前编辑器实例进行销毁
      this.editor.destroy()
      this.editor = null
    }
  }
</script>

<style lang="scss">
  // .w-e-text-container {
  //   height: 350px !important;
  // }
  .home_button {
    width: 80px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #FFFFFF;
    border-radius: 5px;
    background-color: #5473E8;
    margin: 40px auto 0 auto;
  }
</style>
