<template>
  <el-card class="m-b card-layout" :class="{hidden: !isShow}">
    <div slot="header">
      <span>{{title}}</span>
      <el-button class="pull-right operate" type="text" @click="isShow = !isShow">{{isShow ? '收起' : '展开'}}</el-button>
      <slot name="operate"></slot>
    </div>
    <slot></slot>
  </el-card>
</template>

<script>
export default {
    props: {
        title: {
            type: String
        }
    },
    data () {
        return {
            isShow: true
        };
    }
};
</script>
<style lang="scss" scoped>
  .card-layout{
    /deep/ .operate {
      margin-top: -7px;
    }
    /deep/ .el-card__body{
      padding-bottom: 0;
    }
    &.hidden {
     /deep/  .el-card__header{
        border-bottom: none;
      }
     /deep/  .el-card__body{
        display: none;
      }
    }
  }
</style>
