<template>
	<view class="container">
		<view class="c-box">
			<view class="top">
				<view class="t-img">
					<image :src="arr.goodsImage" mode=""></image>
				</view>
				<view class="t-right">
					<!-- <view class="hi1">xxx汽车站</view> -->
					<view class="hi2">{{arr.goodsName}}</view>
					<view style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
						<view class="hi3">方便 · 可退 · 可形成记录</view>
						<view class="juz">￥{{arr.goodsPrice / 100}}</view>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="cont-top margin-bottom">
					<view class="dis">
						<image :src="imagesUrl+'jf.png'" mode=""></image>
						<text>余额</text>
					</view>
					<view class="xju">{{arr.balance / 100}}元</view>

				</view>

			</view>
			<view class="containerInfo">
				<view class="c-top">
					<view class="t-box">
					<view class="box">无论您身处何处，遇到道路困境时，我们都是您最可靠的伙伴</view>
				    <view class="box">	我们的道路救援团队随时待命，为您提供快速、安全的救援服务</view>
					<view class="box">无论是车辆故障、意外事故还是其他突发状况，我们具备专业知识和先进设备</view>
					<view class="box">能够迅速解决问题，让您重新上路。我们的使命是保障您的安全与顺利</view>
					 <view class="box"> 为您驱走困境，让您的旅途更加畅通无阻</view>
					<view class="box"> 选择我们，让道路上的困扰不再成为您的负担</view>
					</view>
				</view>
			</view>
		</view>
		<view class="c-bottom">
			<view class="b-left">
				<view class="xju"> 余额抵扣{{yedkAmount/100}}元</view>
			</view>
			<view style="display: flex; align-items: center;">

				<view class="juz" >￥{{wxAmount.toFixed(2)}}</view>
				<view class="b-right" @click="getpayment()">
					<view class="">立即支付</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'',
				num:'',
				baseUrl: getApp().globalData.config.baseUrl,
				imagesUrl: getApp().globalData.config.imagesUrl,
				id: '',
				user: {},
				type: 'qx',
				yedkAmount:0,
				wxAmount:0,
				arr: {},
				orderid: '',
				goodsPrice: '', //总价格
				preferential: '', //优惠
				current: 0, //积分已经÷100 相当于能抵的价格
				yhqtitle:'',
				userCouponId: null, // 使用的优惠券
				discount: 0 // 使用的优惠券价格
			}
		},
		onLoad(option) {
			this.title = option.title

			 this.num = option.num * 100
			this.userinfo = uni.getStorageSync("userinfo")
			console.log('用户信息', this.userinfo);

		},
		onShow() {
			uni.$on('userCouponDiscount', (data) => {
				console.log('jianting', data);
				//优惠券页面返回的东西
				this.userCouponId = data.userCouponId
				this.discount = data.discount
				this.yhqtitle = data.title
			})
			this.getorder()
		},
		methods: {
			//简单的加减法
			getjaj(one,two){
					let num = one-two
				if(num <= 0){
					return  0
				}else{
					return num
				}
				
			
			},
			//获取支付页信息
			async getorder() {
				const res = await this.$request({
					url: '/orderApi/orderDetail?goodsId=' + this.id + '&type=jymd&title='+this.title+'&amount='+this.num,
				})
				console.log('获取支付页信息', res);
				this.arr = res.data
				console.log(this.arr);
				//处理积分
				this.current = this.arr.balance / 100

				this.goodsPrice = this.arr.goodsPrice / 100
				this.preferential = 0

			  let tmpPrice=	this.goodsPrice*100
			  let needAmount = tmpPrice>=this.discount*100?tmpPrice-this.discount*100:0
			  this.yedkAmount = this.arr.balance<needAmount?this.arr.balance:needAmount	
			  this.wxAmount = ((this.goodsPrice*100)-this.discount*100-this.yedkAmount)>0?((this.goodsPrice*100)-this.discount*100-this.yedkAmount)/100:0
			},


			// 创建订单 吊起支付
			async getpayment() {
				let that = this
					console.log('正常掏钱');
					const res = await this.$request({
						method: 'post',
						url: '/orderApi/createOrder',
						data: {
							goodsTitle :this.title,
							mdAmount:this.num,
							goodsId: this.id,
							goodsType: 'jymd',
							balance: this.yedkAmount,
							couponId:this.userCouponId
						}
					})
					this.orderid = res.data
			        if (res.data == 11111111) {
			        	uni.navigateTo({
			        		url: '/subInspectionPages/Paymentsuccessful/Paymentsuccessful'
			        	})
			        }else{
						const ress = await this.$request({
							url: '/payApi/prepayment?type=jsapi' + '&orderId=' + this.orderid,
						})
						console.log(ress);
						wx.requestPayment({
							timeStamp: ress.timeStamp, // 时间戳，从1970年1月1日00:00:00至今的秒数，即当前的时间
							nonceStr: ress.nonceStr, // 随机字符串，长度为32个字符以下。
							package: ress.package, // 统一下单接口返回的 prepay_id 参数值，格式如“prepay_id=*”
							signType: ress.signType, // 签名算法类型，默认为 MD5，支持RSA等其他加密算法
							paySign: ress.paySign, // 签名，详见签名生成算法
							success: function(res) {
								console.log('成功', res);
								if (res.errMsg = 'requestPayment:ok') {
									uni.showToast({
										title: '支付成功'
									})
									uni.navigateTo({
										url: '/subInspectionPages/Paymentsuccessful/Paymentsuccessful'
									})
								}
								// 支付成功后的回调函数， res.errMsg = 'requestPayment:ok'
							},
							fail: function(res) {
								console.log('执行失败1', res);
								that.cancelpay()
							}
						})
					}
			        

			},
			async cancelpay() {
				console.log('执行失败2');
				const resx = await this.$request({
					method: 'post',
					url: '/orderApi/cancelPay',
					params: {
						orderId: this.orderid,
					}
				})
				uni.showToast({
					title: '支付失败'
				})
				console.log(resx);
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {}
	.containerInfo{
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		background-color: #ffffff;
	}
	.c-top{
		width: 100%;
		padding: 15px;
	}
	.t-title{
		font-size: 18px;
		font-weight: bold;
		color:#FFFFFF;
	}
	.t-box{
		margin-top: 20px;
		width: 100%;
		box-sizing: border-box;
		background: rgba(255, 255, 255, 0.2);
		padding: 0px 15px;
		border-radius: 6px;
	}
	.box{
		padding: 4px 1px;
		color: rgba(0, 0, 0, 1.0) ;
	}
	.c-box {

		box-sizing: border-box;
		padding: 10px;
	}
.t-right{
	width: 220px;
}
	.top {
		width: 100%;
		border-radius: 4px;
		box-sizing: border-box;
		padding: 10px;
		background: white;
		display: flex;
		align-items: center;
	}

	.content {
		width: 100%;
		border-radius: 4px;
		box-sizing: border-box;
		padding: 10px;
		background: white;
		margin-top: 15px;

	}

	.cont-top {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.cont-vip {
		margin-top: 20px;
		background: #fffaf5;
		border-radius: 8px;
		box-sizing: border-box;
		overflow: hidden;
		padding: 10px;
		padding-top: 35px;
		position: relative;
	}

	.v-left {
		position: absolute;
		left: 0px;
		top: 0px;
		background: linear-gradient(to left, #FFEBC4, #E2B48C, );
		border-radius: 0px 0px 10px 0px;
		font-size: 14px;
		font-weight: 400;
		box-sizing: border-box;
		padding: 5px;
		color: #333333;
	}

	.cont-bottom {
		margin-top: 20px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.t-img {
		width: 80px;
		height: 80px;
		border-radius: 6px;
		overflow: hidden;
		margin-right: 10px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.c-bottom {

		height: 70px;
		box-sizing: border-box;
		padding: 0px 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0px;
		background: white;
		width: 100%;
	}

	.ju {
		color: rgba(255, 103, 29, 1);
		font-size: 16px;
	}
	.juz {
		color: rgba(255, 103, 29, 1);
		font-size: 16px;
		margin-right: 5px;
		 font-size: 18px;
		  font-weight: 600;
	}

	.xju {
		color: rgba(255, 103, 29, 1);
		font-size: 14px;
	}

	.cu {
		font-weight: bold;
	}

	.b-right {
		background: linear-gradient(to left, #ff6123, #ffa32e, );
		width: 110px;
		height: 38px;
		border-radius: 50px;
		color: white;
		font-size: 18px;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.hi1 {
		font-size: 16px;
		font-weight: 400;
		margin-bottom: 5px;
		color: #4F4F4F;
	}

	.hi2 {
		font-size: 18px;
		font-weight: bold;
		color: #4F4F4F;
		margin-bottom: 15px;
	}

	.hi3 {
		font-size: 12px;
		font-weight: 400;
		color: #4F4F4F;
	}

	.c-z {
		font-size: 14px;
		font-weight: 400;
		color: #333333;
		margin-right: 5px;
	}

	.c-j {
		color: #FF671D;
		font-size: 16px;
		font-weight: 400;
		margin-right: 5px;
	}

	.c-jc {
		color: #FF671D;
		font-size: 18px;
		font-weight: bold;
		margin-right: 5px;
	}

	.dis {
		display: flex;
		align-items: center;

		image {
			width: 14px;
			height: 14px;
			margin-right: 5px;
		}
	}
</style>