<template>
	<view>
		<u-popup
			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" 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-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>
	</view>
</template>

<script>
export default {
	props: ['payInfo','isAlipay'],
	data() {
		return {
			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)
	},
	wacth:{
		payInfo: {
			handler: function (val, oldval) {
				
			},
			deep: true,
		}
	},
	methods: {
		closePay() {
			this.$emit('closePay');
		},
		Pay() {
			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)
						}else{
							this.wxPay(JSON.parse(res.data))
						}
					}else{
						uni.showToast({
							title:"调起支付失败，请重试",
							icon:'error'
						})
					}
					// uni.hideNavigationBarLoading();
				}
			);
		},
		// 支付宝支付
		aliPay(url) {
			window.location.href=url
		},
		// 微信支付
		wxPay(payData) {
			let that = this
			uni.showLoading({
				title:'支付中...'
			})
			wx.requestPayment(
			{
				"timeStamp": payData.timeStamp, //时间戳，自1970年以来的秒数
				"nonceStr": payData.nonceStr, //随机串
				"package": payData.package,
				"signType": payData.signType, //微信签名方式：
				"paySign": payData.paySign, //微信签名
				'success':function(res){
					uni.hideLoading()
					uni.navigateTo({
						url: '/pages/order-submit/pay-success?payInfo='+JSON.stringify(that.payInfo)
					});
					// uni.showToast({
					// 	title:'支付成功'
					// })
				},
				'fail':function(res){
					uni.hideLoading()
					uni.navigateTo({
						url: '/pages/order/index/index?status=1'
					});
				},
				'complete':function(res){
					// uni.showToast({
					// 	title:res.errMsg
					// })
				}
			})
		},
	}
};
</script>

<style></style>
