<template>
	<el-button type="primary" plain @click="handleAdd">打开表单</el-button>
	<el-dialog :close-on-click-modal="false" draggable title="编辑" v-model="dialogVisible" width="1300px" top="5vh">
		<FormBox ref="searchBarRef" :formItem="formItem" :formData="form"></FormBox>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="success" @click="handleSave(ruleFormRef)">保存</el-button>
				<el-button type="danger" @click="handleCancelSave">取消</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script setup>
	import FormBox from '@/components/FormBox.vue'

	import {
		ref,
		onMounted,
		getCurrentInstance
	} from 'vue'

	const {
		proxy
	} = getCurrentInstance()

	import tools from '@/tools'
	const cardBodyStyle = ref(tools.style.card)
	onMounted(() => {

	}) 

	const dialogVisible = ref(false)

	const handleAdd = () => {
		dialogVisible.value = true
	}
	const form = ref({
		birthDate: '',
		type: '',
		code: '',
		name: '',
		sex: '',
		contractType: '',
		contractFlag: '',
		addTime: ['', '']
	})
	// const formItem = ref([{
	// 		prop: 'name',
	// 		type: 'select',
	// 		label: '姓名',
	// 		url: 'exp/Search/xml',
	// 		param: {
	// 			params: JSON.stringify({
	// 				birthDate: '',
	// 				type: '',
	// 				code: '',
	// 				name: '',
	// 				addTime: ['', '']
	// 			})
	// 		},
	// 		optionLabel: 'name',
	// 		optionValue: 'code'
	// 	},
	// 	{
	// 		prop: 'birthDate',
	// 		type: 'date',
	// 		label: '生日'
	// 	},
	// 	{
	// 		prop: 'age',
	// 		type: 'input',
	// 		label: '年龄',
	// 		searchButton: true,
	// 		searchCallback: 'showPop'
	// 	},
	// 	{
	// 		prop: 'type',
	// 		type: 'select',
	// 		label: '类型',
	// 		optionLabel: 'key',
	// 		optionValue: 'val',
	// 		options: [{
	// 				key: '职工',
	// 				val: '1'
	// 			},
	// 			{
	// 				key: '经理',
	// 				val: '2'
	// 			},
	// 			{
	// 				key: '外协',
	// 				val: '0'
	// 			}
	// 		]
	// 	},
	// 	{
	// 		prop: 'contractType',
	// 		type: 'select',
	// 		label: '合同类型',
	// 		dicType: 'CONTRACT_TYPE',
	// 	}, {
	// 		prop: 'contractFlag',
	// 		type: 'radio',
	// 		label: '合同标记',
	// 		dicType: 'CONTRACT_FLAG',
	// 	},
	// 	{
	// 		prop: 'sex',
	// 		type: 'radio',
	// 		label: '性别',
	// 		options: [{
	// 				label: '男',
	// 				value: '1'
	// 			},
	// 			{
	// 				label: '女',
	// 				value: '0'
	// 			}
	// 		]
	// 	}, {
	// 		prop: 'birthDate1',
	// 		type: 'daterange',
	// 		label: '生日12'
	// 	},
	// 	{
	// 		prop: 'addTime',
	// 		type: 'datetimerange',
	// 		label: '添加时间'
	// 	}, 
	// ]) 
	const formItem = ref([{
			type: 'select',
			label: '姓名',
		},
		{ 
			type: 'date',
			label: '生日'
		},
		{ 
			type: 'input',
			label: '年龄',
			searchButton: true, 
		},
		{ 
			type: 'select',
			label: '类型', 
		},
		{ 
			type: 'select',
			label: '合同类型', 
		}, { 
			type: 'radio',
			label: '合同标记', 
		},
		{ 
			type: 'radio',
			label: '性别', 
		}, { 
			type: 'daterange',
			label: '生日12'
		},
		{ 
			type: 'datetimerange',
			label: '添加时间'
		}, 
	])
	
	
</script>

<style>
</style>