<template>
	<div>
		<el-card :body-style="cardBodyStyle">
			<el-form label-width="80px">
				<div>
					<el-form-item label="固定内容" style="margin-bottom: 0px;">
						<Selector :value="selectValue1" :width="200" :options="options" optionValue="value"
							optionLabel="key" @change="typeChange1"></Selector>
						{{selectValue1}}
					</el-form-item>
				</div>
				<div>
					<el-form-item label=" " style="margin-bottom: 0px;">

					</el-form-item>
				</div>
				<div>
					<el-form-item label="数据字典" style="margin-bottom: 0px;">
						<Selector :value="selectValue2" :width="200" :dicType="dicType" @change="typeChange2">
						</Selector>
						{{selectValue2}}
					</el-form-item>
				</div>
				<div>
					<el-form-item label=" " style="margin-bottom: 0px;">

					</el-form-item>
				</div>
				<div>
					<el-form-item label="自定义" style="margin-bottom: 0px;">
						<Selector :value="selectValue3" :width="200" :url="url" :param="param"
							:optionLabel="optionLabel" :optionValue="optionValue" @change="typeChange3">
						</Selector>
						{{selectValue3}}
					</el-form-item>
				</div>
			</el-form>
		</el-card>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		getCurrentInstance
	} from 'vue'

	import Selector from '@/components/Selector.vue'

	const selectValue1 = ref('')
	const options = ref([{
		key: '选项1',
		value: 'option1'
	}, {
		key: '选项2',
		value: 'option2'
	}])
	const typeChange1 = (val) => {
		selectValue1.value = val
	}

	const dicType = ref('CONTRACT_TYPE')
	const selectValue2 = ref('')
	const typeChange2 = (val) => {
		selectValue2.value = val
	}



	const url = ref('exp/Search/xml')
	const param = ref({
		params: JSON.stringify({
			birthDate: '',
			type: '',
			code: '',
			name: '',
			addTime: ['', '']
		})
	})
	const optionLabel = 'name'
	const optionValue = 'code'
	const selectValue3 = ref(' ')
	const typeChange3 = (val) => {
		selectValue3.value = val
	}
</script>

<style>
</style>