<template>
  <!-- 双视图 -->
  <div class="myView" v-listenDom="getShow" :style="{ 'flex-direction': direction }" ref="myView">
    <slot name="left" class="myView_Left"></slot>
    <div :class="className" data-type="mouse" @mousedown="mousedown" v-show="show"></div>
    <slot name="right" class="myView_Right"></slot>
  </div>
</template>

<script>
export default {
  props: {
    position: {
      default: 'row'
    }
  },
  data() {
    return {
      show: true,
      direction: null,
      className: 'myView_Middle',
    }
  },
  // 自定义指令
  directives: {
    listenDom: {
      // 只调用一次
      bind: function (el, binding, vnode) {
        vnode.context.EventListener(el)
        if (el.childNodes.length < 3) {
          binding.value(false, el)
        } else if (el.childNodes.length == 3) {
          if (el.childNodes[2].style.display == 'none' || el.childNodes[0].style.display == 'none') {
            binding.value(false, el)
          } else {
            binding.value(true, el)
          }
        }
      },
      // 插入中
      inserted: function (el, binding) {
        if (el.childNodes[2].style.display == 'none' || el.childNodes[0].style.display == 'none') {
          binding.value(false, el)
        } else {
          binding.value(true, el)
        }
      },
      // 更新前
      update: function (el, binding) {
      },
      // 更新后
      componentUpdated: function (el, binding) {
        if (el.childNodes.length < 3) {
          binding.value(false, el)
        } else if (el.childNodes.length == 3) {
          if (el.childNodes[2].style.display == 'none' || el.childNodes[0].style.display == 'none') {
            binding.value(false, el)
          } else {
            binding.value(true, el)
          }
        }
      }
    }
  },
  watch: {
    position() {
      this.directionRule()
    }
  },
  mounted() {
    this.directionRule()

  },
  methods: {
    // 窗口缩放，内容等比例缩放
    EventListener(dom) {
      window.addEventListener('resize', (e) => {
        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 = '10px'
            } 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 - 10)) * 100 + '%'
            } else {
              dom.childNodes[i].style.height = (dom.childNodes[i].clientHeight / (dom.clientHeight - 10)) * 100 + '%'
            }

          }
        }
      })
    },
    // 排列方向
    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'
      }
    },

    //获取show的值
    getShow(val, dom) {
      this.$set(this, 'show', val)
      if (!val) {
        var 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 = '10px'
            } else {
              dom.childNodes[i].style.width = '100%'
            }
          } else {
            if (this.direction == 'row' || this.direction == 'row-reverse') {
              dom.childNodes[i].style.width = '100%'
            } else {
              dom.childNodes[i].style.height = '100%'
            }

          }

        }
      }
    },
    // 鼠标按下
    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 = '10px'
          if (next) {
            next.style.width = box.clientWidth - moveLen - 10 + 'px';
            // next.style.width = (box.clientWidth - moveLen - 10)/ 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 = '10px'
          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 {
  width: 100%;
  height: 100%;
  display: flex;

  .myView_Middle {
    min-width: 10px;
    width: 10px;
    height: 100%;
    background: #dbdbdb;
    cursor: col-resize;
  }

  .myView_Middle2 {
    height: 20px;
    width: 100%;
    background: #ABABAB;
    cursor: row-resize;
  }
}
</style>