<template>
	<view>
		<u-popup v-if="pay" close-icon-color="red" v-model="show" mode="center" :mask-close-able="false" length="auto"
			:closeable="true" close-icon="close" :border-radius="20" :z-index="9999">
			<view style="background:#fff;width:550rpx;padding:40rpx;border-radius:20px">
				<u-icon @click="closePay" name="close" style="float:right;font-size:40rpx"></u-icon>
				<p style="text-align: center;font-size: 26rpx;">支付方式</p>
				<p style="font-size: 36rpx;font-weight: 700;text-align: center;margin:30px 0">
					支付金额{{ payInfo.total_price }}元</p>
				<view>
					<!-- <view v-for="(item,index) in payList" @click="payType=item.Id" -->
					<view style="display: flex;justify-content: space-between;">
						<!-- 	<p v-if="item.Name=='微信'||(item.Name=='支付宝'&&isAlipay==1)">
							<img style="width:50rpx;height:50rpx;margin-right:10px" :src="item.src" alt="" />
							<span style="position:relative;top:-7px">{{item.Name}}</span>
						</p> -->
						<u-radio-group v-model="payment" :size="36" :active-color='mc' @change="radioChange"
							:wrap="true">
							<u-radio shape="circle" :name="0" :wrap="true">
								<img style="width:50rpx;height:50rpx;margin-right:10px"
									src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/wx.png" alt="" />
								<span style="position:relative;top:-7px">微信</span>
							</u-radio>
							<u-radio v-if="u.TenantId==27" shape="circle" :name="1" :wrap="true">
								<img style="width:50rpx;height:50rpx;margin-right:10px"
									src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/zhifubao.png"
									alt="" />
								<span style="position:relative;top:-7px">支付宝</span>
							</u-radio>
						</u-radio-group>
						<u-icon v-if="isAlipay==1" :name="payType==item.Id?'checked':'circle'"
							:style="{'color':payType==item.Id?'red':''}"></u-icon>
					</view>
				</view>
				<view style="margin-top:30px">
					<u-button @click="Pay" type="error" shape="circle" :loading="loading">支付</u-button>
				</view>
			</view>
		</u-popup>
		<!-- 支付宝 -->
		<u-popup v-model="AlipayMask" mode="center" length="90%">
			<view class="Alipay-box">
				<view class="Alipay-box2">
					<view class="Alipay-text">支付宝付款说明</view>
					<u-icon name="cross" color="#9F9F9F" @click="cloGood()" size="40"> </u-icon>
				</view>
				<view class="Alipay-box3">
					<view class="fangs">
						方式
					</view>
					<view class="Alipay-text2">1</view>
					<view class="Alipay-text3">发送“支付”获取支付宝付款链接</view>
				</view>
				<view class="Alipay-box33">
					<image class="Alipay-image" src="../../static/images/zhifu.png"></image>
				</view>
				<view class="Alipay-text4" @click="send()" style="margin-bottom: 86rpx;">
					去发送
					<button open-type="contact" send-message-title="支付"
						style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;"
						:show-message-card="true">0</button>
				</view>


				<view>
					<view class="Alipay-box3">
						<view class="fangs">
							方式
						</view>
						<view class="Alipay-text2">2</view>
						<view class="Alipay-text3">复制支付宝链接，使用浏览器打开链接</view>
					</view>
					<view class="Alipay-text5">{{url}}</view>
					<view class="Alipay-text4" @click="copy()">
						复制链接
					</view>
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	import uniCopy from '@/js_sdk/xb-copy/uni-copy.js'
	export default {
		props: ['payInfo', 'isAlipay', 'StuId', 'TeacherIds'],
		data() {
			return {
				times: null,
				url: '',
				AlipayMask: false,
				mc: {},
				payment: 0,
				pay: true,
				u: {},
				loading: false,
				show: true,
				orderInfo: {},
				payType: 'wx_lite',
				payList: [{
						Name: '微信',
						Id: 'wx_lite',
						src: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/wx.png'
					},
					{
						Name: '支付宝',
						Id: 'alipay_qr',
						src: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/zhifubao.png'
					},
				]

			};
		},
		created() {
			// console.log(wx)
			this.getDataInfo();
			this.u = uni.getStorageSync('mall_UserInfo')
			this.mc = this.$uiConfig.mainColor;
			this.TimingState();
			this.times = setInterval(() => {
				this.TimingState();
			}, 30000);
		},
		onShow() {
			this.TimingState();
			this.times = setInterval(() => {
				this.TimingState();
			}, 30000);

		},
		wacth: {
			payInfo: {
				handler: function(val, oldval) {

				},
				deep: true,
			}
		},
		methods: {
			// 定时查询状态
			TimingState() {
				let that = this
				this.request2({
						url: '/api/AppletOrder/GetAppletMyOrderInfo',
						data: {
							OrderId: this.payInfo.OrderId,
							NewUserId: 0
						}
					},
					(res) => {
						if (res.data.OrderStatus == 5) {
							clearInterval(this.times);
							uni.navigateTo({
								url: `/pages/order-submit/pay-success2?payInfo=${JSON.stringify(that.payInfo)}&StuId=${that.StuId}&TeacherIds=${that.TeacherIds}`
								// url: '/pages/order-submit/pay-success2?payInfo='+JSON.stringify(that.payInfo)
							});
							that.pay = false
						}
						// console.log('状态',res.data.OrderStatus)
					}
				);
			},
			// 微信支付一开始的请求
			getDataInfo() {
				let that=this;
				// console.log("要发送的参数",that.payInfo)
				let msg = {
					OpenId: that.payInfo.OpenId,
					OrderId: that.payInfo.OrderId,
					OrderPayType:that.payInfo.OrderPayType,
					GoodsName: that.payInfo.GoodsName
				};
				this.request2(
					{
						url: '/api/WeChatPay/GetPayInfo',
						data: msg
					},
					res => {
						if (res.resultCode == 1) {
							this.orderInfo = JSON.parse(res.data);
						}
						uni.hideNavigationBarLoading();
					}
				);
			},
			radioChange(e) {
				if (e == 0) {
					this.payType = 'wx_lite'
				} else {
					this.payType = 'alipay_qr'
				}
			},
			cloGood() {
				this.AlipayMask = false
				this.pay = true
			},
			// 支付宝发送发送
			send() {
			},
			copy() {
				uniCopy({
					content: this.url,
					success: (res) => {
						uni.showToast({
							title: res,
							icon: 'none'
						})

					},
					error: (e) => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 3000,
						})
					}
				})
			},
			closePay() {
				this.$emit('closePay');
			},
			// 支付宝支付
			Pay() {
				if(this.payType == 'wx_lite') {
					this.wxPay()
				} else {
					let msg = {
						'pay_channel': this
							.payType, //网页打开支付宝支付：alipay_wap 支付宝正扫：alipay_qr 支付宝app：alipay 微信小程序：wx_lite 微信公众号：wx_pub
						'open_id': this.payType == 'wx_lite' ? this.payInfo.OpenId : '',
						'hb_fq_num': '',
						'orderId': this.payInfo.OrderId,
					};
					this.loading = true
					uni.showLoading({
						title: '正在调起支付'
					})
					this.request2({
							url: '/api/Adapay/GetAdapayInfo',
							data: msg
						},
						res => {
							this.loading = false
							uni.hideLoading()
							if (res.data != '') {
								if (this.payType != 'wx_lite') {
									this.aliPay(res.data)
									this.AlipayMask = true
									this.pay = false
								} else {
									this.wxPay(JSON.parse(res.data))
								}
							} else {
								uni.showToast({
									title: "调起支付失败，请重试",
									icon: 'error'
								})
							}
						}
					);
				}
				
			},
			// 支付宝支付
			aliPay(url) {
				// window.location.href = url
				this.url = `http://jj.kookaku.com/pages/pay/transition?aliuri=${encodeURIComponent(url)}`

			},
			// 微信支付
			wxPay(payData) {
				let that = this
				let orderInfo = this.orderInfo;
				uni.showLoading({
					title: '支付中...'
				})
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: that.orderInfo.timeStamp,
					nonceStr: that.orderInfo.nonceStr,
					package: that.orderInfo.package,
					signType: that.orderInfo.signType,
					paySign: that.orderInfo.sign,
					success: function(res) {
						uni.hideLoading()
						if (that.u && that.u.TenantId == 27) {
							uni.navigateTo({
								url: `/pages/order-submit/pay-success2?payInfo=${JSON.stringify(that.payInfo)}&StuId=${that.StuId}&TeacherIds=${that.TeacherIds}`
							});
							that.pay = false
						} else {
							uni.navigateTo({
								url: '/pages/order-submit/pay-success?payInfo=' + JSON.stringify(that
									.payInfo)
							});
							that.pay = false
						}
					},
					fail: function(res) {
						uni.hideLoading()
						uni.navigateTo({
							url: '/pages/order/index/index?status=1'
						});
						that.pay = false
					},
					complete: function(res) {
					}
				})
			},
		}
	};
