<template>
  <el-row style="background-color: #fff; padding: 10px 10px; margin: 0px 0px 10px 0px; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
    <el-col :span="20">
      <el-row>
        <slot name="base" />
      </el-row>

      <el-row>
        <el-collapse-transition>
          <div v-show="isCollapse">
            <slot name="more" />
          </div>
        </el-collapse-transition>
      </el-row>
    </el-col>

    <el-col v-if="showMore && isCollapse" :span="2" style="line-height: 40px; text-align: right;">
      <el-button icon="el-icon-arrow-up" @click="changeCollapse">收起</el-button>
    </el-col>
    <el-col v-if="showMore && !isCollapse" :span="2" style="line-height: 40px; text-align: right;">
      <el-button icon="el-icon-arrow-down" @click="changeCollapse">更多
      </el-button>
    </el-col>
    <el-col v-if="!showMore" :span="2">&nbsp;</el-col>
    <el-col :span="2" style="line-height: 40px; text-align: right;">
      <el-button icon="el-icon-search" type="primary" plain @click="search">搜索</el-button>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: 'LayoutSearchWhiteBoard',
  props: {
    showMore: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      isCollapse: false // 是否展开更多
    }
  },
  methods: {
    changeCollapse () {
      this.isCollapse = !this.isCollapse
    },
    search () {
      this.$emit('search')
    }
  }
}
</script>

<style scoped>
</style>
