<template>
	<view class="content">
		<view class="c-top">
			<view class="" @click="getback()">
				<uni-icons type="left" size="18"></uni-icons>
			</view>
			<view class="c-title">提交订单</view>
			<view class=""></view>
		</view>
		<view class="ail">
			<view class="ail-box">
				<view class="o-top">
					<view class="goodsimg">
						<image :src=" imgs + obj.goodsImage" mode=""></image>
					</view>
					<view>
						<view class="z-title">{{obj.goodsName}}</view>
						<view class="">￥{{price/100}}</view>
					</view>
				</view>
				<view class="o-input">
					<view class="dis">
						<text class="b-one">折扣</text>
						<text class="b-two" v-if="obj.ratio * 10 >= 10">当前无折扣</text>
						<text class="b-two" v-if="obj.ratio * 10 < 10">当前等级折扣{{obj.ratio * 10}}折</text>
					</view>
					<view class="dis">
						<text class="xju">-{{parseFloat(((price-zhe)/100)).toFixed(2)}} 元</text>
					</view>
				</view>
				<view class="o-input" @click="gocoupon()">
					<text class="b-one">优惠卷</text>
					<view class="dis">
						<text class="xju">{{coupontitle}}</text>
						<uni-icons type="right" size="18" color="#AAAAAA"></uni-icons>
					</view>
				</view>
				<view class="o-input">
					<text class="b-one">可用余额</text>
					<view class="dis">
						<text class="xju">{{balance/100}}</text>
					</view>
				</view>
				<view class="o-input" v-if="pickCarId">
					<text class="b-one">上门费用</text>
					<view class="dis">
						<text class="xju">{{pickPrice /100}}</text>
					</view>
				</view>
				<view class="hj">合计：<text class="dju">￥{{((needAmount+pickPrice)/100).toFixed(2)}}</text> </view>
			</view>

			<!-- <view class="bai-box" v-if="jcdb == true" >
				<view class="boxb" :class="{ 'boxlan' : payindex == index }" v-for="(item,index) in payTypelist" :key="index" @click="gettyp(index,item.type)">
					{{item.text}}
				</view>
			
			</view> -->
			<view class="img-yuye" @click="goyuye(0)">
				<view class="yuyeimg">
					<image src="http://www.nuoyunr.com/lananRsc/detection/yuyue.png" mode=""></image>
				</view>
				<view class="zhong">
					<view class="zlan">提前预约</view>
					<view class="zxlan">预约门店检测时间</view>
				</view>
				<!-- <view class="xxiangl" v-if="yuyue != 0"></view> -->
				<view class="xxianglxz">
					<text>→</text>
				</view>
			</view>
			<view class="img-shangmen" @click="goyuye(4)">
				<view class="yuyeimg">
					<image src="http://www.nuoyunr.com/lananRsc/detection/pickCar.png" mode=""></image>
				</view>
				<view class="zhong">
					<view class="zlanl">上门取车</view>
					<view class="zxlanl">选择上门取车时间</view>
				</view>
				<!-- <view class="xxiangl" v-if="yuyue != 0"></view> -->
				<view class="xxianglxzl">
					<text>→</text>
				</view>
			</view>
			<!-- 新增 -->
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :interval="interval" :duration="duration">
				<swiper-item v-for="(item,index) in carlist" :key="index" @click="xuanzhong(item.carId)">
					<view class="bai-box" :class="{ 'xzlan' : userCarId == item.carId }">
						<view class="x-top">
							<!-- @click="gocarinfo(item.carId)" -->
							<view class="x-left">
								<view>
									<view class="dh-title">{{item.carBrand}}</view>
									<view class="xh-title">{{item.carNo}}</view>
								</view>
							</view>
							<view class="x-right">
								<uni-icons v-if="userCarId == item.carId" type="checkmarkempty" color="#18bc37"
									size="22"></uni-icons>
								<view class="xh-title" v-if="userCarId != item.carId">点击选择此车辆</view>

							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item v-if="carlist.length == 0">
					<view class="aa-box" @click="gohomemy()">

						<view class="wdadada"
							style="font-size: 18px; font-weight: bold; margin-top: 30px;text-align: center;">
							暂无更多车辆信息点击维护</view>
					</view>
				</swiper-item>
			</swiper>


			<!--  -->
			<view style="width: 100%; height: 80px;">
				<view class="hongzi">
					温馨提示：预约后需点击立即支付享受服务
				</view>
			</view>
		</view>
		<view class="bott">
			<view class="dju">￥{{parseFloat(((hj+pickPrice)/100)).toFixed(2)}}</view>
			<view class="" @click="getpayment()">
				<view class="b-left">
					<text>立即支付</text>
				</view>
				<view class="b-right">
					<image src="http://www.nuoyunr.com/lananRsc/detection/zhifu.png" mode=""></image>
				</view>
			</view>

		</view>
	</view>

