<template>
	<view style="padding: 20rpx 0;">
		<!-- 视频简介 -->
		<view class="info flex align-center justify-center">
			<view class="info-box flex align-center">
				<view class="info-box-l">
					<image :src="titleImg" mode="aspectFill"></image>
				</view>
				<view class="info-box-r">
					<view class="info-box-r-t">
						{{type==1?name:courseDetailsName}}
					</view>
					<view class="info-box-r-b flex align-center" v-if="type == 1">
						全集价格：
						<view class="flex align-center">
							<image style="width: 38rpx;height: 38rpx;margin-right: 10rpx;"
								src="../../static/images/me/jindou.png" mode="">
							</image>
							{{parsePrice(zongPrice)}}
						</view>
					</view>
					<view class="info-box-r-b flex align-center" v-else>
						单集价格：
						<view class="flex align-center">
							<image style="width: 38rpx;height: 38rpx;margin-right: 10rpx;"
								src="../../static/images/me/jindou.png" mode="">
							</image>
							{{parsePrice(price)}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 价格提示 -->
		<view class="price flex align-center justify-center">
			<view class="price-box flex align-center justify-between">
				<view class="price-box-title">
					需支付
				</view>
				<view class="price-box-price flex align-center" v-if="type==1">
					<image style="width: 38rpx;height: 38rpx;margin-right: 10rpx;"
						src="../../static/images/me/jindou.png" mode="">
					</image>
					{{parsePrice(zongPrice)}}
				</view>
				<view class="price-box-price flex align-center" v-else>
					<image style="width: 38rpx;height: 38rpx;margin-right: 10rpx;"
						src="../../static/images/me/jindou.png" mode="">
					</image>
					{{parsePrice(price)}}
				</view>
			</view>
		</view>
		<!-- 支付方式 -->
		<view v-if="payList.length>0" class="pay flex align-center justify-center">
			<view class="pay-box">
				<view class="pay-box-title">
					支付方式
				</view>
				<u-radio-group style="width: 100%;" size="44" v-model="payAway">
					<view class="pay-box-item flex align-center justify-between" v-for="(item,index) in payList"
						:key="index">
						<view class="pay-box-item-l flex align-center">
							<image :src="item.imgurl" mode=""></image>
							{{item.name}}
						</view>
						<view class="pay-box-item-r">
							<u-radio active-color="5074FF" :name="item.payAway"></u-radio>
						</view>
					</view>
				</u-radio-group>
			</view>
		</view>
		<view class="illustrate flex align-center justify-center">
			<view class="illustrate-box flex align-center">
				<u-checkbox v-model="checked" :size="40" shape="circle"></u-checkbox>
				<text @click="checked = !checked">我已经阅读并同意</text>
				<view @click="goXieyi()" class="illustrate-box-txt">
					《付费须知说明》
				</view>
			</view>
		</view>
		<!-- 支付 -->
		<view class="submit flex align-center justify-center">
			<view class="submit-box flex align-center justify-center" @click="getOrderInfo()">
				支付 ¥{{type==1?parsePrice(zongPrice):parsePrice(price)}}
			</view>
		</view>
		<u-toast ref="uToast" />
		<!-- 抖音im客服 -->
		<ttMsg />
	</view>
</template>

<script>
	import ttMsg from '../../components/ttMsg/ttMsg.vue'
	export default {
		components: {
			ttMsg
		},
		data() {
			return {
				courseId: '', //整部视频id
				courseDetailsId: '', //单集id
				titleImg: '', //图片
				courseDetailsName: '', //名称
				price: 0, //单价
				zongPrice: 0, //总价
				type: 1, //类型：1:整部 2:单部
				name: '', //全集名称
				payList: [],
				payAway: 1,
				checked: false
			};
		},
		onLoad(option) {
			// #ifdef APP
			if (plus.os.name.toLowerCase() === 'android') {
				this.payList = [{
						imgurl: '/static/images/pay/weixin.png',
						name: '微信支付',
						payAway: 1
					},
					{
						imgurl: '/static/images/pay/zhifubao.png',
						name: '支付宝支付',
						payAway: 2
					},
					{
						imgurl: '/static/images/pay/lingqian.png',
						name: '金豆支付',
						payAway: 3
					}
				]
				this.payAway = 1
			} else {
				let checkIosPay = this.$queue.getData('checkIosPay');
				if (checkIosPay === '是') {
					this.payList = [{
						imgurl: '/static/images/pay/lingqian.png',
						name: '金豆支付',
						payAway: 3
					}]
					this.payAway = 3
				} else {
					this.payList = [{
							imgurl: '/static/images/pay/weixin.png',
							name: '微信支付',
							payAway: 1
						},
						{
							imgurl: '/static/images/pay/zhifubao.png',
							name: '支付宝支付',
							payAway: 2
						},
						{
							imgurl: '/static/images/pay/lingqian.png',
							name: '金豆支付',
							payAway: 3
						}
					]
					this.payAway = 1
				}
			}
			// #endif
			// #ifdef MP-WEIXIN
			this.payList = [{
				imgurl: '/static/images/pay/lingqian.png',
				name: '金豆支付',
				payAway: 3
			}]
			this.payAway = 3
			// #endif
			// #ifdef H5
			let ua = navigator.userAgent.toLowerCase();
			if (ua.indexOf('micromessenger') !== -1) {
				this.payList = [{
						imgurl: '/static/images/pay/weixin.png',
						name: '微信支付',
						payAway: 1
					},
					{
						imgurl: '/static/images/pay/lingqian.png',
						name: '金豆支付',
						payAway: 3
					}
				]
				this.payAway = 1
			} else {
				this.payList = [{
						imgurl: '/static/images/pay/zhifubao.png',
						name: '支付宝支付',
						payAway: 2
					},
					{
						imgurl: '/static/images/pay/lingqian.png',
						name: '金豆支付',
						payAway: 3
					}
				]
				this.payAway = 2
			}
			// #endif
			// #ifdef MP-TOUTIAO
			this.payList = [{
					imgurl: '/static/images/pay/zhifubao.png',
					name: '抖音支付',
					payAway: 4
				},
				{
					imgurl: '/static/images/pay/lingqian.png',
					name: '金豆支付',
					payAway: 3
				}
			]
			this.payAway = 4
			// #endif
			// #ifdef MP-KUAISHOU
			const osName = uni.getSystemInfoSync().osName;
			if (osName != 'ios') { //安卓
				this.payList = [{
						imgurl: '/static/images/pay/zhifubao.png',
						name: '快手支付',
						payAway: 5
					},
					{
						imgurl: '/static/images/pay/lingqian.png',
						name: '金豆支付',
						payAway: 3
					}
				]
				this.payAway = 5
			} else {
				this.payList = [{
					imgurl: '/static/images/pay/lingqian.png',
					name: '金豆支付',
					payAway: 3
				}]
				this.payAway = 3
			}
			// #endif
			if (option.info) {
				let info = JSON.parse(decodeURIComponent(option.info))
				this.courseId = info.courseId
				this.courseDetailsId = info.courseDetailsId
				this.titleImg = info.titleImg
				this.courseDetailsName = info.courseDetailsName
				this.price = info.price
				this.zongPrice = info.zongPrice
				this.name = info.name
				this.type = info.type
			}
		},
		methods: {
			//去付费须知说明
			goXieyi() {
				uni.navigateTo({
					url: '/me/setting/payXieYi'
				})
			},
			/**
			 * @param {Number} price
			 * 价格保留两位小数
			 */
			parsePrice(price) {
				return price.toFixed(2)
			},
			//生成订单
			getOrderInfo() {
				if (this.checked == false) {
					this.$refs.uToast.show({
						title: '请阅读并同意《付费须知说明》',
						duration: 1500
					})
					return
				}
				let data = {
					courseId: this.courseId
				}
				if (this.type != 1) { //购买单集
					data.courseDetailsId = this.courseDetailsId
				}
				this.$Request.getT('/app/order/insertCourseOrders', data).then(res => {
					if (res.code == 0) {
						this.payOrder(res.data.orders.ordersId)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})


			},
			/**
			 * @param {Object} orderId 订单id
			 */
			payOrder(orderId) {
				let that = this
				if (that.payAway == 4) { //抖音支付
					uni.showLoading({
						title: '支付中...'
					})
					this.$Request.postT('/app/dyPay/payVirtualAppOrder', {
						orderId: orderId
					}).then(res => {
						if (res.code == 0) {
							tt.requestOrder({
								data: JSON.stringify(res.data.data), // 请勿在前端对data做任何处理
								byteAuthorization: res.data
									.byteAuthorization, // 请勿在前端对byteAuthorization做任何处理
								success(redd) {
									console.log(JSON.stringify(redd))
									tt.getOrderPayment({
										orderId: redd.orderId,
										success(reee) {
											uni.hideLoading()
											uni.showToast({
												title: '支付成功'
											})
											setTimeout(function() {
												let data = {
													flag: true
												}
												uni.$emit('back', data)
												uni.navigateBack();
											}, 1000)
										},
										fail(ee) {
											uni.hideLoading()
											uni.showToast({
												title: '支付失败',
												icon: 'none'
											})
											console.log(ee)
										}
									});

								},
								fail(e) {
									console.log(e)
								}
							});
						}
					})
				} else if (that.payAway == 5) { //快手支付
					uni.showLoading({
						title: '支付中...'
					})
					this.$Request.postT('/app/ksPay/payAppOrder', {
						orderId: orderId
					}).then(res => {
						if (res.code == 0) {
							ks.pay({
								serviceId: '1', //服务类型id（固定值为‘1’）
								orderInfo: res.data,
								success(succ) {
									uni.hideLoading()
									uni.showToast({
										title: '支付成功'
									})
									setTimeout(function() {
										let data = {
											flag: true
										}
										uni.$emit('back', data)
										uni.navigateBack();
									}, 1000)
								},
								fail(err) {
									uni.hideLoading()
									that.$refs.uToast.show({
										title: '支付失败，请重试!',
										duration: 1500
									})
								},
							})
						} else {
							uni.hideLoading()
							this.$refs.uToast.show({
								title: res.msg,
								duration: 1500
							})
						}
					})
				} else {
					switch (this.payAway) { //1:微信支付,2:支付宝支付 3:金豆支付
						case 1: //微信支付
							// #ifdef MP-WEIXIN
							that.$Request.postT("/app/wxPay/wxPayJsApiOrder", {
								orderId: orderId,
							}).then(red => {
								if (red.code == 0) {
									uni.requestPayment({
										provider: 'wxpay',
										timeStamp: red.data.timestamp,
										nonceStr: red.data.noncestr,
										package: red.data.package,
										signType: red.data.signType,
										paySign: red.data.sign,
										success: function(redd) {
											uni.showLoading({
												title: '支付成功'
											});
											uni.hideLoading();
											setTimeout(function() {
												let data = {
													flag: true
												}
												uni.$emit('back', data)
												uni.navigateBack();
											}, 1000)
										},
										fail: function(err) {
											uni.hideLoading();
											that.$queue.showToast(
												'支付失败');
										}
									});
								} else {
									uni.showToast({
										title: red.msg,
										icon: 'none'
									})
								}
							});
							// #endif

							// #ifdef H5
							let ua = navigator.userAgent.toLowerCase();
							console.log(ua)
							if (ua.indexOf('micromessenger') !== -1) {
								that.$Request.postT("/app/wxPay/wxPayMpOrder", {
									orderId: orderId,
								}).then(red => {
									if (red.code == 0) {
										that.callPay(red.data);
									} else {
										that.isPay = true
										uni.showToast({
											title: red.msg,
											icon: 'none'
										})
									}
								});
							}

							// #endif

							// #ifdef APP-PLUS
							that.$Request.postT("/app/wxPay/payAppOrder", {
								orderId: orderId,
							}).then(red => {
								if (red.code == 0) {
									console.log(red, '+++++++++++++++++++++')
									that.setPayment('wxpay', JSON.stringify(red.data));
								} else {
									that.isPay = true
									uni.showToast({
										title: red.msg,
										icon: 'none'
									})
								}
							});
							// #endif
							break;
						case 2: //支付宝
							// #ifdef H5
							that.$Request.postT("/app/aliPay/payOrder", {
								orderId: orderId,
								classify: 2
							}).then(red => {
								if (red.code == 0) {
									const div = document.createElement('div')
									div.innerHTML = red.data //此处form就是后台返回接收到的数据
									document.body.appendChild(div)
									document.forms[0].submit()
								} else {
									uni.showToast({
										title: red.msg,
										icon: 'none'
									})
								}
							});
							// #endif
							// #ifdef APP-PLUS
							that.$Request.postT("/app/aliPay/payOrder", {
								orderId: orderId,
								classify: 1
							}).then(red => {
								if (red.code == 0) {
									that.setPayment('alipay', red.data);
								} else {
									uni.showToast({
										title: red.msg,
										icon: 'none'
									})
								}
							});
							// #endif
							break;
						default: //零钱
							that.$Request.postT("/app/order/payOrders", {
								orderId: orderId,
							}).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title: '支付成功'
									})
									setTimeout(function() {
										let data = {
											flag: true
										}
										uni.$emit('back', data)
										uni.navigateBack();
									}, 1000)
								} else {
									// uni.showToast({
									// 	title: res.msg,
									// 	icon: 'none'
									// })
									uni.showModal({
										title: '提示',
										content: '支付失败，余额不足！',
										confirmText: '去充值',
										complete(ret) {
											if (ret.confirm) {
												uni.navigateTo({
													url: '/me/wallet/wallet'
												})
											}
										}
									})
								}
							});
							break;
					}
				}
			},
			callPay: function(response) {
				if (typeof WeixinJSBridge === "undefined") {
					if (document.addEventListener) {
						document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(response), false);
					} else if (document.attachEvent) {
						document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(response));
						document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(response));
					}
				} else {
					this.onBridgeReady(response);
				}
			},
			onBridgeReady: function(response) {
				let that = this;
				if (!response.package) {
					return;
				}
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId": response.appid, //公众号名称，由商户传入
						"timeStamp": response.timestamp, //时间戳，自1970年以来的秒数
						"nonceStr": response.noncestr, //随机串
						"package": response.package,
						"signType": response.signType, //微信签名方式：
						"paySign": response.sign //微信签名
					},
					function(res) {
						if (res.err_msg === "get_brand_wcpay_request:ok") {
							// 使用以上方式判断前端返回,微信团队郑重提示：
							//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
							uni.removeStorageSync('EditAddress')
							uni.showLoading({
								title: '支付成功'
							});
							uni.hideLoading();
							setTimeout(function() {
								let data = {
									flag: true
								}
								uni.$emit('back', data)
								uni.navigateBack();
							}, 1000)
						} else {
							uni.hideLoading();
						}
						WeixinJSBridge.log(response.err_msg);
					}
				);
			},
			setPayment(name, order) {
				let that = this;
				uni.requestPayment({
					provider: name,
					orderInfo: order, //微信、支付宝订单数据
					success: function(res) {
						uni.showLoading({
							title: '支付成功'
						});
						uni.hideLoading();
						setTimeout(function() {
							let data = {
								flag: true
							}
							uni.$emit('back', data)
							uni.navigateBack();
						}, 1000)
					},
					fail: function(err) {
						uni.hideLoading();
						console.log(err, 12)
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	/deep/.u-radio {
		display: block !important;
	}

	.illustrate {
		width: 100%;
		margin: 30rpx 0;

		.illustrate-box {
			width: 686rpx;
		}

		.illustrate-box-txt {
			color: #5173F8;
		}

	}

	/deep/.u-radio__label {
		display: none !important;
	}

	.info {
		width: 100%;
		height: auto;

		.info-box {
			width: 686rpx;
			height: 100%;
			border-radius: 24rpx;
			padding: 30rpx;
			background-color: #ffffff;
		}

		.info-box-l {
			width: 200rpx;
			height: 150rpx;
			border-radius: 8rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}
		}

		.info-box-r {
			margin-left: 30rpx;

			.info-box-r-t {
				font-weight: bold;
			}

			.info-box-r-b {
				margin-top: 20rpx;
				color: #5074FF;

				text {
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}
	}

	.price {
		width: 100%;
		height: auto;
		margin-top: 30rpx;

		.price-box {
			width: 686rpx;
			height: 100%;
			background-color: #ffffff;
			border-radius: 24rpx;
			padding: 30rpx;
		}

		.price-box-price {
			color: #5074FF;
			font-size: 32rpx;
			font-weight: bold;
		}
	}

	.pay {
		width: 100%;
		height: auto;
		margin-top: 30rpx;

		.pay-box {
			width: 686rpx;
			height: 100%;
			background-color: #ffffff;
			border-radius: 24rpx;
			padding: 30rpx;
		}

		.pay-box-title {
			width: 100%;
			font-size: 32rpx;
			font-weight: bold;

		}

		.pay-box-item {
			width: 100%;
			margin-top: 40rpx;

			.pay-box-item-l {
				font-weight: 500;

				image {
					width: 60rpx;
					height: 60rpx;
					margin-right: 30rpx;
				}
			}
		}
	}

	.submit {
		width: 100%;
		height: auto;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #ffffff;
		padding: 20rpx 0;

		.submit-box {
			width: 686rpx;
			height: 88rpx;
			border-radius: 40rpx;
			background-color: #5074FF;
			color: #ffffff;
			font-weight: 500;
		}
	}
</style>