<template>
  <div class="resizeContainer" ref="resizeContainer" :class="customClass ? customClass : ''">
    <div class="resizable">
      <i class="change-icon"  @click="changeRight">{{rt +( show ? '收起' : '展开')}}</i>
      <div
        class="inner-box"
        ref="inner"
        :style="{
          width: show ? '100%' : `calc(100% + ${leftW}px)`,
          transform: show ? `translateX(0px)` : `translateX(-${leftW}px)`,
          transition: 'transform 0.3s linear',
        }"
      >
        <div class="resize-left" :style="{ width: leftW + 'px' }">
          <slot name="left"></slot>
        </div>
        <div class="resizeor-box" v-show="show">
          <div class="resizeor" style="display:none">1</div>
        </div>
        <div class="resize-right">
          <div class="right-l">
             <slot name="center"></slot>
          </div>
          <div class="right-r" :class="showl ? '' : 'hidden'">
             <slot name="right"></slot>
          </div>
        </div>
      </div>
       <i v-if="showL" class="change-icon knowledge-icon" @click="changeLeft">{{lt}}</i>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    customClass: {
      type: String,
      default: ''
    },
    minL: {
      type: Number,
      default: 200
    },
    lt: { // 左边除展开收起的文本
      type: String,
      default: '展开'
    },
    rt: { // 右边除展开收起的文本
      type: String,
      default: ''
    },
    showL: { // 是否显示左边的收起展开按钮
      type: Boolean,
      default: true
    },
    isShowL: {
      type: Boolean,
      default: false
    }
  },
  name: 'SpResizeContainer',
  data () {
    return {
      isResize: false,
      lastDownXX: 0,
      show: false,
      leftW: 200,
      rightW: 200,
      innerWidth: '',
      showl: false
    }
  },
  watch: {
    show (v) {
      const width = this.$refs.inner.offsetWidth
      this.innerWidth = (v ? width : width + this.leftW) + 'px'
    },
    isShowL (v) {
      console.log(v)
      this.showl = v
    }
  },
  created () {
     console.log(this.$attrs)
    this.leftW = this.minL
    this.$nextTick(() => {
      const width = this.$refs.inner.offsetWidth
      this.innerWidth = (this.show ? width : width + this.leftW) + 'px'
    })
  },
  methods: {
     changeLeft () {
      this.$emit('lc')
    },
    changeRight () {
      this.show = !this.show
      this.$emit('rc', this.show)
    },
    dragContainer () {
      const container = document.getElementById('resizeContainer')
      const left = document.querySelector('.resize-left')
      const right = document.querySelector('.resize-right')
      const resizeor = document.querySelector('.resizeor')
      const resizeBox = document.querySelector('.resizeor-box')
      resizeor.onmousedown = (e) => {
        const startX = e.clientX
        resizeBox.left = resizeBox.offsetLeft
        document.onmousemove = (e) => {
          console.log(this)
          const endX = e.clientX
          let moveLen = resizeBox.left + (endX - startX)
          const maxT = (container.clientWidth - resizeBox.offsetWidth) / 2
          if (moveLen < this.minL) moveLen = this.minL
          if (moveLen > maxT) moveLen = maxT
          resizeBox.style.left = moveLen
          left.style.width = moveLen + 'px'
          this.leftW = moveLen
          right.style.width = container.clientWidth - moveLen - 5 + 'px'
        }
        document.onmouseup = (e) => {
          document.onmousemove = null
          document.onmouseup = null
          resizeor.releaseCapture && resizeor.releaseCapture()
        }
        resizeor.setCapture && resizeor.setCapture()
        return false
      }
    }
  },
  mounted () {
    this.dragContainer()
  }
}
</script>
<style scoped lang="less">
.resizeContainer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  .resizable {
  width: 100%;
  height: 100%;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: hidden;
  .inner-box {
    height: 100%;
    display: flex;
    overflow-x: hidden;
  }
  .change-icon {
    cursor: pointer;
    font-style: normal;
    text-align: center;
    font-size: 12px;
    font-family: "PingFangSC, PingFangSC-Regular";
    color: #9197a4;
    display: inline-block;
    width: 20px;
    padding: 5px 0;
    line-height: 14px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    margin-top: -45px;
    left: -20px;
    z-index: 888;
    border-top: 1px solid #c7cfe0;
    border-left: 1px solid #c7cfe0;
    border-bottom: 1px solid #c7cfe0;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
  }
  .change-icon.knowledge-icon {
    left: unset;
    right: -20px;
    border-left: none;
    border-right: 1px solid #c7cfe0;
    border-top-left-radius: none;
    border-bottom-left-radius: none;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
  }
  .resize-left {
    // background-color: pink;
    //  background: #e6e7ec;
    font-size: 40px;
    overflow: hidden;
  }
  .resize-right {
    width: 100%;
    flex: 1;
    overflow: hidden;
    // background-color: #ddd;
    box-sizing: border-box;
    display: flex;
    .right-l {
      flex: 1;
    }
    .right-r {
      // margin-right: ;
      background-color: pink;
    }
    .right-r.hidden {
      width: 0;
      overflow: hidden;
      transition:  width 0.3s;
    }
  }
  .resizeor-box {
    height: 100%;
    width: 12px;
    position: relative;
  }
  .resizeor {
    height: 20px;
    cursor: w-resize;
    background-color: orange;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}
}

</style>
