<template>
	<view class="page-container">
		<!-- 添加信息收集按钮 -->
		<view class="add" @click="addDormInfo">+</view>

		<!-- 滚动容器（使用scroll-view确保事件生效） -->
		<scroll-view class="scroll-container" scroll-y @scrolltolower="loadNextPage" refresher-enabled
			@refresherrefresh="handleRefresh">
			<!-- 入住收集列表 -->
			<view class="dorm-list">
				<view class="dorm-item" v-for="(item, index) in dormInfo"
					:key="`${item.id}_${Math.ceil((index + 1) / queryParams.pageSize)}`" @click="handleItemClick(item)">
					<view class="item-header">
						<view class="name">姓名: {{ item.stuName }}</view>
						<view class="tag" :class="item.isDormitoryHead === 1 ? 'head-tag' : ''">
							{{ item.isDormitoryHead === 1 ? '宿舍长' : '' }}
						</view>
					</view>
					<view class="item-content">
						<view>学号: {{ item.stuNo }}</view>
						<view>班级: {{ item.className }}</view>
						<view>院系: {{ item.deptName }}</view>
						<view>宿舍: {{ item.parkName }} {{ item.buildingName }} {{ item.floorName }}楼{{ item.roomNo }}室
						</view>
						<view>入住时间: {{ item.checkinTime }}</view>
						<view>状态: {{ item.inStatus === '1' ? '已入住' : '未入住' }}</view>
					</view>
				</view>
			</view>

			<!-- 加载状态 -->
			<view v-if="isLoading" class="loading">加载中...</view>
			<view v-if="!hasMore && dormInfo.length > 0" class="no-more">已加载全部数据</view>
			<view v-if="dormInfo.length === 0 && !isLoading" class="no-data">暂无数据</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		listStudent
	} from "@/api/dms/studentDormInfo/index.js"
	import {
		getUserProfile
	} from '@/api/system/user'

	export default {
		data() {
			return {
				queryParams: {
					pageNum: 1,
					pageSize: 5, // 每页5条，便于测试分页
					dormitoryId: null,
					bedId: null,
					stuNo: null,
					isDormitoryHead: null,
					status: null,
					checkinTime: null,
					inStatus: null,
					stuName: null,
				},
				dormInfo: [],
				isLoading: false,
				hasMore: true
			}
		},
		onShow() {
			// 每次显示页面时重置数据并重新加载
			this.resetData()
			this.getUserProfile()
		},
		methods: {
			// 重置分页数据（用于刷新或重新加载）
			resetData() {
				this.queryParams.pageNum = 1
				this.dormInfo = []
				this.hasMore = true
			},

			// 查询列表数据
			async getList() {
				if (this.isLoading || !this.hasMore) return
				this.isLoading = true

				try {
					const res = await listStudent(this.queryParams)
					if (res.code === 200) {
						const newData = res.rows || []
						// 第一页覆盖数据，后续页追加
						this.dormInfo = this.queryParams.pageNum === 1 ?
							newData :
							[...this.dormInfo, ...newData]
						// 判断是否还有更多数据（当前页数据量等于页大小，说明可能有下一页）
						this.hasMore = newData.length === this.queryParams.pageSize
					} else {
						uni.showToast({
							title: '加载失败',
							icon: 'none'
						})
					}
				} catch (err) {
					console.error('加载数据出错:', err)
					uni.showToast({
						title: '网络错误',
						icon: 'none'
					})
				} finally {
					this.isLoading = false
					// 停止下拉刷新
					uni.stopPullDownRefresh()
				}
			},

			// 加载下一页
			loadNextPage() {
				console.log('触发加载下一页')
				if (this.hasMore) {
					this.queryParams.pageNum++
					this.getList()
				}
			},

			// 下拉刷新
			handleRefresh() {
				console.log('触发下拉刷新')
				this.resetData()
				this.getList()
			},

			// 获取用户信息
			async getUserProfile() {
				try {
					const res = await getUserProfile()
					console.log('当前用户信息:', res)
					if (res.roleGroup == "学生") {
						this.queryParams.stuName = res.data.nickName
					}
					this.getList()
				} catch (err) {
					console.error('获取用户信息失败:', err)
				}
			},

			// 跳转添加页面
			addDormInfo() {	
				if (this.dormInfo.length > 0) {
					uni.showToast({
						title: '请勿重复提交',
						icon: 'none'
					});
					return
				}
				uni.navigateTo({
					url: `/pages/dormitory/studentDormInfo/informationCollection`
				})
			},

			// 点击列表项
			handleItemClick(item) {
				console.log('点击学生信息:', item)
				// 可添加跳转详情页逻辑
				// uni.navigateTo({ url: `/pages/detail?id=${item.id}` })
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-container {
		position: relative;
		height: 100vh;
		background-color: #f5f7fa;
	}

	/* 滚动容器 */
	.scroll-container {
		height: 100%;
		/* 必须设置高度才能滚动 */
		width: 100%;
		padding-bottom: 120rpx;
		/* 预留底部按钮空间 */
		box-sizing: border-box;
	}

	/* 添加按钮 */
	.add {
		position: fixed;
		bottom: 50rpx;
		right: 50rpx;
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		background-color: #1890FF;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 60rpx;
		box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
		z-index: 99;
	}

	/* 列表容器 */
	.dorm-list {
		padding: 20rpx;
	}

	/* 列表项 */
	.dorm-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 28rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		transition: transform 0.2s;
	}

	.dorm-item:active {
		transform: scale(0.99);
		/* 点击反馈 */
	}

	/* 列表项头部 */
	.item-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		padding-bottom: 16rpx;
		border-bottom: 1px solid #f0f0f0;
	}

	.name {
		font-size: 34rpx;
		font-weight: 600;
		color: #333;
	}

	.tag {
		font-size: 24rpx;
		padding: 4rpx 16rpx;
		border-radius: 20rpx;
		color: #fff;
	}

	.head-tag {
		background-color: #28a745;
	}

	/* 列表项内容 */
	.item-content {
		font-size: 28rpx;
		color: #666;
		line-height: 1.8;
	}

	.item-content view {
		margin-bottom: 14rpx;
	}

	.item-content view:last-child {
		margin-bottom: 0;
	}

	/* 加载状态 */
	.loading,
	.no-more,
	.no-data {
		text-align: center;
		padding: 30rpx 0;
		color: #999;
		font-size: 28rpx;
	}

	.no-data {
		padding: 100rpx 0;
	}
</style>