<template>
  <div>
    <el-form
      ref="queryForm"
      class="query_form"
      :inline="true"
      :model="model"
      :label-width="labelWidth"
      size="small"
      @keyup.enter.native="$emit('query')"
    >
      <slot></slot>
    </el-form>
    <div class="search">
      <el-button
        type="primary"
        icon="el-icon-search"
        size="small"
        @click="$emit('query')"
        >搜索</el-button
      >
      <el-button icon="el-icon-refresh" size="small" @click="resetQuery"
        >重置</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  props: {
    labelWidth: {
      type: String,
      default: "80px",
    },
    model: {
      type: Object,
      required: true,
    },
  },
  methods: {
    resetQuery() {
      this.resetForm("queryForm");
      this.$emit("query");
    },
  },
};
</script>

<style scoped>
.query_form {
  display: inline-block;
  width: calc(100% - 200px);
}
.search {
  width: 190px;
  height: 100%;
  float: right;
}
</style>
