<template>
    <!-- 双视图 -->
    <div class="myView" :style="{ 'flex-direction': direction }" ref="myView">
      <slot name="left" class="myView_Left"></slot>
      <div :class="className" data-type="mouse" @mousedown="mousedown" v-show="showView"></div>
      <slot name="right" class="myView_Right"></slot>
    </div>
</template>
  
  <script>
  export default {
    props: {
      position: {
        default: 'row'
      },
      showView:{
        default:true
      },
      disabled:{
        default:false
      }
    },
    data() {
      return {
        direction: null,
        className: 'myView_Middle',
      }
    },
    watch: {
      position() {
        this.directionRule()
      },
      showView(){
        this.getShow()
      },
      disabled(){
        this.getMouse()
      }
    },
    mounted() {
      this.directionRule()
      this.getShow()
      this.getMouse()
      window.addEventListener('resize',this.EventListener)
    },
    methods: {
      // 窗口缩放，内容等比例缩放
      EventListener() {
        if(!this.showView){
          return
        }
        var dom = this.$refs.myView
          let len = dom.childNodes.length
          for (var i = 0; i < len; i++) {
            if (dom.childNodes[i].getAttribute('data-type') && dom.childNodes[i].getAttribute('data-type') == 'mouse') {
              if (this.direction == 'row' || this.direction == 'row-reverse') {
                dom.childNodes[i].style.width = '5px'
              } else {
                dom.childNodes[i].style.width = '100%'
              }
            } else {
              if (this.direction == 'row' || this.direction == 'row-reverse') {
                dom.childNodes[i].style.width = (dom.childNodes[i].clientWidth / (dom.clientWidth - 5)) * 100 + '%'
              } else {
                dom.childNodes[i].style.height = (dom.childNodes[i].clientHeight / (dom.clientHeight - 5)) * 100 + '%'
              }
  
            }
          }
      },
      getShow(){
        var dom = this.$refs.myView
        var display = this.showView?'block':'none'
        if(!this.showView){
            dom.childNodes[0].style.width = '100%'
        }else{
          dom.childNodes[0].style.width = '100%'
          dom.childNodes[2].style.width = '100%'
        }
        dom.style.setProperty('--displays',`${display}`)
      },
      getMouse(){
        var dom = this.$refs.myView
        var dom2 = dom.querySelector('[data-type="mouse"]')
        if(this.disabled){
            dom2.classList.add('disabled')
        }else{
            if(dom2.classList.contains('disabled')){
                dom2.classList.remove('disabled')
            }
            
        }
      },
      // 排列方向
      directionRule() {
        var a = ['row', "row-reverse", "column", "column-reverse"]
        if (a.indexOf(this.position) == -1) {
          this.direction = 'row'
        } else {
          this.direction = this.position
        }
  
        if (this.direction == 'row' || this.direction == 'row-reverse') {
          this.className = 'myView_Middle'
        } else {
          this.className = 'myView_Middle2'
        }
      },

      // 鼠标按下
      mousedown(e) {
        // 上一个兄弟
        var prev = e.currentTarget.previousElementSibling
        // 下一个兄弟
        var next = e.currentTarget.nextElementSibling
        // 绑定事件的目标元素
        var now = e.currentTarget
        // 绑定事件目标元素的父级
        var box = e.currentTarget.parentNode
        // 当事件被触发时鼠标相对于窗口左侧的距离
        var startX = e.clientX;
        // 目标元素距离左侧的距离
        now.left = now.offsetLeft;
        // 当事件被触发时鼠标相对于窗口顶部的距离
        var startY = e.clientY;
        // 目标元素距离顶部的距离
        now.Top = now.offsetTop;
        // 鼠标拖动
        document.onmousemove = (e) => {
          if (this.direction == 'row' || this.direction == 'row-reverse') {
            var endX = e.clientX;
            // （endx-startx）=移动的距离。
            // now.left + 移动的距离 - 整个盒子距离左侧的距离 = 左边区域最后的宽度
            var moveLen = now.left + (endX - startX) - box.offsetLeft;
            // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
            var maxT = box.clientWidth - now.offsetWidth;
            // 左边区域的最小宽度为150px
            if (moveLen < 150) moveLen = 150;
            //右边区域最小宽度为150px
            if (moveLen > maxT - 150) moveLen = maxT - 150;
            // 设置目标元素距离左侧区域的距离
            now.style.left = moveLen;
            // 左侧（上一个）的兄弟元素
            prev.style.width = moveLen + 'px';
            // prev.style.width = moveLen / box.clientWidth * 100 + '%';
            now.style.width = '5px'
            if (next) {
              next.style.width = box.clientWidth - moveLen - 5 + 'px';
              // next.style.width = (box.clientWidth - moveLen - 5)/ box.clientWidth * 100 + '%';
            }
          } else {
            var endY = e.clientY;
            // （endx-startx）=移动的距离。 
            // now.Top + 移动的距离 - 整个盒子距离上边的距离= 上边区域最后的宽度
            var moveLen = now.Top + (endY - startY) - box.offsetTop;
            // 容器宽度 - 上边区域的宽度 = 下边区域的宽度
            var maxT = box.clientHeight - now.offsetHeight;
            // 上边区域的最小宽度为150px
            if (moveLen < 150) moveLen = 150;
            //下边区域最小宽度为150px
            if (moveLen > maxT - 150) moveLen = maxT - 150;
            // 设置目标元素距离顶部的距离
            now.style.left = moveLen;
            // 左侧（上一个）的兄弟元素
            prev.style.height = moveLen + 'px';
            now.style.height = '5px'
            if (next) {
              next.style.height = (box.clientHeight - moveLen) + 'px';
            }
          }
        }
        // 鼠标抬起清空按下及拖动事件
        document.onmouseup = (e) => {
          document.onmouseup = null;
          document.onmousemove = null;
        }
      },
    },
    deactivated(){
      window.removeEventListener('resize',()=>{})
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .myView {
    --displays:'none';
    width: 100%;
    height: 100%;
    display: flex;

    .myView_Middle {
      min-width: 5px;
      width: 5px;
      height: 100%;
      background: #dbdbdb;
      cursor: col-resize;
      pointer-events: auto;
    }
  
    .myView_Middle2 {
      height: 10px;
      width: 100%;
      background: #ABABAB;
      cursor: row-resize;
      pointer-events: auto;
    }
    .disabled{
        cursor: not-allowed;
        pointer-events: none;
    }
    &>:last-child{
        display: var(--displays) !important;
        // color: red !important;
    }
    &>*{
      overflow: auto;
    }
  }
 

  </style>