<template>
	<view class="voucherCenter_content" :style="`padding-bottom:${contentSafeHeight}rpx`">
		<view class="balance_info">
			<view class="balance_info_box">
				<view class="balance_info_name">您的余额</view>
				<view class="balance_coin_box">
					<view class="balance_num">{{ userInfo.egold }}</view>
					<view class="balance_title">书币</view>
				</view>
			</view>
		</view>
		<view class="voucher_center_info">
			<view class="voucher_annual_pass_box">
				<view class="_annual_pass_tips">
					<view class="_pass_tips_name">年卡</view>
					<view class="_pass_tips_msg">尊享无限时书城免费畅读</view>
				</view>
				<view class="_annual_pass_money">
					<view class="_pass_money_unit">￥</view>
					<view class="_pass_money_num">{{ annualPass.price }}</view>
				</view>
			</view>
			<view class="voucher_center_list">
				<view class="_center_list_col_box" v-for="m in payList" :key="m.id" @tap="selectVoucherMoney($event, m)" :data-id="m.id">
					<view :class="['_center_list_col_item', selectVoucherMoneyId === m.id ? 'active' : '']">
						<view class="_col_item_money">
							<view class="_item_money_num">{{ m.price }}</view>
							<view class="_item_money_unit">元</view>
						</view>
						<view class="_col_item_coin">
							<!-- {{m.egold}}书币+{{zb}}书币 -->
							{{ m.title }}
						</view>
						<view class="_col_item_deliver">
							{{ m.description }}
						</view>
						<view v-if="m.poster" class="_col_item_hot_sales">{{ m.poster }}</view>
					</view>
				</view>
			</view>
			<view class="voucher_center_illustrate">
				<view class="_center_illustrate_box">
					<view class="_illustrate_box_title">充值说明</view>
					<view class="_illustrate_box_tips_">
						<view class="_illustrate_box_tips_item">1、1元=100书币，IP和书币属于虚拟商品,一旦购买不作退换,望周知。</view>
						<view class="_illustrate_box_tips_item">
							2、充值后书币到账可能有延迟，15分钟内未到账请联系微信客服，微信号:
							<text style="color: #ff728f">yttfyyl,</text>
							<text style="color: #ff728f">yt20216688</text>
							， 工作时间:周一到周五9:00-17:00。
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="voucher_center_confirm" >
			<view class="_center_confirm_money">
				<view class="_center_confirm_money_box">
					<view class="_confirm_money_unit">￥</view>
					<view class="_confirm_money_num">{{ price }}</view>
					<!-- <view class="_confirm_money_preferential">已优惠12元</view> -->
					<view class="_confirm_money_preferential">{{ preferential }}</view>
				</view>
			</view>
			<view class="_center_confirm_btn">确认充值</view>
		</view>
	</view>
</template>

