<template>
	<view class="container">
		 <uni-list v-for="item in dataList" class="uniListItem" @click="itemClick(item)">
			 <!-- #169316 -->
			 <uni-icons v-if="item.state==2" custom-prefix="iconfont" color="#ea7878" type="icon-yijieshu4" size="35" class="stateIcon yiwancheng"></uni-icons>
			 <uni-icons v-if="item.state==1" custom-prefix="iconfont" color="#659fed" type="icon-jinhangzhong" size="35" class="stateIcon"></uni-icons>
			 <uni-icons v-if="item.state==0" custom-prefix="iconfont" color="#7ed47e" type="icon-weikaishi2" size="35" class="stateIcon"></uni-icons>
		 	<uni-list-item :title="item.title" :note="'预约时间：'+item.mdate" :rightText="item.mroom_name" >
				<text>预约时间段;</text>
			</uni-list-item>
		</uni-list>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				page:1,
				page_size:10,
				dataList:[],
				status: 'more',
			}
		},
		mounted() {
			this.getlistData();
		},
		onPullDownRefresh() {
			this.page = 1;
			this.getlistData()
		},	
		onReachBottom() {
			if (this.status === 'more') {
				this.page++;
				this.getTicket()
			}
		},
		methods:{
			itemClick(item){
				uni.setStorageSync("currentBooking", item)
				uni.navigateTo({
					url:'/pages/ofm/booking_form?mode=show',
				})
			},
			getlistData(){
				let that = this;
				that.status = 'loading';
				that.$api.bookingList({page:that.page,page_size:that.page_size}).then(res=>{
					if(res.results.length < that.pageSize){
						that.status = 'noMore';
					}else{
						that.status = 'more';
					}
					if(that.page == 1){
						that.dataList = res.results;
						uni.pageScrollTo({
							scrollTop: 0, 
							duration: 300
						});
					}else{
						that.dataList = that.dataList.concat(res.results)
					}
					uni.stopPullDownRefresh()
				}).catch(e=>{uni.stopPullDownRefresh()})
			},
		},
	}
</script>

<style scoped>
	.container{
		height: 100%;
		padding: 0!important;
		background-color: #ffffff;
	}
	.chat-custom-right {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}
	
	.chat-custom-text {
		font-size: 12px;
		color: #999;
	}
	.uniListItem{
		position: relative;
	}
	.stateIcon{
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1;
	}
	.yiwancheng{
		color: #ff0000;
	}
</style>