<template>
  <el-form ref="queryFormRef" :model="queryParams" :inline="true">
    <template v-for="(item, index) in props.list" :key="item.prop">
      <el-form-item :label="item.label" :prop="item.prop">
        <!-- Label -->
        <template #label>
          {{ item.label }}
        </template>
        <!-- Input 输入框 -->
        <template v-if="item.type === 'input' || item.type === undefined">
          <el-input
            v-model="queryParams[item.prop]"
            v-bind="item.attrs"
            @keyup.enter="handleQuery"
          />
        </template>
        <!-- Select 选择器 -->
        <template v-else-if="item.type === 'select'">
          <el-select v-model="queryParams[item.prop]" v-bind="item.attrs">
            <template v-for="option in item.options" :key="option.value">
              <el-option :label="option.label" :value="option.value" />
            </template>
          </el-select>
        </template>
        <!-- TreeSelect 树形选择 -->
        <!-- <template v-else-if="item.type === 'tree-select'">
          <el-tree-select v-model="queryParams[item.prop]" v-bind="item.attrs" />
        </template> -->
        <!-- DatePicker 日期选择器 -->
        <!-- <template v-else-if="item.type === 'date-picker'">
          <el-date-picker v-model="queryParams[item.prop]" v-bind="item.attrs" />
        </template> -->
      </el-form-item>
    </template>
    <el-form-item>
      <el-button type="primary" icon="search" @click="handleQuery(1)">搜索</el-button>
      <el-button icon="refresh" @click="handleQuery(2)">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import type { FormInstance } from "element-plus";
// 定义接收的属性
const props = defineProps<{
  list: any;
}>();
// 搜索表单数据
const queryParams = reactive<any>({});
// 重置操作
const queryFormRef = ref<FormInstance>();

// 自定义事件
const emit = defineEmits<{
  queryClick: [queryParams: any];
}>();
// 查询/重置 操作
function handleQuery(index: number) {
  if (index == 2) {
    queryFormRef.value?.resetFields();
  }
  emit("queryClick", queryParams);
}
</script>

<style lang="scss" scoped></style>
