<template>
  <div class="kole-backtop" :class="{ 'is-visible': visible, 'kole-no-ring': !showRing }"
       role="button" aria-label="返回顶部" @click="toTop">
    <svg viewBox="0 0 44 44" v-if="showRing">
      <circle class="kole-backtop-ring-bg" cx="22" cy="22" r="20" fill="none" stroke-width="2" />
      <circle class="kole-backtop-ring-fg" cx="22" cy="22" r="20" fill="none" stroke-width="2"
              :style="{ strokeDasharray: circumference, strokeDashoffset: offset }" />
    </svg>
    <span class="kole-backtop-arrow">↑</span>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';

const props = defineProps({
  threshold: { type: Number, default: 400 },
  showRing: { type: Boolean, default: true }
});

const r = 20;
const visible = ref(false);
const progress = ref(0);
const circumference = 2 * Math.PI * r;
const offset = computed(() => circumference * (1 - progress.value));

function onScroll() {
  const st = window.pageYOffset || document.documentElement.scrollTop;
  const max = document.documentElement.scrollHeight - window.innerHeight;
  progress.value = max > 0 ? st / max : 0;
  visible.value = st > props.threshold;
}
function toTop() {
  window.scrollTo({ top: 0, behavior: 'smooth' });
}

onMounted(() => {
  window.addEventListener('scroll', onScroll, { passive: true });
  onScroll();
});
onBeforeUnmount(() => {
  window.removeEventListener('scroll', onScroll);
});
</script>

<style src="./BackToTop.css"></style>