<script>
import { isGetSystemInfo } from '@/utils/systemInfo.js';
export default {
	data() {
		return {
			selectVoucherMoneyId: '',
			footerSafeHeight: 0,
			contentSafeHeight: 130,
			payList: [],
			annualPass: {},
			userInfo: {},
			price: 0,
			preferential: ''
		};
	},
	onShow() {
		const { windowHeight = 0, screenHeight = 0, windowTop = 0 } = isGetSystemInfo();
		const footerSafeHeight = screenHeight - windowHeight - windowTop;
		if (footerSafeHeight) {
			// this.footerSafeHeight = footerSafeHeight;
			this.contentSafeHeight = footerSafeHeight + 130;
		}
		this.isGetPayList();
		const data = {};
		uni.$u.http
			.post('/getUserInfo', data)
			.then((res) => {
				uni.hideLoading();
				if (res.status == 1) {
					const user = res.data.user;
					this.userInfo = user;
				}
			})
			.catch((err) => {
				uni.hideLoading();
				console.log(err, '========');
			});
	},
	methods: {
		selectVoucherMoney(event, row) {
			this.selectVoucherMoneyId = event.currentTarget.dataset.id;
			this.price = row.price;
			this.preferential = row.title;
		},
		isGetPayList() {
			uni.showLoading({
				title: '加载中...'
			});
			const data = {};
			uni.$u.http
				.post('/getPayList', data)
				.then((res) => {
					uni.hideLoading();
					if (res.status == 1) {
						this.annualPass = res.data.AnnualPass;
						this.payList = res.data.list;
					}
				})
				.catch((err) => {
					uni.hideLoading();
					console.log(err, '========');
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.voucherCenter_content {
	width: 100%;
	// padding-bottom: 130rpx;

	.balance_info {
		position: relative;
		z-index: 2;
		width: 100%;
		padding: 32rpx 32rpx 0;
		box-sizing: border-box;

		.balance_info_box {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 100%;
			height: 168rpx;
			background: url('/static/images/myInfo/balance_bg.png') no-repeat;
			background-size: 100% 100%;
			padding: 30rpx 40rpx;
			box-sizing: border-box;

			.balance_info_name {
				font-size: 30rpx;
				color: #ffffff;
				line-height: 1;
			}

			.balance_coin_box {
				display: flex;
				align-items: flex-end;
				line-height: 1;

				.balance_num {
					font-size: 50rpx;
					color: #ffffff;
					font-weight: 600;
				}

				.balance_title {
					font-size: 30rpx;
					color: #ffffff;
					margin-left: 8rpx;
				}
			}
		}
	}

	.voucher_center_info {
		width: 100%;
		padding: 32rpx;
		background-color: #ffffff;
		border-radius: 24rpx 24rpx 0 0;
		box-shadow: 0 -10rpx 10rpx 0 rgba(0, 0, 0, 0.2);
		box-sizing: border-box;

		.voucher_annual_pass_box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 132rpx;
			padding: 24rpx 40rpx;
			background: linear-gradient(to left, #fecca7, #ffe5d6);
			border-radius: 16rpx;
			box-sizing: border-box;

			._annual_pass_tips {
				display: flex;
				flex-direction: column;

				// justify-content: space-between;
				._pass_tips_name {
					font-size: 38rpx;
					color: #5b0c0c;
					line-height: 1;
					font-weight: 700;
				}

				._pass_tips_msg {
					font-size: 26rpx;
					color: #5b0c0c;
					line-height: 1;
					margin-top: 20rpx;
				}
			}

			._annual_pass_money {
				display: flex;
				align-items: flex-end;

				._pass_money_unit {
					font-size: 28rpx;
					color: #5b0c0c;
					font-weight: 600;
					line-height: 1;
				}

				._pass_money_num {
					font-size: 52rpx;
					color: #5b0c0c;
					font-weight: 700;
					line-height: 1;
				}
			}
		}

		.voucher_center_list {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			width: 100%;

			._center_list_col_box {
				width: 50%;
				padding-top: 32rpx;
				box-sizing: border-box;

				._center_list_col_item {
					position: relative;
					width: 100%;
					height: 200rpx;
					border: 1px solid #dddddd;
					border-radius: 16rpx;
					box-sizing: border-box;
					padding: 30rpx 24rpx 0;

					._col_item_money {
						display: flex;
						align-items: flex-end;

						._item_money_num {
							font-size: 48rpx;
							color: #1a1a1a;
							line-height: 1;
							font-weight: 600;
						}

						._item_money_unit {
							font-size: 26rpx;
							color: #1a1a1a;
							margin-left: 8rpx;
							line-height: 1;
						}
					}

					._col_item_coin {
						font-size: 26rpx;
						color: #999999;
						line-height: 1;
						margin-top: 24rpx;
					}

					._col_item_deliver {
						font-size: 26rpx;
						color: #ff4876;
						line-height: 1;
						margin-top: 18rpx;
					}

					._col_item_hot_sales {
						position: absolute;
						top: 0;
						right: 0;
						display: flex;
						justify-content: center;
						align-items: center;
						// width: 104rpx;
						padding: 0 16rpx;
						height: 40rpx;
						line-height: 40rpx;
						transform: translateY(-50%);
						background: linear-gradient(to left, #ff2d2d, #ff5c5c);
						font-size: 26rpx;
						color: #ffffff;
						border-radius: 0 20rpx 0 20rpx;
					}
				}

				._center_list_col_item.active {
					background-color: #ffeaef;
					border-color: #ff4876;
				}
			}

			._center_list_col_box:nth-child(2n-1) {
				// padding-left: 16rpx;
				padding-right: 16rpx;
			}

			._center_list_col_box:nth-child(2n) {
				padding-left: 16rpx;
			}
		}

		.voucher_center_illustrate {
			margin-top: 64rpx;

			._center_illustrate_box {
				._illustrate_box_title {
					font-size: 32rpx;
					color: #1a1a1a;
					margin-bottom: 20rpx;
				}

				._illustrate_box_tips_ {
					width: 100%;
					padding: 30rpx;
					box-sizing: border-box;
					background-color: #fff3f6;
					border-radius: 24rpx;

					._illustrate_box_tips_item {
						font-size: 24rpx;
						color: #666666;
						margin-bottom: 8rpx;
						line-height: 1.6;
					}
				}
			}
		}
	}

	.voucher_center_confirm {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 130rpx;
		box-shadow: 0 -6rpx 6rpx 0 rgba(207, 207, 207, 0.25);
		background-color: #ffffff;
		padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS 设备 */
		padding-bottom: env(safe-area-inset-bottom); /* 兼容 iPhone X 及以上设备 */

		._center_confirm_money {
			flex: 1;
			display: flex;
			align-items: center;
			padding-left: 32rpx;

			._center_confirm_money_box {
				display: flex;
				align-items: flex-end;

				._confirm_money_unit {
					font-size: 26rpx;
					color: #ff4876;
					line-height: 1;
					font-weight: 600;
				}

				._confirm_money_num {
					font-size: 52rpx;
					color: #ff4876;
					line-height: 1;
					font-weight: 600;
					margin-left: 6rpx;
				}

				._confirm_money_preferential {
					font-size: 26rpx;
					color: #8a8a8a;
					line-height: 1;
					margin-left: 26rpx;
				}
			}
		}

		._center_confirm_btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 320rpx;
			height: 130rpx;
			line-height: 130rpx;
			font-size: 36rpx;
			color: #ffffff;
			background: linear-gradient(to left, #ff87b5, #ff4775);
		}
	}
}
</style>
