<template>
	<view class="container">
		<!-- 积分概览 -->
		<view class="score-header">
			<view class="current-score">
				<text class="score-label">当前积分</text>
				<text class="score-value">{{ scoreStats.current_points || 0 }}</text>
			</view>
			<view class="score-stats">
				<view class="stat-item">
					<text class="stat-value">{{ scoreStats.total_income || 0 }}</text>
					<text class="stat-label">累计获得</text>
				</view>
				<view class="stat-item">
					<text class="stat-value">{{ scoreStats.total_expense || 0 }}</text>
					<text class="stat-label">累计消费</text>
				</view>
			</view>
		</view>

		<!-- 筛选栏 -->
		<view class="filter-bar">
			<view class="filter-item" 
				  :class="{ active: currentFilter === 'all' }" 
				  @click="switchFilter('all')">
				<text class="filter-text">全部</text>
			</view>
			<view class="filter-item" 
				  :class="{ active: currentFilter === 'positive' }" 
				  @click="switchFilter('positive')">
				<text class="filter-text">收入</text>
			</view>
			<view class="filter-item" 
				  :class="{ active: currentFilter === 'negative' }" 
				  @click="switchFilter('negative')">
				<text class="filter-text">支出</text>
			</view>
		</view>

		<!-- 积分记录列表 -->
		<view class="record-list">
			<view class="record-item" v-for="(item, index) in recordList" :key="index">
				<view class="record-content">
					<view class="record-info">
						<text class="record-note">{{ item.note }}</text>
						<text class="record-time">{{ formatTime(item.created_at) }}</text>
					</view>
					<view class="record-amount" :class="{ positive: item.change_number > 0, negative: item.change_number < 0 }">
						<text class="amount-text">
							{{ item.change_number > 0 ? '+' : '' }}{{ item.change_number }}
						</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-if="recordList.length === 0 && !loading">
			<uni-icons type="wallet" size="100" color="#ccc"></uni-icons>
			<text class="empty-text">暂无积分记录</text>
		</view>

		<!-- 加载更多 -->
		<view class="load-more" v-if="hasMore && recordList.length > 0">
			<text>加载更多...</text>
		</view>
		
		<!-- 加载中 -->
		<view class="loading" v-if="loading">
			<text>加载中...</text>
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request.js'
	
	export default {
		data() {
			return {
				scoreStats: {
					current_points: 0,
					total_income: 0,
					total_expense: 0
				},
				recordList: [],
				currentFilter: 'all',
				currentPage: 1,
				pageSize: 20,
				hasMore: true,
				loading: false
			}
		},
		onLoad() {
			// 检查登录状态
			const token = uni.getStorageSync('token')
			if (!token) {
				uni.reLaunch({
					url: '/pages/login/login'
				})
				return
			}
			
			this.loadScoreStats()
			this.loadRecords()
		},
		onReachBottom() {
			if (this.hasMore && !this.loading) {
				this.loadMore()
			}
		},
		methods: {
			// 加载积分统计信息
			async loadScoreStats() {
				try {
					const res = await request.get('/back/user/scores/stats')
					if (res.success) {
						this.scoreStats = res.data
					}
				} catch (error) {
					console.error('加载积分统计失败：', error)
				}
			},
			
			// 加载积分记录
			async loadRecords() {
				this.loading = true
				try {
					const params = {
						page: this.currentPage,
						page_size: this.pageSize
					}
					
					if (this.currentFilter !== 'all') {
						params.change_type = this.currentFilter
					}
					
					const res = await request.get('/back/user/scores/records', params)
					
					if (res.success) {
						const data = res.data
						if (this.currentPage === 1) {
							this.recordList = data.list || []
						} else {
							this.recordList = [...this.recordList, ...(data.list || [])]
						}
						
						this.hasMore = this.recordList.length < data.total
						
						// 更新统计信息
						if (data.current_points !== undefined) {
							this.scoreStats.current_points = data.current_points
							this.scoreStats.total_income = data.total_income || 0
							this.scoreStats.total_expense = data.total_expense || 0
						}
					}
				} catch (error) {
					console.error('加载积分记录失败：', error)
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},
			
			// 加载更多
			loadMore() {
				this.currentPage++
				this.loadRecords()
			},
			
			// 切换筛选条件
			switchFilter(filter) {
				this.currentFilter = filter
				this.currentPage = 1
				this.loadRecords()
			},
			
			// 格式化时间
			formatTime(time) {
				if (!time) return ''
				const date = new Date(time)
				const now = new Date()
				const diffTime = now.getTime() - date.getTime()
				const diffDays = Math.floor(diffTime / (24 * 60 * 60 * 1000))
				
				if (diffDays === 0) {
					return `今天 ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
				} else if (diffDays === 1) {
					return `昨天 ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
				} else if (diffDays < 7) {
					return `${diffDays}天前`
				} else {
					return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
				}
			}
		}
	}
</script>

<style scoped>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	/* 积分概览 */
	.score-header {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		padding: 60rpx 40rpx 40rpx;
		color: white;
	}

	.current-score {
		text-align: center;
		margin-bottom: 40rpx;
	}

	.score-label {
		display: block;
		font-size: 28rpx;
		opacity: 0.8;
		margin-bottom: 10rpx;
	}

	.score-value {
		font-size: 80rpx;
		font-weight: bold;
		display: block;
	}

	.score-stats {
		display: flex;
		justify-content: space-around;
	}

	.stat-item {
		text-align: center;
	}

	.stat-value {
		display: block;
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 8rpx;
	}

	.stat-label {
		font-size: 24rpx;
		opacity: 0.8;
	}

	/* 筛选栏 */
	.filter-bar {
		background-color: #fff;
		display: flex;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #eee;
	}

	.filter-item {
		flex: 1;
		text-align: center;
		padding: 30rpx 0;
		position: relative;
	}

	.filter-text {
		font-size: 28rpx;
		color: #666;
	}

	.filter-item.active .filter-text {
		color: #667eea;
		font-weight: bold;
	}

	.filter-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 4rpx;
		background-color: #667eea;
	}

	/* 记录列表 */
	.record-list {
		padding: 20rpx;
	}

	.record-item {
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
	}

	.record-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
	}

	.record-info {
		flex: 1;
	}

	.record-note {
		display: block;
		font-size: 30rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 8rpx;
	}

	.record-time {
		font-size: 24rpx;
		color: #999;
	}

	.record-amount {
		text-align: right;
	}

	.amount-text {
		font-size: 32rpx;
		font-weight: bold;
	}

	.record-amount.positive .amount-text {
		color: #52C41A;
	}

	.record-amount.negative .amount-text {
		color: #FF4D4F;
	}

	/* 空状态 */
	.empty-state {
		text-align: center;
		padding: 200rpx 0;
	}

	.empty-state uni-icons {
		margin-bottom: 40rpx;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
	}

	/* 加载更多 */
	.load-more, .loading {
		text-align: center;
		padding: 40rpx;
		color: #999;
		font-size: 24rpx;
	}
</style>