<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>
export default {
  name: 'KoleBackToTop',
  props: {
    threshold: { type: Number, default: 400 },
    showRing: { type: Boolean, default: true }
  },
  data: function () {
    return { visible: false, progress: 0, r: 20 };
  },
  computed: {
    circumference: function () { return 2 * Math.PI * this.r; },
    offset: function () { return this.circumference * (1 - this.progress); }
  },
  methods: {
    onScroll: function () {
      var st = window.pageYOffset || document.documentElement.scrollTop;
      var max = document.documentElement.scrollHeight - window.innerHeight;
      this.progress = max > 0 ? st / max : 0;
      this.visible = st > this.threshold;
    },
    toTop: function () {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }
  },
  mounted: function () {
    window.addEventListener('scroll', this.onScroll, { passive: true });
    this.onScroll();
  },
  beforeDestroy: function () {
    window.removeEventListener('scroll', this.onScroll);
  }
};
</script>

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