<template>
  <div ref="editorContainer" class="sql-editor-container" />
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch, type Ref } from 'vue';
import { EditorState, EditorView, basicSetup } from '@codemirror/basic-setup';
import { sql } from '@codemirror/lang-sql';
import { oneDark } from '@codemirror/theme-one-dark'; // 可选主题

// 定义 props（支持 v-model 双向绑定）
const props = defineProps<{
  modelValue: string;
}>();

// 定义 emits
const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void;
}>();

// 编辑器容器引用
const editorContainer: Ref<HTMLElement | null> = ref(null);
let editorView: EditorView | null = null;

// 初始化编辑器
const initEditor = () => {
  if (!editorContainer.value) return;

  // 配置编辑器扩展
  const extensions = [
    basicSetup, // 基础功能（行号、语法高亮、快捷键等）
    sql(),      // SQL 语言支持
    oneDark,    // 主题（可选，移除则使用默认主题）
    EditorView.lineWrapping, // 自动换行
    EditorView.updateListener.of((update) => {
      // 监听内容变化并同步到 modelValue
      if (update.docChanged) {
        const newValue = update.state.doc.toString();
        emit('update:modelValue', newValue);
      }
    }),
  ];

  // 初始化编辑器状态（使用 modelValue 作为初始内容）
  const state = EditorState.create({
    doc: props.modelValue,
    extensions,
  });

  // 创建 EditorView 并挂载到容器
  editorView = new EditorView({
    state,
    parent: editorContainer.value,
  });
};

// 监听 modelValue 变化（外部修改时更新编辑器内容）
watch(
  () => props.modelValue,
  (newValue) => {
    if (editorView && newValue !== editorView.state.doc.toString()) {
      editorView.dispatch({
        changes: { from: 0, to: editorView.state.doc.length, insert: newValue },
      });
    }
  },
  { deep: true }
);

// 生命周期：挂载后初始化编辑器
onMounted(() => {
  initEditor();
});

// 生命周期：卸载时销毁编辑器（避免内存泄漏）
onUnmounted(() => {
  editorView?.destroy();
});
</script>

<style scoped>
.sql-editor-container {
  height: 400px; /* 必须指定高度 */
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}
</style>