<!-- vue3不支持defineEmits动态添加    暂时无法使用配置按钮 -->
<template>
	<div>
		<el-card :body-style="cardBodyStyle">
			<el-form v-if="formItem && formItem.length > 0" :model="form" label-width="auto" label-position="right">
				<div v-for="(itemList, indexList) in formList" :key="indexList">
					<el-row v-if="indexList==0||showAdv" style="margin-bottom: 5px;" :gutter="10">
						<el-col v-for="(item, index) in itemList" :key="index" :span="item.span">
							<!-- 	<el-form v-if="formItem && formItem.length > 0" :model="form" inline label-width="80px"
				label-position="right">
				<div v-for="(itemList, indexList) in formList" :key="indexList">
					<div v-if="indexList==0||showAdv" style="margin-bottom: 5px;"> -->
							<el-form-item :label="item.label" :prop="item.prop" style="margin-bottom: 0px; ">
								<!--文本-->
								<el-input v-if="item.type === 'input'" v-model="form[item.prop]" clearable
									placeholder="请输入" style="width:100%; ">
									<template #append v-if="item.searchButton?item.searchButton:false">
										<el-button @click="emit(item.searchCallback)">
											<el-icon>
												<Search />
											</el-icon></el-button>
									</template>
								</el-input>
								<!-- 下拉 -->
								<el-select v-if="item.type === 'select'" v-model="form[item.prop]" clearable
									style="width:100%; ">
									<el-option v-for="(option,i) in item.options" :key="i"
										:value="option[item.optionValue?item.optionValue:'value']"
										:label="option[item.optionLabel?item.optionLabel:'label']" />
								</el-select>
								<!-- 单选 -->
								<el-radio-group v-if="item.type === 'radio'" v-model="form[item.prop]"
									style="width:100%; ">
									<el-radio v-for="(option,i) in item.options" :key="i"
										:label="option[item.optionValue?item.optionValue:'value']">{{option[item.optionLabel?item.optionLabel:'label']}}
									</el-radio>
								</el-radio-group>
								<!--日期-->
								<el-date-picker v-if="item.type === 'date'" v-model="form[item.prop]" type="date"
									clearable value-format="YYYY-MM-DD" format="YYYY-MM-DD" style="width:100%; " />
								<!--日期-->
								<el-date-picker v-if="item.type === 'daterange'" v-model="form[item.prop]"
									type="daterange" clearable range-separator="至" start-placeholder="开始日期"
									end-placeholder="结束日期" value-format="YYYY-MM-DD" format="YYYY-MM-DD"
									style="width:100%; "></el-date-picker>
								<!--日期-->
								<el-date-picker v-if="item.type === 'datetimerange'" v-model="form[item.prop]"
									type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
									value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"
									style="width: 350px; " />
							</el-form-item>

						</el-col>
						<el-col :span="4">
							<el-form-item v-if="indexList==0"
								style="margin-bottom: 0px;margin-top: 5px;margin-left: 10px; width: 100%;" label="">
								<!-- <el-button type="primary" @click="seach">查询</el-button>
								<el-button @click="clearData">重置</el-button> -->
								<el-button type="primary" link @click="clear">重置 </el-button>
								<el-button type="primary" link @click="show">高级查询
									<el-icon v-if="showAdv">
										<ArrowUp />
									</el-icon>
									<el-icon v-else>
										<ArrowDown />
									</el-icon>
								</el-button>
							</el-form-item>
						</el-col>
					</el-row>
					<!-- </div> -->
				</div>
			</el-form>
			<!-- 	<div class="button">
						<el-button type="primary" @click="seach">查询</el-button>
						<el-button @click="clearData">重置</el-button>
					</div>  -->
		</el-card>
	</div>
