<template>
	<view class="top-up-order-page">
		<HeaderCom></HeaderCom>
		<view class="main">
			<!-- <view>{{txt}}</view> -->
			<view class="item">
				<view class="label">充值金额</view>
				<view class="value">{{form.price}}元</view>
			</view>
			<view class="item">
				<view class="label">充值代币</view>
				<view class="value">{{form.coin}}代币</view>
			</view>
			<view class="item">
				<view class="label">充值奖励</view>
				<view class="value">{{form.gift}}代币</view>
			</view>
		</view>
		<view class="main">
			<view class="pay" v-for="(item,index) in payList" :key="index" @click="payChange(index,item)">
				<view class="left">
					<image :src="item.img" mode="aspectFit" class="pay-icon"></image>
					{{item.label}}
				</view>
				<image src="@/static/new/address/s.png" mode="" class="select-icon" v-if="item.visible"></image>
				<image src="@/static/new/address/no.png" mode="" class="select-icon" v-else></image>
			</view>
		</view>
		<view class="footer">
			<view class="point">
				<text class="total">合计</text>
				<text class="sym">¥</text>
				{{form.price}}
			</view>
			<view class="buy" @click="pay">立即支付</view>
		</view>
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/mine/topUpOrder"></page-popup>
	</view>
</template>

<script>
	import HeaderCom from '@/pages/components/header.vue'
	import { payMethodApi,coinGearRechargeApi,coinPaidApi } from '@/API/user.js'
	export default{
		data(){
			return{
				payList:[],
				payIndex:0,
				form:{
					id:'',
					price:'',
					coin:'',
					gift:''
				},
				timer:null,
				payType:'',
				// txt:'',
				
				
				// {
				//   "code": 200,
				//   "message": "操作成功",
				//   "data": {
				//     "no": "4240510769570189889",
				//     "payParams": {
				//       "payChannelId": "1788815560356773889",
				//       "amount": "0.01",
				//       "method": "ALIPAY",
				//       "payinfo": "https://qr.alipay.com/bax04910aiclgdbeeva130de",
				//       "code": "ALIPAY_TONG_LIAN",
				//       "success": false
				//     }
				//   }
				// }
				
				
				
				
				
			}
		},
		components:{HeaderCom},
		mounted() {
			this.getPayMethod()
		},
		onLoad(option) {
			this.form = option
			// id=${item.id}&price=${item.price.settlement}&coin=${item.coin}&gift=${item.gift}
		},
		methods:{
			getPayMethod(){
				payMethodApi({type:'COIN_RECHARGE'}).then(res => {
					console.log(res)
					if(res.code === 200){
						res.data.forEach(item => {
							if(item === 'ALIPAY'){
								this.payList.push({label:'支付宝支付',type:'ALIPAY',visible:false,height: '30rpx',width: '30rpx',img: '../../static/new/pay/zfb.png',})
							}else if(item === 'WECHAT'){
								this.payList.push({label:'微信支付',type:'WECHAT',visible:true,width: '34rpx',height: '29rpx',img: '../../static/new/pay/wx.png',})
							}else if(item === 'POINTS'){
								this.payList.push({label:"积分支付",type:'POINTS',visible:false,img:'../../static/an/point.gif',width:'30rpx',height:'31rpx'})
							}else if(item === 'NONE'){
								this.payList.push({label:"无需支付",type:'NONE',visible:false,img:'',width:'32rpx',height:'34rpx'})
							}else if(item === 'COIN'){
								this.payList.push({label:"代币支付",type:'COIN',visible:false,img:'../../static/an/point.gif',width:'32rpx',height:'34rpx'})
							}
						})
						// this.payList
						this.payList[0].visible = true
						console.log("this.payList[0].type:",this.payList)
						this.payType = this.payList[0].type
					}
				})
			},
			payChange(index,item){
				this.payIndex = index;
				this.payType = item.type
				this.payList.forEach((item, idx) => {
				    item.visible = idx === index;
				  });
			},
			pay(){
				// console.log(this.payType)
				uni.showLoading()
				let data = {
				  "gearId": this.form.id,
				  "method": this.payType
				}
				// return
				coinGearRechargeApi(data).then(res => {
					if(res.code === 200){
						this.txt = JSON.stringify(res.data)
						if(res.data.payParams.payinfo){
							location.href = res.data.payParams.payinfo
							// window.open(res.data.payParams.payinfo)
						}
						this.getOrderPaid(res.data.no)
						this.timer = setInterval(() => {
							 this.getOrderPaid(res.data.no)
						},3000); 
					}else{
						this.$api.msg(res.message)
					}
				})
				
			},
			getOrderPaid(no){
				coinPaidApi({no}).then(payResult => {
				 if(payResult.data){
					 clearInterval(this.timer);　　// 清除定时器
					 this.timer = null;
					 this.$api.msg('支付成功')
					 uni.hideLoading()
					 uni.redirectTo({
					 	url:`/pages/mine/topUpSuc?price=${this.form.price}&coin=${this.form.coin}&gift=${this.form.gift}`
					 })
				 }
				}).catch(err => {
					 clearInterval(this.timer);　　// 清除定时器
					 this.timer = null;
					 uni.hideLoading()
				})
			},
		},
		onUnload() {
		    // 在页面离开时清除定时器
		    clearInterval(this.timer);
		  }
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F5F5F5;
	}
	.top-up-order-page{
		padding: 112rpx 32rpx 32rpx 32rpx;
		.main{
			width: 686rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin-bottom: 24rpx;
			.item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 80rpx;
				padding: 0 24rpx;
				.label{
					font-size: 28rpx;
					color: #666666;
					font-weight: 500;
				}
				.value{
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
				}
			}
			.pay{
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 104rpx;
				padding: 0 24rpx;
				.left{
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					display: flex;
					align-items: center;
					.pay-icon{
						width: 48rpx;
						height: 48rpx;
						margin-right: 16rpx;
					}
				}
				.select-icon{
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
		.footer {
			width: 750rpx;
			height: 144rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx;
			position: fixed;
			bottom: 0;
			left: 0;
		
			.point {
				// display: flex;
				// align-items: center;
				font-weight: bold;
				font-size: 40rpx;
				color: #000000;
				.total{
					font-weight: normal;
					font-size: 28rpx;
					color: #999999;
				}
				.sym{
					font-weight: bold;
					font-size: 24rpx;
					color: #000000;
					margin: 0 6rpx 0 10rpx;
				}
		
				.ponit-icon {
					width: 64rpx;
					height: 64rpx;
					margin-right: 16rpx;
				}
			}
		
			.buy {
				width: 328rpx;
				height: 96rpx;
				background: linear-gradient( 90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
				border-radius: 16rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	
</style>