<template>
  <view class="welfare-list-page">
    <view class="page-head">
      <text class="page-title">{{ mode === 'finished' ? '往期活动' : '福利活动' }}</text>
      <text class="page-subtitle">{{ mode === 'finished' ? '查看已结束活动' : '当前仅展示进行中的活动' }}</text>
    </view>

    <view class="toolbar">
      <view class="toolbar-btn" :class="{ active: mode === 'active' }" @tap="switchMode('active')">进行中</view>
      <view class="toolbar-btn" :class="{ active: mode === 'finished' }" @tap="switchMode('finished')">往期活动</view>
    </view>

    <view v-if="loading" class="state">加载中...</view>
    <view v-else-if="activities.length === 0" class="state">{{ mode === 'finished' ? '暂无往期活动' : '暂无进行中的活动' }}</view>

    <view v-else class="activity-grid">
      <view v-for="item in activities" :key="item.id" class="activity-card" @tap="goDetail(item.id)">
        <image v-if="item.cover_image" class="activity-cover" :src="item.cover_image" mode="aspectFill" />
        <view v-else class="activity-cover empty">暂无图片</view>
        <view class="activity-meta">
          <text class="activity-name">{{ item.title }}</text>
          <view class="activity-type-row">
            <text class="activity-type" :class="typeClass(item.type)">{{ typeLabel(item.type) }}</text>
            <text class="activity-status" :class="mode === 'finished' ? 'status-finished' : 'status-active'">
              {{ mode === 'finished' ? '已结束' : '进行中' }}
            </text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { request } from '@/utils/request.js'

export default {
  data() {
    return {
      loading: false,
      mode: 'active',
      activities: []
    }
  },
  onLoad(options) {
    this.mode = options?.mode === 'finished' ? 'finished' : 'active'
    this.loadData()
  },
  methods: {
    async loadData() {
      this.loading = true
      try {
        const status = this.mode === 'finished' ? 'finished' : 'active'
        const res = await request({ url: `/api/app/welfare-activities?status=${status}&page=1&page_size=50` })
        this.activities = Array.isArray(res?.list) ? res.list : []
      } catch (e) {
        uni.showToast({ title: e.message || '加载失败', icon: 'none' })
      } finally {
        this.loading = false
      }
    },
    switchMode(mode) {
      if (this.mode === mode) return
      this.mode = mode
      this.loadData()
    },
    goDetail(id) {
      uni.navigateTo({ url: `/pages-activity/activity/welfare/detail?id=${id}` })
    },
    typeLabel(type) {
      return { daily: '每日福利', weekly: '每周福利', monthly: '每月福利' }[type] || '福利活动'
    },
    typeClass(type) {
      return {
        daily: 'type-daily',
        weekly: 'type-weekly',
        monthly: 'type-monthly'
      }[type] || 'type-default'
    }
  }
}
</script>

<style lang="scss">
.welfare-list-page { min-height: 100vh; padding: 28rpx; background: #fff7ed; }
.page-head { margin-bottom: 28rpx; }
.page-title { display: block; font-size: 46rpx; font-weight: 900; color: #1f2937; }
.page-subtitle { display: block; margin-top: 10rpx; font-size: 24rpx; color: #9ca3af; }
.toolbar { display: flex; gap: 16rpx; margin-bottom: 28rpx; }
.toolbar-btn { flex: 1; text-align: center; padding: 20rpx 0; background: #fff; border-radius: 999rpx; color: #9a5b24; font-weight: 800; }
.toolbar-btn.active { background: #ff8a3d; color: #fff; }
.state { padding: 120rpx 0; text-align: center; color: #9ca3af; }
.activity-grid { display: flex; flex-direction: column; gap: 24rpx; }
.activity-card { display: flex; overflow: hidden; border-radius: 28rpx; background: #fff; box-shadow: 0 12rpx 30rpx rgba(0,0,0,.06); min-height: 220rpx; }
.activity-cover { width: 240rpx; height: 220rpx; display: block; background: #f3f4f6; flex-shrink: 0; }
.activity-cover.empty { display: flex; align-items: center; justify-content: center; color: #9ca3af; }
.activity-meta { flex: 1; padding: 24rpx 22rpx; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.activity-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 30rpx; font-weight: 800; color: #1f2937; line-height: 1.4; }
.activity-type-row { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; margin-top: 12rpx; flex-wrap: wrap; }
.activity-type { display: inline-flex; align-items: center; padding: 8rpx 18rpx; border-radius: 999rpx; font-size: 22rpx; font-weight: 800; }
.type-daily { background: rgba(249, 115, 22, .12); color: #f97316; }
.type-weekly { background: rgba(239, 68, 68, .12); color: #ef4444; }
.type-monthly { background: linear-gradient(135deg, #a855f7, #ec4899, #f59e0b); color: #fff; }
.type-default { background: rgba(148, 163, 184, .12); color: #64748b; }
.activity-status { font-size: 22rpx; font-weight: 700; }
.status-active { color: #10b981; }
.status-finished { color: #94a3b8; }
</style>
