<template>
  <view class="prebook-list-com">
	<view class="list btPadding" v-if="dataList.length>0">
			<view :class="'item '+item" v-for="(item, key) in dataList">
				<view class="left">
					<view class="title PfScMedium"><text v-if="item.real_name || item.username">{{item.real_name ? item.real_name:item.username}}</text><text v-else>无</text></view>
					<view class="date">{{item.date}} {{getDayOfWeek(item.date)}}  {{item.start_time}}-{{item.end_time}}</view>
					<view class="loction">{{item.visit_hospital.hospital_name}} {{item.visit_hospital.hospital_dept_name}}</view>
				</view>
				<view class="right">
					<view :class="statusList[item.status]+' status'"><view class="over">{{statusDescList[item.status]}}</view></view>
					<view class="queue-num" v-if="statusList[item.status]=='status_wait' && item.wait_count"><view>前方<text class="PfScSemibold">{{item.wait_count}}</text>人</view> </view>
				</view>
			</view>
		</view>
	</view>
  </view>
</template>

<script>
export default {
  name: "preBookList",
  props: {
	dataList:{
		type: Array,
		default: function(){
			return []
		}
	}
  },
  data() {
    return {
		cssUrl:this.cssUrl,
		statusList:['status_wait', 'status_ing', 'status_out_num', 'status_expire', 'status_down'],
		statusDescList:['候诊', '就诊中', '过号', '已过期', '已完成']
    }
  },
  methods: {
	  getDayOfWeek(dateString) {
	  	var str = new Date(dateString);
	  	var week = str.getDay();
	  	var weekList = ['周日','周一','周二','周三','周四','周五','周六']
	  	return weekList[week]
	  }
  }
};
</script>

<style lang="scss" scoped>
.prebook-list-com{
	width: 100%;
	height: auto;
	overflow: hidden;
	.list{
		width: 100%;
		height: auto;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin: 0 auto 0;
		overflow: hidden;
		box-sizing: border-box;
		.item{
			display: flex;
			justify-content: space-between;
			margin: 0 auto;
			width: 692rpx;
			border-bottom: 2rpx solid rgba(151,151,151,0.15);
			padding: 35rpx 13rpx;
			box-sizing: border-box;
			overflow: hidden;
			height: auto;
			&:last-of-type{
				border-bottom: none !important;
			}
			.left{
				flex-grow: 1;
				flex-shrink: 1;
				.title{
					min-height: 42rpx;
					font-size: 30rpx;
					color: #000000;
					line-height: 42rpx;
					margin-bottom: 28rpx;
					overflow: hidden;
				}
				.date{
					height: 40rpx;
					font-size: 28rpx;
					color: #949699;
					line-height: 40rpx;
					margin-bottom: 12rpx
				}
				.loction{
					max-width: 500rpx;
					min-height: 40rpx;
					line-height: 40rpx;
					color: #949699;
				}
			}
			.right{
				width: 250rpx;
				flex-shrink: 1;
				text-align: right;
				word-break: break-all;
				.status{
					display: flex;
					justify-content: flex-end;
					view{
						display: flex;
						border-radius: 6rpx;
						font-size: 22rpx;
						height: 32rpx;
						line-height: 32rpx;
						padding:  0 10rpx;
						box-sizing: border-box;
						min-width: 90rpx;
						display: block;
						text-align: center;
					}
					
					&.status_wait{
						view{
							background: #F8FFF7;
							border: 1rpx solid #5BD07A;
							color: #58CA7F;
						}
					}
					&.status_out_num{
						view{
							background: #FFFAF7;
							border: 1rpx solid #FE6710;
							color: #FE6710;
						}
					}
					&.status_down{
						view{
							background: #FCFCFC;
							border: 1rpx solid #AEB0B8;
							color: #B6B8BF;
						}
					}
					&.status_expire{
						view{
							background: #FCFCFC;
							border: 1rpx solid #AEB0B8;
							color: #B6B8BF;
						}
					}
					&.status_ing{
						view{
							border: 1rpx solid #5FA1CB;
							background: #F7FCFF;
							color: #5FA1CB;
						}
					}
				}
				.queue-num{
					line-height: 48rpx;
					height: 48rpx;
					font-size: 28rpx;
					color: #999999;
					margin-top: 25rpx;
					text{
						font-size: 48rpx;
						color: #39D067;
						margin: 0 8rpx;
					}
				}
			}
		}
	}
}

</style>
