<template>
  <div class="query-form-wrapper">
    <cell>
      <el-form :model="formData" :ref="el => formRef = el" inline>
        <el-space wrap size="large">
          <slot :formData="formData"></slot>
        </el-space>
      </el-form>
      <template #action>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch()">搜索</el-button>
        <el-button @click="handleReset()">重置</el-button>
      </template>
    </cell>
  </div>
</template>

<script>
import { reactive, ref } from 'vue'

export default {
  emits: ['search', 'reset'],

  props: {
    initData: Object,
  },

  setup(props, context) {
    const formRef = ref()
    const formData = reactive(props.initData || {})

    const handleSearch = () => {
      context.emit('search', formData)
    }

    const handleReset = () => {
      formRef.value.resetFields()
      context.emit('reset', formData)
    }

    return {
      formRef,
      formData,
      handleSearch,
      handleReset,
    }
  }
}
</script>

<style lang="less" scoped>
.query-form-wrapper {
  margin: 1em 0;

  .el-form--inline {
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
</style>
