<template>
  <div class="dargbox">

    <div class="right_button" @mousedown="mouseDown" unselectable="on" onselectstart="return false">
      <div class="button" @click="showout">
        <i :class="{'el-icon-caret-left':width!=0,'el-icon-caret-right':width==0}"></i>
      </div>
    </div>
  </div>
</template>

<script scoped>
export default {
  props: ['width'],
  data() {
    return {
      lastX: ''
    }
  },
  methods: {
    mouseDown(event) {
      if (this.width == 0) return
      document.addEventListener('mousemove', this.mouseMove)
      this.lastX = event.screenX
    },
    mouseMove(event) {
      if (this.width == 0) return
      this.$emit('widthChange', this.lastX - event.screenX)
      this.lastX = event.screenX
    },
    mouseUp() {
      this.lastX = ''
      document.removeEventListener('mousemove', this.mouseMove)
    },
    showout() {
      this.$emit('showoutWidth', 0)
    }
  },
  created() {
    document.addEventListener('mouseup', this.mouseUp)
  },
  destroyed() {
    document.removeEventListener('mouseup', this.mouseUp)
  }
}
</script>

<style>
.dargbox {
  /* height: 100%; */
}
.right_button {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  cursor: col-resize;
  width: 5px;
  /* background-color: #e4e7ed; */
  height: 100%;
  position: absolute;
  right: -5px;
  background-color: #fff;
  top: 0;
  display: flex;
  align-items: center;
  z-index: 10;
  border-left: 1px solid #e4e7ed;
}
.button {
  width: 11px;
  height: 48px;
  display: flex;
  align-items: center;
  cursor: pointer;
  border: 1px solid #e4e7ed;
  border-radius: 0 11px 11px 0;
  border-left: 1px solid #fff;
  background-color: #fff;
  transform: translateX(-1px);
}
.button i {
  margin-left: -2px;
  color: #c0c4cc;
}
</style>