<template>
  <div class="search-bar-component">
    <Form :inline="true" :model="formParams">
      <form-item label="店铺名称">
        <Input v-model="formParams.name" size="mini" placeholder="店铺名称" />
      </form-item>
      <form-item label="店铺编码">
        <Input v-model="formParams.code" size="mini" placeholder="店铺编码" />
      </form-item>
      <form-item label="负责人">
        <Input v-model="formParams.duty" size="mini" placeholder="负责人" />
      </form-item>
      <form-item label="合同状态">
        <Select v-model="formParams.status.code" size="mini">
          <Option label="全部" value="NORMAL" />
          <Option label="有效" value="NORMAL" />
          <Option label="无效" value="FORBIDDEN" />
        </Select>
      </form-item>
      <form-item>
        <Button type="primary" size="mini" @click="query">查询</Button>
        <Button plain size="mini" @click="reset">重置</Button>
        <Button type="success" size="mini" @click="addManagement">新建商家</Button>
      </form-item>
    </Form>
  </div>
</template>
<script>
import { Form, FormItem, Input, Select, Option, Button } from 'element-ui'
export default {
  components: {
    Form,
    FormItem,
    Input,
    Select,
    Option,
    Button
  },
  data() {
    return {
      formParams: {
        name: '',
        code: '',
        duty: '',
        status: {
          code: ''
        }
      }
    }
  },
  methods: {
    query() {
      this.$emit('query', this.formParams)
    },
    addManagement() {
      this.$emit('addManagement')
    },
    reset() {
      this.formParams = {
        name: '',
        code: '',
        duty: '',
        status: {
          code: ''
        }
      }
    }
  }
}
</script>
<style lang="less">
.search-bar-component {
  .el-form-item {
    margin-bottom: 8px;
  }
}
</style>
<style lang="less" scoped>
.search-bar-component {
  padding: 15px 20px;
}
</style>
