<template>
	<div ref="dragArea" class="drag-area">
		<button type="button">
			<i style="width: 20px;height: 15px"><svg t="1722925161190" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="937" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M902.20665739 73.62569351h98.7329519v876.74861298h-98.7329519zM238.72122056 669.97272306h351.48930877l106.63158808 280.40158343H791.62575127L455.93371476 73.62569351h-82.93567965L29.40736248 950.37430649h98.73295191L238.72122056 669.97272306z m177.71931345-450.22226072L550.71734858 571.23977115H278.21440129l138.22613272-351.48930881z" fill="#ffffff" p-id="938"></path></svg>
			</i>
			<svg viewBox="0 0 74 74"
				 fill="none"
				 xmlns="http://www.w3.org/2000/svg">
				<circle cx="37"
						cy="37"
						r="36"
						stroke="black"
						stroke-width="2"
						stroke-dasharray="0,0,0,0,0,225.8292694091797">
					<animate attributeType="XML"
							 attributeName="stroke-dasharray"
							 repeatCount="indefinite"
							 dur="5.43653642049062s"
							 values="0,0,0,0,0,225.8292694091797;
								     0,0,0,45.59790218816986,89.0355628446701,91.19580437633972;
								     0,0,75.27642313639323,0,150.55284627278647,225.8292694091797;
								     0,0,150.55284627278647,0,75.27642313639323,225.8292694091797;
								     0,0,188.19105784098306,37.63821156819662,0,0;
								     0,225.8292694091797,0,75.27642313639323,0,225.8292694091797"
							 keyTimes="0; 0.16666666666666666; 0.3333; 0.6666; 0.8333; 1"
							 begin="0.935907495683864s"></animate>
				</circle>
			</svg>
		</button>
	</div>
</template>

<script>
export default {
	name: 'AiButton',
	data () {
		return {
      isClickEvent: false,
		}
	},
  mounted() {
    /**
     * 监听悬浮拖拽区域
     */
    this.$nextTick(() => {
      // 获取DOM元素
      let dragArea = this.$refs.dragArea;
      // 缓存 clientX clientY 的对象: 用于判断是点击事件还是移动事件
      let clientOffset = {};
      // 绑定鼠标按下事件
      dragArea.addEventListener("mousedown", (event) => {
        let offsetX = dragArea.getBoundingClientRect().left; // 获取当前的x轴距离
        let offsetY = dragArea.getBoundingClientRect().top; // 获取当前的y轴距离
        let innerX = event.clientX - offsetX; // 获取鼠标在方块内的x轴距
        let innerY = event.clientY - offsetY; // 获取鼠标在方块内的y轴距
        // 缓存 clientX clientY
        clientOffset.clientX = event.clientX;
        clientOffset.clientY = event.clientY;
        // 鼠标移动的时候不停的修改div的left和top值
        document.onmousemove = function (event) {
          dragArea.style.left = event.clientX - innerX + "px";
          dragArea.style.top = event.clientY - innerY + "px";
          // dragArea 距离顶部的距离
          let dragAreaTop = window.innerHeight - dragArea.getBoundingClientRect().height;
          // dragArea 距离左部的距离
          let dragAreaLeft = window.innerWidth - dragArea.getBoundingClientRect().width;
          // 边界判断处理
          // 1、设置左右不能动
          // dragArea.style.left = dragAreaLeft + "px";

          // 1.设置左侧边界
          if (dragArea.getBoundingClientRect().left <= 0) {
            dragArea.style.left = "0px";
          }
          // 2.设置右侧边界
          if (dragArea.getBoundingClientRect().left >= dragAreaLeft) {
            dragArea.style.left = dragAreaLeft + "px";
          }
          // 3、设置顶部边界
          if (dragArea.getBoundingClientRect().top <= 0) {
            dragArea.style.top = "0px";
          }
          // 4、设置底部边界
          if (dragArea.getBoundingClientRect().top >= dragAreaTop) {
            dragArea.style.top = dragAreaTop + "px";
          }
        };
        // 鼠标抬起时，清除绑定在文档上的mousemove和mouseup事件；否则鼠标抬起后还可以继续拖拽方块
        document.onmouseup = function () {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      }, false);
      // 绑定鼠标松开事件
      dragArea.addEventListener('mouseup', (event) => {
        let clientX = event.clientX;
        let clientY = event.clientY;
        this.isClickEvent = clientX === clientOffset.clientX && clientY === clientOffset.clientY;
      })
    });
  }
}
</script>

<style lang="less" scoped>
* {
	box-sizing: border-box;
}

body,
html {
	overflow: hidden;
}

body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	margin: 0;
	background: black;
	color: #ccc;
}

