<template>
	<view class="flex-1">
		<!-- 	<view
			class="flex-row px-24"
			style="height: 88rpx;align-items: center;justify-content: space-between;background: linear-gradient(88deg, #fad2d2 0%, #fae3d2 51%, #fae3d2 100%);"
		>
			<view style="width: 50rpx;flex-center" @click="getkActivity">
				<u-icon name="/static/icon/arrowRight.png" size="48rpx" />
			</view>
			<text class="title"> 充值中心 </text> <view style="width: 50rpx;" />
		</view> -->
		<GLoading />
		<GList class="flex-1">
			<view class="header flex-row">
				<view class="flex-1">
					<text class="balance-text"> 账户余额 </text>
					<view class="flex-row mt-14" style="align-items: center;">
						<view class="flex-row flex-center">
							<text class="balance-num"> {{ egold || 0 }} </text>
							<text class="balance-unit"> K币 </text>
						</view>

						<u-icon
							class="ml-26"
							name="/static/icon/gold.png"
							size="48rpx"
						/>
					</view>
				</view>
				<image
					class="header-img"
					src="@/static/images/gold.png"
					mode="aspectFill"
				/>
			</view>
			<view class="money mb-20">
				<view class="moneyList flex-row">
					<view
						v-for="(item, index) in payList"
						:key="index"
						:class="{
							'mr-32': (index + 1) % 2 !== 0,
							active: index === 0
						}"
						@click="payItem(item)"
						class="money-item flex-center mb-40"
					>
						<text class="money-item-one">
							{{ item.price || 0 }}元
						</text>
						<text v-if="item.egold" class="money-item-to">
							{{ item.egold || 0 }}k币
						</text>
						<text
							class="money-item-three"
							:class="{ 'mt-20': !item.egold }"
						>
							{{ item.title || '' }}
						</text>
						<view v-if="item.poster" class="tips flex-center">
							<text class="tips-text"> {{ item.poster }} </text>
						</view>
					</view>
				</view>
				<view
					class="payWay flex-row mt-30"
					style="justify-content: space-between;align-items: center;"
				>
					<text class="payWay-text"> 支付方式 </text>
					<view class="flex-row">
						<u-icon
							class="mr-20"
							name="/static/icon/wx.png"
							size="48rpx"
						/>
						<text class="payWay-wx"> 微信支付 </text>
					</view>
				</view>
			</view>
			<view class="warning">
				<text class="warning-one mb-20"> 温馨提示 </text>
				<text class="warning-to mb-20">
					1、IP和书币属于虚拟商品,一旦购买不作退换,望周知。
				</text>
				<view style="display: inline-block;">
					<span class="warning-to"
						>2、充值后书币到账可能有延迟，15分钟内未到账请联系微信客服，微信号:</span
					>
					<span class="warning-three"> yttfyyl, yt20216688 </span>
					<span class="warning-to"
						>，工作时间:周一到周五9:00-17:00。</span
					>
				</view>
			</view>
			<!-- #ifndef H5 -->
			<u-gap height="80" />
			<!-- #endif -->
		</GList>
		<GTopUpActivity ref="GTopUpActivity" @success="payItem" />
	</view>
</template>

