<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:[],
			}
		},
		mounted() {
			this.getlistData();
		},
		methods:{
			itemClick(item){
				let itemJson = JSON.stringify(item);
				uni.navigateTo({
					url:'/pages/ofm/booking?item='+itemJson+'&slots='+item.slots,
				})
			},
			getlistData(){
				let that = this;
				that.$api.bookingList({page:that.page,page_size:that.page_size}).then(res=>{
					that.dataList = res.results;
				})
			},
		},
	}
</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>