<template>
	<view class="container">
		<!-- deBug信息 -->
		<view class="web-debug web-text-success" style="display: none">
			场馆ID：{{ merchantId }} 场馆编号：{{ merchantCode }} 场馆名称：{{ merchantName }} 日期：{{ dateTime }} 星期：{{ week }} 订单总金额：{{ totalPrice }} 类型：{{
				type
			}}
			商品信息：{{ goodsList }}
		</view>
		<view class="card-list">
			<view class="container" :style="{ background: `url(${form.image}) no-repeat center center`, backgroundSize: '100%', opacity: '0.85' }">
				<view class="content web-cell web-cell-align-top">
					<view class="merchant-avatar">
						<uv-avatar :src="form.merchantAvatar" size="42" style="border: 3rpx solid #ffffff"></uv-avatar>
					</view>
					<view class="card-info web-cell-content">
						<view class="title-bar">
							<view class="web-text-heading" style="color: #ffffff; font-size: 17px; font-weight: 600">{{ form.name }}</view>
							<view class="desc web-text-placeholder" style="font-size: 14px">{{ cardType[form.type] }}</view>
						</view>
						<view class="price" @click="openQrCode">
							<view class="web-text-price">
								<uv-avatar src="../../static/qrcode.png" size="30" shape="square"></uv-avatar>
							</view>
						</view>
					</view>
				</view>
				<view class="card-num">{{ form.cardNum }}</view>
			</view>
			<!-- 登录组件 -->
			<ws-login ref="login" :logo="logo" @done="reload" />
		</view>

		<uni-card :border="false" :is-shadow="false" :padding="'12px 0'">
			<view class="money-bar web-cell">
				<view class="money-item web-cell-content">
					<text>余额</text>
					<text>{{ form.remainingMoney || 0.0 }}</text>
				</view>
				<view class="web-divider-vertical"></view>
				<view class="money-item web-cell-content">
					<text>剩余次数</text>
					<text>{{ form.num || 0 }}</text>
				</view>
				<view class="web-divider-vertical"></view>
				<view class="money-item web-cell-content">
					<text>折扣</text>
					<text>{{ form.discount || 0 }}</text>
				</view>
			</view>
		</uni-card>

		<view class="to-pay">
			<uv-button :customStyle="{ width: '300rpx', borderRadius: '30px', color: '#3C8618' }" text="去使用" @click="navTo(`/package/user/card-detail-merchant?sid=${form.sid}`)"></uv-button>
		</view>

		<!-- <uni-card title="会员卡说明" :border="false" :is-shadow="false">
			<view v-html="form.info"></view>
		</uni-card> -->
		<uni-card :border="false" :is-shadow="false" :padding="0">
			<view class="server">
				<uni-list :border="false">
					<uni-list-item link @click="navTo(`/package/user/card-detail-about?id=${form.id}`)">
						<template v-slot:body>
							<view class="slot-box">
								<text class="slot-text" :style="{ color: '#333333' }">会员卡详情</text>
							</view>
						</template>
					</uni-list-item>
					<uni-list-item link @click="navTo(`/package/user/card-detail-merchant?sid=${form.sid}`)">
						<template v-slot:body>
							<view class="slot-box">
								<text class="slot-text" :style="{ color: '#333333' }">适用场馆</text>
							</view>
						</template>
					</uni-list-item>
					<uni-list-item link @click="navTo(`/package/user/card-detail-record?id=${form.id}`)">
						<template v-slot:body>
							<view class="slot-box">
								<text class="slot-text" :style="{ color: '#333333' }">使用记录</text>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
		</uni-card>

	</view>
	<!-- 收货地址选择弹窗 -->
	<uni-popup ref="addForm" type="center" border-radius="10px 10px 0 0">
		<uni-card :border="false" :is-shadow="false" :padding="0">
			<view class="qrcode">
				<uv-qrcode ref="qrcode" size="390rpx"
					:options="{data: form.cardNum,foregroundImageSrc: form.merchantAvatar, margin: 10,foregroundImagePadding: 4,foregroundImageHeight: 30,foregroundImageWidth: 30,foregroundImageBorderRadius: 4}"
					:value="form.cardNum"></uv-qrcode>
				<view class="card-num web-text-heading" style="font-size: 34rpx;">{{ form.cardNum }}</view>
				<text class="web-text-secondary">请在结账前出示会员卡</text>
			</view>
		</uni-card>
	</uni-popup>
	<!-- 登录组件 -->
	<ws-login ref="login" :logo="logo" @done="reload" />
