<!-- RichTextEditor 富文本编辑器组件 -->
<template>
  <div class="rich-text-editor-wrapper">
    <Toolbar
      class="rich-text-toolbar"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      :style="editorStyle"
      v-model="content"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleEditorCreated"
      @onChange="handleEditorChange"
    />
  </div>
</template>

<script setup lang="ts">
  import '@wangeditor/editor/dist/css/style.css'
  import { computed, onBeforeUnmount, shallowRef, watch } from 'vue'
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
  import type { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor'

  defineOptions({ name: 'RichTextEditor' })

  // 1. Props 定义
  interface Props {
    /** 编辑器内容（HTML 字符串） */
    modelValue?: string
    /** 编辑器高度 */
    height?: string
    /** 占位符文本 */
    placeholder?: string
    /** 是否禁用编辑器 */
    disabled?: boolean
    /** 编辑器模式 */
    mode?: 'default' | 'simple'
  }

  const props = withDefaults(defineProps<Props>(), {
    modelValue: '',
    height: '400px',
    placeholder: '请输入内容...',
    disabled: false,
    mode: 'default'
  })

  // 2. Emits 定义
  const emit = defineEmits<{
    'update:modelValue': [value: string]
    change: [value: string]
  }>()

  // 3. 编辑器实例
  const editorRef = shallowRef<IDomEditor>()
  const content = shallowRef<string>(props.modelValue)

  // 4. 计算属性：编辑器样式
  const editorStyle = computed(() => ({
    height: props.height,
    overflowY: 'hidden'
  }))

  // 5. 工具栏配置（简化工具栏）
  const toolbarConfig = computed(
    (): Partial<IToolbarConfig> => ({
      toolbarKeys: [
        'bold',
        'italic',
        'underline',
        '|',
        'headerSelect',
        '|',
        'bulletedList',
        'numberedList',
        '|',
        'insertLink',
        '|',
        'undo',
        'redo'
      ]
    })
  )

  // 6. 编辑器配置
  const editorConfig = computed(
    (): Partial<IEditorConfig> => ({
      placeholder: props.placeholder,
      readOnly: props.disabled,
      MENU_CONF: {}
    })
  )

  // 7. 监听外部 modelValue 变化
  watch(
    () => props.modelValue,
    (newValue) => {
      // 避免重复更新导致死循环
      if (newValue !== content.value) {
        content.value = newValue
        // 如果编辑器已创建，同步内容
        if (editorRef.value && editorRef.value.getHtml() !== newValue) {
          editorRef.value.setHtml(newValue)
        }
      }
    }
  )

  // 8. 监听 disabled 状态变化
  watch(
    () => props.disabled,
    (newDisabled) => {
      if (editorRef.value) {
        if (newDisabled) {
          editorRef.value.disable()
        } else {
          editorRef.value.enable()
        }
      }
    }
  )

  // 9. 编辑器创建回调
  const handleEditorCreated = (editor: IDomEditor) => {
    editorRef.value = editor

    // 应用初始禁用状态
    if (props.disabled) {
      editor.disable()
    }
  }

  // 10. 编辑器内容变化回调
  const handleEditorChange = (editor: IDomEditor) => {
    const html = editor.getHtml()
    content.value = html
    emit('update:modelValue', html)
    emit('change', html)
  }

  // 11. 组件销毁时清理编辑器实例
  onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor) {
      editor.destroy()
    }
  })

  // 12. 暴露编辑器方法
  defineExpose({
    /** 获取编辑器实例 */
    getEditor: () => editorRef.value,
    /** 设置编辑器内容 */
    setHtml: (html: string) => editorRef.value?.setHtml(html),
    /** 获取编辑器内容 */
    getHtml: () => editorRef.value?.getHtml() || '',
    /** 清空编辑器 */
    clear: () => editorRef.value?.clear(),
    /** 聚焦编辑器 */
    focus: () => editorRef.value?.focus(),
    /** 禁用编辑器 */
    disable: () => editorRef.value?.disable(),
    /** 启用编辑器 */
    enable: () => editorRef.value?.enable()
  })
</script>

<style lang="scss" scoped>
  .rich-text-editor-wrapper {
    overflow: hidden;
    border: 1px solid var(--el-border-color);
    border-radius: 4px;

    .rich-text-toolbar {
      background-color: var(--el-bg-color);
      border-bottom: 1px solid var(--el-border-color);
    }
  }
</style>
