<template>
  <div class="column-page">
    <div class="column-page-left" :class="{ 'column-page-left-hide': !expand }">
      <div class="column-page-left-content">
        <slot name="left"></slot>
      </div>
      <div class="column-page-left-expand"
        @click="expand = !expand">
        <i :class="expand ? 'el-icon-arrow-left':'el-icon-arrow-right'"></i>
      </div>
    </div>
    <div class="column-page-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ColumnPage',
  data() {
    return {
      expand: true,
    };
  },
  mounted() {

  },
  methods: {
    
  }
}
</script>

<style lang="scss" scoped>
  .column-page {
    display: flex;
    align-items: flex-start;
    height: 100%;

    .column-page-left {
      position: relative;
      // height: 0%;

      .column-page-left-content {
        overflow: hidden;
        width: 100%;
        height: 100%;
      }

      .column-page-left-expand {
        position: absolute;
        bottom: 50%;
        right: -18px;
        width: 36px;
        height: 36px;
        background-color: rgba($color: #000000, $alpha: 0.3);
        border-radius: 50%;
        color: #fff;
        line-height: 36px;
        text-align: center;
        cursor: pointer;
        z-index: 1;
      }
      .column-page-left-expand:hover {
        background-color: rgba($color: #000000, $alpha: 0.6);
      }
    }
    .column-page-left:hover {
      .column-page-left-expand {
        background-color: rgba($color: #000000, $alpha: 0.6);
      }
    }

    .column-page-left-hide {
      width: 0;
      flex: 0;
    }

    .column-page-content {
      width: 0;
      flex: 1;
    }
  }
</style>