<template>
	<a-card size="small">
		<template #title>
			<a-tabs v-model:active-key="activeKey" centered size="small">
				<a-tab-pane v-if="currentItem.uuid" key="item" tab="组件配置" />
				<a-tab-pane key="form" tab="表单配置" />
			</a-tabs>
		</template>
		<div :style="{ minHeight: 'calc(100vh - 190px)', maxHeight: 'calc(100vh - 190px)', overflowY: 'auto' }">
			<div v-if="activeKey === 'form'">
				<form-config-panel :form-config="formConfig" @update:form-config="onUpdateFormConfig"></form-config-panel>
			</div>
			<div v-else>
				<a-tabs v-model:active-key="currentSection" size="small" animated>
					<a-tab-pane v-if="currentItem.formItem?.group === 'form'" key="config" tab="组件配置">
						<form-item-config-panel
							:form-item="currentItem.formItem"
							:form-config="formConfig"
							@update:form-item-config="onUpdateFormItemConfig"
						></form-item-config-panel>
					</a-tab-pane>
					<a-tab-pane key="attribute" tab="组件属性">
						<property-config :form-item="currentItem.formItem" @update:form-item="onUpdateFormItem"></property-config>
					</a-tab-pane>
					<a-tab-pane v-if="currentItem.formItem?.group === 'form'" key="rule" tab="验证规则">
						<validate-rule-config
							:rules="currentItem.formItem.rules"
							@update:rules="onUpdateRules"
						></validate-rule-config>
					</a-tab-pane>
				</a-tabs>
			</div>
		</div>
	</a-card>
</template>
<script lang="ts" setup>
	import { FormConfig, FormItem, FormItemConfig } from '@/components/form-render/form-render-types'
	import { FormDesignerItem } from '../form-designer-types'
	import XEUtils from 'xe-utils'
	import { Rule } from 'ant-design-vue/es/form'

	const props = defineProps({
		currentItem: {
			type: Object as PropType<FormDesignerItem>,
			required: false,
			default: () => {
				return {}
			},
		},
		formConfig: {
			type: Object as PropType<FormConfig>,
			required: true,
		},
	})

	const { currentItem, formConfig } = toRefs(props)
	const emit = defineEmits<{
		'update:form-item': [formItem: FormDesignerItem]
		'update:form-config': [formConfig: FormConfig]
	}>()

	const activeKey = ref('form')
	const currentSection = ref('config')
	watch(
		currentItem,
		(newVal) => {
			activeKey.value = newVal.uuid ? 'item' : 'form'
		},
		{ immediate: true, deep: true },
	)

	const itemType = computed(() => {
		return currentItem.value.formItem.group
	})

	watch(
		itemType,
		(v) => {
			currentSection.value = v === 'form' ? 'config' : 'attribute'
		},
		{ immediate: true, deep: true },
	)

	const onUpdateFormConfig = (newFormConfig: FormConfig) => {
		emit('update:form-config', newFormConfig)
	}
	const onUpdateFormItemConfig = (_formItemConfig: FormItemConfig) => {
		emit(
			'update:form-item',
			XEUtils.assign(currentItem.value, {
				formItem: XEUtils.assign(currentItem.value.formItem, { config: _formItemConfig }),
			}),
		)
	}
	const onUpdateFormItem = (formItem: FormItem) => {
		emit('update:form-item', XEUtils.assign(currentItem.value, { formItem }))
	}

	const onUpdateRules = (_rules: Rule[]) => {
		emit(
			'update:form-item',
			XEUtils.assign(currentItem.value, {
				formItem: XEUtils.assign(currentItem.value.formItem, { rules: _rules }),
			}),
		)
	}
</script>
