<script lang="ts" setup>
import { folders } from "@/const/editor"
import { useEditorStore } from "@/stores/editor"
import { onMounted, ref } from 'vue'
import { Pane } from 'tweakpane'
const editorStore = useEditorStore()

const paneContainer = ref<HTMLDivElement | null>(null)

// 创建 tweakpane 面板
function createPane(container: HTMLDivElement) {
	if (!paneContainer.value) return

	// 清理旧的 pane

	const pane = new Pane({ container })

	// 遍历 folders 并创建对应的控制项
	folders.forEach(folder => {
		if (folder.type === 'folder' && folder.children) {
			const f = pane.addFolder({
				title: folder.label,
				expanded: true
			})

			folder.children.forEach((item: any) => {
				f.addBinding(editorStore.formData, item.label, item.params)
			})
		} else {
			pane.addBinding(editorStore.formData, folder.label, folder.params)
		}
	})
}

onMounted(() => {
	editorStore.initializeFormData()
	createPane(paneContainer.value as HTMLDivElement)
})
</script>

<template>
	<div class="editor">
		<div ref="paneContainer" class="pane-container"></div>
	</div>
</template>

<style scoped lang="scss">
.editor {
	width: 100%;
	height: 100%;
	display: flex;

	.pane-container {
		width: 100%;
		padding: 20px;
		background: transparent;
		overflow-y: auto;
	}
}
</style>