<template>
	<view class="pay-history-page">
		<customNavbar title="账单" />

		<!-- 筛选栏 -->
		<view class="filter-bar">
			<!-- 年份筛选点击区域 -->
			<view class="year-filter" @click="toggleYearPicker">
				<text class="year-text">{{ currentYear }}年</text>
				<u-icon name="arrow-down" size="24" color="#666"></u-icon>
			</view>

			<!-- 自定义年份选择器弹窗 -->
			<u-popup v-model="showYearPicker" mode="bottom" border-radius="20rpx" :closeable="true">
				<view class="year-picker-popup">
					<!-- 弹窗标题 -->
					<view class="popup-header">
						<text class="popup-title">选择年份</text>
					</view>

					<!-- 年份列表 -->
					<view class="year-list">
						<view class="year-item" v-for="year in years" :key="year"
							:class="{ active: currentYear === year }" @click="selectYear(year)">
							{{ year }}年
						</view>
					</view>
				</view>
			</u-popup>
			<!-- 顶部tab切换 -->
			<view class="tab-bar">
				<view v-for="(tab, index) in tabs" :key="index"
					:class="['tab-item', activeTab === tab.value ? 'active' : '']" @click="onTabClick(tab.value)">
					{{ tab.label }}
				</view>
			</view>
		</view>

		<!-- 收支记录列表 -->
		<scroll-view scroll-y class="scroll-content" @scrolltolower="loadMore">
			<view v-if="flowList.length > 0" class="record-list">
				<view v-for="(item, index) in flowList" :key="index" class="record-item" @click="goDetail(item)">
					<!-- 左侧信息 -->
					<view class="left">
						<view class="title">{{ item.itemName }}</view>
						<view class="sub">{{ item.payDate || item.inDate || '未知'}}</view>
					</view>

					<!-- 右侧金额 + 图标 -->
					<view class="right">
						<view class="amount" :class="item.inOutType === '支' ? 'income' : 'expense'">
							{{ item.inOutType === '支' ? '+' : '-' }}{{ formatMoney(item.itemAmount) }}
						</view>
						<u-icon name="arrow-right" size="32" color="#ccc"></u-icon>
					</view>
				</view>
				
				<!-- ✅ 加载更多组件 -->
				<u-loadmore :status="loadStatus" />
			</view>

			<view v-else class="empty">
				<u-empty mode="list" text="暂无记录" />
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageNo: 1,
				pageSize:10,
				flowList: [],
				loadStatus: 'more', // ✅ 修复为官方正确值
				activeTab: '收',
				tabs: [{
						label: '收入',
						value: '支'
					},
					{
						label: '支出',
						value: '收'
					},
				],
				currentYear: null,
				years: [],
				showYearPicker: false
			};
		},
		onLoad(options) {
			let year = new Date().getFullYear();
			this.currentYear = year;
			this.years = [];
			for (let i = 5; i >= 1; i--) {
				this.years.push(year - i);
			}
			this.fetchPayRecord();
		},
		onShow() {
			this.$checkToken(this.$getToken())
			this.checkOaAuth()
		},
		// ✅ 删除和 scroll-view 冲突的 onReachBottom
		watch: {
			activeTab(newVal, oldVal) {
				if (newVal !== oldVal) {
						this.resetAndLoad()
				}
			}
		},
		methods: {
			checkOaAuth() {
				const token = this.$getToken()
				if (!token) return
				const userInfo = uni.getStorageSync('userInfo')
				if (!userInfo || !userInfo.oaAuth) {
					uni.showModal({
						title: '提示',
						content: '您还未实名认证，请先完成实名认证',
						showCancel: false,
						confirmText: '去认证',
						success: () => {
							uni.redirectTo({ url: '/pages-biz/profile/profile' })
						}
					})
				}
			},
			onTabClick(val) {
			  this.activeTab = val
			  this.resetAndLoad()
			},
			fetchPayRecord() {
				// ✅ 正确判断加载状态
				if (this.loadStatus !== 'more') return;
				this.loadStatus = 'loading';
				
				let url = '/bill/pageQueryPayRecord'
				this.$u.post(url, {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					year: this.currentYear,
					leType: this.activeTab
				},{
					WT:this.$getToken()
				}).then(res => {
					const rows = res.data.result || [];
					if (this.pageNo === 1) this.flowList = [];
					this.flowList = this.flowList.concat(rows);
					
					if (rows.length < this.pageSize) {
					  this.loadStatus = 'nomore';
					} else {
					  this.pageNo++;
					  this.loadStatus = 'more';
					}
				}).catch(err => {
					console.log("获取账单记录失败：", err)
					this.loadStatus = 'more'; // ✅ 异常恢复
				})
			},
			toggleYearPicker() {
				this.showYearPicker = !this.showYearPicker;
			},
			selectYear(year) {
				this.currentYear = year;
				this.showYearPicker = false;
				this.resetAndLoad();
			},
			formatMoney(val) {
				if (!val && val !== 0) return '—';
				return '¥' + Number(val).toFixed(2);
			},
			resetAndLoad(){
				this.loadStatus = 'more';
				this.pageNo = 1;
				this.flowList = [];
				this.fetchPayRecord();
			},
			loadMore() {
				if (this.loadStatus !== 'more') return;
				this.fetchPayRecord();
			},
			goDetail(item) {
			
			},
		}
	};
