<template>
  <div class="search-wrapper" style="">
    <el-form :inline="true" size="mini"
             :label-width="labelWidth"
             :model="search" class="search-form" ref="searchForm">
      <slot></slot>
      <div v-show="toggle" style="display: inline">
        <slot name="more">
        </slot>
        <div></div>
      </div>
      <el-form-item :style="searchStyle">
        <el-button type="primary" @click="query" :loading="loading">查询</el-button>
        <el-button type="" @click="reset">重置</el-button>
        <el-button type="text" @click="()=>{this.toggle = !this.toggle}" v-if="$slots.more">
          {{toggleText}}
          <i class="el-icon-arrow-down" v-show="!toggle"></i>
          <i class="el-icon-arrow-up" v-show="toggle"></i>
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'SearchWrapper',
    props: {
      search: {},
      labelWidth: {default: '80px'}
    },
    computed: {
      toggleText () {
        return this.toggle ? '收起' : '展开'
      },
      searchStyle () {
        let style = {};
        if (this.toggle) {
          style = {
            ...style,
            float: 'right',
            marginTop: '15px',
            marginBottom: '15px'
          }
        }
        return style;
      }
    },
    data () {
      return {
        toggle: false,
        loading: false,
        showMore: true,
        numberValidateForm: {
          age: '',
          type: '',
          name: '',
          enterprise: ''
        }
      }
    },
    methods: {
      query () {
        this.loading = true;
        this.$emit('query');
        setTimeout(() => {
          this.loading = false;
        }, 300)
      },
      reset () {
        this.$refs['searchForm'].resetFields();
        this.$emit('query');
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .search-wrapper {
    /*padding-bottom: 15px;*/
    .el-form-item {
      margin-bottom: 3px;
      .el-input {
        width: 192px;
      }
    }
  }
</style>
