<template>
  <div class="main-query-box" :class="queryShow?'':'queryShow'">
    <el-form label-width="90px" size="small" class="main-query-form">
      <slot></slot>
      <div class="clear"></div>
      <el-form-item size="large">
        <el-button type="primary" size="small" @click="submit">筛选</el-button>
      </el-form-item>
    </el-form>
    <div class="main-query-action" @click="queryShow =!queryShow "><i class="el-icon-arrow-up"></i></div>
  </div>
</template>

<script>
  export default {
    name: "searchForm",
    props: {
      labelWidth: {
        type: Number,
        default: 90
      }
    },
    data() {
      return {
        queryShow: true
      }
    },
    methods: {
      /**
       * 触发搜索事件
       */
      submit() {
        this.$emit('on-search');
      }
    }
  }
</script>

<style scoped>

</style>
