<template>
  <div style="border: 1px solid #ccc; z-index: 9999">
    <Toolbar
      v-if="editable"
      class="editor_toolbar"
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode" />
    <Editor
      :style="{ height: height, overflowY: 'hidden' }"
      v-model="html"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated" />
  </div>
</template>
<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'
import insertKeys from './index'
import { uploadImg } from '../../common/api/upload'

export default {
  components: { Editor, Toolbar },
  data() {
    return {
      editor: null,
      mode: 'default'
    }
  },
  model: {
    prop: 'content',
    event: 'change'
  },
  props: {
    content: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    editable: {
      type: Boolean,
      default: true
    },
    /** 编辑区高度（px） */
    height: {
      type: String,
      default: '300px'
    },
    isInsert: {
      type: Boolean,
      default: false
    },
    insertData: {
      type: Array,
      default: () => [
        {
          label: '客户名称',
          value: '{payerName} {payerSurname}'
        },
        { label: '订单编号', value: '{id}' },
        { label: '店铺单号', value: '{shopNumber}' },
        { label: '物流单号', value: '{trackingNumber}' },
        { label: '发货数量', value: '{purchaseNumber}' },
        { label: '发货时间', value: '{shipmentTime}' },
        { label: '妥投时间', value: '{properTime}' },
        { label: '商品', value: '{products}' },
        { label: '收货地址', value: '{address}' }
      ]
    }
  },

  computed: {
    html: {
      get() {
        return this.content
      },
      set(value) {
        this.$emit('change', value)
      }
    },
    toolbarConfig() {
      return {
        excludeKeys: ['group-video'],
        insertKeys: insertKeys(this.isInsert)
      }
    },
    editorConfig() {
      const _this = this
      return {
        placeholder: this.placeholder || '请输入内容...',
        readOnly: !this.editable,
        MENU_CONF: {
          uploadImage: {
            allowedFileTypes: ['jpg', 'jpeg', 'png', 'gif', 'bmp'],
            async customUpload(files, insertFn) {
              // JS 语法
              // res 即服务端的返回结果

              const res = await uploadImg(files, {
                url: 'upload/oss',
                businessType: 'other'
              })
              console.log(res)
              const { filePath } = res
              const url = _this.setimgUrl(filePath, {
                w: 640
              })
              // 从 res 中找到 url alt href ，然后插入图片
              insertFn(url)
            }
          },
          insertSelect: { options: this.insertData }
        }
      }
    }
  },
  watch: {
    editable(val) {
      this.syncEditorEditable(val)
    }
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
      this.$nextTick(() => {
        this.syncEditorEditable(this.editable)
      })
    },
    syncEditorEditable(editable) {
      if (!this.editor) return
      if (editable) {
        this.editor.enable()
      } else {
        this.editor.disable()
      }
    }
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
}
</script>
<style scoped>
.editor_toolbar::v-deep .panel_menu li:hover {
  background: #efefef;
}
</style>
