<template>
	<view>
		<view class="room-good" v-for="(item,index) in RoomList">
			<view class="rm-left">
				<template v-if="item.RoomImage&&item.RoomImage.length>0">
					<image :src="item.RoomImage[0].Path" mode="aspectFill">
					</image>
					<view class="mark">{{item.RoomImage.length}}</view>
				</template>
				<template v-else>
					<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/default_room.jpg" mode="aspectFill">
					</image>
				</template>
			</view>
			<view class="rm-right">
				<view class="room-name">{{item.RoomName}}</view>
				<view class="f11">
					<text class="king" style="margin-right: 14rpx;">{{item.BreakfastTypeStr}}</text>
					<text>{{item.BedTypeStr}} {{item.ServiceNumber}}人入住 {{item.RoomSize}}㎡ {{item.HasWindowStr}}</text>
				</view>
				<viwe class="give f11" v-if="item.Description">
					{{item.Description}}
				</viwe>
				<view class="f11 king" style="margin-top:15rpx;">{{item.IsCancelStr}}</view>
				<view class="price">
					<text class="f11" style="margin-right: 10rpx;">￥</text>
					<text>{{$utils.getretailer()==true? item.B2BPrice:item.SalesPrice}}</text>
				</view>
			</view>
			<view class="rm-opera" v-if="item.Inventory>0&&item.Inventory<5">
				<!-- 如果库存少于5显示 -->
				<view class="warm-count">剩{{item.Inventory}}间</view>
				<view class="buy" @click="previewOrder(item)">
					<view class="buy-content">抢</view>
					<view class="buy-tips">在线订</view>
				</view>
			</view>
			<view class="rm-opera" v-if="item.Inventory==0">
				<view class="buy disabled">
					<view class="buy-content">抢</view>
					<view class="buy-tips">已抢完</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			RoomList: {
				type: Array,
				default: null
			},
			dayObj: {
				type: Object,
				default: null
			},
			hotelData: {
				type: Object,
				default: null
			}
		},
		methods: {
			previewOrder(item) {
				uni.navigateTo({
					url: "/pages/hotel/order?RoomInfo="+ JSON.stringify(item) + '&dayObj=' + JSON.stringify(this.dayObj) + '&HotelInfo=' + JSON.stringify(this.hotelData)
				})
			},
		},
	}
</script>

<style>
	.room-good {
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
	}

	.room-good .king {
		color: #DFBE6E !important;
	}

	.room-good .f11 {
		font-size: 22rpx;
		font-weight: 500;
		margin-top:10rpx;
	}

	.room-good .rm-right {
		width: 1px;
		flex: 1;
	}

	.room-good .rm-opera {
		margin-left: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		justify-items: center;
		align-items: center;
	}

	.room-good .rm-opera .warm-count {
		text-align: center;
		font-size: 18rpx;
		font-weight: 500;
		color: #111111;
		margin-bottom: 10rpx;
	}

	.room-good .rm-opera .buy {
		width: 70rpx;
		height: 81rpx;
		background: #FFFFFF;
		border: 2rpx solid #111111;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
	}

	.room-good .rm-opera .buy.disabled {
		background: #EBEBEB;
		border: 2rpx solid #DCDCDC;
	}

	.room-good .rm-opera .buy.disabled .buy-tips {
		background: #A09E9E;
		color: #fff;
	}

	.room-good .rm-opera .buy.disabled .buy-content {
		color: #A09E9E;
	}

	.room-good .rm-opera .buy .buy-tips {
		height: 27rpx;
		background: #000000;
		text-align: center;
		color: #DFBE6E;
		font-size: 18rpx;
		line-height: 27rpx;
	}

	.room-good .rm-opera .buy .buy-content {
		height: 1px;
		flex: 1;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: 800;
		color: #111111;
	}

	.room-good .rm-right .room-name {
		font-size: 30rpx;
		font-weight: 800;
		color: #111111;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.room-good .rm-right .give {
		width: 278rpx;
		background: #ECF1F4;
		border-radius: 4rpx;
		padding: 10rpx;

		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-top: 15rpx;
	}

	.room-good .rm-right .price {
		font-weight: 800;
		font-size: 40rpx;
		color: #111;
	}

	.room-good .rm-left {
		width: 174rpx;
		height: 257rpx;
		border-radius: 20rpx;
		margin-right: 30rpx;
		position: relative;
		overflow: hidden;
	}

	.room-good .rm-left image {
		width: 100%;
		height: 100%;
	}

	.room-good .rm-left .mark {
		padding: 14rpx;
		background: rgba(0, 0, 0, .4);
		color: #FFF;
		border-radius: 20rpx 0px 20rpx 0px;
		font-size: 24rpx;
		font-weight: 500;
		position: absolute;
		right: 0;
		bottom: 0;
	}
</style>