</template>

<script>
import * as Api from '@/api/booking/userCard';
import * as OrderApi from '@/api/shop/order';
import * as MerchantApi from '@/api/shop/merchant';
import { storeToRefs } from 'pinia';
import { getWeek, getKey } from '@/utils/common';
import { useCarStore } from '@/store/modules/car';
import { useUserStore } from '@/store/modules/user';
const userStore = useUserStore();
const carStore = useCarStore();
const { goodsList, totalPrice, carNum, merchantId, merchantName, merchantCode, type, dateTime } = storeToRefs(carStore);
const cardType = ['年卡', '次卡', '月卡', 'IC卡', '充值卡'];

export default {
	data() {
		return {
			id: 0,
			goodsId: 0,
			userInfo: {},
			form: {},
			address: {},
			addressList: [],
			week: 0,
			cardType,
			goodsList,
			// 订单总金额
			totalPrice,
			reducePrice: 0,
			merchantId,
			merchantName,
			merchantCode,
			getWeek,
			payType: 1,
			isLogin: false,
			disabled: false
		};
	},
	onLoad(option) {
		this.id = option.cardId;
		this.reload();
	},
	onShow() {
		// 登录状态
		if (uni.getStorageSync('user_id') && uni.getStorageSync('access_token')) {
			this.isLogin = true;
		}
		this.openLogin();
	},
	methods: {
		async reload() {
			const app = this;
			const { id } = this;

			// 当前登录用户信息
			const userInfo = await userStore.fetchUserInfo();
			app.userInfo = userInfo;

			Api.getUserCard(id).then((data) => {
				app.form = data;
			});
			

		},
		onDisabled() {
			this.disabled = !this.disabled;
		},
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		openUrl(url) {
			if (!this.isLogin) {
				this.$refs.login.open('bottom');
				return false;
			} else {
				uni.navigateTo({
					url
				});
			}
		},
		onAddress(item) {
			this.address = item;
			this.$refs.addForm.close();
		},
		// 切换支付方式
		onPayType(index) {
			console.log('e: ', index);
			this.payType = index;
		},
		openQrCode() {
			this.$refs.addForm.open('center');
		},
		// 弹出登录提示框
		openLogin() {
			if (!this.isLogin) {
				this.$refs.login.open('bottom');
				return false;
			}
		},
		save() {
			if (!this.disabled) {
				uni.showToast({
					title: '请先阅读并同意服务协议',
					icon: 'none'
				});
				return false;
			}
			uni.showLoading({
				title: '订单提交中.'
			});

			const app = this;
			const { form, payType } = this;

			OrderApi.addOrder({
				type: 2, // 0商城订单 1预定订单 2会员卡订单
				cardId: form.cardId,
				merchantId: form.merchantId,
				merchantName: form.merchantName,
				totalPrice: form.price,
				payPrice: form.price,
				comments: form.cardName,
				payType
			})
				.then((data) => {
					const orderInfo = data;
					// 调起微信支付
					if (payType == 1) {
						// #ifdef MP-WEIXIN
						uni.requestPayment({
							provider: orderInfo.provider, // 服务提供商
							timeStamp: orderInfo.timeStamp, // 时间戳
							nonceStr: orderInfo.nonceStr, // 随机字符串
							package: orderInfo.package,
							signType: orderInfo.signType, // 签名算法
							paySign: orderInfo.paySign, // 签名
							success: function (res) {
								// 业务逻辑。。。
								uni.showToast({
									title: '支付成功',
									icon: 'success'
								});
								setTimeout(function () {
									app.disabled = false;
									uni.navigateTo({
										url: '/package/user/card'
									});
								}, 500);
							},
							fail: function (err) {
								console.log('支付失败', err);
								app.disabled = false;
							}
						});
						// #endif
					}

					// 使用余额支付
					if (payType == 0) {
						if (orderInfo) {
							uni.showToast({
								title: '支付成功',
								icon: 'success'
							});
							setTimeout(function () {
								app.disabled = false;
								uni.navigateTo({
									url: '/package/user/card'
								});
							}, 500);
							return;
						}
						if (!orderInfo) {
							return uni.showToast({
								title: '支付失败',
								icon: 'error'
							});
						}
					}

					uni.hideLoading();
				})
				.catch((res) => {
					uni.showToast({
						title: res.message || '请检查您的网络.',
						icon: 'none'
					});
					uni.hideLoading();
				});
		}
	}
};
</script>
<style>
page {
	background-size: 100%;
	background-repeat: no-repeat;
	background-color: #f0f2f5;
	width: 750rpx;
	overflow-x: hidden;
}
</style>
<style lang="scss" scoped>
.checkout-car {
	width: 700rpx;
	left: 25rpx;
	position: fixed;
	bottom: 30rpx;
	display: flex;
	justify-content: space-between;
	background-color: #000000;
	border-radius: 100px;
	align-items: center;

	.car-selected {
		color: #ccc;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
	}

	.car-total {
		display: flex;
		color: #ebcf00;
		align-items: center;
		padding-left: 40rpx;

		.save-btn {
		}
	}
}

