/*
 * @Author: 李佐宁
 * @Description:
 * @Date: 2023-01-13 08:59:36
 * @LastEditTime: 2023-03-30 10:56:50
 * @LastEditors: 李佐宁 lizuoning@yuan-info.com
 */
export default {
  //自定义节流操作
  preventReClick: {
    mounted(el: any, binding: any) {
      el.addEventListener("click", () => {
        if (!el.disabled) {
          el.disabled = true;
          setTimeout(() => {
            el.disabled = false;
          }, binding.value || 200); //200ms间隔时间
        }
      });
    },
  },
  drag: {
    // 指令的定义
    mounted: function (el) {
      let x = 0;
      let y = 0;
      let l = 0;
      let t = 0;
      let isDown = false;
      const elWidth = el.clientWidth;
      const elParentWidth = el.parentElement.clientWidth;
      let percent = el.parentElement.clientWidth / el.clientWidth;
      // 滚动条宽度
      let a = (document.getElementById("yaContent")!.scrollWidth-document.getElementById("yaBox")!.clientWidth)/document.getElementById("yaContent")!.scrollWidth;
      let b = (document.getElementById("yaBox")!.clientWidth*(1-a))/document.getElementById("yaBox")!.clientWidth;
      document.getElementById("yaScrollBar")!.style.width = b * 100 + '%'
      let c = 1-b;
      console.log(b,'--',c)
      // document.getElementById("yaScrollBar")!.style.width = 100 + 'px'
    //   (el.parentElement.clientWidth / el.clientWidth) *
    //   el.parentElement.clientWidth +
    // "px";
      //鼠标按下事件
      el.onmousedown = function (e) {
        //获取x坐标和y坐标
        x = e.clientX;
        y = e.clientY;

        //获取左部和顶部的偏移量
        l = el.offsetLeft;
        t = el.offsetTop; 
        //开关打开
        isDown = true;
        //设置样式
        el.style.cursor = "move";
        console.log(l,'[[',x)
        //鼠标移动
        document.onmousemove = function (e) {
          e.preventDefault();
          if (isDown == false) {
            return;
          }
          //获取x和y
          let nx = e.clientX;
          //计算移动后的左偏移量和顶部的偏移量
          console.log(document.getElementById("yaScrollBar")!.style.left)
          let nl = nx - (x - l);
          if (nl > 0) return;
          if (nl < elParentWidth - elWidth) return;
          console.log(nl,'---')
          document.getElementById("yaScrollBar")!.style.left = Math.abs(nl/document.getElementById("yaContent")!.scrollWidth)*100 + "%";
          el.style.left = nl/document.getElementById("yaBox")!.clientWidth*100 + "%";
        };
        //鼠标抬起事件
        document.onmouseup = function () {
          //开关关闭
          document.onmousemove = null;
          document.onmouseup = null;
          //开关关闭
          isDown = false;
          console.log('鼠标抬起')
          el.style.cursor = "default";
        };
      };
     
      // el.onmouseleave = function () {
      //   //开关关闭
      //   isDown = false;
      //   console.log('鼠标离开')
      //   el.style.cursor = "default";
      // };
    },
  },
  dragScoll: {
    // 指令的定义
    mounted: function (el) {
      let x = 0;
      let y = 0;
      let l = 0;
      let t = 0;
      let isDown = false;
      const elWidth = el.offsetWidth;
      const elParentWidth = el.parentElement.offsetWidth;
      //鼠标按下事件
      el.onmousedown = function (e) {
        //获取x坐标和y坐标
        x = e.clientX;
        //获取左部和顶部的偏移量
        l = el.offsetLeft;
        //开关打开
        isDown = true;
        //设置样式
        el.style.cursor = "move";
        
        document.onmousemove = function (e) {
          e.preventDefault();
          if (isDown == false) {
            return;
          }
          //获取x和y
          let nx = e.clientX;
          //计算移动后的左偏移量和顶部的偏移量
          let nl = nx - (x - l);
          if (nl < 0) return;
          if (nl > elParentWidth - elWidth) return;
          let h = document.getElementById("yaContent")!.scrollWidth-document.getElementById("yaBox")!.clientWidth;
          console.log(nl,'---==',document.getElementById("yaScrollBar1")!.offsetWidth,'==',document.getElementById("yaScrollBar")!.offsetWidth)
          el.style.left = nl/document.getElementById("yaScrollBar1")!.offsetWidth * 100 + "%";
          document.getElementById("yaContent")!.style.left = -(nl/document.getElementById("yaScrollBar")!.offsetWidth * 100) + "%";
        };
        
        //鼠标抬起事件
        document.onmouseup = function () {
           //开关关闭
           document.onmousemove = null;
           document.onmouseup = null;
           isDown = false;
           console.log('鼠标抬起')
           el.style.cursor = "default";
        };
      };
      // el.onmouseleave = function () {
      //   //开关关闭
      //   isDown = false;
      //   console.log('鼠标离开')
      //   el.style.cursor = "default";
      // };
    },
  },
};