</template>

<script>
	import config from '@/config'
	import request from '../../utils/request';

	export default {
		data() {
			return {
				carlist: [],
				userCarId: '',
				interval: 5000,
				duration: 100,
				appointmentId: '',
				pickCarId: '',
				pickPrice: 0,
				zfid: 1,
				imgs: '',
				obj: '',
				price: '',
				zhe: '',
				balance: '',
				hj: '',
				id: '',
				type: '',
				current: '', //积分
				yedkAmount: 0,
				userCouponId: '',
				orderid: '',
				couponId: '', //优惠券id
				coupontitle: '', //优惠券名称
				discount: '', //优惠卷金额
				couponType: '', //优惠券类型
				needAmount: 0,
				datas: '',
				jcdb: false,
				payTypelist: [{
						text: '微信',
						type: 'wx'
					},
					{
						text: '赊账',
						type: 'sz'
					},
				],
				payType: '',
				payindex: ''
			}
		},
		onLoad(option) {
			this.id = option.id
			this.type = option.type
			this.datas = option.data
			this.imgs = this.$baseUrl

			this.getindex()
			//获取订单信息
		},
		onShow() {

			this.getcarlist()
			uni.$on('userCouponDiscount', (data) => {
				console.log('jianting', data);
				//优惠券页面返回的东西
				this.couponId = data.couponId
				this.coupontitle = data.title
				this.discount = data.discount * 100
				this.couponType = data.couponType
			})
			// this.getindex()

			// let role = uni.getStorageSync('role')
			// if(role[0] == "jcdb"){
			// 	this.jcdb = true
			// 	console.log('判断',	this.jcdb);
			// }
		},
		methods: {
			async getcarlist() {
				const res = await request({
					url: '/appInspection/userOwn/getCanInspectionCars',
					method: 'get',
				})

				this.carlist = res.data
				console.log(this.carlist);
			},
			xuanzhong(carid) {
				this.userCarId = carid
			},
			//这个函数是写在A页面的methods中
			Backappoinment(appointmentId) {
				this.appointmentId = appointmentId
			},
			BackPickCarId(pickCarId, pickPrice) {
				this.pickCarId = pickCarId
				this.pickPrice = pickPrice
			},
			gocoupon() {
				uni.navigateTo({
					url: '/pages/detection/coupon?id=' + this.id + "&type=" + this.type
				})
			},

			async getindex() {
				if (this.type == 'goods') {
					let res = await request({
						url: '/appInspection/goods/orderGoodsInfo?goodsId=' + this.id,
						method: 'get',
					})
					console.log('skuId', res);
					this.obj = res.data
					this.price = res.data.price
					this.zhe = this.price * res.data.ratio //折扣多少金额	
					this.balance = res.data.balance //用户总积分
					this.needAmount = this.zhe >= this.discount ? this.zhe - this.discount : 0
					this.yedkAmount = this.balance < this.needAmount ? this.balance : this.needAmount

					if (this.couponType && this.couponType == 'offset') {
						this.hj = 0
					} else {
						this.hj = this.needAmount - this.yedkAmount
					}

					console.log(this.price, this.zhe, '1212', this.needAmount, this.yedkAmount);
				}

				if (this.type == 'sku') {
					let res = await request({
						url: '/appInspection/goods/orderSkuInfo?goodsId=' + this.id,
						method: 'get',
					})
					console.log('skuId', res);
					this.obj = res.data
					this.price = res.data.price
					this.zhe = this.price * res.data.ratio //折扣多少金额	
					this.balance = res.data.balance //用户总积分
					this.needAmount = this.zhe >= this.discount ? this.zhe - this.discount : 0
					this.yedkAmount = this.balance < this.needAmount ? this.balance : this.needAmount

					if (this.couponType && this.couponType == 'offset') {
						this.hj = 0
					} else {
						this.hj = this.needAmount - this.yedkAmount
					}

					console.log(this.price, this.needAmount, this.yedkAmount);
				}
			},
			gohomemy() {
				uni.navigateTo({
					url: '/pages/detection/my-user'
				})
			},
			async getpayment() {
				if (!this.userCarId) {
					uni.showToast({
						title: '请选择车辆信息'
					})
					return
				}
				let that = this
				let data
				if (this.type == 'goods') {
					data = {
						goodsId: this.id,
						goodsType: 'jc',
						balance: this.yedkAmount,
						couponId: this.couponId,
						appointmentId: this.appointmentId,
						pickCarId: this.pickCarId,
						userCarId: this.userCarId
						// payType:this.payType,
					}
				}
				if (this.type == 'sku') {
					data = {
						skuId: this.id,
						goodsType: 'jc',
						balance: this.yedkAmount,
						couponId: this.couponId,
						appointmentId: this.appointmentId,
						pickCarId: this.pickCarId,
						userCarId: this.userCarId
						// payType:this.payType,
					}
				}

				let res = await request({
					url: '/orderApi/createOrder',
					method: 'post',
					data: data
				})
				console.log(res);
				this.orderid = res.data
				if (res.data == 11111111) {
					console.log('sku成功');
					uni.navigateTo({
						url: '/pages/detection/success'
					})
				} else {
					console.log('执行');
					const ress = await request({
						url: '/payApi/jcPrepayment?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: '/pages/detection/success'
								})
							}
							// 支付成功后的回调函数， res.errMsg = 'requestPayment:ok'
						},
						fail: function(res) {
							console.log('执行失败1', res);
							that.cancelpay()
						}
					})

				}
			},
			async cancelpay() {
				console.log('执行失败2');
				const resx = await request({
					method: 'post',
					url: '/orderApi/cancelPay',
					params: {
						orderId: this.orderid,
					}
				})
				uni.showToast({
					title: '支付失败'
				})
				console.log(resx);
			},
			goyuye(num) {
				if (num == 0) {
					uni.navigateTo({
						url: '/pages/detection/reservation?goodsName=' + this.obj.goodsName + '&goodsId=' + this
							.obj.goodsId + "&type=" + this.type
					})
				}
				if (num == 4) {
					uni.navigateTo({
						url: '/pages/detection/godoor?goodsName=' + this.obj.goodsName + '&goodsId=' + this.obj
							.goodsId + "&type=" + this.type
					})
				}
			},
			getback() {
				uni.navigateBack()
			},
			gettyp(index, type) {
				this.payindex = index
				this.payType = type
			},
			govip() {
				uni.navigateTo({
					url: "/pages/detection/my-vip"
				})
			},
			getzf(id) {
				this.zfid = id
			}

		}
	}
