<script setup lang="ts">
import { ref } from "vue";
import { BasicForm } from "/@/components/BasicForm";
import { useRenderIcon } from "../../ReIcon/src/hooks";
import { createFormData } from "./utils/create-form-data";
import { searchFormProps } from "./types";

const props = defineProps(searchFormProps);
const emit = defineEmits(["searchBtnClick", "resetBtnClick"]);

//初始表格数据
const defaultFormData = createFormData(props.formConfig.formItems);

const formData = ref({ ...defaultFormData });

//重置搜索
function handleResetClick() {
  formData.value = { ...defaultFormData };
  emit("resetBtnClick");
}

//搜索
function handleSearchClick() {
  emit("searchBtnClick", formData.value);
}
</script>

<template>
  <div class="bg-white w-99/100 pl-8 pt-4">
    <BasicForm v-bind="formConfig" v-model:form-data="formData">
      <template #action>
        <div style="width: 100%" flex gap-2>
          <el-button
            type="primary"
            :icon="useRenderIcon('search')"
            @click="handleSearchClick"
          >
            搜索
          </el-button>

          <el-button :icon="useRenderIcon('refresh')" @click="handleResetClick">
            重置
          </el-button>
          <slot name="action" />
        </div>
      </template>
    </BasicForm>
  </div>
</template>
