<template>
  <div class="editor-wrapper">
    <div
      ref="editor"
      :class="{ 'editor-container': true, 'editor-readonly': readOnly, 'editor-disabled': disabled }"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { upload } from '@/utils/upload'
import E from 'wangeditor'

export default {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    readOnly: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapGetters([
      'imagesUploadApi',
      'baseApi'
    ])
  },
  data() {
    return {
      editor: null
    }
  },
  watch: {
    disabled(value) {
      if (this.editor) {
        const toggle = value ? this.editor.disable : this.editor.enable
        toggle()
      }
    }
    // value: {
    //   immediate: true,
    //   handler (value) {
    //     console.log('value变化', this.editor)
    //     if (this.editor && value) {
    //       this.editor.txt.html(value)
    //     }
    //   },
    // },
    // '$i18n.locale': {
    //   handler() {
    //     if (this.editor) {
    //       const toggle = this.disabled ? this.editor.enable : this.editor.disable
    //       const reset = this.disabled ? this.editor.disable : this.editor.enable
    //       toggle()
    //       this.$nextTick(() => {
    //         reset()
    //       })
    //     }
    //   },
    // },
  },
  mounted() {
    const _this = this
    var editor = new E(this.$refs.editor)
    console.log(editor)
    // 自定义菜单配置
    editor.customConfig.zIndex = 10
    // 文件上传
    editor.config.customUploadImg = function(files, insert) {
      // files 是 input 中选中的文件列表
      // insert 是获取图片 url 后，插入到编辑器的方法
      files.forEach(image => {
        upload(_this.imagesUploadApi, image).then(res => {
          const data = res.data
          const url = data.url
          insert(url)
        })
      })
    }
    editor.config = editor.customConfig
    // editor.config.lang = this.$store.state.language
    editor.config.height = 320
    editor.config.zIndex = 10
    // editor.i18next = i18next
    editor.config.onchange = (newHtml) => {
      this.$emit('change', newHtml)
    }
    editor.config.customAlert = (message, type) => {
      const exec = this.$message[type] || this.$message.info
      exec(message)
    }
    editor.config.excludeMenus = [
      'emoticon',
      'video',
      'code',
      'fontName',
      'table',
      'redo',
      'undo'
    ]
    editor.config.fontNames = [
      'bmw regular',
      'bmw bold'
    ]
    editor.config.showFullScreen = false
    // editor.config.uploadImgServer = this.$store.getters.getUrl('/portal/v1/file/upload?recType=10021002')
    // editor.config.uploadImgHeaders = {
    //   token: this.$store.state.token,
    // }
    // editor.config.uploadFileName = 'file'
    // editor.config.customUploadImg = (resultFiles, insertImgFn) => {
    //   resultFiles.forEach((file) => {
    //     const formData = new FormData()
    //     formData.append('file', file)
    //     $.post('/portal/v1/file/upload?recType=10021002', formData, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then((res) => {
    //       if (res.objectUrl) {
    //         insertImgFn(res.objectUrl)
    //       }
    //     })
    //   })
    // }
    editor.config.withCredentials = true
    editor.create()
    // 回显
    this.$watch('value', (value) => {
      if ((editor || this.editor) && value) {
        const instance = this.editor || editor
        instance.txt.html(value)
      }
    }, { immediate: true })
    if (this.$attrs.value) {
      editor.txt.html(this.$attrs.value)
    }
    // 禁止编辑器
    if (this.disabled || this.readOnly) {
      console.log('sadadadsdsad' + editor)
      editor.$textElem.attr('contenteditable', false)
      // editor.disable()
    }
    this.editor = Object.seal(editor)
  },
  beforeDestroy() {
    console.log('编辑器', this.editor)
    // 调用销毁 API 对当前编辑器实例进行销毁
    // this.editor.destroy()
    // this.editor.destroy()
    this.editor.txt.clear()
    this.editor = null
  },
  methods: {
    getEditorData() {
      return this.editor.txt.html()
    }
  }
}
</script>

<style lang="scss" scoped>
.editor-container {
  ::v-deep .w-e-toolbar {
    /*border-color: fade(black, 15%) !important*/
    /*border-bottom-color: fade(black, 9%) !important*/
    /*border-radius: @global-radius-r2 @global-radius-r2 0 0*/
    .w-e-menu {
      // width: 36px
      // height: 36px
      &.w-e-active i {
        /*color: @primary-color*/
      }
    }
    .w-e-menu-tooltip {
      z-index: 13 !important
    }
  }
  ::v-deep .w-e-text-container {
    /*border-color: fade(black, 15%) !important*/
    /*border-radius: 0 0 @global-radius-r2 @global-radius-r2*/
  }
}
.editor-readonly {
  ::v-deep .w-e-toolbar {
    display: none
  }
  ::v-deep .w-e-text-container {
    border: none !important
  }
  ::v-deep .placeholder {
    display: none
  }
}
.editor-disabled {
  cursor: not-allowed
}
</style>
