<template>
  <div ref="_ref" style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :default-config="toolbarConfig"
      mode="default"
    />
    <Editor
      v-model="htmlValue"
      :style="{ height: height + 'px', overflowY: 'hidden' }"
      :default-config="editorConfig"
      mode="default"
      @on-created="handleCreated"
    />
  </div>
</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, shallowRef, ref } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import api from '@/api'

const props = defineProps({
  valueHtml: {
    type: String,
    default: '',
  },
  height: {
    type: Number,
    default: 500,
  },
})

const emit = defineEmits(['update:valueHtml'])

const editorRef = shallowRef()

const _ref = ref(null)

const toolbarConfig = {}

const editorConfig = { placeholder: '请输入游戏介绍...', MENU_CONF: {} }

const htmlValue = computed({
  get() {
    return props.valueHtml
  },
  set(value) {
    emit('update:valueHtml', value)
  },
})

editorConfig.MENU_CONF['uploadImage'] = {
  allowedFileTypes: ['image/*'],
  base64LimitSize: 5 * 1024, // 5kb
  // 超时时间，默认为 10 秒
  timeout: 5 * 1000, // 5 秒

  async customUpload(file, insertFn) {
    await upFile(file, insertFn)
  },
}

editorConfig.MENU_CONF['uploadVideo'] = {
  allowedFileTypes: ['video/*'],

  async customUpload(file, insertFn) {
    await upFile(file, insertFn)
  },
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
  editor.on('fullScreen', () => {
    _ref.value.style.zIndex = 10
  })
}

const upFile = async (file, insertFn) => {
  const formData = new FormData()
  formData.append('file', file)
  const res = await api.uploadImg(formData)
  insertFn(res.data.data)
}
</script>

<style lang="scss" scoped></style>
