<template>
	<form-render
		v-model="formData"
		:config="{
			layout: 'vertical',
			colon: true,
			hideRequiredMark: false,
			labelAlign: 'right',
			labelType: 'fixed',
			scrollToFirstError: false,
			validateOnRuleChange: true,
			labelCol: {},
		}"
		:hidden-fields="hiddenFields"
		:items="formItems"
	></form-render>
</template>
<script lang="ts" setup>
	import { FormConfig, FormItem, FormItemTypeEnum } from '@/components/form-render/form-render-types'
	import { PropType, computed, ref, toRefs } from 'vue'

	const emit = defineEmits<{
		'update:form-config': [formConfig: FormConfig]
	}>()

	const props = defineProps({
		formConfig: {
			type: Object as PropType<FormConfig>,
			required: true,
		},
	})
	const { formConfig } = toRefs(props)
	const formItems = ref<FormItem[]>([
		{
			type: FormItemTypeEnum.RADIO,
			group: 'form',
			config: {
				label: '布局形式',
				name: 'layout',
			},
			properties: {
				optionType: 'button',
				buttonStyle: 'solid',
				size: 'small',
				options: [
					{
						label: '水平',
						value: 'horizontal',
					},
					{
						label: '垂直',
						value: 'vertical',
					},
					{
						label: '行内',
						value: 'inline',
					},
				],
				disabled: false,
			},
			rules: [],
		},
		{
			type: FormItemTypeEnum.SWITCH,
			group: 'form',
			config: {
				label: '显示冒号',
				name: 'colon',
			},
			properties: {
				size: 'small',
				checkedChildren: '显示',
				unCheckedChildren: '隐藏',
				disabled: false,
			},
			rules: [],
		},
		{
			type: FormItemTypeEnum.SWITCH,
			group: 'form',
			config: {
				label: '隐藏必选标记',
				name: 'hideRequiredMark',
			},
			properties: {
				size: 'small',
				checkedChildren: '隐藏',
				unCheckedChildren: '显示',
				disabled: false,
			},
			rules: [],
		},
		{
			type: FormItemTypeEnum.RADIO,
			group: 'form',
			config: {
				label: '标签对齐方式',
				name: 'labelAlign',
			},
			properties: {
				size: 'small',
				optionType: 'button',
				buttonStyle: 'solid',
				options: [
					{
						label: '左对齐',
						value: 'left',
					},
					{
						label: '右对齐',
						value: 'right',
					},
				],
				disabled: false,
			},
			rules: [],
		},
		{
			type: FormItemTypeEnum.RADIO,
			group: 'form',
			config: {
				label: '标签模式',
				name: 'labelType',
			},
			properties: {
				size: 'small',
				optionType: 'button',
				buttonStyle: 'solid',
				options: [
					{
						label: '固定宽度',
						value: 'fixed',
					},
					{
						label: '响应式',
						value: 'responsive',
					},
				],
				disabled: false,
			},
			rules: [],
		},
		{
			type: FormItemTypeEnum.INPUT_NUMBER,
			group: 'form',
			config: {
				label: '标签宽度',
				name: 'labelColFixedWidthInPx',
			},
			properties: {
				size: 'small',
				disabled: false,
				addonAfter: 'px',
			},
			rules: [],
		},
		{
			type: FormItemTypeEnum.INPUT_NUMBER,
			group: 'form',
			config: {
				label: '标签宽度',
				name: 'labelColSpanWidth',
			},
			properties: {
				placeholder: '请输入标签宽度',
				size: 'small',
				disabled: false,
				addonBefore: 'span',
				max: 12,
				min: 1,
			},
			rules: [],
		},
		{
			type: FormItemTypeEnum.SWITCH,
			group: 'form',
			config: {
				label: '提交失败自动滚动到第一个错误字段	',
				name: 'scrollToFirstError',
			},
			properties: {
				size: 'small',
				disabled: false,
			},
			rules: [],
		},
		{
			type: FormItemTypeEnum.SWITCH,
			group: 'form',
			config: {
				label: '是否在 rules 属性改变后立即触发一次验证	',
				name: 'validateOnRuleChange',
			},
			properties: {
				size: 'small',
				disabled: false,
			},
			rules: [],
		},
	])

	const hiddenFields = computed(() => {
		return [
			...(formConfig.value.layout === 'horizontal' ? [] : ['colon']),
			...(formConfig.value.labelType === 'fixed' ? ['labelColSpanWidth'] : ['labelColFixedWidthInPx']),
		]
	})

	const formData = computed({
		get: () => {
			return formConfig.value
		},
		set: (val) => {
			if (val.labelType === 'fixed') {
				val.labelCol = { style: { width: `${val.labelColFixedWidthInPx}px` } }
			} else {
				val.labelCol = { span: val.labelColSpanWidth }
			}
			emit('update:form-config', val)
		},
	})
</script>
