<template>
  <div>
    <div ref="box" :class="classes">
      <slot></slot>
    </div>
    <div class="block-control" @click="toggle" v-if="hasMore">
      <template v-if="isOpen"> <i class="el-icon-caret-top"></i><span>收起</span> </template>
      <template v-else> <i class="el-icon-caret-bottom"></i><span>展开</span> </template>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      max: 300,
      hasMore: false,
      isOpen: false
    }
  },
  computed: {
    classes() {
      return {
        'has-more': this.hasMore && !this.isOpen
      }
    }
  },
  methods: {
    init() {
      const height = this.$refs.box.offsetHeight
      this.hasMore = height > this.max
    },
    toggle() {
      this.isOpen = !this.isOpen
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="scss">
.block-control {
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding-top: 5px;
  color: #d3dce6;
  cursor: pointer;
  border-top: 1px solid #eaeefb;

  i {
    font-size: 16px;
  }
  span {
    display: none;
    padding-left: 5px;
    font-size: 12px;
  }
  &:hover {
    color: #1f2f3d;
    span {
      display: block;
    }
  }
}
.has-more {
  max-height: 300px;
  overflow: hidden;
}
</style>
