<template>
  <div class="box" ref="boxRef">
    <!--      左侧内容，默认展示70%，默认最小宽度310px-->
    <div v-if="isShowsLeft" class="left" ref="leftRef">
      <slot name="left"></slot>
    </div>
    <div v-if="isShowsRight && isShowsLeft" class="resize">
      <img src="./drag.png" ref="resizeRef" style="width: 30px;height: 30px;position: absolute;top: 280px;left: 50%;transform: translateX(-15px)" alt="">
    </div>
    <div v-if="isShowsRight" class="right" ref="rightRef">
      <!--      右侧内容，默认展示30%，默认最小宽度310px-->
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "zydx-variable-box",
  props: {
    isShowsRight: {
      type: Boolean,
      default: true
    },
    isShowsLeft: {
      type: Boolean,
      default: true
    },
    leftInitWidth:{
      type: Number,
      default: 310
    },
    leftMinWidth:{
      type: Number,
      default: 0
    },
    rightMinWidth:{
      type: Number,
      default: 0
    },
    isPercent: {
      type: Boolean,
      default: false
    },
  },
  watch: {
    isShowsRight: {
      handler: function (v) {
        setTimeout(() => {
          if (this.isShowsRight) {
            this.handleResize()
          } else {
            this.$refs.leftRef.style.width = '100%'
          }
        }, 200)
      },
      immediate: true,
      deep: true
    },
    isShowsLeft: {
      handler: function (v) {
        setTimeout(() => {
          if (this.isShowsLeft) {
            this.handleResize()
          } else {
            this.$refs.rightRef.style.width = '100%'
          }
        }, 200)
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {};
  },
  mounted() {
  },
  methods: {
    handleResize() {
      // 获取Dom节点
      const boxDom = this.$refs.boxRef,
          leftDom = this.$refs.leftRef,
          resizeDom = this.$refs.resizeRef,
          rightDom = this.$refs.rightRef;
      if (resizeDom) {
        const maxWidth = boxDom.clientWidth - resizeDom.offsetWidth; // 左右两边区域的总宽度 = 外层容器宽度 - 中间区域拖拉框的宽度
        leftDom.style.width = `${this.isPercent?
            this.leftInitWidth<=0||this.leftInitWidth>=100 ? 30 : this.leftInitWidth
            : this.leftInitWidth}${this.isPercent? '%' : 'px'}`
        rightDom.style.width = `${this.isPercent?
            this.leftInitWidth<=0||this.leftInitWidth>=100 ? 70 : 100-this.leftInitWidth
            : maxWidth-this.leftInitWidth}${this.isPercent? '%' : 'px'}`
        /*leftDom.style.width = '50%'
        rightDom.style.width = '50%'*/
        resizeDom.onmousedown = e => {
          const startX = e.clientX; // 记录坐标起始位置
          leftDom.left = leftDom.offsetWidth; // 左边元素起始宽度
          document.onmousemove = e => {
            const endX = e.clientX; // 鼠标拖动的终止位置
            let moveLen = leftDom.left + (endX - startX); // 移动的距离 =  endX - startX，左边区域最后的宽度 = resizeDom.left + 移动的距离
            // 限制左边区域的最小宽度为 leftMinWidth
            if (moveLen < this.leftMinWidth) {
              moveLen = this.leftMinWidth;
            }
            // 右边区域最小宽度为 rightMinWidth
            if (moveLen > maxWidth - this.rightMinWidth) {
              moveLen = maxWidth - this.rightMinWidth;
            }
            leftDom.style.width = (moveLen / maxWidth) * 100 + "%"; // 设置左边区域的宽度，通过换算为百分比的形式，实现窗体放大缩小自适应
            rightDom.style.width = ((maxWidth - moveLen) / maxWidth) * 100 + "%"; // 右边区域 = 总大小 - 左边宽度 - 拖动条宽度
          };
          document.onmouseup = () => {
            document.onmousemove = null;
            document.onmouseup = null;
            resizeDom.releaseCapture && resizeDom.releaseCapture(); // 鼠标捕获释放
          };
          resizeDom.setCapture && resizeDom.setCapture(); // 启用鼠标捕获
          return false;
        };
      }
    }
  }
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  box-sizing: border-box;
}
.left {
  width: 50%;
}
.resize {
  position: relative;
  width: 10px;
  cursor: col-resize;
  background-size: cover;
  background-position: center;
  border-right: 2px solid #dcdfe6;
  border-left: 2px solid #dcdfe6;
  z-index: 999;
}
.resize:hover {
  background-color: white;
}
.right {
  width: 50%;
}
</style>
