<template>
	<!-- <view class="log-out">
		<view class="log-out-tip">代币余额不足，是否充值</view>
		<view class="log-out-footer">
			<view class="cancel" @click="closeTop">狠心离开</view>
			<view class="shu"></view>
			<view class="log-out-submit" @click="submitTop">去充值</view>
		</view>
	</view> -->
	<view class="main-top">
		<view class="list">
			<template v-for="(item,index) in list">
				<view class="items" :class="{'item-active':listIndex === index}" :key="index" @click="handleItem(index)" v-if="index < 3">
					<view class="tips" v-if="item.gift">赠送{{item.gift}}代币</view>
					<view class="point">
						<image src="@/static/an/point.gif" mode="" class="point-icon"></image>
						{{item.coin}}
					</view>
					<view class="price">¥ {{item.price.settlement}}</view>
				</view>
			</template>
		</view>
		<view class="item">
			<view class="label">充值金额</view>
			<view class="value">{{list[listIndex].price.sale}} 元</view>
		</view>
		<view class="item">
			<view class="label">充值代币</view>
			<view class="value">{{list[listIndex].coin}} 代币</view>
		</view>
		<view class="item">
			<view class="label">充值奖励</view>
			<view class="value">{{list[listIndex].gift}} 代币</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="buy" @click="pay">立即支付 ¥{{list[listIndex].price.sale}}</view>
		
	</view>
</template>

<script>
	import { coinGearApi,payMethodApi,coinGearRechargeApi,coinPaidApi } from '@/API/user.js'
	export default{
		data(){
			return{
				list:[],
				listIndex:0,
				payList:[],
				payType:'',
				timer:null,
				payinfoUrl:'',
				orderSn:'',
				timeSec:0
			}
		},
		props:{
			close:{
				type:Boolean,
				default:false
			}
		},
		watch:{
			  timeSec(){
				  if(this.timeSec == 30){
					  clearInterval(this.timer)
					  this.timer = null
					  this.$api.msg('未查询到支付结果')
				  }
			  },
			  close(){
				  uni.hideLoading()
			  }
		},
		mounted() {
			this.getCoinGear()
			
		},
		methods:{
			getPayMethod(){
				payMethodApi({type:'COIN_RECHARGE'}).then(res => {
					console.log(res)
					if(res.code === 200){
						this.payList = []
						// 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:false,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'})
						// 	}
						// })
						res.data.forEach(item => {
						            let objToAdd = null;
						
						            if (item === 'ALIPAY') {
						                objToAdd = {
						                    label: '支付宝支付',
						                    type: 'ALIPAY',
						                    visible: false,
						                    height: '30rpx',
						                    width: '30rpx',
						                    img: '../../static/new/pay/zfb.png',
						                };
						            } else if (item === 'WECHAT') {
						                objToAdd = {
						                    label: '微信支付',
						                    type: 'WECHAT',
						                    visible: false,
						                    width: '34rpx',
						                    height: '29rpx',
						                    img: '../../static/new/pay/wx.png',
						                };
						            } else if (item === 'POINTS') {
						                objToAdd = {
						                    label: "积分支付",
						                    type: 'POINTS',
						                    visible: false,
						                    img: '../../static/an/point.gif',
						                    width: '30rpx',
						                    height: '31rpx'
						                };
						            }  else if (item === 'COIN') {
						                objToAdd = {
						                    label: "代币支付",
						                    type: 'COIN',
						                    visible: false,
						                    img: '../../static/an/point.gif',
						                    width: '32rpx',
						                    height: '34rpx'
						                };
						            } else if (item === 'NONE') {
						                objToAdd = {
						                    label: "无需支付",
						                    type: 'NONE',
						                    visible: false,
						                    img: '',
						                    width: '32rpx',
						                    height: '34rpx'
						                };
						            }
						
						            // 只有在objToAdd被赋值的情况下才添加到payList
						            if (objToAdd) {
						                if (objToAdd.type === 'WECHAT') {
						                    // 如果是WECHAT类型，则先添加到数组第一位
						                    this.payList.unshift(objToAdd);
						                } else {
						                    // 其他类型添加到数组末尾
						                    this.payList.push(objToAdd);
						                }
						            }
						        });
						// this.payList
						this.payList[0].visible = true
						this.payType = this.payList[0].type
						
						
						// if(this.payType !== 'NONE'){
						// 	let item = this.list[this.listIndex]
						// 	uni.showLoading()
						// 	let data = {
						// 	  "gearId": item.id,
						// 	  "method": this.payType
						// 	}
						// 	// return
						// 	coinGearRechargeApi(data).then(result => {
						// 		uni.hideLoading()
						// 		if(result.code === 200){
						// 			if(result.data.payParams.payinfo){
						// 				this.payinfoUrl = result.data.payParams.payinfo
						// 			}
						// 			this.orderSn = result.data.no
						// 		}else{
						// 			// this.$api.msg(result.message)
						// 		}
						// 	})
						// }
						
						
						
					}
				})
			},
			payChange(index,item){
				this.payIndex = index;
				this.payType = item.type
				this.payList.forEach((item, idx) => {
				    item.visible = idx === index;
				  });
				  this.payinfoUrl = ''
				  // if(this.payType !== 'NONE'){
					 //  let itemId = this.list[this.listIndex]
					 //  uni.showLoading()
					 //  let data = {
					 //    "gearId": itemId.id,
					 //    "method": this.payType
					 //  }
					 //  // return
					 //  coinGearRechargeApi(data).then(result => {
					 //  					  uni.hideLoading()
					 //  	if(result.code === 200){
					 //  		if(result.data.payParams.payinfo){
					 //  			this.payinfoUrl = result.data.payParams.payinfo
					 //  		}
					 //  		this.orderSn = result.data.no
					 //  	}else{
					 //  		// this.$api.msg(result.message)
					 //  	}
					 //  })
				  // }
				  
				  
			},
			getCoinGear(){
				coinGearApi({page:1,size:999}).then(res => {
					console.log(res)
					if(res.code === 200){
						res.data.content.forEach(item => {
							item.gift = Number(item.gift)
						})
						this.list = res.data.content
						this.getPayMethod()
					}else{
						this.$api.msg(res.message)
					}
				})
			},
			closeTop(){
				this.$emit('close')
			},
			submitTop(){
				this.$emit('close')
				uni.navigateTo({
					url:`/pages/mine/topUp`
				})
			},
			
			handleItem(index){
				this.listIndex = index
			},
			pay(){
				// if(this.payType === 'WECHAT'){
				// 	uni.showLoading()
				// 	// window.open(this.payinfoUrl)
				// 	window.location.href = this.payinfoUrl
				// 	this.getOrderPaid(this.orderSn)
				// 	this.timer = setInterval(() => {
				// 		 this.getOrderPaid(this.orderSn)
				// 	},3000); 
				// }else if(this.payType === 'ALIPAY'){
				// 	uni.showLoading()
				// 	// window.open(this.payinfoUrl)
				// 	window.location.href = this.payinfoUrl
				// 	this.getOrderPaid(this.orderSn)
				// 	this.timer = setInterval(() => {
				// 		 this.getOrderPaid(this.orderSn)
				// 	},3000); 
				// }else{
					let item = this.list[this.listIndex]
					uni.showLoading()
					let data = {
					  "gearId": item.id,
					  "method": this.payType
					}
					// return
					coinGearRechargeApi(data).then(res => {
						this.timeSec = 0
						if(res.code === 200){
							if(res.data.payParams.payinfo){
								location.href = res.data.payParams.payinfo
							}
							this.getOrderPaid(res.data.no)
							this.timer = setInterval(() => {
								this.timeSec += 3
								 this.getOrderPaid(res.data.no)
							},3000); 
						}else{
							// this.$api.msg(res.message)
						}
					})
				// }
				
				// uni.navigateTo({
				// 	url:`/pages/mine/topUpOrder?id=${item.id}&price=${item.price.settlement}&coin=${item.coin}&gift=${item.gift}`
				// })
			},
			getOrderPaid(no){
				coinPaidApi({no}).then(payResult => {
				 if(payResult.data){
					 clearInterval(this.timer);　　// 清除定时器
					 this.timer = null;
					 this.$emit('sucClose')
					 // this.$api.msg('支付成功')
					 uni.hideLoading()
				 }
				}).catch(err => {
					 clearInterval(this.timer);　　// 清除定时器
					 this.timer = null;
					 uni.hideLoading()
				})
			},
		},
		onHide() {
			console.log('close')
		},
		onUnload() {
			console.log('close')
		    // 在页面离开时清除定时器
		    clearInterval(this.timer);
		  }
	}
