<template>
	<view class="top-up-page">
		<HeaderCom></HeaderCom>
		<view class="header">
			<view class="title">代币余额</view>
			<view class="price">{{infoDetail.coins || 0}}</view>
		</view>
		<view class="line">选择充值金额</view>
		<scroll-view scroll-y="true" class="main">
			<view class="list">
				<view class="items" :class="{'item-active':listIndex === index}" v-for="(item,index) in list"
					:key="index" @click="handleItem(index)">
					<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>
			</view>
		</scroll-view>
		<view class="footer">
			<view class="footer-btn" @click="pay">立即支付</view>
		</view>
		<!-- 充值 -->
		<popup-view v-model="isTopUp" mode="bottom" border-radius="15" z-index="1000">
			<view style="padding-bottom: 32rpx;">
				<view class="item">
					<view class="label">充值金额</view>
					<view class="value">{{list[listIndex].price.settlement}} 元</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="mains">
					<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="payDlg">立即支付 ¥{{list[listIndex].price.sale}}</view>
				<!-- <uni-link :href="payUrl" text="支付"></uni-link> -->
			</view>
		</popup-view>
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/mine/topUp"></page-popup>
	</view>
</template>

<script>
	import HeaderCom from '@/pages/components/header.vue'
	import {
		userInfo,
		coinGearApi,
		payMethodApi,
		coinGearRechargeApi,
		coinPaidApi
	} from '@/API/user.js'
	import reportClickFn from '@/utils/report.js'
	export default {
		data() {
			return {
				list: [],
				listIndex: 0,
				infoDetail: {
					phone: "",
					avatarResource: {}
				},
				isTopUp: false,
				payList: [],
				payIndex: 0,
				timer: null,
				optionUrl:{},
				payUrl:'',
				payinfoUrl:'',
				orderNo:'',
				timeSec:0
			}
		},
		components: {
			HeaderCom
		},
	  watch:{
		  timeSec(){
			  if(this.timeSec == 30){
				  clearInterval(this.timer)
				  this.timer = null
				  this.$api.msg('未查询到支付结果')
			  }
		  }
	  },
		onShow() {
		},
		onLoad(option) {
			this.getUserInfo()
			this.getCoinGear()
			// if(option.no){
			// 	this.optionUrl = option
			// 	this.getOrderPaid(this.optionUrl.no)
			// 	this.timer = setInterval(() => {
			// 		this.getOrderPaid(this.optionUrl.no)
			// 	}, 3000);
			// }
			// price=${this.settlement}&coin=${this.coin}&gift=${this.gift}&no=${this.no}`
		},
		mounted() {
			
		},
		methods: {
			getPayMethod() {
				payMethodApi({
					type: 'COIN_RECHARGE'
				}).then(res => {
					console.log(res)
					this.payList = []
					if (res.code === 200) {
						// this.isTopUp = true
						// 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 === 'NONE') {
						                objToAdd = {
						                    label: "无需支付",
						                    type: 'NONE',
						                    visible: false,
						                    img: '',
						                    width: '32rpx',
						                    height: '34rpx'
						                };
						            } else if (item === 'COIN') {
						                objToAdd = {
						                    label: "代币支付",
						                    type: 'COIN',
						                    visible: false,
						                    img: '../../static/an/point.gif',
						                    width: '32rpx',
						                    height: '34rpx'
						                };
						            }
						
						            // 只有在objToAdd被赋值的情况下才添加到payList
						            if (objToAdd) {
						                if (objToAdd.type === 'WECHAT') {
						                    // 如果是WECHAT类型，则先添加到数组第一位
						                    this.payList.unshift(objToAdd);
						                } else {
						                    // 其他类型添加到数组末尾
						                    this.payList.push(objToAdd);
						                }
						            }
						        });
						
						this.payList[0].visible = true
						console.log("this.payList[0].type:", this.payList)
						this.payType = this.payList[0].type
						
						this.isTopUp = true
						// 充值购买预览埋点
						reportClickFn('coin_gear_review_clk')
						
					}else{
						this.$api.msg(res.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'){
				// 	uni.showLoading()
				// 	let data = {
				// 		"gearId": this.list[this.listIndex].id,
				// 		"method": this.payType
				// 	}
				// 	coinGearRechargeApi(data).then(res => {
				// 		uni.hideLoading()
				// 		if (res.code === 200) {
							
				// 			if (res.data.payParams.payinfo) {
				// 				if(this.payType === 'WECHAT'){
				// 					this.payinfoUrl = res.data.payParams.payinfo
				// 					this.orderNo = res.data.no
				// 				}else if(this.payType === 'ALIPAY'){
				// 					this.payinfoUrl = res.data.payParams.payinfo
				// 					this.orderNo = res.data.no
				// 				}
				// 			}
				// 		} else {
				// 			// this.$api.msg(res.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
						
					} else {
						this.$api.msg(res.message)
					}
				})
			},
			// 获取用户信息
			getUserInfo() {
				userInfo().then(res => {
					if (res.code === 200) {
						this.infoDetail = res.data
					} else if (res.code == 400) {
						uni.removeStorageSync('userInfo')
						uni.removeStorageSync('info')
						this.$api.msg(res.message)
					} else {
						this.$api.msg(res.message)
					}
				})
			},
			handleItem(index) {
				this.listIndex = index
			},
			pay() {
				this.getPayMethod()
				// if(this.payType !== 'NONE'){
				// 	uni.showLoading()
				// 	let data = {
				// 		"gearId": this.list[this.listIndex].id,
				// 		"method": this.payType
				// 	}
				// 	// return
				// 	coinGearRechargeApi(data).then(res => {
				// 		uni.hideLoading()
				// 		if (res.code === 200) {
				// 			this.isTopUp = true
				// 			if (res.data.payParams.payinfo) {
				// 				if(this.payType === 'WECHAT'){
				// 					this.payinfoUrl = res.data.payParams.payinfo
				// 					this.orderNo = res.data.no
				// 				}else if(this.payType === 'ALIPAY'){
				// 					this.payinfoUrl = res.data.payParams.payinfo
				// 					this.orderNo = res.data.no
				// 				}
				// 			}
				// 		} else {
				// 			this.$api.msg(res.message)
				// 		}
				// 	})
				// }else{
				// 	this.isTopUp = true
				// }
				
				// let item = this.list[this.listIndex]

				// uni.navigateTo({
				// 	url:`/pages/mine/topUpOrder?id=${item.id}&price=${item.price.settlement}&coin=${item.coin}&gift=${item.gift}`
				// })
			},

			payDlg() {
				// console.log(this.payType)
				// if(this.payType === 'WECHAT'){
				// 	// window.open(this.payinfoUrl)
				// 	window.location.href = this.payinfoUrl
				// 	this.getOrderPaid(this.orderNo)
				// 	this.timer = setInterval(() => {
				// 		this.getOrderPaid(this.orderNo)
				// 	}, 3000);
				// }else if(this.payType === 'ALIPAY'){
				// 	window.location.href = this.payinfoUrl
				// 	// window.open(this.payinfoUrl)
				// 	this.getOrderPaid(this.orderNo)
				// 	this.timer = setInterval(() => {
				// 		this.getOrderPaid(this.orderNo)
				// 	}, 3000);
				// }else{
					this.timeSec = 0
					uni.showLoading()
					let data = {
						"gearId": this.list[this.listIndex].id,
						"method": this.payType
					}
					// return
					coinGearRechargeApi(data).then(res => {
						if (res.code === 200) {
							if (res.data.payParams.payinfo) {
								window.location.href = res.data.payParams.payinfo
								this.getOrderPaid(res.data.no)
								this.timer = setInterval(() => {
									this.timeSec += 3
									this.getOrderPaid(res.data.no)
								}, 3000);
								// this.payUrl = res.data.payParams.payinfo
								// window.open(res.data.payParams.payinfo, '_blank');
								// window.location.href = res.data.payParams.payinfo
								
								// if(this.payType === 'WECHAT'){
								// 	this.payinfoUrl = res.data.payParams.payinfo
								// 	// location.href = res.data.payParams.payinfo
								// 	this.getOrderPaid(res.data.no)
								// 	this.timer = setInterval(() => {
								// 		this.getOrderPaid(res.data.no)
								// 	}, 3000);
								// }else{
								// 	let item = this.list[this.listIndex]
								// 	uni.navigateTo({
								// 		url:`/pages/testPay/testPay?no=${res.data.no}&settlement=${item.price.settlement}&coin=${item.coin}&gift=${item.gift}&url=${encodeURIComponent(res.data.payParams.payinfo)}`
								// 	})
								// }
								
								
							}else{
								this.getOrderPaid(res.data.no)
								this.timer = setInterval(() => {
									this.getOrderPaid(res.data.no)
								}, 3000);
							}
							
						} else {
							this.$api.msg(res.message)
						}
					})
				// }
				

			},
			getOrderPaid(no) {
				uni.showLoading()
				coinPaidApi({
					no
				}).then(payResult => {
					if (payResult.data) {
						clearInterval(this.timer); // 清除定时器
						this.timer = null;
						this.$api.msg('支付成功')
						this.isTopUp = false
						this.listIndex = 0
						this.payIndex = 0
						uni.hideLoading()
						let item = this.list[this.listIndex]
						uni.navigateTo({
							url: `/pages/mine/topUpSuc?price=${item.price.settlement}&coin=${item.coin}&gift=${item.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-page {
		background-image: url('@/static/new/topup/bg.png');
		background-repeat: no-repeat;
		background-size: 100%;
		padding: 112rpx 32rpx 32rpx 32rpx;

		.header {
			width: 686rpx;
			height: 204rpx;
			background-image: url('@/static/new/topup/header.png');
			background-repeat: no-repeat;
			background-size: 100%;

			.title {
				padding: 40rpx 0 0 48rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #666666;
			}

			.price {
				padding: 16rpx 0 0 44rpx;
				font-size: 64rpx;
				color: #000000;
			}
		}

		.line {
			height: 80rpx;
			width: 100%;
			padding-top: 40rpx;
			font-weight: 800;
			font-size: 28rpx;
			color: #000000;
		}

		.main {
			height: calc(100vh - 604rpx);

			.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%;
				}
			}
		}

		.footer {
			width: 100%;
			height: 144rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #fff;

			.footer-btn {
				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;
			}
		}




		.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;
			}
		}

		.mains {
			width: 100%;
			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;
			margin-left: 32rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>