<template>
  <div class="editor-container">
    <div :id="editorId" class="editor-wrapper"></div>
  </div>
</template>

<script>
import E from 'wangeditor'
import { getToken } from '@/utils/auth'

export default {
  name: 'WangEditor',
  props: {
    value: {
      type: String,
      default: ''
    },
    minHeight: {
      type: Number,
      default: 300
    },
    height: {
      type: Number,
      default: 400
    },
    placeholder: {
      type: String,
      default: '请输入内容...'
    }
  },
  data() {
    return {
      editorId: 'editor-' + Math.random().toString(36).substr(2),
      editor: null,
      content: ''
    }
  },
  watch: {
    value: {
      handler(val) {
        if (val !== this.content && this.editor) {
          this.editor.txt.html(val)
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.initEditor()
  },
  beforeDestroy() {
    this.destroyEditor()
  },
  methods: {
    initEditor() {
      this.editor = new E('#' + this.editorId)
      
      // 配置编辑器
      this.editor.config.height = this.height
      this.editor.config.minHeight = this.minHeight
      this.editor.config.placeholder = this.placeholder
      this.editor.config.zIndex = 10
      
      // 配置上传图片
      this.editor.config.uploadImgServer = process.env.VUE_APP_BASE_API + '/common/upload'
      this.editor.config.uploadImgMaxSize = 5 * 1024 * 1024 // 5MB
      this.editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif']
      this.editor.config.uploadImgHeaders = {
        Authorization: 'Bearer ' + getToken()
      }
      this.editor.config.uploadFileName = 'file'
      
      // 自定义上传图片的回调
      this.editor.config.uploadImgHooks = {
        customInsert: (insertImgFn, result) => {
          if (result.code === 200) {
            insertImgFn(result.url)
          } else {
            this.$message.error('图片上传失败')
          }
        }
      }
      
      // 配置菜单
      this.editor.config.menus = [
        'head',
        'bold',
        'fontSize',
        'fontName',
        'italic',
        'underline',
        'strikeThrough',
        'indent',
        'lineHeight',
        'foreColor',
        'backColor',
        'link',
        'list',
        'justify',
        'quote',
        'image',
        'table',
        'code',
        'splitLine',
        'undo',
        'redo'
      ]
      
      // 创建编辑器
      this.editor.create()
      
      // 设置初始内容
      if (this.value) {
        this.editor.txt.html(this.value)
      }
      
      // 监听内容变化
      this.editor.config.onchange = (html) => {
        this.content = html
        this.$emit('input', html)
      }
    },
    destroyEditor() {
      if (this.editor) {
        this.editor.destroy()
        this.editor = null
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.editor-container {
  position: relative;
  
  .editor-wrapper {
    background-color: #fff;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    
    ::v-deep {
      .w-e-toolbar {
        border-bottom: 1px solid #dcdfe6;
        background-color: #f5f7fa;
      }
      
      .w-e-text-container {
        border: none;
      }
    }
  }
}
</style>
