<template>
  <!-- 使用 Transition 包裹，給按鈕加上場(chǎng)/退場(chǎng)動(dòng)畫 -->
  <Transition name="slide-up">
    <button
      v-if="visible"
      @click="scrollToTop"
      class="back-to-top-btn"
      :title="tooltip"
    >
      <!-- 內(nèi)嵌 SVG 向上箭頭圖標(biāo)，避免引入外部圖片資源 -->
      <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M5 10l7-7m0 0l7 7m-7-7v18"
        />
      </svg>
    </button>
  </Transition>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

// 1. 定義 Props，使用 withDefaults 設(shè)置默認(rèn)值
const props = withDefaults(defineProps<{
  threshold?: number  // 滾動(dòng)閾值，超過此值顯示按鈕
  tooltip?: string    // 鼠標(biāo)懸停提示文字
}>(), {
  threshold: 300,
  tooltip: '返回頂部'
})

// 2. 響應(yīng)式狀態(tài)：控制按鈕顯示/隱藏
const visible = ref(false)

// 3. 滾動(dòng)處理函數(shù)：判斷當(dāng)前滾動(dòng)位置
const handleScroll = () => {
  visible.value = window.scrollY > props.threshold
}

// 4. 核心動(dòng)作：執(zhí)行滾動(dòng)到頂部
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth' // 關(guān)鍵：實(shí)現(xiàn)平滑滾動(dòng)，而非瞬間跳轉(zhuǎn)
  })
}

// 5. 生命周期：掛載時(shí)監(jiān)聽滾動(dòng)事件
onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

// 6. 生命周期：卸載時(shí)移除監(jiān)聽（非常重要，防止內(nèi)存泄漏）
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style scoped>
.back-to-top-btn {
  position: fixed; /* 固定定位，懸浮在頁面右下角 */
  bottom: 2rem;
  right: 2rem;
  width: 3rem;
  height: 3rem;
  background: #4f46e5; /* 靛藍(lán)色，現(xiàn)代感強(qiáng) */
  color: white;
  border: none;
  border-radius: 50%; /* 圓形按鈕 */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4); /* 柔和陰影 */
  transition: all 0.3s ease;
  z-index: 1000; /* 確保層級(jí)夠高，不被其他元素遮擋 */
}
.back-to-top-btn:hover {
  background: #4338ca; /* 懸停變深色 */
  transform: translateY(-4px); /* 懸停上浮效果 */
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.5);
}
.back-to-top-btn:active {
  transform: translateY(-2px); /* 點(diǎn)擊時(shí)的按壓反饋 */
}
/* Transition 動(dòng)畫對(duì)應(yīng)的 CSS 類 */
.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.3s ease;
}
.slide-up-enter-from,
.slide-up-leave-to {
  opacity: 0;
  transform: translateY(20px); /* 從下方 20px 處滑入 */
}
</style>

<template>
  <div class="very-long-page-content">
    <!-- 你的頁面內(nèi)容 -->
  </div>
  <!-- 直接使用，也可以傳入 threshold 自定義顯示距離 -->
  <BackToTop :threshold="500" />
</template>
<script setup lang="ts">
import BackToTop from './components/BackToTop.vue'
</script>