<script>
import { paysetting, payback, getTiktokpay } from '@/api/index.js';
export default {
	data() {
		return {
			payList: [],
			egold: 0,
			backClickIndex: 0,
			sid: ''
		};
	},
	onLoad({ sid }) {
		this.sid = sid;
	},
	onShow() {
		this.backClickIndex = 0;
		this.getPayList();
		const isPopup = uni.getStorageSync('isPopup');
		if (isPopup) {
			payback().then(res => {
				setTimeout(() => {
					this.payList.unshift({ ...res, isback: 1 });
					this.$refs.GTopUpActivity.open(res).then(() => {});
					this.backClickIndex++;
				}, 500);
			});
		} else {
			uni.setStorageSync('isPopup', true);
		}
	},
	onBackPress(e) {
		return false;
	},
	onNavigationBarButtonTap() {
		console.log(111);
	},
	methods: {
		getPayList() {
			paysetting().then(res => {
				this.egold = res.egold;
				this.payList = res.list;
			});
		},
		getkActivity() {
			if (this.backClickIndex === 0) {
				payback().then(res => {
					this.payList.unshift({ ...res, isback: 1 });
					this.$refs.GTopUpActivity.open(res).then(() => {
						console.log(11);
					});
					this.backClickIndex++;
				});
			} else {
				if (this.sid) {
					uni.redirectTo({
						url: '/pages/video/index?sid=' + this.sid
					});
				} else {
					uni.switchTab({
						url: this.path || '/pages/my/index/index'
					});
				}
			}
		},
		payItem(item) {
			getTiktokpay({
				id: item.id,
				isback: item.isback === 1 ? 1 : 0
			}).then(res => {
				console.log(res);
				const orderInfo = {
					order_id: res.order_id,
					order_token: res.order_token
				};
				tt.pay({
					orderInfo,
					service: 5,
					success: res => {
						console.log(res);
						if (res.code == 0) {
							uni.showToast({
								title: '支付成功',
								duration: 2000
							});

							paysetting().then(res => {
								this.egold = res.egold;
								uni.setStorageSync('isPopup', false);
								const eventChannel = this.getOpenerEventChannel();
								eventChannel.emit('paySuccess', {
									egold:res.egold
								});
								uni.navigateBack();
							});
							
							// 支付成功处理逻辑，只有res.code=0时，才表示支付成功
							// 但是最终状态要以商户后端结果为准
						}
					},
					fail: () => {
						uni.showToast({
							title: '支付失败,请重新支付',
							duration: 2000
						});
					}
				});
			});
		}
	}
};
</script>

<style lang="scss">
.header {
	height: 282rpx;
	background: linear-gradient(88deg, #fad2d2 0%, #fae3d2 51%, #fae3d2 100%);
	padding: 40rpx 30rpx;
}
.money {
	position: relative;
	background: #ffffff;
	border-radius: 48rpx 48rpx 0px 0px;
	padding: 70rpx 30rpx;
	margin-top: -56rpx;
	z-index: 99;
}
.header-img {
	width: 238rpx;
	height: 238rpx;
}
.balance-text {
	font-size: 34rpx;
	font-weight: bold;
	color: #1a1a1a;
}
.balance-num {
	font-size: 62rpx;
	color: #ff002e;
	font-weight: bold;
}
.balance-unit {
	font-size: 34rpx;
	color: #1a1a1a;
	margin-left: 10rpx;
}
.money-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #1a1a1a;
	margin-bottom: 48rpx;
}
.moneyList {
	flex-wrap: wrap;
}
.money-item {
	position: relative;
	width: 328rpx;
	height: 194rpx;
	border-radius: 24rpx;
	border: 1rpx solid #aaaaaa;
	&.active {
		background: #ff7246;
		border: 0;
		.money-item-one {
			color: #ffffff;
		}
		.money-item-to {
			color: #ffffff;
		}
		.money-item-three {
			color: #ffffff;
		}
	}
}
.tips {
	position: absolute;
	top: -25rpx;
	left: -2rpx;
	width: 140rpx;
	height: 48rpx;
	background: #ffbd12;
	border-radius: 24rpx 0px 24rpx 0px;
}
.tips-text {
	font-size: 26rpx;
	font-weight: 400;
	color: #1a1a1a;
}
.money-item-one {
	font-size: 40rpx;
	font-weight: bold;
	color: #1a1a1a;
	line-height: 46rpx;
}
.money-item-to {
	font-size: 28rpx;
	font-weight: 400;
	color: #666666;
	line-height: 32rpx;
	margin: 8rpx 0;
}
.money-item-three {
	font-size: 28rpx;
	font-weight: 500;
	color: #ff779e;
	line-height: 32rpx;
}
.payWay-text {
	font-size: 36rpx;
	font-weight: bold;
	color: #1a1a1a;
}
.payWay-wx {
	font-size: 36rpx;
	font-weight: bold;
	color: #28c445;
}
.warning {
	background-color: #ffffff;
	padding: 52rpx 30rpx;
	.warning-one {
		font-size: 32rpx;
		font-weight: 500;
		color: #1a1a1a;
	}
	.warning-to {
		font-size: 28rpx;
		font-weight: 400;
		color: #999999;
	}
	.warning-three {
		font-size: 28rpx;
		font-weight: 400;
		color: #ff779e;
	}
}
.title {
	font-size: 40rpx;

	font-weight: 500;
	color: #130f26;
}
</style>