button {
	position: relative;
  width: 45px;
  height: 45px;
	background-image: linear-gradient(
		120deg,
    #7afffb,
    #79fcff,
    #75eaff,
    #6eccff,
    #67a4ff,
	);
	background-position: top left;
	background-size: 100%;
	//box-shadow: 0 0 400px rgba(255, 59, 242, 1),
	//0 0 200px rgba(255, 59, 242, 0.75), 0 0 100px rgba(255, 59, 242, 0.5),
	//0 0 50px rgba(255, 59, 242, 0.35), 0 0 25px rgba(255, 59, 242, 0.2);
	border-radius: 100%;
	border: none;
	margin: 0;
	padding: 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
}

button:hover {
	box-shadow: 0 0 400px rgba(122, 255, 251, 1),
	0 0 200px rgba(122, 255, 251, 0.75),
	0 0 100px rgba(122, 255, 251, 0.5), 0 0 50px rgba(122, 255, 251, 0.35),
	0 0 25px rgba(122, 255, 251, 0.2);
	padding: 20px;
	background-size: 180%;
	transition: all 0.3s ease;
}

button:active {
	transform: scale(0.9);
	transition: all 0.05s ease;
}

button::before {
	position: absolute;
	width: calc(100% + 20px);
	height: calc(100% + 20px);
	//border: 1px solid rgba(255, 59, 242, 0.8);
	border-radius: 100%;
	pointer-events: none;
	content: "";
	transition: all 0.3s ease;
}

button:hover::before {
	border: 1px solid rgba(122, 255, 251, 0.6);
	width: calc(100% + 40px);
	height: calc(100% + 40px);
	transition: all 0.3s ease;
}

button:active::before {
	width: calc(100% + 20px);
	height: calc(100% + 20px);
	transition: all 0.07s ease;
}

button::after {
	position: absolute;
	width: calc(100% + 40px);
	height: calc(100% + 40px);
	//border: 2px dashed rgba(255, 59, 242, 0.4);
	box-shadow: 0 0 100px rgba(122, 255, 251, 0.1);
	border-radius: 100%;
	pointer-events: none;
	animation: rotate 30s linear infinite;
	content: "";
	transition: all 0.3s ease;
}

@keyframes rotate {
	to {
		transform: rotateZ(-360deg);
	}
}

button:hover::after {
	border: 2px dashed rgba(122, 255, 251, 0.3);
	width: calc(100% + 80px);
	height: calc(100% + 80px);
	transition: all 0.3s ease;
}

button:active::after {
	width: calc(100% + 40px);
	height: calc(100% + 40px);
	transition: all 0.07s ease;
}

button > svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	mix-blend-mode: overlay;
	transition: all 0.3s ease;
	z-index: 1;
}

button i {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

button i svg {
	position: relative;
	width: 100%;
	height: auto;
	filter: drop-shadow(0px 0px 5px white);
	mix-blend-mode: overlay;
}

button:hover i svg {
	animation: shake 0.5s linear infinite;
}

@keyframes shake {
	0% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(15deg);
	}
	75% {
		transform: rotate(-15deg);
	}
}

button span {
	position: absolute;
	top: -7px;
	right: -11px;
	width: 40px;
	height: 40px;
	border-radius: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(5px);
	color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	z-index: 2;
}

button:hover span {
	background-color: #333;
	transition: all 0.3s ease;
}

button span p {
	font: normal normal 400 14pt / 2cap "Roboto Mono", monospace;
	color: #ccc;
	margin: 0;
	position: relative;
	left: 1px;
}

button span svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

aside {
	position: absolute;
	font: normal normal 900 14pt / 2cap "Architects Daughter", cursive;
	bottom: 10%;
	color: #777;
	transition: all 0.3s ease;
}

button:hover ~ aside {
	opacity: 0;
	transition: all 0.3s ease;
}

@media (max-height: 270px) {
	aside {
		display: none;
	}
}
</style>
