export default {
  bind(el, binding, vnode) {
    const dialogHeaderEl = el.querySelector(".ant-pqcpModal-header");
    const dialogFooterEl = el.querySelector(".ant-pqcpModal-footer");
    const dragDom = el.querySelector(".ant-pqcpModal-content");
    const dom = el.querySelector(".ant-pqcpModal");

    // dialogHeaderEl.style.cssText += ";cursor:move;";
    //dialogFooterEl.style.cssText += ';cursor:move;' 禁用底部拖动，会有样式问题
    // dragDom.style.cssText += ";top:0px;";

    // dialogHeaderEl.onmousemove = (e) => {
    //   // if (e.offsetX > 155 && e.offsetY > 15) {
    //   //   //当鼠标在弹窗的顶部 一定区域时才能移动 ，这里设置的是离左155，上10
    //   //   // dialogHeaderEl.style.cssText += ";cursor:move;";
    //   // } else {
    //     dialogHeaderEl.style.cssText += ";cursor:move;";
    //   // }
    // };
    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const getStyle = (function() {
      if (window.document.currentStyle) {
        return (dom, attr) => dom.currentStyle[attr];
      } else {
        return (dom, attr) => getComputedStyle(dom, false)[attr];
      }
    })();

    /*dialogHeaderEl.onmousedown = (e) => {
      if (e.target.className.indexOf("ant-pqcpModal-close") > -1) {
        //关闭按钮附近也不能移动
        // vnode.child.$emit('dragDialog')
        return false;
      }
      // if (!(e.offsetX > 155 && e.offsetY > 15)) {
      //   //当鼠标在弹窗的顶部 一定区域时才能移动 ，这里设置的是离左155，上10
      //   return false;
      // }
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - dialogHeaderEl.offsetLeft;
      const disY = e.clientY - dialogHeaderEl.offsetTop;

      const dragDomWidth = dragDom.offsetWidth;
      const dragDomHeight = dragDom.offsetHeight;

      const screenWidth = document.body.clientWidth;
      const screenHeight = document.body.clientHeight;

      const minDragDomLeft = dragDom.offsetLeft;
      const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;

      const minDragDomTop = dragDom.offsetTop;
      const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight;

      // 获取到的值带px 正则匹配替换
      let styL = getStyle(dragDom, "left");
      let styT = getStyle(dragDom, "top");

      if (styL.includes("%")) {
        styL = +document.body.clientWidth * (+styL.replace(/\%/g, "") / 100);
        styT = +document.body.clientHeight * (+styT.replace(/\%/g, "") / 100);
      } else {
        styL = +styL.replace(/\px/g, "");
        styT = +styT.replace(/\px/g, "");
      }

      document.onmousemove = function(e) {
        // if (e.target.className.indexOf('el-dialog__close') > -1) {
        //   // vnode.child.$emit('dragDialog')
        //   return false
        // }
        // 通过事件委托，计算移动的距离
        let left = e.clientX - disX;
        let top = e.clientY - disY;
        // if(binding.value.scoringCriteria=="isTrue"){
        //   //当拖动的是功能分析或者风险分析 的评分标准时
        //   if(document.body.clientHeight-e.clientY<30){
        //     //当拖到底部一定区域时，不能继续下托
        //     top = document.body.clientHeight-30 - disY
        //   }
        //   if(document.body.clientWidth-e.clientX<100){
        //     left = document.body.clientWidth-80 - disX
        //   }
        // }
        // 边界处理
        if (-left > minDragDomLeft) {
          // if(binding.value.scoringCriteria=="isTrue"){
          //   //当拖动的是功能分析或者风险分析 的评分标准时
          //   left=left
          // }else{
          //   left = -minDragDomLeft
          // }
          left = left;
        } else if (left > maxDragDomLeft) {
          // if(binding.value.scoringCriteria=="isTrue"){
          //   //当拖动的是功能分析或者风险分析 的评分标准时
          //   left=left
          // }else{
          //   left = maxDragDomLeft
          // }
          left = left;
        }

        if (-top > minDragDomTop) {
          // if(binding.value.scoringCriteria=="isTrue"){
          //   //当拖动的是功能分析或者风险分析 的评分标准时
          //   //能拖出可视范围
          //   top=top
          // }else{
          //   top = -minDragDomTop
          // }
          top = top;
        } else if (top > maxDragDomTop) {
          // if(binding.value.scoringCriteria=="isTrue"){
          //   //当拖动的是功能分析或者风险分析 的评分标准时
          //   //能拖出可视范围
          //   top=top
          // }else{
          //   top = maxDragDomTop
          // }
          top = top;
        }
        // 移动当前元素
        dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;

        // emit onDrag event
        vnode.child.$emit("dragDialog");
      };

      document.onmouseup = function(e) {
        const disX = e.clientX - dialogHeaderEl.offsetLeft;
        const disY = e.clientY - dialogHeaderEl.offsetTop;
        // 获取到的值带px 正则匹配替换
        let styL = getStyle(dragDom, "left");
        let styT = getStyle(dragDom, "top");
        if (styL.includes("%")) {
          styL = +document.body.clientWidth * (+styL.replace(/\%/g, "") / 100);
          styT = +document.body.clientHeight * (+styT.replace(/\%/g, "") / 100);
        } else {
          styL = +styL.replace(/\px/g, "");
          styT = +styT.replace(/\px/g, "");
        }
        if (e.clientY < 35) {
          //当顶部拖出屏幕时回弹
          dragDom.style.cssText += `;top:${-99}px;`;
        }
        let left = e.clientX - disX;
        let top = e.clientY - disY;
        document.onmousemove = null;
        document.onmouseup = null;
        if (top + styT + dom.offsetTop + 60 - document.body.clientHeight > 5) {
          //当拖到底部一定区域时，继续下托 会回弹
          dragDom.style.cssText += `;top:${document.body.clientHeight -
            dom.offsetTop -
            60}px;`;
        }
        if (
          left + styL + dom.offsetLeft + 160 - document.body.clientWidth >
          100
        ) {
          //当左边拖到一定距离时 弹窗回弹
          //dom.offsetLeft 弹窗到左边的距离 +160
          dragDom.style.cssText += `;left:${document.body.clientWidth -
            dom.offsetLeft -
            160}px;`;
        }
      };
    };*/
    //拖动底部，2021.6.10 拖动底部禁用，因为会有样式问题
    // dialogFooterEl.onmousedown = e => {
    //   if (e.target.className.indexOf('ant-btn') > -1) {
    //     // 鼠标移到底部按钮
    //     return false
    //   }
    //   if(!(e.offsetX>155&&e.offsetY<32)){
    //     //当鼠标在弹窗的底部 一定区域时才能移动 ，这里设置的是离左155，下32
    //     return false
    //   }
    //   // 鼠标按下，计算当前元素距离可视区的距离
    //   const disX = e.clientX - dialogFooterEl.offsetLeft
    //   const disY = e.clientY - dialogFooterEl.offsetTop

    //   const dragDomWidth = dragDom.offsetWidth
    //   const dragDomHeight = dragDom.offsetHeight

    //   const screenWidth = document.body.clientWidth
    //   const screenHeight = document.body.clientHeight

    //   const minDragDomLeft = dragDom.offsetLeft
    //   const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth

    //   const minDragDomTop = dragDom.offsetTop
    //   const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight

    //   // 获取到的值带px 正则匹配替换
    //   let styL = getStyle(dragDom, 'left')
    //   let styT = getStyle(dragDom, 'top')

    //   if (styL.includes('%')) {
    //     styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
    //     styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
    //   } else {
    //     styL = +styL.replace(/\px/g, '')
    //     styT = +styT.replace(/\px/g, '')
    //   }

    //   document.onmousemove = function(e) {
    //     // if (e.target.className.indexOf('el-dialog__close') > -1) {
    //     //   // vnode.child.$emit('dragDialog')
    //     //   return false
    //     // }
    //     // 通过事件委托，计算移动的距离
    //     let left = e.clientX - disX
    //     let top = e.clientY - disY
    //     // if(binding.value.scoringCriteria=="isTrue"){
    //     //   //当拖动的是功能分析或者风险分析 的评分标准时
    //     //   top = e.clientY - disY-dragDomHeight
    //     //   if(e.clientY<60){
    //     //     //上移动到部分区域后阻止上移
    //     //     top = 60 - disY-dragDomHeight
    //     //   }
    //     //   if(document.body.clientWidth-e.clientX<20){
    //     //     //右移动到部分区域后阻止右移
    //     //     left = document.body.clientWidth-30 - disX
    //     //   }
    //     //   if(dragDom.offsetLeft+e.clientX<-870){
    //     //     //右移动到部分区域后阻止右移
    //     //     left = 100 - disX
    //     //   }
    //     // }
    //     if(e.clientY<60){
    //       //上移动到部分区域后阻止上移
    //       top = 60 - disY-dragDomHeight
    //     }

    //     // 边界处理
    //     if (-left > minDragDomLeft) {
    //       if(binding.value.scoringCriteria=="isTrue"){
    //         //当拖动的是功能分析或者风险分析 的评分标准时
    //         left=left
    //       }else{
    //         left = -minDragDomLeft
    //       }
    //     } else if (left > maxDragDomLeft) {
    //       if(binding.value.scoringCriteria=="isTrue"){
    //         //当拖动的是功能分析或者风险分析 的评分标准时
    //         left=left
    //       }else{
    //         left = minDragDomLeft
    //       }
    //     }

    //     if (-top > minDragDomTop) {
    //       if(binding.value.scoringCriteria=="isTrue"){
    //         //当拖动的是功能分析或者风险分析 的评分标准时
    //         //+50防止抖动
    //         top=top+50
    //       }else{
    //         top = -minDragDomTop
    //       }

    //     } else if (top > maxDragDomTop) {
    //         top = maxDragDomTop
    //     }else{
    //       if(binding.value.scoringCriteria=="isTrue"){
    //         //当拖动的是功能分析或者风险分析 的评分标准时
    //         //+50防止抖动
    //         top = top+50
    //       }
    //     }

    //     // 移动当前元素
    //     dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`

    //     // emit onDrag event
    //     vnode.child.$emit('dragDialog')
    //   }

    //   document.onmouseup = function(e) {
    //     document.onmousemove = null
    //     document.onmouseup = null
    //   }
    // }
  }
};
