<template>
	<a-form ref="formRef" :model="formData" :rules="formRules" layout="horizontal">
		<a-row :gutter="16">
			<a-col v-for="field in fields" :key="field.name" :span="12" v-show="!field.advanced || advanced">
				<a-form-item :label="field.label" :name="field.name">
					<component
						:is="getComponent(field.type)"
						v-model:value="formData[field.name]"
						v-bind="field.options"
						:placeholder="field.placeholder"
						:allow-clear="field.allowClear"
					/>
				</a-form-item>
			</a-col>
		</a-row>
	</a-form>
</template>

<script setup>
	// 接收父组件传递的表单字段配置
	const props = defineProps({
		fields: {
			type: Array,
			required: true
		},
		formData: {
			type: Object,
			required: true
		},
		formRules: {
			type: Object,
			default: () => ({})
		}
	})

	const emit = defineEmits(['submit', 'reset'])

	// 表单引用
	const formRef = ref(null)

	// 高级选项开关
	const advanced = ref(false)

	// 切换高级选项
	const toggleAdvanced = () => {
		advanced.value = !advanced.value
	}

	// 提交表单
	const onSubmit = () => {
		formRef.value.validate((valid) => {
			if (valid) {
				emit('submit', formData)
			} else {
				console.log('表单验证失败')
			}
		})
	}

	// 重置表单
	const onReset = () => {
		formRef.value.resetFields()
		emit('reset')
	}

	// 获取组件类型
	const getComponent = (type) => {
		const componentMap = {
			input: 'a-input',
			select: 'a-select',
			radio: 'a-radio-group',
			switch: 'a-switch'
		}
		return componentMap[type] || 'a-input'
	}
</script>