</script>

<style lang="scss" scoped>
	.log-out{
		width: 590rpx;
		height: 300rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		.log-out-tip{
			height: 200rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: rgba(0,0,0,0.85);
			line-height: 200rpx;
			text-align: center;
		}
		.log-out-footer{
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-top: 2rpx solid rgba(0,0,0,0.06);
			height: 100rpx;
			.cancel{
				width: 294rpx;
				height: 100rpx;
				line-height: 100rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				text-align: center;
				border-right: 1px solid rgba(0,0,0,0.06);
			}
			.log-out-submit{
				width: 294rpx;
				height: 100rpx;
				line-height: 100rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #E55353;
				text-align: center;
			}
		}
	}
	.main-top{
		padding: 62rpx 32rpx 32rpx 32rpx;
		.list{
			display: grid;
			gap: 22rpx;
			grid-template-rows: 1fr;
			margin: 0px auto;
			grid-template-columns: repeat(3, 1fr);
			
			
			// display: grid;
			// gap: 12rpx;
			// grid-template-rows: 1fr;
			// margin: 0px auto;
			// grid-template-columns: repeat(3, 1fr);
			padding: 24rpx 0rpx;
			.items{
				width: 208rpx;
				height: 168rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				border: 2rpx solid #E6E6E6;
				position: relative;
				margin-bottom: 32rpx;
				.tips{
					position: absolute;
					width: 158rpx;
					height: 40rpx;
					background: linear-gradient( 90deg, #39B2FF 0%, #3354FF 100%);
					border-radius: 20rpx 0px 20rpx 0px;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					color: #FFFFFF;
					top: -20rpx;
					left: 0;
				}
				.point{
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 40rpx;
					color: #000000;
					padding-top: 40rpx;
					.point-icon{
						width: 48rpx;
						height: 48rpx;
						// margin-right: 8rpx;
					}
				}
				.price{
					font-weight: 500;
					font-size: 28rpx;
					color: #999999;
					margin-top: 6rpx;
					text-align: center;
				}
			}
			.item-active{
				border: none;
				border: 2rpx solid transparent;
				background-image: url('@/static/new/topup/item-bg.png');
				background-repeat: no-repeat;
				background-size: 100%;
			}
		}
			.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;
				}
			}
			.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;
					}
				}
			}
			.buy{
				width: 686rpx;
				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;
			}
			.custom-toast{
				
			}
	}
	
</style>