<template>
  <div style="border: 1px solid #ccc; z-index: 9999">
    <Toolbar
      class="editor_toolbar"
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 300px; overflow-y: 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: '',
    },
    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 || '请输入内容...',
        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: {},
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
      console.log(editor.getConfig())
      this.editor.getAllMenuKeys()
    },
  },
  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>
