<template>
	<div class="search-box">
		<el-form
			ref="ruleFormRef"
			:model="ruleForm"
			:inline="true"
			:class="class"
			:show-message="false"
			:label-width="120"
			label-position="right"
		>
			<slot name="cascader"></slot>
			<template v-for="(item, index) in FormData" :key="item.prop">
				<!-- 这是一条换行线 -->
				<!-- <div v-if="index == brIndex" style="width: 100%"></div> -->
				<el-form-item
					:label="item.label"
					:prop="item.prop"
					:label-width="item.labelWidth"
					:rules="item.rules"
					:error="item.error"
					:show-message="item.showMessage ? item.showMessage : false"
					:inline-message="item.inlineMessage"
					:style="item.style"
					:required="item.required"
					:class="item.class"
				>
					<template v-if="item.type === 'input'">
						<el-input
							:style="
								item.inputWidth
									? item.inputWidth
									: 'width: 160px'
							"
							v-model.trim="ruleForm[`${item.prop}`]"
							:placeholder="item.placeholder"
							@input="valueChange(item)"
							:disabled="item.disabled"
							maxlength="255"
							on
						>
						</el-input>
						<template v-if="item.txt">
							<span style="padding-left: 8px">{{
								item.txt
							}}</span>
						</template>
					</template>
					<!-- @change="valueChange($event, item.prop)" -->
					<template v-if="item.type === 'textarea'">
						<el-input
							v-model.trim="ruleForm[`${item.prop}`]"
							:placeholder="item.placeholder"
							type="textarea"
							:disabled="item.disabled"
							maxlength="255"
							@change="valueChange($event, item.prop)"
						>
						</el-input>
					</template>
					<template v-if="item.type === 'select'">
						<el-select
							v-model="ruleForm[`${item.prop}`]"
							:placeholder="item.placeholder"
							:style="item.style"
							clearable
							@change="valueChange($event, item.prop)"
							:disabled="item.disabled"
						>
							<el-option
								@click="
									handleSelectOotionClick(
										ruleForm[`${item.prop}`],
										item.prop
									)
								"
								:label="option.label"
								:value="option.value"
								v-for="option in item.options"
								:key="option.label"
							/>
						</el-select>
					</template>
					<template v-if="item.type === 'cascader'">
						<el-cascader
							:disabled="item.disabled"
							:options="item.options"
							:show-all-levels="false"
							class="click-cell-ipt-c"
							clearable
							:props="optionProps"
							:placeholder="item.placeholder"
							style="font-size: 12px"
							v-model="ruleForm[`${item.prop}`]"
							@change="cascaderChange(ruleForm[`${item.prop}`])"
							ref="classifyRef"
						/>
					</template>
					<!-- 远程搜索下拉框 -->
					<template v-if="item.type === 'selectRemote'">
						<el-select
							v-model="ruleForm[`${item.prop}`]"
							:placeholder="item.placeholder"
							clearable
							remote
							reserve-keyword
							filterable
							:remote-method="
								(query) => {
									remoteMethod(query, item.prop);
								}
							"
							:disabled="item.disabled"
						>
							<el-option
								@click="
									handleSelectOotionClick(
										ruleForm[`${item.prop}`],
										item.prop
									)
								"
								:label="option.label"
								:value="option.value"
								v-for="option in item.options"
								:key="option.label"
							/>
						</el-select>
					</template>
					<!-- 单个日期选择 -->
					<!-- @update:modelValue="valueChange($event, item.prop)" -->
					<template v-if="item.type === 'date'">
						<el-date-picker
							:disabled="item.disabled"
							v-model="ruleForm[`${item.prop}`]"
							:type="item.type"
							:placeholder="item.placeholder"
							:clearable="false"
							format="YYYY-MM-DD"
							value-format="YYYY-MM-DD"
						/>
					</template>
					<!-- 开始-结束-日期选择器 -->
					<template v-if="item.type === 'daterange'">
						<el-date-picker
							v-model="ruleForm[`${item.prop}`]"
							:type="item.type"
							:start-placeholder="item.startPlaceholder"
							:end-placeholder="item.endPlaceholder"
							:defaultTime="item.value"
							format="YYYY-MM-DD"
							value-format="YYYY-MM-DD"
						/>
					</template>
					<template v-if="item.type === 'radio'">
						<el-radio-group v-model="ruleForm[`${item.prop}`]">
							<template
								v-for="radio in item.radios"
								:key="radio.label"
							>
								<el-radio :label="radio.label" size="large">{{
									radio.name
								}}</el-radio>
							</template>
						</el-radio-group>
					</template>
					<!-- 复选框 -->
					<template v-if="item.type === 'checked'">
						<el-checkbox-group v-model="ruleForm[`${item.prop}`]">
							<el-checkbox
								:checked="checked.value"
								:label="checked.label"
								v-for="checked in item.checkeds"
								:key="checked.name"
							/>
						</el-checkbox-group>
					</template>
				</el-form-item>
			</template>
			<slot name="upImg"></slot>
		</el-form>
	</div>
</template>

<script setup>
import { reactive, ref, toRefs } from 'vue';
// import { DocumentCopy } from '@element-plus/icons-vue';
const ruleFormRef = ref();

const props = defineProps({
	FormData: Array,
	resetForm: Function,
	submitForm: Function,
	cascaderChange: Function,
	valueChange: Function,
	handleSelectOotionClick: Function,
	// remoteMethod: Function,
	ruleForm: Object,
});
const classifyRef = ref();
const emits = defineEmits(['remoteMethod']);
const state = toRefs(props);
const { ruleForm, FormData } = state;

const remoteMethod = (val, name) => {
	emits('remoteMethod', {
		val,
		name,
	});
};
//表单改变事件，用于没有提交按钮的
const valueChange = (item) => {
	if (!item.reg) {
		return;
	}
	emits('valueChange', item);
};
const handleSelectOotionClick = (name, value) => {};
</script>
<style lang="scss" scope>
.search-box {
	display: flex;
	width: 900px;
	margin: 10px auto;
	.form-item {
		width: 280px;
		margin-bottom: 0;
	}
}
</style>
