<template>
	<view style="height: 100%;">
		<view class="searchBox">
			<selectRadio v-model="search.buildId" :options="allOptions.buildingList" title="楼栋" @change="()=>{room = '';refresh()}" />
			<selectSearch v-model="room"
				:options="list.map(e=>{return {...e,label:'寝室'+e.label}})" placeholder="请选择寝室"
				popupTitle="选择寝室" search-placeholder="请输入宿舍号" />
		</view>
		<u-empty marginTop="100rpx" :show="list.length == 0&&status == 'nomore'" mode="list" text="暂无数据"></u-empty>
		<u-list @scrolltolower="scrolltolower" style="height: calc(100% - 220rpx);">
			<u-list-item v-for="(item, index) in list" :key="index" v-show="!room || room == item.id">
				<view class="whiteCard">
					<view class="row1">
						<text class="room">寝室{{item.name}}</text>
					</view>
					<view class="row2">
						<text class="returnNum">归寝人数：{{item.dormitoryCount}}</text>
						<text class="noReturnNum">未归寝人数：{{item.personCount - item.dormitoryCount}}</text>
					</view>
					<view class="bottom">
						<view class="peopleNum">
							<image src="@/static/image/peopleNum1.png" mode="aspectFill"></image>
							<text>寝室人数：{{item.personCount}}</text>
						</view>
						<view class="btn" @click="NAV_TO('./detail',{id:item.id,ReturnTime:search.ReturnTime})">
							<text>查看</text>
						</view>
					</view>
				</view>
			</u-list-item>
			<u-loadmore :status="status" />
		</u-list>
	</view>
</template>

<script>
	import selectRadio from "@/components/selectRadio.vue"
	import selectSearch from "@/components/selectSearch.vue"
	import {
		returnPageList
	} from '@/api/work/returnBed.js'
	import {dateFormat} from '@/utils/date.js'
	export default {
		components: {
			selectRadio,
			selectSearch
		},
		data() {
			return {
				list: [],
				isLoading: false,
				status: 'loadmore', //loading正在加载 loadmore加载更多 nomore没有更多了
				search: {
					buildId: '',
					ReturnTime:'',
				},
				room:'',
				page: {
					pageNum: 1,
					pageSize: 1000,
				},
			}
		},
		mounted() {
		},
		methods: {
			scrolltolower() {
				this.loadmore()
			},
			loadmore() {
				if(!this.search.buildId)this.search.buildId = this.allOptions.buildingList[0].value
				if(!this.search.ReturnTime)this.search.ReturnTime = dateFormat(new Date(),'yyyy-MM-dd')
				if (this.status != 'loadmore') return
				this.status = 'loading'
				returnPageList({
					...this.page,
					...this.search
				}).then(res => {
					if(res.code != 200)return
					this.list = this.list.concat(res.data.list.map(e=>{return{...e,value:e.id,label:e.name}}))
					// 获取到的总条数>=接口总条数
					if (this.list.length >= res.data.total) {
						this.status = 'nomore'
					} else {
						this.status = 'loadmore'
					}
				})
			},
			refresh() {
				this.status = 'loadmore'
				this.list = []
				this.page.page = 1
				this.loadmore()
			},
			pullDownRefresh() {
				this.refresh()
			}
		},
		onLoad() {
			this.loadmore()
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
			this.refresh()
		}
	}
</script>

<style lang="scss" scoped>
	.searchBox {
		margin: 24rpx 28rpx 12rpx;

		>view {
			margin-bottom: 18rpx;

			&:last-child {
				margin-bottom: 0rpx;
			}
		}
	}

	.whiteCard {
		background-color: #fff;
		border-radius: 18rpx;
		margin: 12rpx 28rpx;
		padding: 30rpx;
		color: #333333;

		.row1 {
			display: flex;
			justify-content: space-between;

			.room {
				font-size: 32rpx;
				font-weight: 700;
			}
		}

		.row2 {
			margin-top: 18rpx;
			display: flex;
			justify-content: space-between;
			font-size: 26rpx;

			.returnNum {}

			.noReturnNum {}
		}

		.bottom {
			display: flex;
			justify-content: space-between;
			border-top: 1rpx solid rgba(0, 0, 0, 0.1);
			margin-top: 24rpx;
			padding-top: 30rpx;
			position: relative;

			.peopleNum {
				padding-top: 4rpx;

				uni-image {
					width: 34rpx;
					height: 34rpx;
					position: relative;
					top: 8rpx;
					margin-right: 6rpx;
				}

				uni-text {
					font-size: 26rpx;
				}
			}

			.btn {
				text-align: center;
				line-height: 60rpx;
				background-color: #2388FF;
				padding: 0 34rpx;
				color: #fff;
				border-radius: 30rpx;
				font-size: 26rpx;

				uni-image {
					width: 34rpx;
					height: 34rpx;
					margin-right: 6rpx;
				}

				uni-text {
					font-size: 28rpx;
				}
			}
		}
	}
</style>