<template>
  <view class="min-h-screen flex flex-col bg-white">
    <!-- Blue header background -->
    <view class="bg-blue-500 h-52 absolute w-full top-0 left-0 z-0"></view>
    <!-- <AppHeader title="积分明细" /> -->
    <!-- Content -->
    <view class="relative z-10 flex-1 pb-20">
      <!-- Points display -->
      <view class="pt-4 pb-6 flex flex-col items-center">
        <h2 class="text-4xl font-bold text-white mb-1">2580</h2>
        <p class="text-white text-opacity-80">当前可用积分</p>
      </view>
      <!-- Points strategy section -->
      <view class="bg-white rounded-t-3xl px-4 pt-5">
        <view class="flex justify-between items-center mb-4">
          <h3 class="text-lg font-medium">积分攻略</h3>
          <view @tap="handleViewAll" class="text-blue-500 text-sm flex items-center">
            查看全部
            <!-- <Right size="16" /> -->
          </view>
        </view>
        <!-- Strategy cards -->
        <view class="space-y-3 mb-6">
          <view class="bg-white border border-gray-100 p-4 rounded-lg flex items-start shadow-sm">
            <view class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
              <My size="20" class="text-blue-500" />
            </view>
            <view>
              <h4 class="font-medium">日常步数积分</h4>
              <p class="text-sm text-gray-600">
                100步=1分，普通人走1km约3000步
              </p>
            </view>
          </view>
          <view class="bg-white border border-gray-100 p-4 rounded-lg flex items-start shadow-sm">
            <view class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
              <My size="20" class="text-blue-500" />
            </view>
            <view>
              <h4 class="font-medium">参与活动积分</h4>
              <p class="text-sm text-gray-600">
                打卡一个商户卡点，获得1000分
              </p>
            </view>
          </view>
          <view class="bg-white border border-gray-100 p-4 rounded-lg flex items-start shadow-sm">
            <view class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
              <My size="20" class="text-blue-500" />
            </view>
            <view>
              <h4 class="font-medium">完成活动积分</h4>
              <p class="text-sm text-gray-600">
                南京路商圈完成7个卡点，获得5000分
              </p>
            </view>
          </view>
        </view>
        <!-- Tabs -->
        <view class="border-b border-gray-200">
          <view class="flex space-x-8">
            <view :class="['py-3 font-medium', activeTab === 'all' ? 'text-blue-500 border-b-2 border-blue-500' : 'text-gray-500']" @click="activeTab = 'all'">
              全部
            </view>
            <view :class="['py-3 font-medium', activeTab === 'earned' ? 'text-blue-500 border-b-2 border-blue-500' : 'text-gray-500']" @click="activeTab = 'earned'">
              已发放
            </view>
            <view :class="['py-3 font-medium', activeTab === 'spent' ? 'text-blue-500 border-b-2 border-blue-500' : 'text-gray-500']" @click="activeTab = 'spent'">
              已消耗
            </view>
          </view>
        </view>
        <!-- Points history list -->
        <view class="pt-4">
          <view v-for="item in filteredPoints" :key="item.id" class="py-4 border-b border-gray-100 flex justify-between">
            <view>
              <h4 class="font-medium">{{ item.title }}</h4>
              <p class="text-sm text-gray-500">{{ item.date }}</p>
            </view>
            <span :class="['font-medium', item.type === 'earned' ? 'text-green-500' : 'text-red-500']">
              {{ item.type === 'earned' ? '+' : '-' }}
              {{ item.points }}
            </span>
          </view>
        </view>
      </view>
    </view>
    <!-- <BottomNav /> -->
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import Taro from '@tarojs/taro';
import AppHeader from '../../components/AppHeader.vue';
import BottomNav from '../../components/BottomNav.vue';
import { Right, My } from '@nutui/icons-vue-taro';

const activeTab = ref('all');

const pointsHistory = ref([
  {
    id: 1,
    title: '每日步数奖励',
    date: '2025-08-24 09:30',
    points: 100,
    type: 'earned'
  },
  {
    id: 2,
    title: '周末步数挑战完成',
    date: '2025-08-24 08:15',
    points: 200,
    type: 'earned'
  },
  {
    id: 3,
    title: '兑换杏花楼85折券',
    date: '2025-08-23 15:20',
    points: 10,
    type: 'spent'
  },
  {
    id: 4,
    title: '邀请家人奖励',
    date: '2025-08-23 14:00',
    points: 500,
    type: 'earned'
  },
  {
    id: 5,
    title: '兑换老凤祥9折券',
    date: '2025-08-22 16:45',
    points: 1000,
    type: 'spent'
  }
]);

const filteredPoints = computed(() => {
  if (activeTab.value === 'all') {
    return pointsHistory.value;
  }
  return pointsHistory.value.filter(p => p.type === activeTab.value);
});

const handleViewAll = () => {
  Taro.navigateTo({
    url: '/pages/PointsList/index'
  })
}
</script>