<template>
  <view class="scrollable-family-list" :style="{ height: containerHeight }">
    <scroll-view
      class="scroll-container"
      :scroll-y="true"
      :scroll-top="scrollTop"
      :enable-back-to-top="false"
      :scroll-with-animation="true"
      :enhanced="false"
      :bounces="false"
      :show-scrollbar="false"
      @scroll="onScroll"
      @scrolltoupper="onScrollToUpper"
      @scrolltolower="onScrollToLower"
    >
      <view class="content-wrapper" :style="{ opacity: contentOpacity }">
        <view
          v-for="(item, index) in currentPageData"
          :key="`${currentPage}-${index}`"
          class="family-item"
          :style="getItemStyle(index)"
        >
          <view class="family-content">
            <!-- 头像 -->
            <view class="family-avatar-container">
              <image
                :src="item.avatar"
                class="family-avatar"
                mode="aspectFill"
              />
            </view>

            <!-- 信息区域 -->
            <view class="family-info">
              <!-- 标题行 -->
              <view class="family-title-row">
                <text class="family-name">{{ item.familyName }}</text>
              </view>

              <!-- 介绍 -->
              <text class="family-intro">{{ item.familyIntro }}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed, watch, onMounted, nextTick } from 'vue'
import Taro, { usePageScroll } from '@tarojs/taro'

// Props
const props = defineProps({
  // 家庭数据列表
  familyData: {
    type: Array,
    default: () => []
  },
  // 容器高度
  height: {
    type: String,
    default: '600rpx'
  },
  // 每页显示的行数
  itemsPerPage: {
    type: Number,
    default: 5
  },
  // 是否监听外部容器滚动
  listenExternalScroll: {
    type: Boolean,
    default: false
  },
  // 添加额外占位，用于触发滚动事件
  extraPlaceholder: {
    type: Number,
    default: 1
  }
})

// 响应式数据
const scrollTop = ref(0)
const currentPage = ref(0)
const contentOpacity = ref(1)
const isTransitioning = ref(false)
const lastScrollTop = ref(0)
const scrollDirection = ref('') // 'up' | 'down'

// 计算属性
const containerHeight = computed(() => props.height)

const totalPages = computed(() => {
  return Math.ceil(props.familyData.length / props.itemsPerPage)
})

const currentPageData = computed(() => {
  const start = currentPage.value * props.itemsPerPage
  // 每页多显示一个item，有利于滚动触发
  const end = start + props.itemsPerPage + props.extraPlaceholder
  return props.familyData.slice(start, end)
})

// 随机水平位置数组
const randomOffsets = ref([])

// 生成按行数规律排列的偏移
const generateRandomOffsets = () => {
  // 为实际显示的item数量生成偏移（包括多出的一个）
  const actualItemCount = Math.min(props.itemsPerPage + props.extraPlaceholder, props.familyData.length - currentPage.value * props.itemsPerPage)

  randomOffsets.value = Array.from({ length: actualItemCount }, (_, index) => {
    // 按行数规律排列：奇数行(1,3,5...)靠左，偶数行(2,4,6...)靠右
    const rowNumber = index + 1 // 行号从1开始

    if (rowNumber % 2 === 1) {
      // 奇数行靠左边容器
      return 0  // 不偏移，靠左
    } else {
      // 偶数行靠右边容器，使用特殊标记
      return 100  // 使用特殊值标记需要贴右边
    }
  })
}

// 获取每个项目的样式
const getItemStyle = (index) => {
  const offset = randomOffsets.value[index] || 0
  const rowNumber = index + 1 // 行号从1开始

  // 偶数行贴右边的特殊处理
  if (rowNumber % 2 === 0 && offset === 100) {
    return {
      marginBottom: '24rpx',
      maxWidth: '100%',
      paddingLeft: '0',
      paddingRight: '0',
      display: 'flex',
      justifyContent: 'flex-end', // 让内容靠右对齐
      // 不使用transform，完全依靠justify-content来贴右边
    }
  }

  // 奇数行靠左的处理
  return {
    transform: `translateX(${offset}rpx)`,
    marginBottom: '24rpx',
    maxWidth: '100%',
    paddingLeft: '0',
    paddingRight: '0'
  }
}

// 滚动事件处理
const onScroll = (e) => {
  if (isTransitioning.value) return

  const currentScrollTop = e.detail.scrollTop
  const delta = currentScrollTop - lastScrollTop.value

  // 提高阈值，减少误触发
  if (Math.abs(delta) > 10) {
    scrollDirection.value = delta > 0 ? 'down' : 'up'
  }

  lastScrollTop.value = currentScrollTop
}

