<template>
	<un-pages
		:show-nav-bar="true"
		nav-bar-title="账单"
		:show-back="false"
		:show-tab-bar="true"
		@tab-change="handleTabChange"
	>
		<view class="page-content">
			<!-- 统计卡片 -->
			<view class="stats-card">
				<view class="stat-item">
					<text class="stat-label">本月支出</text>
					<text class="stat-value expense">¥{{ monthExpense.toFixed(2) }}</text>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item">
					<text class="stat-label">本月收入</text>
					<text class="stat-value income">¥{{ monthIncome.toFixed(2) }}</text>
				</view>
			</view>

			<!-- 月份选择 -->
			<view class="month-selector">
				<picker mode="date" fields="month" :value="currentMonth" @change="onMonthChange">
					<view class="month-picker">
						<uni-icons type="left" size="20" color="#666"></uni-icons>
						<text class="month-text">{{ currentMonth }}</text>
						<uni-icons type="right" size="20" color="#666"></uni-icons>
					</view>
				</picker>
			</view>

			<!-- 账单列表 -->
			<view class="bill-list">
				<view v-if="loading" class="loading-state">
					<uni-load-more status="loading"></uni-load-more>
				</view>

				<view v-else-if="billList.length === 0" class="empty-state">
					<uni-icons type="list" size="100" color="#ddd"></uni-icons>
					<text class="empty-text">暂无账单记录</text>
					<button class="add-btn" @tap="addBill">
						<uni-icons type="plus" size="18" color="#fff"></uni-icons>
						<text>记一笔</text>
					</button>
				</view>

				<view v-else class="bill-group" v-for="(group, date) in groupedBills" :key="date">
					<view class="group-header">
						<text class="group-date">{{ date }}</text>
						<text class="group-amount">支出: ¥{{ group.expense.toFixed(2) }} 收入: ¥{{ group.income.toFixed(2) }}</text>
					</view>

					<view class="bill-item" v-for="bill in group.bills" :key="bill.id" @tap="editBill(bill)">
						<view class="bill-icon" :style="{background: getCategoryColor(bill.category_id)}">
							<text>{{ getCategoryIcon(bill.category_id) }}</text>
						</view>
						<view class="bill-info">
							<text class="bill-category">{{ getCategoryName(bill.category_id) }}</text>
							<text class="bill-remark" v-if="bill.remark">{{ bill.remark }}</text>
						</view>
						<view class="bill-amount" :class="bill.type">
							<text>{{ bill.type === 'expense' ? '-' : '+' }}¥{{ bill.amount.toFixed(2) }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 添加按钮 -->
			<view class="fab-button" @tap="addBill">
				<uni-icons type="plus" size="24" color="#fff"></uni-icons>
			</view>
		</view>
	</un-pages>
</template>

<script>
export default {
	data() {
		return {
			loading: false,
			currentMonth: this.getCurrentMonth(),
			billList: [],
			monthExpense: 0,
			monthIncome: 0,
			categoryMap: {
				// 支出分类
				1: { name: '餐饮', icon: '🍜', color: '#FF6B6B' },
				2: { name: '交通', icon: '🚗', color: '#4ECDC4' },
				3: { name: '购物', icon: '🛒', color: '#45B7D1' },
				4: { name: '娱乐', icon: '🎮', color: '#96CEB4' },
				5: { name: '医疗', icon: '💊', color: '#FFEAA7' },
				6: { name: '教育', icon: '📚', color: '#DDA0DD' },
				7: { name: '居住', icon: '🏠', color: '#98D8C8' },
				8: { name: '其他', icon: '📦', color: '#BDC3C7' },
				// 收入分类
				101: { name: '工资', icon: '💰', color: '#2ECC71' },
				102: { name: '奖金', icon: '🎁', color: '#E74C3C' },
				103: { name: '投资', icon: '📈', color: '#3498DB' },
				104: { name: '兼职', icon: '💼', color: '#9B59B6' },
				105: { name: '其他', icon: '💎', color: '#1ABC9C' }
			}
		}
	},
	computed: {
		groupedBills() {
			const groups = {}
			this.billList.forEach(bill => {
				const date = bill.date
				if (!groups[date]) {
					groups[date] = {
						bills: [],
						expense: 0,
						income: 0
					}
				}
				groups[date].bills.push(bill)
				if (bill.type === 'expense') {
					groups[date].expense += bill.amount
				} else {
					groups[date].income += bill.amount
				}
			})
			return groups
		}
	},
	onLoad() {
		this.loadBillList()
	},
	onPullDownRefresh() {
		this.loadBillList().then(() => {
			uni.stopPullDownRefresh()
		})
	},
	methods: {
		handleTabChange(path) {
			console.log('Tab changed to:', path)
		},
		getCurrentMonth() {
			const today = new Date()
			const year = today.getFullYear()
			const month = String(today.getMonth() + 1).padStart(2, '0')
			return `${year}-${month}`
		},
		onMonthChange(e) {
			this.currentMonth = e.detail.value
			this.loadBillList()
		},
		async loadBillList() {
			this.loading = true
			try {
				const [year, month] = this.currentMonth.split('-')
				const res = await this.$api.bill.list.get({
					year: parseInt(year),
					month: parseInt(month)
				})

				if (res.code === 200) {
					this.billList = res.data?.list || []
					this.monthExpense = res.data?.month_expense || 0
					this.monthIncome = res.data?.month_income || 0
				}
			} catch (error) {
				console.error('加载账单列表失败', error)
				uni.showToast({
					title: '加载失败，请重试',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},
		addBill() {
			uni.navigateTo({
				url: '/pages/account/bill/add'
			})
		},
		editBill(bill) {
			// TODO: 实现编辑功能
			uni.showToast({
				title: '编辑功能开发中',
				icon: 'none'
			})
		},
		getCategoryName(categoryId) {
			return this.categoryMap[categoryId]?.name || '未知'
		},
		getCategoryIcon(categoryId) {
			return this.categoryMap[categoryId]?.icon || '📦'
		},
		getCategoryColor(categoryId) {
			return this.categoryMap[categoryId]?.color || '#BDC3C7'
		}
	}
}
</script>

<style lang="scss" scoped>
.page-content {
	padding: 30rpx;
	padding-bottom: 150rpx;
}

.stats-card {
	display: flex;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 20rpx;
	padding: 40rpx 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);

	.stat-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;

		.stat-label {
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.8);
			margin-bottom: 12rpx;
		}

		.stat-value {
			font-size: 36rpx;
			font-weight: bold;
			color: #fff;

			&.expense {
				color: #FFEAA7;
			}

			&.income {
				color: #98D8C8;
			}
		}
	}

	.stat-divider {
		width: 2rpx;
		background: rgba(255, 255, 255, 0.3);
		margin: 0 30rpx;
	}
}

.month-selector {
	display: flex;
	justify-content: center;
	margin-bottom: 30rpx;

	.month-picker {
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 50rpx;
		padding: 16rpx 40rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);

		.month-text {
			font-size: 28rpx;
			color: #333;
			font-weight: bold;
			margin: 0 20rpx;
		}
	}
}

