import Vue from 'vue'
const isServer = Vue.prototype.$isServer
export default {
  inserted (el, binding, vnode) {
    const on = (function () {
      if (!isServer && document.addEventListener) {
        return function (element, event, handler) {
          if (element && event && handler) {
            element.addEventListener(event, handler, false)
          }
        }
      } else {
        return function (element, event, handler) {
          if (element && event && handler) {
            element.attachEvent('on' + event, handler)
          }
        }
      }
    })()

    const off = (function () {
      if (!isServer && document.removeEventListener) {
        return function (element, event, handler) {
          if (element && event) {
            element.removeEventListener(event, handler, false)
          }
        }
      } else {
        return function (element, event, handler) {
          if (element && event) {
            element.detachEvent('on' + event, handler)
          }
        }
      }
    })()

    // const rafThrottle = function (fn) {
    //   let locked = false
    //   return function (...args) {
    //     if (locked) return false
    //     locked = true
    //     window.requestAnimationFrame(_ => {
    //       console.log(this, 999)
    //       fn.apply(this, args) // 一個(gè)一個(gè)傳
    //       locked = false
    //     })
    //   }
    // }
    const rafThrottle = function (fn) {
      let locked = false
      return function (e) {
        if (locked) return false
        locked = true
        console.log(this) // document
        window.requestAnimationFrame(_ => {
          fn.call(this, e) // 整體傳
          locked = false
        })
      }
    }

    // console.log(el)
    const dragDom = el.querySelector('.el-dialog')
    const drayHeader = el.querySelector('.el-dialog__header')
    drayHeader.style.cursor = 'move'
    // console.log(dragDom, drayHeader)
    const getStyle = (function () {
      if (window.document.currentStyle) {
        return (dom, attr) => dom.currentStyle[attr]
      } else {
        return (dom, attr) => getComputedStyle(dom, false)[attr]
      }
    })()

    drayHeader.onmousedown = (e) => {
      // 當(dāng)前元素距離可是區(qū)域的距離
      const disX = e.clientX - drayHeader.offsetLeft
      const disY = e.clientY - drayHeader.offsetTop

      // 可是區(qū)域的寬高
      const screenHeight = document.body.offsetHeight
      const screenWidth = document.body.offsetWidth

      //   // 獲取left top
      let styLeft = getStyle(dragDom, 'left')
      let styTop = getStyle(dragDom, 'top')

      if (styLeft.includes('%')) {
        styLeft = +screenWidth * (+styLeft.replace(/%/g, '') / 100)
        styTop = +screenHeight * (+styTop.replace(/%/g, '') / 100)
      } else {
        styLeft = +styLeft.replace(/\px/g, '')
        styTop = +styTop.replace(/\px/g, '')
      }

      const hehe = rafThrottle(e => {
        const left = e.clientX - disX
        const top = e.clientY - disY
        dragDom.style.cssText += `;left: ${left + styLeft}px; top:${top + styTop}px`
      })

      on(document, 'mousemove', hehe)
      on(document, 'mouseup', ev => {
        off(document, 'mousemove', hehe)
      })
      e.preventDefault()
    }
  }
}