<template>
	<div class="card table-search" v-if="columns.length">
		<el-form :inline="true" style="display: flex; flex-wrap: wrap" ref="formRef" :model="searchParam">
			<div v-for="(item, index) in columns" class="girdItem" :key="item.prop">
				<el-form-item :label="`${item.label} `">
					<SearchFormItem :column="item" :searchParam="searchParam" />
				</el-form-item>
			</div>

			<!-- </GridItem> -->
			<div class="operation">
				<el-button type="primary" @click="search">查询</el-button>
				<el-button style="background-color: #ffb750; color: #fff" v-if="onReset" @click="reset">刷新</el-button>
				<slot name="formButton" style="margin: 0 10px"></slot>
			</div>
		</el-form>
	</div>
</template>
<script setup lang="ts" name="SearchForm">
import { computed, ref } from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { BreakPoint } from "@/components/Grid/interface";
import SearchFormItem from "./components/SearchFormItem.vue";

interface ProTableProps {
	columns?: ColumnProps[]; // 搜索配置列
	searchParam?: { [key: string]: any }; // 搜索参数
	searchCol: number | Record<BreakPoint, number>;
	// addButton?: boolean; // 是否显示增加按钮
	search: (params: any) => void; // 搜索方法
	reset: (params: any) => void; // 重置方法
	onReset?: Boolean;
}

// 默认值
const props = withDefaults(defineProps<ProTableProps>(), {
	columns: () => [],
	searchParam: () => ({})
});

// 获取响应式断点
const gridRef = ref();
</script>
<style lang="scss" scoped>
// .girdItem {
// 	padding-top: 6px;
// }
:deep(.el-form .el-form-item__content .el-range-editor) {
	width: 200px;
}
.card {
	background-color: #092945;
	box-shadow: none;
}
// :deep(.el-form-item--default) {
// 	margin-bottom: 0;
// }
// .table-search :deep(.operation) {
// 	margin-bottom: 0;
// }
</style>
