const drag = {
	mounted(el, binding) {
		const dragBox = document.querySelector('#' + binding.arg)
		//鼠标点击距离box盒子left的距离
		let spotToBoxLeft = 0
		let spotToBoxTop = 0

		const mouseupFun = e => {
			window.removeEventListener('mousemove', mousemoveFun)
			window.removeEventListener('mouseup', mouseupFun)
		}

		const mousemoveFun = evt => {
			//获取body宽高，获取拖动盒子的宽高
			const { offsetWidth: bodyWidth, offsetHeight: bodyHeight } = document.body
			const { offsetWidth: boxWidth, offsetHeight: boxHeight } = dragBox
			//max取最大值，min取最小值
			const left = Math.max(evt.clientX - spotToBoxLeft, 0)
			const top = Math.max(evt.clientY - spotToBoxTop, 0)
			dragBox.style.left = Math.min(left, bodyWidth - boxWidth) + 'px'
			dragBox.style.top = Math.min(top, bodyHeight - boxHeight) + 'px'
		}

		el.__mousedownFun = evt => {
			//鼠标坐标减去 box盒子相对于父盒子body 的距离
			spotToBoxLeft = evt.clientX - dragBox.offsetLeft
			spotToBoxTop = evt.clientY - dragBox.offsetTop
			window.addEventListener('mousemove', mousemoveFun)
			window.addEventListener('mouseup', mouseupFun)
		}
		el.addEventListener('mousedown', el.__mousedownFun)
	},

	// 绑定元素的父组件卸载前调用
	beforeUnmount(el, binding) {
		el.removeEventListener('mousedown', el.__mousedownFun)
	},
}

export default drag