<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '我的配对',
  },
}
</route>

<template>
  <view class="min-h-screen bg-gray-50">
    <!-- 列表内容 -->
    <scroll-view
      scroll-y
      class="h-screen"
      refresher-enabled
      :refresher-triggered="isRefreshing"
      @refresherrefresh="onRefresh"
      @scrolltolower="loadMore"
    >
      <!-- 配对列表 -->
      <view class="p-4 space-y-4">
        <view
          v-for="item in matchList"
          :key="item.id"
          class="bg-white rounded-2xl shadow-sm overflow-hidden"
        >
          <view class="p-4">
            <view class="flex items-start">
              <!-- 头像 -->
              <image
                class="w-20 h-20 rounded-xl"
                :src="item.avatar || defaultAvatar"
                mode="aspectFill"
              />
              <!-- 基本信息 -->
              <view class="flex-1 ml-4">
                <view class="flex items-center mb-1">
                  <text class="text-lg font-bold text-gray-800">{{ item.nickname }}</text>
                  <text class="ml-2 text-sm text-gray-500">{{ item.age }}岁</text>
                </view>
                <view class="flex items-center space-x-2 mb-2">
                  <text class="text-sm text-gray-600">{{ item.height }}cm</text>
                  <text class="text-sm text-gray-600">|</text>
                  <text class="text-sm text-gray-600">
                    {{ getEducationText(item.educationLevel) }}
                  </text>
                </view>
                <view class="text-sm text-gray-600">
                  {{ item.workArea }} · {{ item.profession }}
                </view>
              </view>
            </view>
            <!-- 操作按钮 -->
            <view class="mt-4 flex space-x-3">
              <button
                class="flex-1 bg-gradient-to-r from-sky-400 to-indigo-400 text-white text-sm py-2 rounded-lg shadow-sm hover:shadow-md transition-shadow"
                @tap="handleViewDetail(item)"
              >
                查看详情
              </button>
              <button
                class="flex-1 bg-white border border-sky-200 text-sky-600 text-sm py-2 rounded-lg hover:bg-sky-50 transition-colors"
                @tap="handleViewDetail(item)"
              >
                联系TA
              </button>
            </view>
          </view>
        </view>
      </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-sky-500 rounded-full animate-bounce"></view>
          <view
            class="w-2 h-2 bg-sky-500 rounded-full animate-bounce"
            style="animation-delay: 0.2s"
          ></view>
          <view
            class="w-2 h-2 bg-sky-500 rounded-full animate-bounce"
            style="animation-delay: 0.4s"
          ></view>
        </view>
      </view>
      <view v-else-if="!hasMore" 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 { getMyLoveListAPI } from '@/service/love'
import type { LoveUserItem } from '@/service/love/type'

const defaultAvatar = '/static/images/default-avatar.png'

// 列表数据
const matchList = ref<LoveUserItem[]>([])
const isLoading = ref(false)
const isRefreshing = ref(false)
const hasMore = ref(true)

// 获取学历文本
const getEducationText = (level: string) => {
  const educationMap: Record<string, string> = {
    '1': '初中',
    '2': '高中',
    '3': '大专',
    '4': '本科',
    '5': '硕士',
    '6': '博士',
  }
  return educationMap[level] || '未知'
}

// 获取配对列表
const getMatchList = async () => {
  if (isLoading.value) return

  try {
    isLoading.value = true
    const res = await getMyLoveListAPI()
    if (res.code === 200) {
      matchList.value = res.data
      hasMore.value = false // 由于API没有分页，所以直接设置为没有更多
    } else {
      uni.showToast({
        title: res.message || '获取配对列表失败',
        icon: 'none',
      })
    }
  } catch (error) {
    console.error('获取配对列表失败:', error)
    uni.showToast({
      title: '获取配对列表失败',
      icon: 'none',
    })
  } finally {
    isLoading.value = false
    isRefreshing.value = false
  }
}

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

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

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

// 联系TA
const handleContact = (item: LoveUserItem) => {
  if (!item.isUnlocked) {
    uni.showToast({
      title: '请先解锁查看联系方式',
      icon: 'none',
    })
    return
  }

  if (!item.wechatId) {
    uni.showToast({
      title: '对方暂未设置联系方式',
      icon: 'none',
    })
    return
  }

  uni.showModal({
    title: '联系方式',
    content: `微信号：${item.wechatId}`,
    showCancel: false,
  })
}

onMounted(() => {
  getMatchList()
})
</script>

<style lang="scss" scoped>
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

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