<template>
    <div v-if="formData.length" class="table-search" style="display: flex">
        <div style="flex: 2">
            <el-form ref="formRef" :model="searchParam" :inline="true">
                <template v-for="item in formData" :key="item.prop">
                    <!-- :label="item.label + ':'"  -->
                    <el-form-item
                        :prop="item.prop"
                        :label-width="item.labelWidth ? item.labelWidth : '120px'"
                        class="form-item"
                        :label="item.label"
                    >
                        <SearchFormItem :item="item" :search-param="searchParam" :search="search" />
                    </el-form-item>
                </template>
            </el-form>
        </div>
        <div style="display: flex">
            <el-button type="primary" @click="search" style="margin-bottom: 0"> 搜索 </el-button>
            <el-button @click="reset" style="margin-bottom: 0">重置</el-button>
        </div>
    </div>
</template>
<script setup lang="ts" name="SearchForm">
import SearchFormItem from "./components/SearchFormItem.vue";
interface ProTableProps {
    formData?: any[]; // 搜索配置列
    searchParam?: any; // 搜索参数
    search: (params: any) => void; // 搜索方法
    reset: (params: any) => void; // 重置方法
}
// 默认值
withDefaults(defineProps<ProTableProps>(), {
    formData: () => [],
    searchParam: {},
    search: () => {},
    reset: () => {}
});
</script>
<style lang="scss" scope>
@import "./index.scss";
</style>
