<template>
  <el-aside class="inner-side" :style="{ width: asideWith }">
    <vue-draggable-resizable
      style="height:100%;padding:8px;border:none;"
      :min-width="100"
      :w="260"
      :max-width="400"
      :draggable="false"
      :handles="['mr']"
      :active="true"
      :prevent-deactivation="true"
      :parent="false"
      :prevent-active-behavior="false"
      @resizing="resize"
    >
      <el-scrollbar v-show="!collapsed" wrap-class="scrollbar-wrapper" style="height:100%">
        <slot />
      </el-scrollbar>
      <template v-slot:mr>
        <i class="el-icon-rank" />
      </template>
    </vue-draggable-resizable>
    <i v-show="!collapsed" class="el-icon-caret-left" @click="collapsed = true" />
    <i v-show="collapsed" class="el-icon-caret-right" @click="collapsed = false" />
  </el-aside>
</template>

<script>
import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
export default {
  components: { VueDraggableResizable },
  data() {
    return {
      collapsed: false,
      width: '260px'
    }
  },
  computed: {
    asideWith() {
      return this.collapsed ? '0px' : this.width
    }
  },
  methods: {
    resize(x, y, width, height) {
      this.width = width + 'px'
      this.$emit('resizing', { x, y, width, height })
    }
  }
}
</script>

<style lang="scss" scoped>
.inner-side {
  position: relative;
  height: 100%;
  padding: 8px;
  background: #fff;
  border-right: 1px solid #e0e0e0;
  overflow: hidden;

  i {
    position: absolute;
    right: 0px;
    top: calc(50% - 30px);
    color: #fff;
    background: #2e9bff;
    z-index: 2;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
  }

  ::v-deep .scrollbar-wrapper {
    overflow-x: hidden;
  }

  ::v-deep .el-input {
    padding-right: 20px;
  }

  ::v-deep .handle-mr {
    right: 9px;
    top: calc(50% + 40px);

    i {
      cursor: e-resize;
    }
  }

  ::v-deep div.handle {
    width: 0px;
    height: 0px;
    border: none;
  }
}
</style>
