<template>
	<div class="back-top" @click="handleClick" v-scroll-progress="handleScroll">
		<svg width="100%" height="100%" viewBox="-1 -1 102 102">
			<path
				d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"
				:style="{
					transition: 'stroke-dashoffset 10ms linear',
					strokeDasharray: `${progress}, ${max}`,
					stroke: '#222',
					strokeWidth: 4
				}"
				fill="none"
			></path>
		</svg>
		<span class="iconfont icon-direction-up"></span>
	</div>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	const max = ref(98 * Math.PI);
	const progress = ref(0);
	const handleScroll = (e: number) => {
		progress.value = (e / 100) * max.value
	}
	const handleClick = () => {
		document.documentElement.scrollTo({ top: 0, behavior: 'smooth' })
	}
</script>
<style scoped lang="less">
	.back-top {
		position: fixed;
		right: 30px;
		bottom: 30px;
		width: 46px;
		height: 46px;
		cursor: pointer;
		color: #222;
		background-color: #fff;
		border-radius: 50%;
		-webkit-box-shadow: inset 0 0 0 1px #e1e1e1;
		box-shadow: inset 0 0 0 1px #e1e1e1;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
		> svg {
			position: absolute;
			width: 100%;
			height: 100%;
			> path {
				transition: stroke-dashoffset 10ms linear;
			}
		}
		&:hover > .iconfont {
			animation: animArrow 1s infinite;
		}
		@keyframes animArrow {
			0% {
				transform: rotate(0deg);
			}
			50% {
				transform: translateY(-3px);
			}
			100% {
				transform: rotate(0deg);
			}
		}

		animation: back-top-hidden 0.2s linear both;
		&.active {
			animation: back-top-active 0.2s linear both;
		}
		@keyframes back-top-active {
			0% {
				display: none;
				opacity: 0;
				transform: translateY(15px);
			}
			100% {
				opacity: 1;
				transform: translateY(0);
			}
		}
		@keyframes back-top-hidden {
			0% {
				opacity: 1;
				transform: translateY(0);
			}
			100% {
				opacity: 0;
				transform: translateY(15px);
				display: none;
			}
		}
	}
</style>