</script>

<style scoped lang="scss">
	.swiper {
		height: 100px;
	}

	.bai-box {
		box-sizing: border-box;
		padding: 15px;
		background-color: white;
		border-radius: 8px;
		margin-top: 15px;
	}

	.xzlan {
		background: #E3EAFF;
	}

	.content {
		width: 100%;
		height: calc(100vh);
		background-color: #F6F6F6;
		box-sizing: border-box;
		// padding-top: 45px;
	}

	.ail {
		width: 100%;
		box-sizing: border-box;
		padding: 10px 15px;
		background-color: #F6F6F6;
	}

	.ail-box {
		width: 100%;
		border-radius: 8px;
		box-sizing: border-box;
		padding: 15px;
		background: #FFFFFF;
		margin-bottom: 10px;
	}

	.bai-box {

		border-radius: 10px;
		margin: 10px auto;
		background: white;
		box-sizing: border-box;
		padding: 10px;
		display: flex;
	}

	.boxb {

		border: 1px solid #B4B3B1;
		border-radius: 4px;
		box-sizing: border-box;
		padding: 5px 10px;
		font-size: 16px;
		margin-right: 10px;
	}

	.boxlan {
		border: 1px solid #0D2E8D !important;
		color: #0D2E8D !important;
	}

	.c-top {
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
		padding-top: 15%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: white;
	}

	.zfxx {
		width: 16px;
		height: 16px;
		border-radius: 50%;
		opacity: 1;
		border: 1px solid #B4B3B1;
	}

	.zzzf {
		width: 16px;
		height: 16px;
		border-radius: 50%;
		opacity: 1;
		background: #0D2E8D;
		border: 1px solid #B4B3B1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wxtx {
		width: 26px;
		height: 26px;
		overflow: hidden;
		border-radius: 50%;
		margin-right: 10px;

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

	.z-title {
		font-size: 18px;
		font-weight: bold;
		color: #333333;
		margin-bottom: 60px;
	}

	.x-title {
		font-size: 18px;
		font-weight: 400;
		color: #333333;
	}

	.bott {
		width: 100%;
		height: 50px;
		background-color: #EEEEEE;
		position: fixed;
		background: white;
		bottom: 0px;
		box-sizing: border-box;
		padding: 10px;

	}

	.dju {
		font-size: 25px;
		font-weight: bold;
		color: #FF571A;
	}

	.b-left {
		position: fixed;
		bottom: 20px;
		right: 10%;
		z-index: 99999;
		font-size: 18px;
		font-weight: 400;
		color: #FFFFFF;
		;

	}

	.b-right {
		width: 40%;
		height: 60px;
		position: fixed;
		bottom: 0px;
		right: 0px;

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

	.o-top {
		display: flex;
		align-items: center;
	}

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

	.b-one {
		font-size: 15px;
		font-weight: 400;
		color: #333333;
		margin-right: 10px;
	}

	.b-two {
		font-size: 14px;
		font-weight: 400;
		color: #999999;
	}

	.xju {
		font-size: 15px;
		font-weight: 400;
		color: #F67B35;
	}

	.dju {
		font-size: 30px;
		font-weight: bold;
		color: #FF571A;
	}

	.goodsimg {
		width: 110px;
		height: 110px;
		border-radius: 8px;
		margin-right: 10px;

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

	.o-input {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 10px auto;
	}

	.hj {
		width: 100%;
		border-top: 1px solid #EEEEEE;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		box-sizing: border-box;
		padding-top: 10px;
	}

	.ai-top {
		width: 100%;
		border-bottom: 1px solid #EEEEEE;
		box-sizing: border-box;
		padding-bottom: 10px;
		font-size: 15px;
		font-weight: 400;
		color: #666666;

	}

	.wxinput {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 10px auto;
	}

	.img-vip {
		width: 98%;
		height: 75px;
		margin: 0 auto;
		overflow: hidden;
		border-radius: 8px;

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

	.img-yuye {
		width: 98%;
		height: 75px;
		margin: 0 auto;
		margin-bottom: 10px;
		overflow: hidden;
		border-radius: 8px;
		box-sizing: border-box;
		padding: 10px;
		background: #E8F7FD;
		display: flex;
		align-items: center;
		justify-content: space-between;

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

	.img-shangmen {
		width: 98%;
		height: 75px;
		margin: 0 auto;
		margin-bottom: 10px;
		overflow: hidden;
		border-radius: 8px;
		box-sizing: border-box;
		padding: 10px;
		background: #D9F5E4;
		display: flex;
		align-items: center;
		justify-content: space-between;

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

	.img-noyuye {
		width: 98%;
		height: 75px;
		margin: 0 auto;
		margin-bottom: 10px;
		overflow: hidden;
		border-radius: 8px;
		box-sizing: border-box;
		padding: 10px;
		background: #FDE8E8;
		display: flex;
		align-items: center;
		justify-content: space-between;

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

	.yuyeimg {
		width: 40px;
		height: 40px;
		margin-right: 15px;

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

	.zhong {
		width: 70%;
		text-align: left;
	}

	.xxiang {
		width: 22px;
		height: 22px;
		border-radius: 50%;
		border: 1px solid #F28585;
	}

	.xxiangl {
		width: 22px;
		height: 22px;
		border-radius: 50%;
		border: 1px solid #7984A5;
	}

	.xxiangxz {
		width: 22px;
		height: 22px;
		border-radius: 50%;
		// background-color: #F28585;
		// border: 1px solid #F28585;
		background: white;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
	}

	.xxianglxz {
		width: 22px;
		height: 22px;
		border-radius: 50%;
		background: linear-gradient(180deg, #3F61C0 0%, #0D2E8D 100%);
		border: 1px solid #7984A5;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
	}

	.xxianglxzl {
		width: 22px;
		height: 22px;
		border-radius: 50%;
		background: #3CBC6F;
		border: 1px solid #7984A5;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
	}

	.zlanl {
		width: 100%;
		text-align: left;
		font-size: 18px;
		font-weight: 500;
		color: #3CBC6F;
	}

	.zxlanl {
		width: 100%;
		text-align: left;
		font-size: 15px;
		font-weight: 400;
		color: #79A592;
	}

	.zlan {
		width: 100%;
		text-align: left;
		font-size: 18px;
		font-weight: 500;
		color: #0D2E8D;
	}

	.zxlan {
		width: 100%;
		text-align: left;
		font-size: 15px;
		font-weight: 400;
		color: #7984A5;
	}

	.zfen {
		width: 100%;
		text-align: left;
		font-size: 18px;
		font-weight: 500;
		color: #8D0D0D;
	}

	.zxfen {
		width: 100%;
		text-align: left;
		font-size: 15px;
		font-weight: 400;
		color: #A57979;
	}

	.hongzi {
		width: 100%;
		margin: 10px auto;
		text-align: center;
		color: #0D2E8D;
		box-sizing: border-box;
		padding: 20px;

	}

	.x-top {
		width: 100%;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #EEEEEE;
		box-sizing: border-box;
		padding-bottom: 10px;
	}

	.x-left {
		display: flex;
		align-items: center;
	}

	.chebiao {
		width: 70px;
		height: 70px;
		margin-right: 10px;

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

	.dh-title {
		font-size: 20px;
		font-weight: 400;
		color: #333333;
		line-height: 20px;
		margin-bottom: 15px;
	}

	.xh-title {
		font-size: 15px;
		font-weight: 400;
		color: #666666;
		line-height: 15px;
	}

	.x-right {
		display: flex;
		align-items: center;
	}

	.x-xia {
		margin-top: 15px;
	}

	.wdadada {
		box-sizing: border-box;
		padding: 10px 15px;
		background-color: #FDE8E8;
		border: 1px solid #F28585;
		color: #ff0000;
		border-radius: 8px;
	}
</style>