<script setup>
import { ref, computed, onMounted, nextTick, watch, defineExpose } from 'vue'

const props = defineProps({
 items: { type: Array, required: true }, // 全量數(shù)據(jù)
 height: { type: Number, required: true }, // 容器高度
 itemHeight: { type: Number, required: true }, // 每行固定高度
 buffer: { type: Number, default: 6 }, // 緩沖條數(shù)
 keyField: { type: String, default: 'id' } // 唯一 key
})

const emit = defineEmits(['rangeChange', 'reachEnd'])

const containerRef = ref(null)
const scrollTop = ref(0)

const visibleCount = computed(() => Math.ceil(props.height / props.itemHeight))
const totalHeight = computed(() => props.items.length * props.itemHeight)

const startIndex = computed(() =>
 Math.max(0, Math.floor(scrollTop.value / props.itemHeight) - props.buffer)
)
const endIndex = computed(() =>
 Math.min(
  props.items.length,
  startIndex.value + visibleCount.value + props.buffer * 2
 )
)

const offsetY = computed(() => startIndex.value * props.itemHeight)
const visibleItems = computed(() =>
 props.items.slice(startIndex.value, endIndex.value)
)

function onScroll() {
 const el = containerRef.value
 if (!el) return
 scrollTop.value = el.scrollTop
 emit('rangeChange', { start: startIndex.value, end: endIndex.value })
 if (endIndex.value >= props.items.length - props.buffer * 2) emit('reachEnd')
}

function scrollToIndex(index, align = 'start') {
 const el = containerRef.value
 if (!el) return
 const clamped = Math.max(0, Math.min(index, props.items.length - 1))
 let top = clamped * props.itemHeight
 if (align === 'center') top -= (props.height - props.itemHeight) / 2
 else if (align === 'end') top -= props.height - props.itemHeight
 el.scrollTop = Math.max(0, top)
 onScroll()
}

function reset() {
 const el = containerRef.value
 if (!el) return
 el.scrollTop = 0
 onScroll()
}

onMounted(() => nextTick(onScroll))
watch(
 () => props.items.length,
 async () => {
  await nextTick()
  onScroll()
 }
)

defineExpose({ scrollToIndex, reset })
</script>

<template>
 <div
  ref="containerRef"
  class="vl-container"
  :style="{ height: height + 'px' }"
  @scroll="onScroll"
 >
  <!-- 占位高度：撐滾動(dòng)條 -->
  <div :style="{ height: totalHeight + 'px' }" aria-hidden="true"></div>

  <!-- 可視區(qū)：絕對(duì)定位 + translateY -->
  <div class="vl-list" :style="{ transform: `translateY(${offsetY}px)` }">
   <div
    v-for="(row, i) in visibleItems"
    :key="row?.[keyField] ?? startIndex + i"
    class="vl-item"
    :style="{ height: itemHeight + 'px', lineHeight: itemHeight + 'px' }"
   >
    <slot name="row" :row="row" :index="startIndex + i"></slot>
   </div>
  </div>
 </div>
</template>

<style>
.vl-container {
 /* 父容器必須相對(duì)定位 + 可滾動(dòng) */
 position: relative;
 overflow-y: auto;
 border: 1px solid #e5e7eb;
 background: #fff;
}

/* 關(guān)鍵：絕對(duì)定位到頂部 + 蓋住占位層 */
.vl-list {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 width: 100%;
 z-index: 1;
 will-change: transform;
}

.vl-item {
 padding: 0 12px;
 border-bottom: 1px solid #f1f5f9;
 font-size: 14px;
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
}
</style>

<script setup>
import { ref } from 'vue'
import VirtualList from './VirtualList.vue'

const items = ref(
 Array.from({ length: 50000 }, (_, i) => ({
  id: i,
  name: `訂單 #${i}`,
  amount: (Math.random() * 1000).toFixed(2)
 }))
)

function onRangeChange(r) {
 console.log('可見(jiàn)區(qū)范圍：', r)
}

function onReachEnd() {
 console.log('觸底了，加載更多數(shù)據(jù)...')
 setTimeout(() => {
  const base = items.value.length
  items.value.push(
   ...Array.from({ length: 1000 }, (_, i) => ({
    id: base + i,
    name: `訂單 #${base + i}`,
    amount: (Math.random() * 1000).toFixed(2)
   }))
  )
 }, 500)
}
</script>

<template>
 <VirtualList
  :items="items"
  :height="560"
  :item-height="44"
  :buffer="8"
  key-field="id"
  @rangeChange="onRangeChange"
  @reachEnd="onReachEnd"
 >
  <template #row="{ row, index }">
   <span style="margin-right: 8px">{{ index }}</span>
   {{ row.name }} -- ￥{{ row.amount }}
  </template>
 </VirtualList>
</template>