<template>
	<a-row :gutter="[8, 8]">
		<a-col v-if="showDrag" :span="8">
			<ComponentPanel />
		</a-col>
		<a-col :span="16">
			<ComponentContainer :form-config="formConfig" :selected="selected" @selected-change="selectedChange" />
		</a-col>
		<a-col v-if="!showDrag" :span="8">
			<ConfigPanel
				:form-config="formConfig"
				:current-item="selected"
				@update:form-config="onUpdateFormConfig"
				@update:form-item="onUpdateFormItem"
			/>
		</a-col>
	</a-row>
</template>
<script lang="ts" setup>
	import XEUtils from 'xe-utils'
	import { FormConfig } from '../form-render/form-render-types'
	import { FormDesignerItem } from './form-designer-types'

	const showDrag = ref(true)

	const formConfig = ref<FormConfig>({
		layout: 'horizontal',
		colon: true,
		hideRequiredMark: false,
		labelAlign: 'right',
		labelType: 'responsive',
		scrollToFirstError: false,
		validateOnRuleChange: true,
		labelCol: {
			style: {
				width: '120px',
			},
			span: 4,
			offset: 0,
		},
		labelColFixedWidthInPx: 120,
		labelColSpanWidth: 4,
	})

	const selected = ref<FormDesignerItem>()
	const selectedChange = (formDesignerItem?: FormDesignerItem) => {
		showDrag.value = !formDesignerItem
		selected.value = formDesignerItem
	}

	const onUpdateFormConfig = (_formConfig: FormConfig) => {
		formConfig.value = _formConfig
	}
	const onUpdateFormItem = (_formItem: FormDesignerItem) => {
		selected.value = XEUtils.assign(selected.value, _formItem)
	}
</script>
