<template>
	<view>
		<view class="hotel-order">
			<view class="o-head">
				<view class="room-name">{{orderData.MealName}}</view>
				<view class="Meal-date">
					{{orderData.date}}
				</view>
				<view class="room-remark">
					<text v-if="orderData.MakeDay===0">可预约当天</text>
					<text v-if="orderData.MakeDay>0">提前{{orderData.MakeDay}}天预约</text>
				</view>
				<view class="big-title">
					<text class=" f12">订餐必知</text>
				</view>
				<view class="rule">
					<text class="king" v-if="orderData.IsHoliday===0">此套餐节假日不可用</text>
					<!-- <text>需要提前预约，餐厅营业时间为：周一至周日 09:00-21:00，请您提前安排好行程时间</text> -->
					<rich-text :nodes="orderData.OtherTag"></rich-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" v-model="order.PeopleNumber" @change="PeopleNumberChange"></u-number-box>
					</view>
				</view>
				<view class="form-items">
					<view class="label">套餐份数</view>
					<view class="val">
						<u-number-box size="28" :min="1" :max="100" v-model="order.BuyNum" @change="BuyNumChange"></u-number-box>
					</view>
				</view>
				<view class="form-items">
					<view class="label">联系人</view>
					<view class="val">
						<input type="text" v-model="order.Consignee" placeholder="若是多人,输入代表人员即可" />
					</view>
				</view>
				<view class="form-items">
					<view class="label">联系电话</view>
					<view class="val">
						<input type="number" v-model="order.ConsigneeMobile" placeholder="输入电话号码" />
					</view>
				</view>
				<view class="form-items">
					<view class="label">备注</view>
					<view class="val">
						<input type="text" v-model="order.BuyerMessage" placeholder="您的特殊要求，我们会尽量安排" />
					</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;">{{order.BuyNum}}份套餐</text>
							<text class="red">￥{{orderData.Unit_Price*order.BuyNum}}</text>
						</view>
					</view>
					<view class="form-items" style="border-bottom: none;">
						<view class="label">
							套餐明细
						</view>
					</view>
					<view class="flex f12 grey">
						<view style="flex:1">
							<text style="margin-right: 30rpx;">{{orderData.MealName}}</text>
						</view>
						<view style="text-align: right;">{{order.BuyNum}}份 × ¥{{orderData.Unit_Price}}</view>
					</view>
				</view>

			</view>
			<view class="empty-block"></view>
		</view>
		<view class="opera-box">
			<view class="box flex">
				<view class="price">
					<text class="f11">￥</text>
					<text>{{orderData.Unit_Price*order.BuyNum}}</text>
				</view>
				<view class="sum-detail">共计 {{order.BuyNum}}份</view>
				<u-button :ripple="true" :hair-line="false" :custom-style="btnStyle" @click="buy">立即购买</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order: {
					PeopleNumber: 1,
					BuyNum: 1,
					Consignee:"",
					ConsigneeMobile:"",
					BuyerMessage:"",
					Sex:1,
				},
				btnStyle: {
					height: "80rpx",
					lineHeight: "80rpx",
					borderRadius: "16rpx",
					background: "#111",
					color: "#FFF",
					fontSize: "28rpx",
					fontWeight: "600",
					width: '193rpx',
				},
				orderData: {},
				orderInfo:{}
			}
		},
		created() {
			uni.setNavigationBarTitle({
				title: "订单填写",
			});
		},
		methods:{
			PeopleNumberChange(val){
				this.order.PeopleNumber=val.value
			},
			BuyNumChange(val){
				this.order.BuyNum=val.value
			},
			buy(){
				if(!this.order.Consignee){
						uni.showToast({
							title: "请填写联系人",
							icon: "none",
						});
						return
				}
				if(!this.order.ConsigneeMobile){
						uni.showToast({
							title: "请填写联系人电话",
							icon: "none",
						});
						return
				}
				let data={
					MealId:this.orderData.MealId,
					DiningId:this.orderData.DiningId,
					Unit_Price:this.orderData.Unit_Price,
					Date:this.orderData.date,
					PeopleNumber:this.order.PeopleNumber,
					Final_Price:this.orderData.Unit_Price*this.order.BuyNum,
					BuyerMessage:this.order.BuyerMessage,
					Consignee:this.order.Consignee,
					ConsigneeMobile:this.order.ConsigneeMobile,
					Sex:this.order.Sex,
					BuyNum:this.order.BuyNum,
				}
				uni.showLoading({
				    title: '支付中...'
				});
				this.request2({
						url: '/api/AppletDining/SetAppletDiningOrderInfo',
						data: data
					},
					res => {
						 uni.hideLoading();
						if(res.resultCode===1){
							let that=this
							uni.requestSubscribeMessage({
								tmplIds: res.data.template_message_list,
								success:res=>{
									console.log('订阅成功',res)
								},
								fail:err=>{
									console.log('订阅失败',err)
								},
								complete(_res) {
									if(data.Final_Price===0){
										uni.redirectTo({
											   url: '/pages/jiuzhai/allorderList'
											});
										return
									}
									that.queren(res.data.OrderId)
								}
							});
						}
					},
					err=>{
						 uni.hideLoading();
					}
				);
			},
			queren(OrderId){
				let url='/api/WeChatPay/GetDmcPayInfo'
				let GoodsName = this.orderData.MealName
					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);
						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(()=>{
							let total=that.orderData.Unit_Price*that.order.BuyNum
							uni.redirectTo({
							          url: '/pages/jiuzhai/paysuccess?PreferPrice='+total
							      });
						}, 100 )
			
					},
					fail: function(err) {
						console.log('fail:', err);
						uni.showToast({
							title: "支付失败",
							icon:'none'
						})
						// setTimeout(()=>{
						// 	uni.redirectTo({
						// 	    url: '/pages/jiuzhai/allorderList'
						// 	});
						// }, 100 )
					}
				});
			},
		},
		onLoad(options) {
			let obj = JSON.parse(decodeURIComponent(options.data))
			this.orderData = obj
			console.log("order", this.orderData)
			// this.Final_Price=this.ticketdData.PeopleNumber*this.ticketdData.Unit_Price
		},
	}
</script>

<style>
	.hotel-order {
		color: #111111;
		margin-bottom: 160rpx;
	}

	.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;
		line-height: 86rpx;
		height: 100%;
	}

	.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 {
		white-space: nowrap;
		text-align: justify ;
		text-align-last: justify;
		width: 115rpx;
		font-size: 28rpx;
		font-weight: 600;
		margin-right: 20rpx;
		/* 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;
	}
	.Meal-date{
		font-size: 24rpx;
		font-family: PingFang SC;
		color: #999999;
	}
</style>
