<template>
  <div class="box">
    <div class="box-content" :class="{'isHidden':!isExpand}" :style="isExpand?{}:contentStyle">
      <slot></slot>
    </div>
    <div class="footer" :style="footerStyle">
      <el-button type="text" v-if="isExpand" @click="$emit('update:isExpand',!isExpand)" icon="el-icon-caret-top">收缩</el-button>
      <el-button type="text" v-else @click="$emit('update:isExpand',!isExpand)"  icon="el-icon-caret-bottom">展开</el-button>
    </div>

  </div>
</template>


<script>
export default {
  name: "index",
  props: {
    contentStyle: {
      type: Object,
      default: () => {
      }
    },
    footerStyle: {
      type: Object,
      default: () => {
      }
    },
    isExpand: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {

    }
  },
}
</script>


<style scoped lang="scss">
.box {
  width: 100%;


  .box-content {
    z-index: 1000;
    width: 100%;
    height: 100%;
  }

  .isHidden {
    overflow: hidden;
  }
}

.footer {
  display: block;
  cursor: pointer;
  text-align: end;
  border-top: 1px solid #f8f8f8;
  width: 100%;
}
</style>
