<template>
  <!-- 顶部搜索栏 -->
  <el-row :gutter="gutter" type="flex">
    <slot name="header" />
    <template v-if="collapse">
      <slot name="body" />
    </template>
    <el-col
      :span="collapse ? showSpan : collapseSpan"
      :offset="collapse ? showOffset : collapseOffset"
      :push="collapse ? showPush : collapsePush"
      :pull="collapse ? showPull : collapsePull"
      :xs="collapse ? showXs : collapseXs"
      :sm="collapse ? showSm : collapseSm"
      :md="collapse ? showMd : collapseMd"
      :lg="collapse ? showLg : showLg"
      :xl="collapse ? showXl : collapseXl"
      :tag="tag"
    >
      <el-form-item label-width="0" class="text-right">
        <el-button
          v-if="showMore"
          type="text"
          :icon="collapse ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
          @click="collapse = !collapse"
        >更多</el-button>
        <slot name="buttons" />
      </el-form-item>
    </el-col>
  </el-row>
</template>
<script>
import props from './props'

export default {
  props,
  data() {
    return {
      collapse: false
    }
  }
}
</script>

<style>
</style>
