<template>
  <div class="scroll-demo-page">
    <div class="demo-header">
      <h1>自定义滚动组件演示</h1>
      <div class="control-buttons">
        <q-btn 
          color="primary" 
          label="滚动到顶部" 
          @click="scrollToTop"
          class="q-mr-sm"
        />
        <q-btn 
          color="primary" 
          label="滚动到中间" 
          @click="scrollToMiddle"
          class="q-mr-sm"
        />
        <q-btn 
          color="primary" 
          label="滚动到底部" 
          @click="scrollToBottom"
          class="q-mr-sm"
        />
        <q-btn 
          color="secondary" 
          label="滚动到500px" 
          @click="scrollToPosition"
          class="q-mr-sm"
        />
        <q-btn 
          color="secondary" 
          label="滚动到75%" 
          @click="scrollToPercentage"
        />
      </div>
      
      <div class="scroll-info q-mt-md">
        <q-card class="q-pa-md">
          <div class="text-h6">滚动信息</div>
          <div>当前滚动位置: {{ currentScrollPosition }}px</div>
          <div>当前滚动百分比: {{ (currentScrollPercentage * 100).toFixed(1) }}%</div>
        </q-card>
      </div>
    </div>

    <CustomScrollContainer 
      ref="customScrollRef"
      height="400px"
      width="100%"
      :scrollbar-width="10"
      track-color="#e0e0e0"
      thumb-color="#2196F3"
      thumb-hover-color="#1976D2"
      @scroll="onScroll"
    >
      <div class="scroll-content">
        <div v-for="n in 50" :key="n" class="content-item">
          <q-card class="q-ma-md q-pa-lg">
            <div class="text-h5">内容块 {{ n }}</div>
            <div class="text-body1 q-mt-md">
              这是第 {{ n }} 个内容块。这个组件演示了自定义滚动容器的功能，包括：
              <ul>
                <li>setScrollPosition(position, duration) - 设置滚动位置为指定偏移量</li>
                <li>setScrollPercentage(percentage, duration) - 设置滚动位置为百分比</li>
                <li>scrollToTop(duration) - 滚动到顶部</li>
                <li>scrollToBottom(duration) - 滚动到底部</li>
                <li>getScrollPosition() - 获取当前滚动位置</li>
                <li>getScrollPercentage() - 获取当前滚动百分比</li>
              </ul>
            </div>
            <div class="text-caption q-mt-md">
              滚动条完全隐藏了默认的箭头按钮，并提供了平滑的动画效果。
            </div>
          </q-card>
        </div>
      </div>
    </CustomScrollContainer>

    <div class="demo-footer q-mt-lg">
      <q-card class="q-pa-md">
        <div class="text-h6">组件特性</div>
        <ul>
          <li><strong>完全自定义</strong>：隐藏默认滚动条，使用纯CSS实现自定义外观</li>
          <li><strong>响应式设计</strong>：支持自定义宽度、颜色、偏移量等属性</li>
          <li><strong>平滑动画</strong>：支持带动画的滚动，使用缓动函数提供流畅体验</li>
          <li><strong>方法丰富</strong>：提供多种滚动控制方法，满足不同使用场景</li>
          <li><strong>事件支持</strong>：支持滚动事件监听，可实时获取滚动状态</li>
          <li><strong>跨浏览器兼容</strong>：完美隐藏各浏览器的默认滚动条样式</li>
        </ul>
      </q-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import CustomScrollContainer from 'src/components/CustomScrollContainer.vue'

const customScrollRef = ref(null)
const currentScrollPosition = ref(0)
const currentScrollPercentage = ref(0)

const onScroll = () => {
  if (customScrollRef.value) {
    currentScrollPosition.value = customScrollRef.value.getScrollPosition()
    currentScrollPercentage.value = customScrollRef.value.getScrollPercentage()
  }
}

const scrollToTop = () => {
  if (customScrollRef.value) {
    customScrollRef.value.scrollToTop(500)
  }
}

const scrollToMiddle = () => {
  if (customScrollRef.value) {
    customScrollRef.value.setScrollPercentage(0.5, 800)
  }
}

const scrollToBottom = () => {
  if (customScrollRef.value) {
    customScrollRef.value.scrollToBottom(500)
  }
}

const scrollToPosition = () => {
  if (customScrollRef.value) {
    customScrollRef.value.setScrollPosition(500, 600)
  }
}

const scrollToPercentage = () => {
  if (customScrollRef.value) {
    customScrollRef.value.setScrollPercentage(0.75, 700)
  }
}

onMounted(() => {
  // 初始化滚动信息
  setTimeout(() => {
    onScroll()
  }, 100)
})
</script>

<style scoped>
.scroll-demo-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.demo-header {
  margin-bottom: 20px;
}

.control-buttons {
  margin-top: 16px;
}

.scroll-info {
  max-width: 300px;
}

.scroll-content {
  min-height: 2000px;
}

.content-item {
  margin-bottom: 8px;
}

.content-item:nth-child(even) .q-card {
  background-color: #f5f5f5;
}

.demo-footer ul {
  margin: 16px 0;
  padding-left: 20px;
}

.demo-footer li {
  margin-bottom: 8px;
  line-height: 1.5;
}
</style>