<template>
  <div class="wang-editor-container">
    <Toolbar
      class="editor-toolbar"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      class="editor-content"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :style="{ height: `${height}px` }"
      :mode="mode"
      @onCreated="handleCreated"
    />
  </div>
</template>

<script setup>
import { ref, shallowRef, watch, onBeforeUnmount, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

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

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

const mode = ref('default') // 或 'simple'
const editorRef = shallowRef()
const valueHtml = ref(props.modelValue)

// 完整的工具栏配置
const toolbarConfig = {
  excludeKeys: [
    'group-image',  // 排除图片
    'group-video',  // 排除视频
    'emotion',     // 排除表情
    'insertImage',
    'uploadImage'
  ],
  insertKeys: {
    index: 25,  // 插入位置
    keys: [
      'insertTable', // 确保表格按钮存在
    ]
  }
}

// 编辑器配置
const editorConfig = ref({
  placeholder: '请输入内容...',
  scroll: true,
  MENU_CONF: {
    insertTable: {
      maxRow: 10,
      maxCol: 6,
      // 自定义表格样式
      tableCellStyle: {
        border: '1px solid #ddd',
        padding: '8px',
        minWidth: '50px'
      },
      tableHeaderCellStyle: {
        backgroundColor: '#f2f2f2',
        border: '1px solid #ddd',
        padding: '8px'
      }
    }
  },
  hoverbarKeys: {
    table: {
      menuKeys: [
        'tableHeader',
        'insertTableRow',
        'deleteTableRow',
        'insertTableCol',
        'deleteTableCol',
        'deleteTable'
      ]
    }
  }
})

const handleCreated = (editor) => {
  editorRef.value = editor
  // 强制刷新工具栏
  nextTick(() => {
    editor.getToolbar().updateAllToolbar()
  })
}

// 确保在组件挂载后初始化
onMounted(() => {
  if (editorRef.value) {
    editorRef.value.getToolbar().updateAllToolbar()
  }
})

watch(valueHtml, (newVal) => {
  emit('update:modelValue', newVal)
})

watch(() => props.modelValue, (newVal) => {
  if (newVal !== valueHtml.value) {
    valueHtml.value = newVal
  }
})

onBeforeUnmount(() => {
  if (editorRef.value) {
    editorRef.value.destroy()
  }
})

defineExpose({
  getEditor: () => editorRef.value
})
</script>

<style>
/* 必须引入的样式 */
@import '@wangeditor/editor/dist/css/style.css';

.wang-editor-container {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
}

.editor-toolbar {
  border-bottom: 1px solid #dcdfe6 !important;
  background-color: #f8f8f8 !important;
  padding: 0 10px !important;
}

.editor-content {
  padding: 10px 15px !important;
  background-color: #fff !important;
}

/* 表格样式增强 */
.w-e-text table {
  border-collapse: collapse;
  width: 100%;
  margin: 10px 0;
}

.w-e-text table td,
.w-e-text table th {
  border: 1px solid #ddd !important;
  padding: 8px !important;
  min-width: 50px !important;
}

.w-e-text table th {
  background-color: #f2f2f2 !important;
}

/* 暗黑模式适配 */
[data-theme='dark'] .w-e-text table th {
  background-color: #333 !important;
  border-color: #444 !important;
}

/* 确保工具栏按钮可点击 */
.w-e-bar .w-e-menu {
  cursor: pointer !important;
  opacity: 1 !important;
}

/* 移除不需要的按钮 */
.w-e-bar [data-menu-key="uploadImage"],
.w-e-bar [data-menu-key="insertImage"],
.w-e-bar [data-menu-key="uploadVideo"],
.w-e-bar [data-menu-key="insertVideo"],
.w-e-bar [data-menu-key="emotion"] {
  display: none !important;
}
</style>