<style lang="scss" scoped>
	.specialCarReserve{
		width: 100%;
		height: 100vh;
		background: #FFF;
		.box-top{
			width: 100%;
			height: 80px;
			display: flex;
			align-items: center;
			padding: 0 15px;
			justify-content: space-between;
			font-size: 20px;
			font-family: PingFang SC;
			font-weight: 800;
			color: #111111;
			border-radius: 0px 0px 30px 30px;
			box-shadow: 0px 1px 8px 0px rgba(76, 76, 76, 0.13);
			.onetext{
				overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
				width: calc((100vw - 30px - 115px)/2);
				text-align: center;
			}
			.box-top-c{
				width: 113px;
				display: flex;
				flex-direction: column;
				align-items: center;
				.box-top-ct{
					width: 113px;
					height: 21px;
					border-radius: 2px;
					background: rgba(223, 190, 110, 0.1);
					font-size: 12px;
					font-family: PingFang SC;
					font-weight: 500;
					color: #DFBE6E;
					text-align: center;
					line-height: 21px;
					margin-bottom: 4px;
				}
			}
		}
		.addresStyle{
			width: 100%;
			height: 53px;
			padding: 0 20px;
			display: flex;
			align-items: center;
		}
		.address-l-h{
			width: 13px;
			height: 13px;
			background: #111111;
			border: 3px solid #999999;
			border-radius: 50%;
			margin-right: 9px;
		}
		.address-l-h2{
			width: 13px;
			height: 13px;
			background: #DFBE6E;
			border: 3px solid #F2DBA3;
			border-radius: 50%;
			margin-right: 9px;
		}
		.addresStyle-text{
			width: calc(100vw - 40px - 13px - 9px);
			height: 100%;
			font-size: 14px;
			color: #999999;
			font-weight: bold;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #E7E7E7;
			overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
		}
		.item-s{
			width: 100%;
			padding: 0 20px;
			.item{
				width: 100%;
				height: 45px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 14px;
				font-weight: 500;
				color: #111111;
				.item-row{
					display: flex;
					align-items: center;
					.text-h{
						font-size: 12px;
						font-weight: 500;
						color: #999999;
						margin-left: 20px;
					}
				}
			}
		}
		.posibtn{
			width: calc(100vw - 40px);
			height: 50px;
			border-radius: 8px;
			background: #FFFFFF;
			box-shadow: 0px 5px 15px 0px rgba(36, 36, 36, 0.2);
			
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: fixed;
			left: 20px;
			bottom: 30px;
			z-index: 20;
			.btn-l{
				display: flex;
				align-items: flex-end;
				font-size: 12px;
				color: #111111;
				margin-left: 19px;
			}
			.btn-r{
				width: 97px;
				height: 40px;
				background: #111111;
				border-radius: 8px;
				margin-right: 5px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 14px;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
	}
</style>
<template>
	<view class="specialCarReserve">
		<view class="box-top">
			<div class='onetext'>
				{{details.StartCityName}}
			</div>
			<view class="box-top-c">
				<view class="box-top-ct">
					{{showtime}}
				</view>
				<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/sanjiao.png" mode="aspectFill" style="width: 55px;height: 4px;"></image>
			</view>
			<div class='onetext'>
				{{details.ArriveCityName}}
			</div>
		</view>
		<view class="addresStyle">
			<view class="address-l-h"></view>
			<view class="addresStyle-text" @click="shijiup(1)">
				<span v-if="addMsg.DepartAddress==''">请选择实际上车点</span>
				<span v-else style='color: #111;'>{{addMsg.DepartAddress}}</span>
			</view>
		</view>
		<view class="addresStyle">
			<view class="address-l-h2"></view>
			<view class="addresStyle-text" @click="shijiup(2)">
				<span  v-if="addMsg.ArriveAddress==''">请选择实际下车点</span>
				<span v-else style='color: #111;'>{{addMsg.ArriveAddress}}</span>
			</view>
		</view>
		<view class="item-s">
			<view class="item">
				<view class="item-row">
					<span>成人</span>
					<span class='text-h'>12周岁以上</span>
				</view>
				<view>
					<u-number-box v-model="addMsg.PeopleNumber" @change="valChange"></u-number-box>
				</view>
			</view>
			<view class="item">
				<view class="item-row">
					<span>儿童</span>
					<span class='text-h'>0-12周岁(不含)</span>
				</view>
				<view>
					<u-number-box v-model="addMsg.ChildNumber" @change="valChange2"></u-number-box>
				</view>
			</view>
			<view class="item">
				<view class="item-row">
					<span>联系人</span><span style='color: #D91818;'>*</span>
				</view>
				<view>
					<input type="text" v-model="addMsg.Consignee" placeholder="请输入联系人" style="text-align: right;width: calc(100vw - 40px - 80px);">
				</view>
			</view>
			<view class="item">
				<view class="item-row">
					<span>联系电话</span><span style='color: #D91818;'>*</span>
				</view>
				<view>
					<input type="number" v-model="addMsg.ConsigneeMobile" placeholder="请输入联系电话" style="text-align: right;width: calc(100vw - 40px - 80px);">
				</view>
			</view>
			<view class="item" style="border-bottom: 1px solid #E7E7E7;">
				<view class="item-row">
					<span>留言</span>
				</view>
				<view>
					<input type="text" v-model="addMsg.BuyerMessage" placeholder="请输入留言" style="text-align: right;width: calc(100vw - 40px - 80px);">
				</view>
			</view>
			<view style="line-height: 35px;text-align: right;">明细</view>
			<view class="item">
				<view class="item-row"></view>
				<view class="item-row">
					<span style='margin-right: 3px;'>成人</span>
					<span v-if='addMsg.PeopleNumber>0'>{{addMsg.PeopleNumber}}*{{addMsg.Unit_Price}}元</span>
					<span v-else>0</span>
				</view>
			</view>
			<view class="item">
				<view class="item-row"></view>
				<view class="item-row">
					<span style='margin-right: 3px;'>儿童</span>
					<span v-if='addMsg.ChildNumber>0'>{{addMsg.ChildNumber}}*{{addMsg.Unit_Price}}元</span>
					<span v-else>0</span>
				</view>
			</view>
			<view style="width: 100%;height: 100px;"></view>
		</view>
		<view class="posibtn">
			<view class="btn-l">
				<span>总价</span>
				<span style='margin-left: 5px;color: #D91818;'>￥</span>
				<span style='font-size: 20px;color: #D91818;line-height: 21px;'>{{addMsg.Final_Price.toFixed(2)}}</span>
			</view>
			<view class="btn-r" @click="gopay">去支付</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				pageTitle: "订单填写",
				mainColor: '',
				details:{},
				showtime:'',
				addMsg:{
					PlanId:0,
					Date:'',
					DepartureTime:'',
					DepartAddress:'',
					ArriveAddress:'',
					Unit_Price:0,
					PeopleNumber:0,
					ChildNumber:0,
					Final_Price:0,
					BuyerMessage:'',
					Consignee:'',
					ConsigneeMobile:'',
				},
				upcar:[],
				downcar:[],
				upid:0,
				downid:0,
				orderInfo:{},
				showtime2:'',
			}
		},
		onLoad(options) {
			if(options && options.Id){
				this.addMsg.PlanId = options.Id;
				this.getCarPlanInfo()//获取定制包车结算页面
			}
			if(options && options.Date){
				this.addMsg.Date = options.Date;
				var time = new Date(options.Date);
				let showweek = time.getDay()
				let week = this.getweek(showweek)
				this.showtime = options.Date.split('-')[1] + '月' + options.Date.split('-')[2] + '日'+' '+week;
				this.showtime2 = options.Date.split('-')[1] + '月' + options.Date.split('-')[2] + '日'
			}
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
			this.mainColor = this.$uiConfig.mainColor;
		},
		methods:{
			shijiup(type){
				let SelectID = 0 
				if(type==1){
					SelectID = this.upid;
				}else{
					SelectID = this.downid;
				}
				let obj = {
					type:type,//上车点
					SiteList:this.details.SiteList,
					SelectID:SelectID
				}
				obj = encodeURIComponent(JSON.stringify(obj))
				uni.navigateTo({
					url: '/pages/guidecar/map?obj='+ obj
				})
			},
			getbackData(type,ID){//地图选择返回参数
				console.log(type,ID)
				if(type==1){
					this.upcar.map(x=>{
						if(x.Id == ID){
							this.addMsg.DepartAddress = x.Name;
							this.upid = x.Id;
							this.addMsg.DepartureTime = x.AboutTime;//出发时间的赋值
							return
						}
					})
				}else{
					this.downcar.map(x=>{
						if(x.Id == ID){
							this.addMsg.ArriveAddress = x.Name;
							this.downid = x.Id;
							return
						}
					})
				}
			},
			valChange(val){//数值改变更改总价
				let value = val.value;
				this.addMsg.PeopleNumber  = value
				this.addMsg.Final_Price = (this.addMsg.PeopleNumber +this.addMsg.ChildNumber)*this.addMsg.Unit_Price
			},
			valChange2(val){//数值改变更改总价
				let value = val.value
				this.addMsg.ChildNumber  = value
				this.addMsg.Final_Price = (this.addMsg.PeopleNumber+this.addMsg.ChildNumber)*this.addMsg.Unit_Price
			},
			gopay(){//支付
				if(this.addMsg.DepartAddress==''){
					uni.showToast({
						title:'请选择出发地',
						icon:'none'
					})
					return
				}
				if(this.addMsg.ArriveAddress==''){
					uni.showToast({
						title:'请选择到达地',
						icon:'none'
					})
					return
				}
				if((this.addMsg.PeopleNumber+this.addMsg.ChildNumber)<1){
					uni.showToast({
						title:'请选择出发人数',
						icon:'none'
					})
					return
				}
				if(this.addMsg.Consignee==''){
					uni.showToast({
						title:'请输入联系人',
						icon:'none'
					})
					return
				}
				if(this.addMsg.ConsigneeMobile==''){
					uni.showToast({
						title:'请输入联系人电话',
						icon:'none'
					})
					return
				}
				uni.showLoading({
					title: '下单中...'
				})
				let that= this
				uni.requestSubscribeMessage({
					tmplIds: that.details.template_message_list,
					complete(_res) {
						console.log(_res)
						that.request2({
								url: '/api/AppletCar/SetAppletCarOrderInfo',
								data: that.addMsg
							},
							res => {
								uni.hideLoading()
								if (res.resultCode == 1) {
									that.queren(res.data)
								}
							},
							err => {
								uni.hideLoading()
							}
						);
					}
				});
				
			},
			queren(OrderId){
				let url='/api/WeChatPay/GetDmcPayInfo'
				let GoodsName = this.showtime2+this.details.StartCityName+'-'+this.details.ArriveCityName
					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(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: "支付失败"
						})
						setTimeout(()=>{
							uni.redirectTo({
							    url: '/pages/jiuzhai/allorderList'
							});
						}, 100 )
					}
				});
			},
			getCarPlanInfo(){
				uni.showLoading({
					title: '加载中...'
				})
				this.request2({
						url: '/api/AppletCar/GetAppletCarPlanSettlementInfo',
						data: {PlanId:this.addMsg.PlanId}
					},
					res => {
						uni.hideLoading()
						if (res.resultCode == 1) {
							this.details = res.data
							this.addMsg.DepartureTime  = this.details.StartDate;
							this.addMsg.Unit_Price  = (this.$utils.getretailer()==true ? this.details.Price :this.details.B2CPrice) ;
							
							this.upcar = [];
							this.downcar = []
							this.details.SiteList.forEach(x=>{
								if(x.Type == 1){
									this.upcar.push(x)
								}else{
									this.downcar.push(x)
								}
							})
							//出发点默认第一个
							this.addMsg.DepartAddress = this.upcar[0].Name;
							this.upid = this.upcar[0].Id;
							
						}
					},
					err => {
						uni.hideLoading()
					}
				);
			},
			getweek(day) { //根据值返回当前时间的星期几
				if (day == 1) {
					return '周一'
				} else if (day == 2) {
					return '周二'
				} else if (day == 3) {
					return '周三'
				} else if (day == 4) {
					return '周四'
				} else if (day == 5) {
					return '周五'
				} else if (day == 6) {
					return '周六'
				} else if (day == 0) {
					return '周日'
				}
			},
		}
	}
</script>


