<template>
  <div class="n-app-container">
    <el-card v-if="!showFull" shadow="never" style="margin-bottom:20px;">
      <slot name="n_header" />
    </el-card>
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <slot name="n_option" />
        <div style="float:right">
          <el-link v-if="!showFull" type="primary" @click="showHeader">隐藏搜索</el-link>
          <el-link v-if="showFull" type="primary" @click="hideHeader">显示搜索</el-link>
        </div>
      </div>
      <slot />
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'BaseList',
  data() {
    return {
      showFull: false
    }
  },
  methods: {
    showHeader() {
      this.showFull = true
      this.$emit('showHeader')
    },
    hideHeader() {
      this.showFull = false
      this.$emit('hideHeader')
    }
  }
}
</script>