.card-list {
	.container {
		width: 700rpx;
		position: relative;
		margin: 25rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 20rpx;
		position: relative;
		box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.2);
		// background: linear-gradient(to right, #70b915, #008e04);
		color: #ffffff;
		.card-num {
			position: absolute;
			z-index: 1;
			bottom: 30rpx;
			left: 30rpx;
		}
	}

	.container::before {
		content: '';
		display: block;
		position: absolute;
		border-radius: 20rpx;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #000000;
		// background: url('https://oss.wsdns.cn/20240528/cf37a247603f489ba23d7d2a53b8da39.jpeg') no-repeat center bottom;
		background-size: 100%;
		opacity: 0.25; /* 设置透明度 */
	}

	.content {
		position: relative;
		z-index: 1;
		width: 700rpx;
		height: 370rpx;
		display: flex;
		justify-content: space-between;
		.merchant-avatar {
			margin-top: 30rpx;
			margin-left: 30rpx;
		}
		.card-info {
			height: 120rpx;
			margin-top: 10rpx;
			margin-left: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.title-bar {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;
			}
			.web-text-price {
				padding-right: 40rpx;
				font-size: 36rpx;
				color: #fecc66;
			}
		}
		.card-bg {
		}
	}
	.card-item {
		width: 700rpx;
		margin: 20rpx auto;
		border-radius: 20rpx;
		position: relative;
		// box-shadow: 0 0px 6px 1px rgba($color: #a5a5a5, $alpha: 0.2);
	}
	// .card-item::before {
	// 	content: ''; /* 伪元素需要内容，即使它是空的 */
	// 	position: absolute;
	// 	top: 0;
	// 	right: 0;
	// 	bottom: 0;
	// 	left: 0;
	// 	background: url('https://oss.wsdns.cn/20240528/d5680e18210544a49dfa79f250f1997d.jpeg');
	// 	background-size: cover; /* 或其他你需要的背景大小 */
	// 	opacity: 0.5; /* 设置透明度 */
	// 	z-index: -1; /* 确保伪元素在内容之下 */
	// }
	.order-title {
		padding: 20rpx 0;

		.merchant-avatar {
			margin-right: 12rpx;
		}

		.card-name {
			font-weight: 600;
		}

		.btn-status {
			font-size: 30rpx;
			display: flex;
		}
	}

	.order-body {
		padding: 16px 0;
	}
}
.card-actions {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	height: 45px;
	border-top: 1px #eee solid;
}

.card-actions-item {
	display: flex;
	flex-direction: row;
	align-items: center;

	.web-text-heading {
		font-size: 38rpx;
		margin-left: 28rpx;
	}
}

.card-actions-item-text {
	font-size: 12px;
	color: #666;
	margin-left: 5px;
}
.address-body {
	width: 660rpx;
	margin: auto;
}
.to-pay {
	width: 600rpx !important;
	margin: 40rpx auto;
	display: flex;
	justify-content: center;
}

.btn-bar {
	width: 700rpx;
	left: 25rpx;
	position: fixed;
	bottom: 30rpx;
	margin: auto;
	clear: both;
}

.title-bar {
	display: flex;

	.web-text-heading {
		margin-right: 20rpx;
	}

	.web-text-secondary {
		margin-right: 20rpx;
	}
}
.xieyi {
	margin-bottom: 80rpx;
	padding: 0 30rpx;

	.text {
		margin-left: 5rpx;

		.link {
			color: #0f80ff;
		}
	}
}
.money-bar {
	display: flex;
	justify-content: space-around;
	align-items: center;
	.money-item {
		text-align: center;
		display: flex;
		flex-direction: column;
	}
	.web-divider-vertical {
		height: 60rpx;
		width: 1rpx;
		background-color: #e6e6e6;
	}
}
.qrcode{
	width: 600rpx;
	height: 600rpx;
	margin: 30rpx auto;
	line-height: 2rem;
	background-color: #ffffff;
	text-align: center;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}
</style>
