<template>
	<el-container class="pi-panel">
		<el-main class="main">
			<left-panel></left-panel>
			<el-divider direction="vertical" style="height: 100%"/>
			<center-panel :fields="fields" :config="config" @change="setField"></center-panel>
			<el-divider direction="vertical" style="height: 100%"/>
			<right-panel :config="config" :curField="curField"></right-panel>
		</el-main>
	</el-container>
</template>

<script setup>
import {ref} from "vue"
import leftPanel from "./left"
import centerPanel from "./center"
import rightPanel from "./right"

let fields = ref([])
let config = ref({
	ref: 'formRef',
	model: 'form',
	rules: 'rules',
	size: 'default',
	labelPosition: 'right',
	labelWidth: 100,
	disabled: false
})
let curField = ref({})

function setField(v) {
	curField.value = v
	curField.value.field = v.id
}

</script>

<style scoped>
.main {
	display: flex;
}
</style>
