<template>
	<view class="container">
		<!-- 搜索框 -->
		<view class="searchView">
			<uni-search-bar class="searchInput" radius="5" placeholder="搜索" clearButton="auto" cancelButton="none" @confirm="search" />
		</view>
		<view class="roomView">
			<view v-for=" item in tlist" :key="item.id">
				<uni-card :title="item.name" class="roomCard">
					<view class="uni-body">容纳人数：{{item.capacity}}</view>
					<view class="uni-body">位置：{{item.location}}</view>
					<view slot="actions" class="card-actions">
						<view class="card-actions-item" @click="actionsClick(item)">
							<text class="card-actions-item-text">立即预定</text>
						</view>
					</view>
				</uni-card>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				pageSize: 20,
				inputValue:'',
				status: 'noMore',
				tlist: [],
			}
		},
		mounted() {
			this.getmRooms();
		},
		onPullDownRefresh() {
			this.page = 1;
			this.getmRooms();
		},
		methods:{
			getmRooms(){
				let that = this;
				that.status = 'loading';
				that.$api.getMroom({ page: that.page, page_size: that.pageSize}).then(data=>{
					if(data.results.length < that.pageSize){
						that.status = 'noMore';
					}else{
						that.status = 'more';
					}
					if(that.page == 1){
						that.tlist = data.results;
					}
					else{
						that.tlist = that.tlist.concat(data.results)
					}
					uni.stopPullDownRefresh()
				}).catch(e=>{
					uni.stopPullDownRefresh()
				})
			},
			onKeyInput: function(event) {
			    this.inputValue = event.detail.value
			},
			actionsClick(item){
				uni.navigateTo({
					url:'/pages/ofm/booking?mroomId='+item.id,
				})
			},
		}
	}
</script>

<style>
	@font-face {
		font-family: CustomFont;
		src: url('./iconfont.ttf');
	}
	.container{
		padding: 10rpx;
		background-color: #ffffff;
	}
	.searchView{
		height: 70rpx;
		border-radius: 20rpx;
	}
	.searchIcon{
		margin: auto 10rpx;
	}
	.searchInput{
		padding: 0!important;
		height: 70rpx;
	}
	.roomCard{
		padding: 0!important;
	}
	.uni-card .uni-card__content{
		padding: 0!important;
	}
	.uni-body{
		padding: 20rpx;
	}
	.card-actions-item{
		text-align: center;
		height: 70rpx;
		line-height: 70rpx;
		background-color: #9fd3b0;
	}
	.card-actions-item-text{
		color: #ffffff;
	}
</style>