<template>
  <el-form v-show="showSearch" ref="queryForm" :model="queryParams" size="small" :inline="true" label-width="68px">
    <el-form-item label="车牌号码" prop="vehicleNumber">
      <el-input
        class="filter-input"
        v-model="queryParams.vehicleNumber"
        placeholder="请输入车牌号码"
        clearable
        @keyup.enter.native="handleQuery"
      />
    </el-form-item>
    <el-form-item label="品牌型号" prop="vehicleBrand">
      <el-input
        class="filter-input"
        v-model="queryParams.vehicleBrand"
        placeholder="请输入品牌型号" 
        clearable
        @keyup.enter.native="handleQuery"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      <el-button icon="el-icon-refresh" size="mini" @click="handleReset">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  name: 'Search',
  props: {
    showSearch: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      queryParams: {
        vehicleNumber: '',
        vehicleBrand: ''
      }
    }
  },
  methods: {
    handleQuery() {
      this.$emit('search', { ...this.queryParams })
    },
    handleReset() {
      this.$refs.queryForm.resetFields()
      this.handleQuery()
      this.$emit('reset')
    }
  }
}
</script>
