<template>
	<el-container class="pi-panel">
		<left-panel :data="formData" :field="field"></left-panel>
		<center-panel ref="centerRef" :data="formData" :field="field"></center-panel>
		<right-panel :data="formData" :field="field"></right-panel>
	</el-container>
</template>

<script setup>
import {onMounted, ref, reactive} from "vue"
import leftPanel from "./left"
import centerPanel from "./center"
import rightPanel from "./right"
import tools from "@/utils/tools"
import FormBuild from "./formBuild"

defineOptions({
	name: "toolsForm"
})

const centerRef = ref(null)
let formData = reactive(new FormBuild())
let field = reactive({element: {}})

onMounted(() => {
	const fields = tools.data.get("FORM-FIELDS")
	const config = tools.data.get("FORM-CONFIG")
	if (fields && config) {
		formData.initData(config, fields)
	}
})
</script>

<style scoped>
.pi-panel {
	display: flex;
}
</style>
