<template>
	<view style="height:100vh;display: flex;flex-direction: column;">
		<scroll-view scroll-y="true" style="height: 1px;flex: 1;box-sizing: border-box;">
			<view class="hotel-order">
				<view class="o-head">
					<view class="o-timer flex">
						<view class="time-item">{{getDate(dayObj.start)}} {{dayObj.startWeek}}</view>
						<view class="time-split">
							<view>{{dayObj.day}}晚</view>
							<image style="width: 66rpx;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1622098352000_930.png" mode="widthFix"></image>
						</view>
						<view class="time-item">{{getDate(dayObj.end)}} {{dayObj.endWeek}}</view>
					</view>
					<view class="room-name">{{HotelInfo.HotelName}}</view>
					<view class="room-remark">{{RoomInfo.BreakfastTypeStr}} | {{RoomInfo.BedTypeStr}} | {{RoomInfo.RoomSize}}㎡ |  {{RoomInfo.HasWindowStr}}</view>
					<view class="big-title">
						<text class=" f12">订房必知</text>
					</view>
					<view class="rule">
						<text class="king">此房间
							<template v-if="RoomInfo.IsCancel==0">支持免费取消，</template>
							<template v-if="RoomInfo.IsCancel==1">不可取消，</template>
						</text>
						<text>订单需要等待酒店或供应商确认后生效，订单确认结果我们将会通知推送到您的微信，请您在下单时同意结果订阅，以便您能正常收到消息。</text>
					</view>
				</view>
				<view class="form">
					<view class="form-items">
						<view class="label">房间数量</view>
						<view class="val">
							<u-number-box size="28" :min="1" :max="100" @change="getRoomNumber" v-model="orderMsg.RoomNumber"></u-number-box>
						</view>
					</view>
					<view class="form-items">
						<view class="label">住客姓名</view>
						<view class="val">
							<input type="text" v-model="orderMsg.Consignee" placeholder="若是多人,输入代表人员即可" />
						</view>
					</view>
					<view class="form-items">
						<view class="label">联系电话</view>
						<view class="val">
							<input type="text" v-model="orderMsg.ConsigneeMobile" placeholder="输入电话号码" />
						</view>
					</view>
					<view class="form-items">
						<view class="label">预计到店</view>
						<view class="val flex" @click="showtime=true">
							<view style="flex: 1;" class="f14">{{orderMsg.ArrivalTime}}</view>
							<u-icon name="arrow" color="#D9D9D9" size="20" />
						</view>
					</view>
				</view>
				<view class="empty-block"></view>
				<view style="padding:50rpx 40rpx">
					<view class="big-title">
						<text>费用明细</text>
					</view>
					<view class="form" style="margin:40rpx 0;padding: 0;">
						<view class="form-items">
							<view class="label">
								在线支付
							</view>
							<view class="val f14 regular" style="text-align: right;">
								<text style="margin-right: 30rpx;">{{orderMsg.RoomNumber}}间房</text>
								<text class="red">￥{{orderMsg.Final_Price}}</text>
							</view>
						</view>
						<view class="form-items" style="border-bottom: none;">
							<view class="label">
								房费明细
							</view>
						</view>
						<view class="flex f12 grey" style="margin-bottom:40rpx;" v-for="(item,index) in priceList" :key="index">
							<view style="flex:1">
								<text style="margin-right: 30rpx;">{{item.DateStr}}</text>
								<text v-if="index!=0">{{item.BreakfastTypeStr}}</text>
							</view>
							<view style="text-align: right;" v-if="index!=priceList.length-1">{{orderMsg.RoomNumber}}间 × ¥{{$utils.getretailer()==true? item.B2BPrice:item.SalesPrice}}</view>
						</view>
					</view>
					
				</view>
				<view class="empty-block"></view>
				<view style="padding:50rpx 40rpx">
					<view class="big-title">
						<text>重要提醒</text>
					</view>
					<view class="sheshi" v-for="(item,index) in HotelInfo.Booking">
						<view class="she-title">{{item.Name}}</view>
						<view class="she-content">
							<view>{{item.Content}}</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="opera-box">
			<view class="box flex">
				<view class="price">
					<text class="f11">￥</text>
					<text>{{orderMsg.Final_Price}}</text>
				</view>
				<view class="sum-detail">共计 {{orderMsg.RoomNumber}}间房</view>
				<u-button :ripple="true" :hair-line="false" :custom-style="btnStyle" @click="buyRoom">立即购买</u-button>
			</view>
		</view>
		<u-picker v-model="showtime" mode="time" @confirm='confirm' :params="params" :default-time='orderMsg.ArrivalTime'></u-picker>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default{
		data() {
			return {
				order: {
					roomCount:1,
					userName:''
				},
				btnStyle:{
					height:"80rpx",
					lineHeight:"80rpx",
					borderRadius:"16rpx",
					background:"#111",
					color:"#FFF",
					fontSize:"28rpx",
					fontWeight:"600",
					width:'193rpx',
				},
				RoomInfo:{},
				dayObj:{},
				HotelInfo:{},
				orderMsg:{
					ProductId:0, //房间id
					StartDate:'',
					EndDate:'',
					RoomNumber:1,
					Unit_Price:'',
					Final_Price:'',
					Consignee:'', //联系人
					ConsigneeMobile:'', //；联系电话
					ArrivalTime:'14:00' //预计到达时间
				},
				showtime:false,
				params: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: false
				},
				priceList:[], //每日价格
				rMsg:{
					HotelId:0,
					productId:0,
					StartDate:'',
					EndDate:''
				}
			}
		},
		created() {
		
		},
		onLoad(options) {
			if(options.RoomInfo){
				this.RoomInfo = JSON.parse(options.RoomInfo)
			}
			if(options.HotelInfo){
				this.HotelInfo = JSON.parse(options.HotelInfo)
			}
			if(options.dayObj){
				this.dayObj = JSON.parse(options.dayObj)
			}
			this.rMsg.HotelId = this.HotelInfo.HotelId;
			this.rMsg.productId = this.RoomInfo.ID;
			this.rMsg.StartDate = this.dayObj.start;
			this.rMsg.EndDate = this.dayObj.end;
			this.orderMsg.ProductId = this.RoomInfo.ID;
			this.orderMsg.Unit_Price = this.RoomInfo.B2BPrice;
			this.orderMsg.StartDate = this.dayObj.start;
			this.orderMsg.EndDate = this.dayObj.end;
			uni.setNavigationBarTitle({
				title: this.HotelInfo.HotelName
			});
			this.CalTotalPrice();
			this.getRoomPrice();
		},
		methods:{
			getDate(date){
				if(date){
					let arr = date.split('-');
					return arr[1]+'月'+arr[2]+'日'
				}
			},
			getWeek(date) {
				 var weekArray = new Array("日", "一", "二", "三", "四", "五", "六");
				 var week = weekArray[new Date(date).getDay()];//注意此处必须是先new一个Date
				 return '周'+week;
			},
			//选择时间
			confirm(val){
				console.log(val,'val');
				this.orderMsg.ArrivalTime=val.hour+':'+val.minute;
			},
			//改变房间数量
			getRoomNumber(val){
				this.orderMsg.RoomNumber = val.value;
				console.log(val,'房间数');
				this.CalTotalPrice();
			},
			//获取房型报价
			getRoomPrice(){
				this.request2({
						url: '/api/Hotel/GetHotelRoomPrice',
						data: this.rMsg
					},
					res => {
						if (res.resultCode == 1) {
							console.log(res,'房型报价');
							this.priceList = res.data;
							this.CalTotalPrice();
						}
					}
				);
			},
			//计算总价
			CalTotalPrice(){
				this.orderMsg.Final_Price=0;
				this.priceList.forEach(x=>{
					if(this.$utils.getretailer()){
						this.orderMsg.Final_Price += parseInt(this.orderMsg.RoomNumber)*x.B2BPrice;
					}else{
						this.orderMsg.Final_Price += parseInt(this.orderMsg.RoomNumber)*x.SalesPrice;
					}
				})
				console.log(this.orderMsg.Final_Price,'this.orderMsg.Final_Price');
			},
			//立即购买
			buyRoom(){
				let that = this;
				if (that.orderMsg.Consignee == '') {
					this.$refs.uToast.show({
						title: '请输入住客姓名！',
						type: 'warning'
					});
					return;
				}
				if (that.orderMsg.ConsigneeMobile == '') {
					this.$refs.uToast.show({
						title: '请输入联系电话！',
						type: 'warning'
					});
					return;
				}
				var tempObj = uni.getStorageSync('basedata').mall.wechatmessage;	
				var tmplIds = [];
				if(tempObj&&tempObj.length>0){
					tempObj.forEach(x=>{
						if(x.Name=='下单成功提醒'||x.Name=='订单取消提醒'||x.Name=='订单确认通知'){
							tmplIds.push(x.MessageId)
						}
					})
				}
				uni.requestSubscribeMessage({
					tmplIds: tmplIds,
					complete(res) {
						that.request2({
								url: '/api/Hotel/SetAppletHotelOrder',
								data: that.orderMsg
							},
							res => {
								if (res.resultCode == 1) {
									console.log(res,'数据');
									that.queren(res.data)
								}
							}
						);
					}
				})
			},
			queren(OrderId){
				let url='/api/WeChatPay/GetDmcPayInfo'
				let GoodsName = this.RoomInfo.RoomName;
					GoodsName = GoodsName.slice(0, 10)
				this.request2({
						url: url,
						data: {
							OrderId:OrderId,
							GoodsName:GoodsName,
							OrderPayType:1,
							OpenId:uni.getStorageSync('mall_UserInfo').OpenId,
						}
					},
					res => {
						this.orderInfo = JSON.parse(res.data);
						console.log(171,this.orderInfo)
						this.Pay()
					}
				);
			},
			Pay(){
				let that=this;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: this.orderInfo.timeStamp,
					nonceStr: this.orderInfo.nonceStr,
					package: this.orderInfo.package,
					signType: this.orderInfo.signType,
					paySign: this.orderInfo.sign,
					success: function(res) {
						console.log('success', res);
						uni.showToast({
							title: "支付成功"
						})
						setTimeout(()=>{
							uni.redirectTo({
							  url: '/pages/jiuzhai/paysuccess?PreferPrice='+that.orderMsg.Final_Price
							});
						}, 100 )
					},
					fail: function(err) {
						console.log('fail:', err);
						uni.showToast({
							title: "支付失败"
						})
						setTimeout(()=>{
							uni.redirectTo({
							    url: '/pages/jiuzhai/allorderList'
							});
						}, 100 )
					}
				});
			},
		}
	}
