<template>
	<n-message-provider :to="messageContainer">
		<n-dialog-provider :to="dialogContainer">
			<div class="schema-builder-container" ref="containerRef">
				<div class="schema-main" :class="[store.preview ? 'preview' : '']">
					<SchemaCanvas />
				</div>
				<div class="resize-handle" @mousedown="startResize"></div>
				<div class="schema-sidebar" :style="{ width: sidebarWidth + 'px' }">
					<SchemaSidebar />
				</div>
			</div>
		</n-dialog-provider>
	</n-message-provider>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, nextTick } from "vue";
import { useSchemaStore } from "./store";
import SchemaCanvas from "./components/SchemaCanvas.vue";
import SchemaSidebar from "./components/SchemaSidebar.vue";
import { NDialogProvider, NMessageProvider } from 'naive-ui';

// Props
const props = defineProps({
  initialSchema: {
    type: Object,
    default: () => ({})
  },
  onSave: {
    type: Function,
    default: null
  }
});

// Expose methods
const getSchemaData = () => {
  return store.schema;
};

defineExpose({
  getSchemaData
});

const store = useSchemaStore();

// 面板宽度状态
const minSidebarWidth = 300;
const maxSidebarWidth = 700;
const sidebarWidth = ref(300);
const isResizing = ref(false);
const containerRef = ref(null);
const dialogContainer = ref(null);
const messageContainer = ref(null);
const startX = ref(0);
const startWidth = ref(300);

// 开始拖拽调整大小
function startResize(event) {
	event.preventDefault();
	event.stopPropagation();
	
	// 记录开始拖拽时的位置和宽度
	startX.value = event.clientX;
	startWidth.value = sidebarWidth.value;
	
	isResizing.value = true;
	document.body.style.cursor = 'col-resize';
	document.body.style.userSelect = 'none';
	
	// 添加事件监听器
	document.addEventListener('mousemove', handleMouseMove);
	document.addEventListener('mouseup', stopResize);
}

// 处理鼠标移动
function handleMouseMove(event) {
	if (!isResizing.value) return;
	
	// 计算新的宽度
	const deltaX = startX.value - event.clientX;
	const newWidth = startWidth.value + deltaX;
	
	// 限制宽度范围
	if (newWidth >= minSidebarWidth && newWidth <= maxSidebarWidth) {
		sidebarWidth.value = newWidth;
	}
}

// 停止拖拽调整大小
function stopResize() {
	isResizing.value = false;
	document.body.style.cursor = '';
	document.body.style.userSelect = '';
	
	// 移除事件监听器
	document.removeEventListener('mousemove', handleMouseMove);
	document.removeEventListener('mouseup', stopResize);
}

// 初始化
onMounted(() => {
  // 设置对话框容器为document.body，确保在最上层显示
  dialogContainer.value = document.body;
  messageContainer.value = document.body;
  
  // 如果有初始Schema数据，加载它
  if (props.initialSchema && Object.keys(props.initialSchema).length > 0) {
    store.loadSchema(props.initialSchema);
  }
});

// 监听schema变化，自动保存
watch(() => store.schema, (newSchema) => {
  if (props.onSave && newSchema) {
    props.onSave(newSchema);
  }
}, { deep: true });
</script>

<style lang="scss" scoped>
// 全局样式，设置Naive UI组件的z-index
:global(.n-message-container) {
	z-index: 1100 !important;
}

:global(.n-dialog-container) {
	z-index: 1100 !important;
}
.schema-builder-container {
	display: flex;
	height: 80vh;
	overflow: hidden;
	width: 100%;
	
	.schema-main {
		background-color: #fff;
		border-radius: 8px;
		border: 1px solid #e5e7eb;
		margin: 0 5px;
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: hidden;
		flex: 1;
	}
	
	.schema-sidebar {
		border-left: 1px solid #e5e7eb;
		border-radius: 8px;
		background-color: #f8fafc;
		flex-shrink: 0;
	}
	
	.resize-handle {
		width: 4px;
		background-color: transparent;
		cursor: col-resize;
		position: relative;
		transition: all 0.2s ease;
		flex-shrink: 0;
		z-index: 10;
		
		&:hover {
			background-color: rgba(59, 130, 246, 0.1);
		}
		
		&::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 1px;
			height: 24px;
			background: linear-gradient(180deg, 
				rgba(156, 163, 175, 0.3) 0%, 
				rgba(156, 163, 175, 0.6) 50%, 
				rgba(156, 163, 175, 0.3) 100%);
			border-radius: 0.5px;
			transition: all 0.2s ease;
		}
		
		&:hover::after {
			background: linear-gradient(180deg, 
				rgba(59, 130, 246, 0.4) 0%, 
				rgba(59, 130, 246, 0.8) 50%, 
				rgba(59, 130, 246, 0.4) 100%);
			width: 2px;
			height: 32px;
		}
		
		&:active {
			background-color: rgba(59, 130, 246, 0.15);
		}
	}
}
</style>