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

<template>
  <view class="min-h-screen bg-gray-50">
    <!-- 顶部筛选 -->
    <view class="sticky top-0 z-10 bg-white shadow-sm">
      <view class="flex items-center justify-around p-4 border-b border-gray-100">
        <view
          v-for="(item, index) in filterOptions"
          :key="index"
          class="flex-1 text-center"
          @tap="changeFilter(item.value)"
        >
          <text
            :class="[
              'text-sm py-2 px-4 rounded-full transition-colors',
              currentFilter === item.value
                ? 'bg-sky-500 text-white'
                : 'text-gray-600 hover:bg-gray-100',
            ]"
          >
            {{ item.label }}
          </text>
        </view>
      </view>
    </view>

    <!-- 活动列表 -->
    <view class="p-4">
      <!-- 加载状态 -->
      <view v-if="loading" class="flex justify-center items-center py-8">
        <text class="text-gray-500">加载中...</text>
      </view>

      <!-- 错误状态 -->
      <view v-else-if="error" class="flex justify-center items-center py-8">
        <text class="text-red-500">{{ error }}</text>
      </view>

      <!-- 空状态 -->
      <view v-else-if="!activities.length" class="flex justify-center items-center py-8">
        <text class="text-gray-500">暂无活动</text>
      </view>

      <!-- 活动列表 -->
      <view v-else class="space-y-4">
        <view
          class="bg-white rounded-2xl shadow-lg overflow-hidden transform transition-all duration-300 hover:scale-[1.02] active:scale-[0.98]"
          v-for="item in activities"
          :key="item.id"
          @tap="viewActivity(item)"
        >
          <view class="relative">
            <image :src="item.eventAvatar" mode="aspectFill" class="w-full h-40 object-cover" />
            <view
              class="absolute top-3 right-3 px-3 py-1 bg-white/90 rounded-full backdrop-blur-sm"
            >
              <text class="text-sm text-primary font-medium">¥{{ item.eventPrice }}</text>
            </view>
            <view
              :class="[
                'absolute top-3 left-3 px-3 py-1 rounded-full text-sm font-medium',
                item.status === '1' ? 'bg-green-500/90 text-white' : 'bg-gray-500/90 text-white',
              ]"
            >
              {{ item.status === '1' ? '进行中' : '已结束' }}
            </view>
          </view>
          <view class="p-4">
            <text class="block text-lg font-bold mb-2">{{ item.eventTitle }}</text>
            <view class="flex items-center text-sm text-gray-500">
              <text class="iconfont icon-time mr-1"></text>
              <text>截止时间: {{ formatDate(item.eventEndTime) }}</text>
            </view>
            <view class="mt-3 flex items-center justify-between">
              <view class="flex items-center">
                <view class="flex -space-x-2">
                  <image
                    v-for="(avatar, index) in getRandomAvatars(3)"
                    :key="index"
                    :src="avatar"
                    class="w-8 h-8 rounded-full border-2 border-white"
                  />
                </view>
                <text class="ml-2 text-sm text-gray-500">已有 {{ item.eventNumber }} 人报名</text>
              </view>
              <view
                class="px-4 py-2 bg-primary text-white text-sm rounded-full"
                @tap.stop="handleJoin(item)"
              >
                查看详情
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { getMyEventListAPI } from '@/service/event'
import type { MyEventItem } from '@/service/event/type'
import { formatDate } from '@/utils/date'

// 筛选选项
const filterOptions = [
  { label: '全部', value: '1' },
  { label: '进行中', value: '2' },
  { label: '已结束', value: '3' },
]

// 状态
const loading = ref(false)
const error = ref('')
const activities = ref<MyEventItem[]>([])
const currentFilter = ref('1')

// 获取活动列表
const fetchActivities = async () => {
  loading.value = true
  error.value = ''
  try {
    const res = await getMyEventListAPI()
    if (res.code === 200) {
      activities.value = res.data
    } else {
      error.value = res.message || '获取活动列表失败'
    }
  } catch (err) {
    error.value = '网络错误，请稍后重试'
    console.error('获取活动列表失败:', err)
  } finally {
    loading.value = false
  }
}

// 切换筛选
const changeFilter = (filter: string) => {
  currentFilter.value = filter
  fetchActivities()
}

// 查看活动详情
const viewActivity = (item: MyEventItem) => {
  uni.navigateTo({
    url: `/pages/activity/detail?id=${item.id}`,
  })
}

// 获取随机头像（实际项目中应该使用真实数据）
const getRandomAvatars = (count: number) => {
  return Array(count).fill(
    'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg',
  )
}

// 初始化
onMounted(() => {
  fetchActivities()
})
</script>