.bill-list {
	.loading-state {
		padding: 60rpx 0;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 120rpx 0;

		.empty-text {
			font-size: 28rpx;
			color: #999;
			margin: 30rpx 0 40rpx;
		}

		.add-btn {
			display: flex;
			align-items: center;
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: #fff;
			border: none;
			border-radius: 50rpx;
			padding: 20rpx 50rpx;
			font-size: 28rpx;
			box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);

			uni-icons {
				margin-right: 10rpx;
			}

			&::after {
				border: none;
			}
		}
	}
}

.bill-group {
	margin-bottom: 30rpx;

	.group-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 10rpx;

		.group-date {
			font-size: 26rpx;
			color: #666;
		}

		.group-amount {
			font-size: 24rpx;
			color: #999;
		}
	}

	.bill-item {
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 16rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);

		.bill-icon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 24rpx;

			text {
				font-size: 36rpx;
			}
		}

		.bill-info {
			flex: 1;
			display: flex;
			flex-direction: column;

			.bill-category {
				font-size: 28rpx;
				color: #333;
				font-weight: bold;
				margin-bottom: 8rpx;
			}

			.bill-remark {
				font-size: 24rpx;
				color: #999;
			}
		}

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

			&.expense {
				color: #FF6B6B;
			}

			&.income {
				color: #2ECC71;
			}
		}
	}
}

.fab-button {
	position: fixed;
	right: 40rpx;
	bottom: 160rpx;
	width: 100rpx;
	height: 100rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.5);
	z-index: 100;
}
</style>
