<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"
	/>
</template>
<script lang="ts" setup>
	import XEUtils from 'xe-utils'
	import { PropType } from 'vue'
	import { FormConfig, FormItem, FormItemConfig, FormItemTypeEnum } from '@/components/form-render/form-render-types'
	const props = defineProps({
		formItem: {
			type: Object as PropType<FormItem>,
			required: true,
		},
		formConfig: {
			type: Object as PropType<FormConfig>,
			required: false,
			default: () => {
				return {}
			},
		},
	})
	const { formItem, formConfig } = toRefs(props)

	const formItems = ref<FormItem[]>([
		{
			type: FormItemTypeEnum.INPUT,
			group: 'form',
			config: {
				label: '表单域',
				name: 'name',
			},
			properties: {
				placeholder: '请输入表单域',
				disabled: false,
				required: true,
			},
			rules: [],
		},
		{
			type: FormItemTypeEnum.INPUT,
			group: 'form',
			config: {
				label: '标签文本',
				name: 'label',
			},
			properties: { placeholder: '请输入标签文本' },
			rules: [],
		},
		{
			type: FormItemTypeEnum.SWITCH,
			group: 'form',
			config: {
				label: '是否必填',
				name: 'required',
			},
			properties: {
				size: 'small',
				disabled: false,
			},
			rules: [],
		},
		{
			type: FormItemTypeEnum.SWITCH,
			group: 'form',
			config: {
				label: '使用表单配置',
				name: 'useFormConfig',
			},
			properties: {
				size: 'small',
				disabled: false,
			},
			rules: [],
		},
		{
			type: FormItemTypeEnum.CHECKBOX,
			group: 'form',
			config: {
				label: '字段校验的时机',
				name: 'validateTrigger',
			},
			properties: {
				options: [
					{
						label: '失去焦点',
						value: 'blur',
					},
					{
						label: '值变化',
						value: 'change',
					},
				],
				disabled: false,
			},
			rules: [],
		},
		{
			type: FormItemTypeEnum.SWITCH,
			group: 'form',
			config: {
				label: '检验不通过停止校验下一项',
				name: 'validateFirst',
			},
			properties: {
				size: 'small',
				disabled: false,
			},
			rules: [],
		},
		{
			type: FormItemTypeEnum.SWITCH,
			group: 'form',
			config: {
				label: '展示校验状态图标',
				name: 'hasFeedback',
			},
			properties: {
				size: 'small',
				disabled: false,
			},
			rules: [],
		},
		{
			type: FormItemTypeEnum.RADIO,
			group: 'form',
			config: {
				label: '校验状态',
				name: 'validateStatus',
			},
			properties: {
				size: 'small',
				optionType: 'button',
				buttonStyle: 'solid',
				options: [
					{
						label: '成功',
						value: 'success',
					},
					{
						label: '警告',
						value: 'warning',
					},
					{
						label: '错误',
						value: 'error',
					},
					{
						label: '验证中',
						value: 'validating',
					},
				],
				disabled: false,
			},
			rules: [],
		},
		{
			type: FormItemTypeEnum.INPUT,
			group: 'form',
			config: {
				label: '提示信息',
				name: 'help',
			},
			properties: {
				disabled: false,
				placeholder: '请输入提示信息',
			},
			rules: [],
		},
		{
			type: FormItemTypeEnum.INPUT,
			group: 'form',
			config: {
				label: '额外的提示信息',
				name: 'extra',
			},
			properties: {
				disabled: false,
				placeholder: '请输入额外的提示信息',
			},
			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: 'autoLink',
			},
			properties: {
				size: 'small',
				disabled: false,
			},
			rules: [],
		},
		{
			type: FormItemTypeEnum.INPUT,
			group: 'form',
			config: {
				label: '子元素 label htmlFor 属性',
				name: 'htmlFor',
			},
			properties: {
				disabled: false,
				placeholder: '请输入子元素 label htmlFor 属性',
			},
			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,
				placeholder: '请输入标签宽度,单位(px)',
				addonAfter: 'px',
			},
			rules: [],
		},
		{
			type: FormItemTypeEnum.INPUT_NUMBER,
			group: 'form',
			config: {
				label: '标签宽度',
				name: 'labelColSpanWidth',
			},
			properties: {
				size: 'small',
				disabled: false,
				addonBefore: 'span',
				placeholder: '请输入标签宽度.响应式span数值',
				max: 12,
				min: 1,
			},
			rules: [],
		},
	])

	const hiddenFields = computed(() => {
		return [
			...(formData.value.useFormConfig
				? ['validateTrigger', 'colon', 'labelAlign', 'labelType', 'labelColSpanWidth', 'labelColFixedWidthInPx']
				: []),
			...(formData.value.labelType === 'fixed' ? ['labelColSpanWidth'] : ['labelColFixedWidthInPx']),
		]
	})

	const emit = defineEmits<{
		'update:form-item-config': [formConfig: FormItemConfig]
	}>()
	const formData = computed({
		get: (): FormItemConfig => {
			return XEUtils.assign(
				{
					autoLink: true,
					colon: true,
					hasFeedback: false,
					labelAlign: 'right',
					labelType: 'responsive',
					useFormConfig: true,
					validateTrigger: ['blur'],
					labelCol: {
						style: {
							width: '120px',
						},
						span: 4,
						offset: 0,
					},
					labelColFixedWidthInPx: 120,
					labelColSpanWidth: 4,
				},
				XEUtils.clone(formConfig.value, true),
				formItem.value.config,
			)
		},
		set: (val) => {
			if (val.labelType === 'fixed') {
				val.labelCol = { style: { width: `${val.labelColFixedWidthInPx}px` } }
			} else {
				val.labelCol = { span: val.labelColSpanWidth }
			}
			if (val.useFormConfig) {
				delete val.validateTrigger
				delete val.colon
				delete val.labelAlign
				delete val.labelType
				delete val.labelColFixedWidthInPx
				delete val.labelColSpanWidth
				delete val.labelCol
			}
			delete (val as FormConfig).layout
			delete (val as FormConfig).hideRequiredMark
			delete (val as FormConfig).scrollToFirstError
			delete (val as FormConfig).validateOnRuleChange
			emit('update:form-item-config', val)
		},
	})
</script>