</script>

<style>
	.fangs {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #2B2B2B;
		margin-right: 10rpx;
		width: 60rpx;
	}

	.item-box {
		position: relative;
	}

	.Alipay-box {
		/* height: 930rpx; */
		background: #FFFFFF;
		border: 1px solid #FFFFFF;
		border-radius: 50rpx;
		padding: 47rpx 54rpx 62rpx 56rpx;
	}

	.Alipay-text {
		margin: auto;
	}

	.Alipay-box2 {
		display: flex;
		justify-content: space-between;
		margin-bottom: 49rpx;
	}

	.Alipay-box3 {
		display: flex;
		padding-bottom: 27rpx;
	}

	.Alipay-box33 {
		padding-left: 68rpx;
		padding-bottom: 12rpx;
	}

	.Alipay-text4 {
		margin-left: 68rpx;
		width: 230rpx;
		height: 70rpx;
		background: #C91727;
		border-radius: 35rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		/* padding-bottom: 76rpx; */
	}

	.Alipay-text2 {
		margin-right: 29rpx;
		width: 41rpx;
		height: 41rpx;
		background: #2B2B2B;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}

	.Alipay-text3 {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #2B2B2B;
	}

	.Alipay-image {
		width: 442rpx;
		height: 271rpx;
	}

	.Alipay-text5 {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #3A22CB;
		/* line-height: 5rpx; */
		margin-left: 68rpx;
		margin-bottom: 59rpx;
		word-wrap: break-word;
	}
</style>