// 滚动到顶部 - 优化触发逻辑
const onScrollToUpper = () => {
  if (props.listenExternalScroll || isTransitioning.value) return

  // 添加延迟防抖，避免快速触发
  setTimeout(() => {
    if (scrollDirection.value === 'up' && !isTransitioning.value) {
      changePage('prev')
    }
  }, 100)
}

// 滚动到底部 - 优化触发逻辑
const onScrollToLower = () => {
  if (props.listenExternalScroll || isTransitioning.value) return

  // 添加延迟防抖，避免快速触发
  setTimeout(() => {
    if (scrollDirection.value === 'down' && !isTransitioning.value) {
      changePage('next')
    }
  }, 100)
}

// 切换页面 - 优化过渡效果
const changePage = async (direction) => {
  if (isTransitioning.value) return

  isTransitioning.value = true

  // 重置滚动方向，避免连续触发
  scrollDirection.value = ''

  // 淡出效果
  contentOpacity.value = 0

  await new Promise(resolve => setTimeout(resolve, 250))

  // 更新页面
  if (direction === 'next') {
    currentPage.value = (currentPage.value + 1) % totalPages.value
  } else {
    currentPage.value = currentPage.value === 0
      ? totalPages.value - 1
      : currentPage.value - 1
  }

  generateRandomOffsets()

  // 重置滚动位置到中间位置，确保有足够的滚动空间
  // 设置一个中间值，让用户可以向上或向下滚动
  scrollTop.value = 100

  await nextTick()

  // 再次确保滚动位置重置，给足够的滚动触发空间
  setTimeout(() => {
    scrollTop.value = 50
  }, 50)

  // 淡入效果
  contentOpacity.value = 1

  // 延长过渡锁定时间，确保动画完成
  setTimeout(() => {
    isTransitioning.value = false
    // 最终重置到一个稳定的中间位置
    scrollTop.value = 80
  }, 400)
}

// 外部滚动监听
const handleExternalScroll = (res) => {
  if (!props.listenExternalScroll || isTransitioning.value) return

  // 获取页面滚动信息
  const { scrollTop } = res
  const windowHeight = Taro.getSystemInfoSync().windowHeight

  // 使用createSelectorQuery获取页面高度
  const query = Taro.createSelectorQuery()
  query.selectViewport().scrollOffset()
  query.exec((queryRes) => {
    if (queryRes && queryRes[0]) {
      const { scrollHeight } = queryRes[0]

      // 判断是否滚动到底部（留一些余量）
      if (scrollTop + windowHeight >= scrollHeight - 50) {
        setTimeout(() => {
          // 触发翻页到下一页
          changePage('next')
        }, 100)
      }
    }
  })
}

// 使用usePageScroll监听页面滚动
if (props.listenExternalScroll) {
  usePageScroll(handleExternalScroll)
}

// 监听数据变化
watch(() => props.familyData, () => {
  currentPage.value = 0
  generateRandomOffsets()
}, { immediate: true })

// 组件挂载
onMounted(() => {
  generateRandomOffsets()
})
</script>

<style>
.scrollable-family-list {
  position: relative;
  width: 100%;
  /* border-radius: 20rpx; */
  overflow: hidden;
  /* background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); */

}

.scroll-container {
  width: 100%;
  height: 100%;
}

.content-wrapper {
  /* padding: 32rpx 0; */
  padding-top: 32rpx;
  transition: opacity 0.3s ease;
  min-height: 100%;
}

.family-item {
  width: 100%;
  transition: transform 0.3s ease;
}

.family-content {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 30rpx;
  padding: 20rpx 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(12rpx);
  border: 2rpx solid rgba(255, 255, 255, 0.5);
  max-width: 550rpx;
  min-width: 350rpx;
  transition: all 0.3s ease;
}

.family-content:hover {
  transform: translateY(-4rpx);
  box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.12);
}

.family-avatar-container {
  flex-shrink: 0;
  margin-right: 20rpx;
  position: relative;
}

.family-avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  border: 3rpx solid #fff;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
}

.family-avatar-container::after {
  content: '';
  position: absolute;
  top: -3rpx;
  left: -3rpx;
  right: -3rpx;
  bottom: -3rpx;
  border-radius: 50%;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
  z-index: -1;
  animation: rotate 4s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.family-info {
  flex: 1;
  min-width: 0;
}

.family-title-row {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
}

.family-name {
  font-weight: 700;
  color: #1a202c;
  font-size: 32rpx;
  margin-right: 12rpx;
  flex-shrink: 0;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.family-intro {
  color: #4a5568;
  font-size: 26rpx;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-height: 1.5;
  font-weight: 500;
}

.page-indicator {
  position: absolute;
  bottom: 16rpx;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12rpx;
  z-index: 10;
}

.indicator-dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transition: all 0.3s ease;
}

.indicator-dot.active {
  background: rgba(255, 255, 255, 0.9);
  transform: scale(1.2);
}
</style>