<!-- 推荐列表页面 -->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '推荐列表',
  },
}
</route>

<template>
  <view class="min-h-screen bg-gray-50">
    <!-- 顶部导航栏 -->
    <view class="sticky top-0 z-10 bg-white/80 backdrop-blur-sm border-b border-gray-100">
      <view class="flex items-center justify-between px-4 py-3">
        <view class="flex items-center">
          <text class="text-xl font-bold text-gray-900">推荐列表</text>
        </view>
      </view>
    </view>

    <!-- 推荐列表 -->
    <scroll-view
      scroll-y
      class="h-[calc(100vh-120rpx)]"
      refresher-enabled
      :refresher-triggered="isRefreshing"
      @refresherrefresh="onRefresh"
      @scrolltolower="loadMore"
    >
      <view v-if="recommendList.length > 0" class="p-4 space-y-4">
        <view
          v-for="(item, index) in recommendList"
          :key="index"
          class="bg-white rounded-2xl shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md active:scale-[0.98]"
          @tap="viewDetail(item)"
        >
          <view class="flex p-4">
            <view class="relative">
              <image
                :src="item.avatarUrl || item.avatar"
                mode="aspectFill"
                class="w-24 h-24 rounded-xl object-cover"
              />
            </view>
            <view class="flex-1 ml-4">
              <view class="flex items-center justify-between mb-2">
                <view class="flex items-center">
                  <text class="text-lg font-semibold text-gray-900 mr-2">{{ item.nickname }}</text>
                  <text class="text-sm text-gray-500">{{ item.age }}岁</text>
                </view>
              </view>
              <view class="flex items-center space-x-2 mb-3">
                <view class="flex items-center">
                  <text class="text-xs text-gray-500">身高 {{ item.height }}cm</text>
                </view>
                <view class="w-px h-3 bg-gray-200"></view>
                <view class="flex items-center">
                  <text class="text-xs text-gray-500">{{ item.education }}</text>
                </view>
                <view class="w-px h-3 bg-gray-200"></view>
                <view class="flex items-center">
                  <text class="text-xs text-gray-500">{{ item.workArea }}</text>
                </view>
              </view>
              <view class="flex items-center">
                <text class="text-sm text-gray-600">{{ item.profession }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-else-if="!isLoading" class="flex flex-col items-center justify-center py-12">
        <image src="/static/empty.png" class="w-32 h-32 mb-4" />
        <text class="text-gray-400">暂无推荐数据</text>
      </view>

      <!-- 加载状态 -->
      <view v-if="isLoading" class="flex justify-center py-6">
        <view class="flex items-center space-x-2">
          <view class="w-2 h-2 bg-primary rounded-full animate-bounce"></view>
          <view
            class="w-2 h-2 bg-primary rounded-full animate-bounce"
            style="animation-delay: 0.2s"
          ></view>
          <view
            class="w-2 h-2 bg-primary rounded-full animate-bounce"
            style="animation-delay: 0.4s"
          ></view>
        </view>
      </view>
      <view v-else-if="!hasMore && recommendList.length > 0" class="flex justify-center py-6">
        <text class="text-sm text-gray-400">没有更多了</text>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import type { LoveUserItem, LoveListParams } from '@/service/love/type'
import { onLoad } from '@dcloudio/uni-app'

// 列表数据
const recommendList = ref<LoveUserItem[]>([])
const page = ref(1)
const pageSize = ref(10)
const hasMore = ref(true)
const isLoading = ref(false)
const isRefreshing = ref(false)

// 获取推荐列表
const getRecommendList = async () => {
  if (isLoading.value) return

  try {
    isLoading.value = true
    const params: LoveListParams = {
      pageIndex: page.value,
    }
  } catch (error) {
    console.error('获取推荐列表失败:', error)
    uni.showToast({
      title: '获取推荐列表失败',
      icon: 'none',
    })
  } finally {
    isLoading.value = false
    isRefreshing.value = false
  }
}

// 下拉刷新
const onRefresh = async () => {
  isRefreshing.value = true
  page.value = 1
  await getRecommendList()
}

// 加载更多
const loadMore = () => {
  if (!hasMore.value || isLoading.value) return
  page.value++
  getRecommendList()
}

// 查看详情
const viewDetail = (item: LoveUserItem) => {
  uni.navigateTo({
    url: `/pages/detail/index?id=${item.id}`,
  })
}

onLoad(() => {
  getRecommendList()
})
</script>

<style lang="scss">
@import '@/style/iconfont.css';

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.animate-bounce {
  animation: bounce 1s infinite;
}
</style>