</script>

<style lang="scss" scoped>
	.pay-history-page {
		background: #f8f8f8;
		min-height: 100vh;
		padding-top: 175rpx;
		box-sizing: border-box;
	}
	
	.filter-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		padding: 24rpx 30rpx;
		margin: 20rpx;
		margin-bottom: 0;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
	}
	
	/* 年份筛选 */
	.year-filter {
		display: flex;
		align-items: center;
		gap: 8rpx;
		font-size: 32rpx;
		color: #333;
		cursor: pointer;
	}
	
	/* 支出/收入切换 */
	.tab-bar {
		display: flex;
		gap: 20rpx;
	}
	
	.tab-item {
		padding: 12rpx 32rpx;
		font-size: 28rpx;
		border-radius: 24rpx;
		color: #333;
		background-color: #f5f5f5;
		transition: all 0.2s ease;
	
		&.active {
			color: #fff;
			background: #ff3b30;
		}
	}
	
	/* 自定义年份选择器样式 */
	.year-picker-popup {
		background: #fff;
		padding: 30rpx 0;
	}
	
	.popup-header {
		text-align: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.popup-title {
		font-size: 34rpx;
		font-weight: 600;
		color: #333;
	}
	
	.year-list {
		padding: 20rpx;
	}
	
	.year-item {
		font-size: 32rpx;
		color: #666;
		text-align: center;
		padding: 24rpx;
		border-radius: 12rpx;
		margin-bottom: 16rpx;
		background: #f5f5f5;
		transition: all 0.2s ease;
	
		&:last-child {
			margin-bottom: 0;
		}
	
		&.active {
			background: #ff3b30;
			color: #fff;
		}
	
		&:hover {
			background: #ff5252;
			color: #fff;
		}
	}

	/* ✅ 正确的滚动高度 */
	.scroll-content {
		height: calc(100vh - 175rpx - 120rpx);
		box-sizing: border-box;
	}

	.record-list {
		padding: 20rpx;

		.record-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fff;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			padding: 20rpx;
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.03);

			.left {
				flex: 1;

				.title {
					font-size: 28rpx;
					font-weight:5600;
					color: #2D2B2C;
				}

				.sub {
					font-size: 24rpx;
					color: #86868C;
					margin-top: 18rpx;
				}

				.status {
					font-size: 28rpx;

					&.paid {
						color: #73B936;
					}

					&.unpaid {
						color: #F34038;
					}
				}
			}

			.right {
				display: flex;
				align-items: center;

				.amount {
					font-size: 28rpx;
					font-weight: 500;
					margin-right: 10rpx;

					&.income {
						color: #73B936;
					}

					&.expense {
						color: #F34038;
					}
				}
			}
		}
	}

	.empty {
		margin-top: 100rpx;
	}
</style>