'use strict';

exports.__esModule = true;
/**
 * 给指定元素增加鼠标拖拽监听
 * 定义四个方向的拖拽行为，top，right，bottom, left。
 * 需要为指定元素添加拖拽辅助dom，每个辅助dom只负责一个方向的拖拽行为
 * 入参说明：
 *  dom：需要添加监听的元素，该元素必须有定位属性
 *  direction：拖拽的行为，可选值为top，right，bottom, left
 *  movingFun：拖拽时的回调
 *  finishFun: 拖拽结束的回调
*/
var addDragHandle = exports.addDragHandle = function addDragHandle(dom) {
  var direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'col';
  var movingFun = arguments[2];
  var finishFun = arguments[3];

  if (!dom) return;
  // 参数调整
  if (typeof direction === 'function') {
    finishFun = movingFun;
    movingFun = direction;
    direction = 'col';
  };
  // 如果没有可执行函数，不处理
  if (typeof movingFun !== 'function') return;
  // 每个计算周期鼠标的位置
  var x = 0;
  var y = 0;
  // 初始位置
  var initialX = 0;
  var initialY = 0;

  // 节流状态
  var timer = true;
  // 页面body
  var body = document.getElementsByTagName('body')[0];
  // 全屏遮罩，防止拖拽过程中影响界面效果
  var shade = document.createElement('div');
  // 设置遮罩层样式
  shade.setAttribute('style', 'position: fixed;z-index: 999999;top: 0;right: 0;bottom: 0;left: 0;cursor: ' + (direction === 'row' ? 'row-resize' : 'col-resize') + ';');
  // 定义元素事件交互
  // 定义鼠标移动事件
  var mouseMoveStartHandler = function mouseMoveStartHandler(e) {
    // 每隔一定时间触发一次回调,做节流处理
    if (timer) {
      timer = false;
      // 为了较好的视觉效果。按照一秒60桢计算，平均16.6ms需要触发一次，这里去15ms
      setTimeout(function () {
        timer = true;
        movingFun(e.clientX - initialX, e.clientY - initialY, e.clientX - x, e.clientY - y);
        // 更新点位信息
        x = e.clientX;
        y = e.clientY;
      }, 15);
    }
  };
  // 鼠标松开事件
  var mouseMoveEndingHandler = function mouseMoveEndingHandler(e) {
    shade.removeEventListener('mousemove', mouseMoveStartHandler);
    shade.removeEventListener('mouseup', mouseMoveEndingHandler);
    shade.removeEventListener('mouseout', mouseMoveEndingHandler);
    // 移除shade元素
    body.removeChild(shade);
    // 调用回调函数,回传参数，移动的偏移量
    finishFun(e.clientX - initialX, e.clientY - initialY, e.clientX - x, e.clientY - y);
    x = e.clientX;
    y = e.clientY;
  };
  // 定义鼠标按下事件
  var mouseDownHandler = function mouseDownHandler(e) {
    // 获取当前鼠标位置
    x = e.clientX;
    y = e.clientY;
    initialX = e.clientX;
    initialY = e.clientY;
    // 将监听器附加到遮罩
    shade.addEventListener('mousemove', mouseMoveStartHandler);
    shade.addEventListener('mouseup', mouseMoveEndingHandler);
    shade.addEventListener('mouseout', mouseMoveEndingHandler);
    // 插入到body中
    body.appendChild(shade);
  };
  // 给该元素添加鼠标按下事件
  // handleDom.addEventListener('mousedown', mouseDownHandler);
  // dom.appendChild(handleDom);
  dom.addEventListener('mousedown', mouseDownHandler);
};