/**
 * 给指定元素增加鼠标拖拽监听
 * 定义四个方向的拖拽行为，top，right，bottom, left。
 * 需要为指定元素添加拖拽辅助dom，每个辅助dom只负责一个方向的拖拽行为
 * 入参说明：
 *  dom：需要添加监听的元素，该元素必须有定位属性
 *  behavior：拖拽的行为，可选值为top，right，bottom, left
 *  fun：拖拽触发后的回调
 *  css: 需要添加的样式，用于覆盖默认样式，只支持对象格式
*/
export const addDragHandle = (dom, direction = 'col', fun) => {
  if (!dom) return;
  // 参数调整
  if (typeof direction === 'function') {
    fun = direction;
    direction = 'left';
  };
  // 如果没有可执行函数，不处理
  if (typeof fun !== 'function') return;
  // 每个计算周期鼠标的位置
  let x = 0;
  let y = 0;
  // 初始位置
  let initialX = 0;
  let initialY = 0;

  // 节流状态
  let timer = true;
  // 页面body
  const body = document.getElementsByTagName('body')[0];
  // 全屏遮罩，防止拖拽过程中影响界面效果
  const 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') + ';');
  // 定义元素事件交互
  // 定义鼠标移动事件
  const mouseMoveHandler = (e) => {
    // 每隔一定时间触发一次回调,做节流处理
    if (timer) {
      timer = false;
      // 为了较好的视觉效果。按照一秒60桢计算，平均16.6ms需要触发一次，这里去15ms
      setTimeout(() => {
        timer = true;
        fun(e.clientX - initialX, e.clientY - initialY, e.clientX - x, e.clientY - y);
        // 更新点位信息
        x = e.clientX;
        y = e.clientY;
      }, 15);
    }
  };
  // 鼠标松开事件
  const mouseUpHandler = (e) => {
    shade.removeEventListener('mousemove', mouseMoveHandler);
    shade.removeEventListener('mouseup', mouseUpHandler);
    // 移除shade元素
    body.removeChild(shade);
    // 调用回调函数,回传参数，移动的偏移量
    fun(e.clientX - initialX, e.clientY - initialY, e.clientX - x, e.clientY - y);
    x = e.clientX;
    y = e.clientY;
  };
  // 定义鼠标按下事件
  const mouseDownHandler = (e) => {
    // 获取当前鼠标位置
    x = e.clientX;
    y = e.clientY;
    initialX = e.clientX;
    initialY = e.clientY;
    // 将监听器附加到遮罩
    shade.addEventListener('mousemove', mouseMoveHandler);
    shade.addEventListener('mouseup', mouseUpHandler);
    shade.addEventListener('mouseout', mouseUpHandler);
    // 插入到body中
    body.appendChild(shade);
  };
  // 给该元素添加鼠标按下事件
  // handleDom.addEventListener('mousedown', mouseDownHandler);
  // dom.appendChild(handleDom);
  dom.addEventListener('mousedown', mouseDownHandler);
};
