<template>
	<view class="whitebg">
		<swiper class="activeSwiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item v-for="(pic,index) in form.photos?.split(',')" :key="index">
				<image class="cover" mode="aspectFill" :src="pic"></image>
			</swiper-item>
		</swiper>
		<view class="pd20">
			<view class="level">
				<image src="./img/xx.png"></image>
				{{startlist[form.starLevel]}}酒店
			</view>
			
			<view class="name">{{form.name}}
			</view>
			<view class="tagbox">
				<text v-for="tag in form.label?.replace(/，/g,',').split(',')" :key="tag">{{tag}}</text>
			</view>
			<view class="info99">
				<image src="./img/tag01.png" class="iconSquera"/>
				<text> 入住时间 {{form.checkInTime}}</text>
				<text> 离店时间 {{form.checkOutTime}}</text>
			</view>
			<view class="info99">
				<image src="./img/tag02.png" class="iconSquera"/>
				<text>{{form.addName}}</text>
			</view>
			<view class="info99">
				<image src="./img/tag03.png" class="iconSquerab"/>
				酒店简介
			</view>
			<view class="info99" v-html="form.introduction"></view>
		</view>
		
	</view>
	<view class="whitebg" v-show="form.remarks" style="padding: 30rpx;">
		<view class="tt">备注</view>
		<view class="pp">{{form.remarks}}</view>
	</view>
	<view class="whitebg">
		 <!-- 房型 -->
		<view class="roomList" style="padding-bottom: 60rpx;">
			<view class="room" v-for="r in roomList" :key="r.id">
			 <view>
				 <image class="roomCover" mode="aspectFill" :src="r.photo"></image>
			 </view>
			 <view>
				 <view class="name">{{r.roomType}}</view>
				 <view class="flexinline">{{r.bedType}}</view>
				 <view class="flexinline">
					 <text>{{r.area}}m²</text>
					 <text v-show="r.windowFlag==1"> 有窗</text>
					 <text v-show="r.windowFlag==0"> 无窗</text>
					 <text v-show="r.bathroomFlag==1"> 热水洗浴</text>
					 <!-- <text v-show="r.bathroomFlag==0"> </text> -->
					 <text v-show="r.addBedFlag==1"> 允许加床 </text>					 
				 </view>
				 <view class="flexinline" v-if="r.breakfastNum&&r.breakfastNum > '0'">{{r.breakfastNum}}份早餐</view>
				 <view class="flexinline" v-else>无早餐</view>
				 
				 <!-- <view class="orange"> 剩余 {{(r.roomCount - (r.useCount||0)).toFixed()}} 间</view> -->
				 
				 <view class="po">
					 <view class="price">¥<text>{{r.roomPrice}}</text></view>
					 <view class="greenOrderBtn" @click="goOrder(r)">
						订
						<text>在线付</text>
					 </view>
<!-- 					 <view class="greenOrderBtn" v-else style="filter: grayscale(1);">
						订
						<text>在线付</text>
					 </view> -->
				 </view>
			 </view>
		 </view>
		</view>
	</view>
	
</template>

<script setup>
	import {
		reactive,
		toRefs,
		getCurrentInstance
	} from 'vue';
	import * as hotel from '@/common/hotel.js';
	import {
		onLoad,
		onShow,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app';
	const data = reactive({
		form:{},
		startlist:['零星',' 一星','二星','  三星','四星','五星','六星','七星'],
		roomList:[]
	})
	const {
		form,startlist,roomList
	} = toRefs(data);
	let hotelId = null
	let foundRoomId = null
onLoad((option)=>{
	console.log(option)
	hotelId = option.hotelId
	foundRoomId = option.id
})	
onShow(()=>{
	getData()
})
function getData(){
	hotel.getHotelById(hotelId).then(res=>{
		form.value = res.data
	})
	hotel.getHotelRooms(foundRoomId).then(res=>{
		roomList.value = res.rows
	})
}	
function goOrder(r){
	const room  = encodeURIComponent(JSON.stringify(r))
	let path = `/pages_hotel/hotel/order?room=${room}&hotelName=${form.value.name}&checkInTime=${form.value.checkInTime}`;
	uni.navigateTo({
		url: path
	});
}	
</script>

<style lang="scss" scoped>
	.pd20{padding: 20rpx;}
	.iconSquera{width: 40rpx;height: 40rpx;}
	.iconSquerab{width: 26rpx;height: 26rpx;margin:0 10rpx;}
	.info99{margin: 0 0 20rpx;    display: flex;
    align-items: center;
font-size: 24rpx;
color: #4C5359;}
	.cover{width: 700rpx;height: 393rpx;border-radius: 15rpx;margin: auto;    display: block;}
	swiper{height: 393rpx;}
	.level{    position: absolute;mix-blend-mode: difference;
	    color: #FFFFFF;
	    right: 40rpx;
	    top: 340rpx;
	    display: flex;
	    align-items: center;
	font-size: 24rpx;
			image{width: 33rpx;height: 37rpx;margin-right: 10rpx;}
		}
	.whitebg{background-color: #fff;margin-bottom: 20rpx;
		.tt{line-height: 1;
			border-left: 4rpx solid #1EC886;
			color: #1EC886;
			padding-left: 14rpx;}
	}
	.roomList{padding: 20rpx;box-sizing: border-box;}
	.room{display: flex;position: relative;    padding: 15rpx 0 15px;
border-bottom:1px solid #DCDCDC;
		.name{font-size: 34rpx;}
		.orange{font-size: 24rpx;}
		.po{position: absolute;right: 0;bottom: 15rpx;display: flex;align-items: flex-end;}
		.price{margin-right: 10rpx;}
	}
	.roomCover{width: 160rpx;margin-right: 20rpx;
height: 170rpx;
border-radius: 15rpx;}
	.greenOrderBtn{background: #1EC886;border-radius: 10rpx;color: #FFFFFF;font-size: 30rpx;width: 78rpx;height: 78rpx;
		text-align: center;padding: 6rpx;
		text{color: #1EC886;font-size: 18rpx;background: #FFFFFF;border-radius: 8rpx; display: block;
		margin-top: 8rpx;}
	}
	
	.tagbox{margin: 10rpx 0 15rpx;
		text{border: 1rpx solid #E96E00;border-radius: 4rpx;color: #E96E00;font-size: 20rpx;
		padding:0 6rpx;margin-right: 12rpx;display: inline-block;}
	}
	.price{display: flex;align-items: baseline;color: #1EC886;
		text{color: #1EC886;font-size: 55rpx;}
	}
	.flexinline{display: flex;font-size: 24rpx;color: #5E5E5E;
	 text{margin-right: 15rpx;}
	}
</style>