</template>
<script setup>
	import {
		formItemContextKey
	} from 'element-plus';
	import {
		ref,
		getCurrentInstance,
		onMounted,
		reactive
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()
	import style from '@/tools/style'
	const cardBodyStyle = ref(style.card)
	onMounted(() => {
		init()
	})
	const props = defineProps({
		formItem: { // form查询项
			type: Array,
			default: () => []
		},
		formData: { // form查询数据
			type: Object,
			default: () => {}
		}
	})
	const emit = defineEmits()
	const seach = () => {
		emit('searchForm', form)
	}
	const form = reactive(JSON.parse(JSON.stringify(props.formData))) // form查询数据
	const formList = ref([])
	const span = ref(5)

	const dicTypes = ref([])
	const urls = ref([])
	const init = async  () => {
		console.log('SearchBar init()')
		var colsCount = 4
		var length = Math.ceil(props.formItem.length / colsCount)
		var arr = []
		for (var i = 0; i < length; i++) {
			arr.push([])
		}
		var col = 0
		props.formItem.forEach((item, index) => {
			col = Math.floor(index / colsCount)
			if (item.type == 'datetimerange') {
				item.span = 10
			} else {
				item.span = 5
			}
			if ((item.type == 'select' || item.type == 'radio') && item.dicType && item.dicType != null && item
				.dicType != '') {
				dicTypes.value.push(item.dicType)
			}

			if ((item.type == 'select' || item.type == 'radio') && item.url && item.url != null && item
				.url != '') {
				urls.value.push({
					'url': item.url,
					'param': item.param,
					'optionLabel': item.optionLabel,
					'optionValue': item.optionValue, 
				})
			}
			arr[col].push(item)
		})
		formList.value = arr
		
		console.log('dicTypes.value:'+JSON.stringify(dicTypes.value))
		if (dicTypes.value.length > 0) {
			getDic()
		}
		console.log('urls.value:'+JSON.stringify(urls.value))
		if (urls.value.length > 0) {
			for (var item of urls.value) {
				await getOption(item)
			}
		}
	}
	const showAdv = ref(false)
	const show = () => {
		showAdv.value = !showAdv.value
	}

	const getDic = () => {
		var url = 'framework/Common/querySelectorList'
		var param = {
			type: JSON.stringify(dicTypes.value)
		}
		proxy.$axios.get(url, param).then(response => {
			if (response.data.code == '0') {

				// console.log(response.data.data)

				for (let key in response.data.data) {
					// console.log('key：' + key)
					for (var item of props.formItem) {
						if ((item.type == 'select' || item.type == 'radio') && item.dicType && item.dicType !=
							null && item.dicType != '') {
							// console.log('item.dicType:' + item.dicType)
							if (key == item.dicType) {
								item.options = response.data.data[key]
								item.optionLabel = 'dicName'
								item.optionValue = 'dicCode'
							}
						}
					}
				}
				// console.log('props.formItem:' + JSON.stringify(props.formItem))

			} else {
				ElMessage.error('操作失败！' + response.data.msg)
			}
		})
	}

const getOption =  (item) => { // 清空搜索栏
		 var url = item.url
		 var param = item.param
		 proxy.$axios.get(url, param).then(response => {
		 	if (response.data.code == '0') {
		 		 for(var form of props.formItem){
					 if(form.url == item.url){
						 form.options = response.data.data
						 form.optionLabel = item.optionLabel 
						 form.optionValue = item.optionValue
					 }
				 }
		 	} else {
		 		ElMessage.error('操作失败！' + response.data.msg)
		 	}
		 })
	}


	const clear = () => { // 清空搜索栏
		Object.keys(form).map(key => {
			form[key] = ''
		})
	}

	defineExpose({
		form
	})
</script>

<style>
	.search-bar {
		display: flex;
		flex-direction: row;

	}

	.search-bar .form {
		display: flex;
		flex-direction: row;
	}

	.search-bar .button {
		display: flex;
		flex-direction: row;
	}


	.custom-date-picker .el-input__inner {
		width: 200px;
		/* 设置你想要的宽度 */
	}
</style>