<template>
  <div class="collapse-block-wrap">
<!--    <div class="collapse-title" :style="getTitleStyle">-->
<!--      <div class="title-box">-->
<!--        <div class="left-name">-->
<!--          <slot name="left" />-->
<!--          <div v-show="!isShrink">-->
<!--            <slot name="shrink-info"></slot>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="right-tools">-->
<!--          <slot name="right" />-->
<!--          <span class="toggle-span" @click="handleToggleContent">{{ this.isShrink ? $Tools.$t('收起') : $Tools.$t('展开') }}</span>-->
<!--        </div>-->
<!--      </div>-->
<!--      <slot name="title"></slot>-->
<!--    </div>-->
    <el-collapse-transition>
      <div v-show="isShrink" class="collapse-block-content">
        <slot name="content"></slot>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
export default {
  name: 'CollapseBlock',
  data() {
    return {
      isShrink: true
    }
  },
  computed: {
    getIconClass() {
      return this.isShrink ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
    },
    getTitleStyle() {
      let style = null
      if (!this.isShrink) style = {
        borderBottom: 0
      }
      return style
    }
  },
  methods: {
    handleToggleContent() {
      this.isShrink = !this.isShrink
    },
    close() {
      this.isShrink = false
    }
  }
}
</script>

<style lang="scss">
  .collapse-block-wrap {
    background-color: white;
    box-shadow: 10px 10px 10px #e3e8ed;
    .collapse-title {
      .title-box {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        border-bottom: 1px solid #E8EDF0;
        height: 60px;
        background-color: #F5F5F5;
      }
      .left-name {
        display: flex;
        align-items: center;
      }
      .right-tools {
        display: flex;
        align-items: center;
        .toggle-span {
          font-size: 14px;
          color: $skyBlue;
          text-decoration: underline;
          cursor: pointer;
          @include hover-color($skyBlue, $danger);
        }
        .el-icon-arrow-down,.el-icon-arrow-up {
          font-size: 24px;
          color: $info;
          cursor: pointer;
          &:hover {
            color: #42b983;
          }
        }
      }
    }
  }
</style>
