<template>
	<view class="">
		<view class="ticket-info">
			<view class="ticket-name">{{ticketdData.TicketName}}</view>
			<view class="ticket-date">门票日期:{{ticketdData.Date}}</view>
			<view class="ticket-peopleNum">人数:{{ticketdData.PeopleNumber}}</view>
			<view class="line"></view>
			<view class="tip">
				<image class="tip-icon" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/tip-icon.png" mode="aspectFit"></image>
				即时确认：本产品付款后可快速确认，放心期待您的旅行
			</view>
		</view>
		<view class="people-info">
			<!-- <view class="title">出行人 
			<text class="title-tip">请务必保证填写项与出游所持证件一致</text>
			</view>
			<view class="add-guest">
				<view v-for="(item,index) in GuestList" :key="index">
					<view class="guest-item">
						{{item.Name}}
					</view>
				</view>
				<view class="guest-add" @click="add">
					添加
				</view>
				
			</view> -->
			<view class="title">联系人</view>
			
			<view class="item-box">
				<view class="item-title">
					姓名
				</view>
				<input class="input" type="text" placeholder="请输入联系人姓名" v-model="Consignee" />
			</view>
			
			<view class="item-box">
				<view class="item-title">
					手机号
				</view>
				<input class="input" type="number" placeholder="请输入手机号" v-model="ConsigneeMobile" />
			</view>
			<u-popup v-model="showAddGuset" mode="bottom" border-radius="40" :closeable="true">
				<guest @confirm='changeGuest'></guest>
			</u-popup>
			<view class="btn-box">
				<view class="left">
					<view class="total-price">
						<text class="price-pre">￥</text>{{Final_Price}}
					</view>
					<view class="total-peoplenum">
						共计{{ticketdData.PeopleNumber}}人
					</view>
				</view>
				<view class="right">
					<view class="mx">
						<!-- 明细 -->
					</view>
					<view class="btn" @click="submitOrder">
						去支付
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import guest from "./components/guestList.vue"
	export default {
		components:{
			guest
		},
		data() {
			return {
				ticketdData:{},
				GuestList:[],
				showAddGuset:false,
				Final_Price:0,//总价
				Consignee:"",
				ConsigneeMobile:"",
				BuyerMessage:"",
				orderInfo:{}
			}
		},
		onLoad(options) {
			let obj=JSON.parse(decodeURIComponent(options.data))
			this.ticketdData=obj
			console.log(this.ticketdData)
			this.Final_Price=this.ticketdData.PeopleNumber*this.ticketdData.Unit_Price
		},
		
		 
		
		created() {
			uni.setNavigationBarTitle({
				title: "订单填写",
			});
			
		},
		methods: {
			
			add(){
				this.showAddGuset=true
			},
			changeGuest(val){
				this.showAddGuset=false
				this.GuestList=val
				this.ticketdData.PeopleNumber=this.GuestList.length
				this.Final_Price=this.ticketdData.PeopleNumber*this.ticketdData.Unit_Price
			},
			submitOrder(){
				if(!this.Consignee){
					uni.showToast({
						title: "请输入联系人姓名",
						icon: "none",
					});
					return
				}
				if(!this.ConsigneeMobile){
					uni.showToast({
						title: "请输入手机号",
						icon: "none",
					});
					return
				}
				uni.showLoading({
				    title: '支付中...'
				});
				this.request2({
						url: '/api/AppletDining/SetAppletTicketOrderInfo',
						data: {
							...this.ticketdData,
							Final_Price:this.Final_Price,
							Consignee:this.Consignee,
							ConsigneeMobile:this.ConsigneeMobile,
							GuestList:this.GuestList
						}
					},
				
					res => {
						 uni.hideLoading();
						if(res.resultCode===1){
							let that=this
							uni.requestSubscribeMessage({
								tmplIds: res.data.template_message_list,
								complete(_res) {
									that.queren(res.data.OrderId)
								}
							});
						}
						
						
					},
					err=>{
						uni.hideLoading();
					}
				);
			},
			queren(OrderId){
				let url='/api/WeChatPay/GetDmcPayInfo'
				let GoodsName = this.ticketdData.TicketName
					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/allorderList'
							});
						}, 100 )

					},
					fail: function(err) {
						console.log('fail:', err);
						uni.showToast({
							title: "支付失败"
						})
					}
				});
			},
			
		},
	}
</script>

<style lang="scss" scoped>
	.ticket-info{
		width: 750rpx;
		// height: 300rpx;
		padding: 60rpx 45rpx 0;
		background-color: #FFFFFF;
		box-shadow: 0rpx 2rpx 15rpx 0rpx rgba(76, 76, 76, 0.13);
		border-radius: 0rpx 0rpx 60rpx 60rpx;
		.ticket-name{
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #111111;
			margin-bottom: 20rpx;
		}
		.ticket-date{
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			margin-bottom: 20rpx;
		}
		.ticket-peopleNum{
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			margin-bottom: 30rpx;
		}
		.line{
			// width: 657px;
			height: 1rpx;
			background-color: #E7E7E7;
		}
		.tip{
			display: flex;
			align-items: center;
			height: 85rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #DFBE6E;
			.tip-icon{
				width: 24rpx;
				margin-right: 10rpx;
				
			}
		}
	}
	.people-info{
		padding: 60rpx 45rpx 0;
		.title{
			// height: 32rpx;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #1F1F1F;
			.title-tip{
				font-size:24rpx;
				margin-left: 10rpx;
			}
		}
		.add-guest{
			padding: 40rpx 0rpx;
			// height: 150rpx;
			border-bottom: 1rpx solid #E7E7E7;
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 50rpx;
			.guest-item{
				width: 145rpx;
				height: 70rpx;
				background-color: #111111;
				// border: 1rpx solid #111111;
				border-radius: 20rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				text-align: center;
				line-height: 68rpx;
				color: #ffffff;
				margin-right: 25rpx;
				margin-bottom: 25rpx;
			}
			.guest-add{
				width: 145rpx;
				height: 70rpx;
				background-color: #FFFFFF;
				border: 1rpx solid #111111;
				border-radius: 20rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				text-align: center;
				line-height: 68rpx;
				color: #111111;
			}
		}
		.item-box{
			height: 105rpx;
			position: relative;
			border-bottom: 1rpx solid #E7E7E7;
			display: flex;
			align-items: center;
			.item-title{
				width: 150rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
			}
			.input{
				height: 100%;
				// padding-left: 270rpx;
			}
		}
		.btn-box{
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			bottom: 100rpx;
			width: 670rpx;
			height: 100rpx;
			background-color: #FFFFFF;
			box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(36, 36, 36, 0.2);
			border-radius: 16rpx;
			padding: 0 10rpx 0 35rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left{
				display: flex;
				// align-items: flex-end;
				.total-price{
					// height: 80rpx;
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #D91818;
					margin-right: 20rpx;
					line-height: 40rpx;
					.price-pre{
						font-size: 22rpx;
					}
				}
				.total-peoplenum{
					// height: 80rpx;
					line-height: 50rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #6E6E6E;
				}
			}
			.right{
				display: flex;
				.mx{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #6E6E6E;
					line-height: 78rpx;
				}
				.btn{
					width: 193rpx;
					height: 80rpx;
					background-color: #111111;
					border-radius: 16rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					text-align: center;
					line-height: 78rpx;
					margin-left: 35rpx;
				}
			}
		}
	}
</style>