</script>

<style>
	.hotel-order{
		color: #111111;
	}
	.opera-box{
		background-color: #FFF;
		padding: 20rpx 45rpx 40rpx 45rpx;
	/* 	position: fixed;
		bottom: 0;
		left: 0;
		right: 0; */
		z-index: 5;
	}
	.opera-box .box{
		height: 100rpx;
		background: #FFFFFF;
		box-shadow: 0px 10rpx 30rpx 0px rgba(36, 36, 36, 0.2);
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		padding: 0 10rpx 0 36rpx;
	}
	.opera-box .box .price{
		font-size: 40rpx;
		font-weight: 500;
		color: #D91818;
		margin-right: 20rpx;
	}
	.opera-box .box .sum-detail{
		font-size: 24rpx;
		flex: 1;
		font-weight: 500;
		color: #6E6E6E;
	}
	.hotel-order .red{
		color:#D91818 !important
	}
	.hotel-order .grey{
		color:#6E6E6E !important
	}
	.hotel-order .form{
		margin-top: 60rpx;
		padding:0 45rpx;
	}
	.hotel-order .form .form-items{
		margin-bottom: 40rpx;
		display: flex;
		align-items: center;
		padding-bottom: 36rpx;
		border-bottom:1px solid #f5f5f5;
		font-size: 28px;
		font-weight: 500;
	}
	.hotel-order .form .form-items:last-child{
		border-bottom: none;
	}
	.hotel-order .form .form-items .label{
		font-size: 28rpx;
		font-weight: 600;
		margin-right: 60rpx;
		flex-shrink: 0;
	}
	.hotel-order .form .form-items .val{
		flex:1;
	}
	.hotel-order .sheshi{
		margin-top: 50rpx;
	}
	.hotel-order .sheshi .she-title{
		font-size: 28rpx;
		font-weight: 800;
	}
	.hotel-order .sheshi .she-content{
		margin-top: 24rpx;
	}
	.hotel-order .sheshi .she-content text{
		
		font-size: 24rpx;
		font-weight: 500;
		color: #4A4A4A;
		line-height: 40rpx;
		margin-right: 24rpx;
	}
	.hotel-order .form .form-items .val input{
		border:none;
		padding: 0;
		margin: 0;
		outline: none;
		height: 38rpx;
		line-height: 38rpx;
		font-size: 28rpx;
		font-weight: 500;
		width: 100%;
	}
	
	.hotel-order .king {
		color: #DFBE6E !important;
	}
	.hotel-order .f12 {
		font-size:24rpx !important;
	}
	.f11 {
		font-size:22rpx !important;
	}
	.hotel-order .f14 {
		font-size:28rpx !important;
	}
	.hotel-order .regular {
		font-weight: 500 !important;
	}
	.hotel-order .flex{
		display: flex;
		align-items: center;
	}
	.hotel-order .empty-block{
		height: 20rpx;
		background: #ECF1F4;
	}
	.hotel-order .flex-wrap{
		flex-wrap: wrap;
	}
	.hotel-order .o-head{
		padding: 45rpx;
		background: #FFFFFF;
		box-shadow: 0px 2rpx 15rpx 0px rgba(76, 76, 76, 0.13);
		border-radius: 0px 0px 60rpx 60rpx;
	}
	.hotel-order .o-head .o-timer{
		height: 100rpx;
		background: #ECF1F4;
		border-radius: 20rpx;
		padding: 0 40rpx;
	}
	.hotel-order .o-head .o-timer .time-item{
		font-size: 32rpx;
		font-weight: 800;
		flex:1;
	}
	.hotel-order .o-head .o-timer .time-item:last-child{
		text-align: right;
	}
	.hotel-order .o-head .o-timer .time-split{
		font-size: 24rpx;
		font-weight: 400;
		text-align: center;
	}
	.hotel-order .o-head .room-name{
		font-size: 32rpx;
		font-weight: bold;
		margin-top: 40rpx;
		margin-bottom: 10rpx;
	}
	.hotel-order .o-head .room-remark{
		font-size: 28rpx;
		font-weight: 500;
		padding-bottom:30rpx;
		margin-bottom: 30rpx;
		border-bottom: 1px solid #E7E7E7;
	}
	.hotel-order .o-head .rule{
		font-size: 22rpx;
		font-weight: 500;
		color: #6E6E6E;
		margin-top: 18rpx;
	}
	.hotel-order .big-title {
		position: relative;
	}
	
	.hotel-order .big-title::before {
		display: block;
		width: 71rpx;
		height: 12rpx;
		background: #DFBE6E;
		border-radius: 4rpx;
		content: ' ';
	
		position: absolute;
		left: 0;
		bottom: 6rpx;
		z-index: 1;
	}
	.hotel-order .big-title text {
		font-size: 34rpx;
		font-weight: bold;
		color: #1F1F1F;
		position: relative;
		z-index: 2;
	}
</style>
