<template>
	<view class="gradeOfMembership">
		<view class="headName">
			<image :src="userInfo.avatarUrl" class="headImg" mode=""></image>
			<view class="name">
				{{userInfo.nickName}}
			</view>
		</view>
		<view class="mg-top-30">
			<swiper class="swiper" next-margin="40rpx" :current="curIndex" circular="true" @change="handleChangeCur1">
				<swiper-item v-for="(item,index) in infoData.memberInfoList" :key="index">
					<view class="swiper-item uni-bg-red">
						<view class="gradeMsg">
							<image :src="item.memberIcon" class="gradeImg" mode=""></image>
							<view class="gradeTitle huangjin" v-if="item.isUse" style="color:'#b2744c'">
								当前等级
							</view>
							<view class="gradeText">
								<view class="textlabel">
									<image class="labelL" :src="item.icon" mode=""></image>
									<view :class="['labelR', item.memberName === '铂金会员' ? 'bojin' : 'huangjin']">
										付费
									</view>
								</view>

								<view class="labelDesc huangjin" :style="{color : index == '2' ? '#66bef9' :'#b2744c'}"
									v-if="infoData.memberInfoList.length && infoData.memberInfoList[index].isUse">
									会员有效期至{{infoData.memberInfoList[index].expirationTime}}结束
								</view>
							</view>
						</view>
					</view>
				</swiper-item>

			</swiper>
		</view>
		<view class="EquityComparison">
			<view class="labelTo">
				权益对比
			</view>
			<view class="Informationcomparison">
				<view class="InformationItem u-f u-f-fdc" v-for="(item,index) in infoData.equityComparisonList"
					:key="index">
					<view
						:class="['headTitle', item.name === '铂金会员' ? 'bojin' : '', item.name === '黄金会员' ? 'huangjin' : '']">
						{{item.name}}
					</view>
					<view
						:class="['name', item.name === '铂金会员' ? 'bojin' : '', item.name === '黄金会员' ? 'huangjin' : '']">
						{{item.memberDiscount}}
					</view>
					<view
						:class="['name', item.name === '铂金会员' ? 'bojin' : '', item.name === '黄金会员' ? 'huangjin' : '']">
						<text v-if="index==0">专属优惠券</text>
						<view v-if="index!=0">
							<u-icon v-if="item.exclusiveGiftVoucher==1" name="checkbox-mark"></u-icon>
							<u-icon v-else name="close"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="purchaseNotes">
			<view class="labelTo">
				购买须知
			</view>
			<view class="purchasedesc">
				<view class="label">
					<view class="name">
						有效日期
					</view>
					<view class="text">
						购买后365天有效
					</view>
				</view>
				<view class="label">
					<view class="name">
						使用时间
					</view>
					<view class="text">
						营业时间内可用
					</view>
				</view>
				<view class="label">
					<view class="name">
						适用规则
					</view>
					<view class="textExplain">
						全平台通用
					</view>
				</view>
			</view>
		</view>

		<view class="fix-bot">
			<view class="unlockEquities" v-if="infoData.memberInfoList&&infoData.memberInfoList[curIndex].isUse">
				您当前已解锁{{infoData.memberInfoList[curIndex].memberName}}
			</view>
			<view class="unlockEquities" @click="openEquities"
				v-else="infoData.memberInfoList&&!infoData.memberInfoList[curIndex].isUse">
				解锁{{infoData.memberInfoList[curIndex].memberName}}权益
			</view>
		</view>
		<view class="openEquitiesHint">
			<u-popup :show="openEquitiesShow" @close="close" :closeable="true"
				:custom-style="{'border-radius': '40rpx 40rpx 0 0'}">
				<scroll-view scroll-y="true">
					<view class="hintTitle">
						会员购买
					</view>
					<view class="headName">
						<image :src="userInfo.avatarUrl" class="headImg" mode=""></image>
						<view class="name">
							{{userInfo.nickName}}
						</view>
					</view>
					<swiper class="swiper mg-top-30" next-margin="40rpx" :current="curIndex" circular="true"
						@change="handleChangeCur">
						<swiper-item v-for="(item,index) in infoData.memberInfoList" :key="index">
							<view class="swiper-item uni-bg-red">
								<view class="gradeMsg">
									<image :src="item.memberIcon" class="gradeImg" mode=""></image>
									<view class="gradeTitle huangjin" v-if="item.isUse">
										当前等级
									</view>
									<view class="gradeText">
										<view class="textlabel">
											<image class="labelL" :src="item.icon" mode=""></image>
										</view>
										<view class="labelDesc huangjin" v-if="item.isUse">
											会员有效期至{{item.expirationTime}}结束
										</view>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
					<view class="EquityComparison">
						<view class="labelTo">
							权益对比
						</view>
						<view class="Informationcomparison">
							<view class="InformationItem u-f u-f-fdc"
								v-for="(item,index) in infoData.equityComparisonList" :key="index">
								<view
									:class="['headTitle', item.name === '铂金会员' ? 'bojin' : '', item.name === '黄金会员' ? 'huangjin' : '']">
									{{item.name}}
								</view>
								<view
									:class="['name', item.name === '铂金会员' ? 'bojin' : '', item.name === '黄金会员' ? 'huangjin' : '']">
									{{item.memberDiscount}}
								</view>
								<view
									:class="['name', item.name === '铂金会员' ? 'bojin' : '', item.name === '黄金会员' ? 'huangjin' : '']">
									<text v-if="index==0">专属优惠券</text>
									<u-icon v-if="item.exclusiveGiftVoucher==1" name="checkbox-mark"></u-icon>
									<u-icon v-else-if="index!=0 &&item.exclusiveGiftVoucher!=1" name="close"></u-icon>
								</view>

							</view>
						</view>
					</view>
					<view class="buyMember">
						<view class="labelTo">
							会员购买
						</view>
						<view class="buyprice">
							<view class="buyname">
								包年会员
							</view>
							<view class="buyprice1">
								￥{{infoData.memberInfoList&&infoData.memberInfoList[curIndex].memberPrice}}
							</view>
						</view>
					</view>

					<view class="ckeckOut">
						<view class="check" @click="ckeckOutVal=!ckeckOutVal">
							<view class="solid" v-if='ckeckOutVal'></view>
						</view>
						<view class="text">
							我已仔细阅读并同意
						</view>
						<view class="label" @click="skipPages">
							《会员购买说明》
						</view>
					</view>
					<view class="payBtn" @click="goToPay">
						立即支付
					</view>
				</scroll-view>
			</u-popup>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				infoData: "",
				openEquitiesShow: false,
				ckeckOutVal: false,
				userInfo: {},
				curIndex: 0,
				curId: 0,
				orderId: 0,
				memberName: "",
				memberTitle: ""
			}
		},
		onLoad() {
			console.log(123);
			this.getMemberInfoDetailsData()
			this.setUserInfo()
		},
		methods: {
			getMemberInfoDetailsData() {
				this.$http.get('/api/client/userInfo/memberInfoDetails').then((res) => {
					this.infoData = res.data.data
					res.data.data.memberInfoList.forEach((item, index) => {
						if (item.isUse) {
							this.curIndex = index
						}
					})
					console.log('this.infoData', this.infoData);
				})
			},
			handlePay() {
				let data = {
					type: 2, // 2会员权益
					goodsId: this.infoData.memberInfoList[this.curIndex].memberId,
					goodsNum: 1
				}
				this.$http.post('/api/client/order/placeOrder', data).then((res) => {
					this.infoData = res.data.data
					if (res.data.code === 200) {
						console.log(res.data)
						this.orderId = res.data.data
						// 支付
						this.payMoney()
					} else {
						uni.showToast({
							title: '下单失败',
							icon: 'none'
						})
					}
				})
			},
			payMoney() {
				let data = {
					"orderId": this.orderId
				}
				uni.showLoading()
				this.$http.get('/api/client/wx/pay', data, {
					token: true,
					checkToken: true
				}).then((res) => {
					console.log("支付", res.data)
					let resData = res.data.data.payInfo
					uni.hideLoading()
					this.wakeWxPay(resData)
				})

			},
			wakeWxPay(resData) {
				var appId = resData.appId
				var nonceStr = resData.nonceStr
				var packages = resData['package']
				var paySign = resData.paySign
				var signType = resData.signType
				var timeStamp = resData.timeStamp
				uni.requestPayment({
					provider: "wxpay",
					appid: appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
					nonceStr: nonceStr, // 随机字符串
					package: packages, // 固定值
					timeStamp: timeStamp, // 时间戳（单位：秒）
					signType: signType,
					paySign: paySign, // 签名，这里用的 MD5/RSA 签名
					success(res) {
						uni.redirectTo({
							url: "/pagesE/pay-success/pay-success?member=1"
						})
					},
					fail(e) {
						console.log("fail", e)
						this.openEquitiesShow = false
						uni.navigateBack()
					}
				})
			},
			openEquities() {
				this.openEquitiesShow = true
			},
			close() {
				this.openEquitiesShow = false
			},
			groupChange(e) {
				console.log(e, 'e');
			},
			skipPages() {
				uni.navigateTo({
					url: '/pagesA/buyexplain/buyexplain'
				})
			},
			setUserInfo() {
				this.userInfo.nickName = this.User.userinfo.nickName || this.User.userinfo.phoneNumber
				this.userInfo.avatarUrl = this.User.userinfo.avatarUrl || ''
			},
			goToPay() {
				if (this.ckeckOutVal) {
					this.handlePay()
				} else {
					uni.showToast({
						'title': '请勾选会员购买说明',
						'icon': 'none'
					})
				}
			},
			handleChangeCur1(e) {
				this.curIndex = e.detail.current
				if (e.detail.current == 0) {
					this.memberTitle = "黄金"
				} else {
					this.memberTitle = "铂金"
				}
				console.log(this.curIndex, "sssssssssss");
				this.$forceUpdate()
			},
			handleChangeCur(e) {
				this.curIndex = e.detail.current
				console.log(this.curIndex, ":wwww");
			}
		}
	}
</script>

<style lang="less">
	.gradeOfMembership {
		padding: 28rpx;
		box-sizing: border-box;

		.headName {
			display: flex;
			align-items: center;

			.headImg {
				width: 58rpx;
				height: 58rpx;
				background: #D4D4D4;
				border-radius: 50%;
			}

			.name {
				margin-left: 15rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}
		}



		.purchaseNotes {
			margin-top: 34rpx;

			.purchasedesc {
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				width: 702rpx;
				height: 318rpx;
				background: #FFFFFF;
				border-radius: 18rpx 18rpx 18rpx 18rpx;

				.label {
					display: flex;

					margin-bottom: 31rpx;

					view {
						font-weight: 400;
						font-size: 28rpx;
						color: #999999;
					}

					.textExplain {
						width: 336rpx;
					}

					view:nth-child(2) {
						margin-left: 42rpx;
					}
				}
			}
		}

		.labelTo {
			margin-bottom: 31rpx;
			padding-left: 10rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			border-left: 6rpx solid #FF4502;
		}

		.openEquitiesHint {
			background-color: #fafbff;

			.u-popup__content {
				padding: 26rpx;
				padding-bottom: 100rpx;
				background-color: #fafbff;
			}

			.hintTitle {
				text-align: center;
				margin-top: 25rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}

			.buyMember {
				>view {
					margin-bottom: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 20rpx;
					box-sizing: border-box;
				}

				.buyprice {
					width: 702rpx;
					height: 80rpx;
					background: #FFFFFF;
					border-radius: 18rpx 18rpx 18rpx 18rpx;

					.buyname {
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
					}

					.buyprice1 {
						font-weight: 400;
						font-size: 26rpx;
						color: #FF4502;
					}
				}

				.payway {
					width: 702rpx;
					height: 115rpx;
					background: #FFFFFF;
					border-radius: 18rpx 18rpx 18rpx 18rpx;

					.payname {
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
					}

					.wayName {
						display: flex;
						align-items: center;

						.wayImg {
							margin-right: 7rpx;
							width: 44rpx;
							height: 44rpx;
						}

						.wayImgName {
							font-weight: 400;
							font-size: 28rpx;
							color: #333333;
						}
					}
				}
			}

			.ckeckOut {
				display: flex;
				align-items: center;

				.check {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 36rpx;
					height: 36rpx;
					border: 1rpx solid #999;
					border-radius: 50%;

					.solid {
						width: 20rpx;
						height: 20rpx;
						background-color: #E88045;
						border-radius: 50%;
					}
				}

				.text {
					margin-left: 12rpx;
					font-weight: 400;
					font-size: 22rpx;
					color: #CDCDCD;
				}

				.label {
					font-weight: 400;
					font-size: 22rpx;
					color: #FF4502;
				}
			}

			.payBtn {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: auto;
				margin-top: 30rpx;
				width: 702rpx;
				height: 82rpx;
				background: linear-gradient(90deg, #FF4502 0%, #FF8903 100%);
				border-radius: 41rpx 41rpx 41rpx 41rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

		.gradeMsg {
			position: relative;
			margin: auto;
			overflow: hidden;
			width: 651rpx;
			height: 322rpx;

			.gradeImg {
				position: absolute;
				width: 651rpx;
				height: 322rpx;
				// max-height: 251rpx;
				// width: 100%;
			}

			.gradeTitle {
				position: absolute;
				top: 2rpx;
				left: 27rpx;
				font-weight: 400;
				font-size: 24rpx;

				&.huangjin {
					color: #BF6500;
				}

				&.bojin {
					color: #3B58EB;
				}
			}

			.gradeText {
				position: relative;
				margin-top: 74rpx;
				margin-left: 55rpx;

				.textlabel {
					display: flex;
					align-items: center;

					.labelL {
						width: 148rpx;
						height: 39rpx;
					}

					.labelR {
						display: flex;
						align-items: center;
						justify-content: center;
						margin-left: 10rpx;
						width: 106rpx;
						height: 38rpx;
						border-radius: 19rpx 19rpx 19rpx 19rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;

						&.huangjin {
							background-color: #E88045;
						}

						&.bojin {
							background-color: #3A57EB;
						}
					}
				}

				.labelDesc {
					margin-top: 12rpx;
					font-weight: 400;
					font-size: 24rpx;

					&.huangjin {
						color: #E88045;
					}

					&.bojin {
						color: #3A57EB;
					}
				}

				.proportion {
					margin-top: 56rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #BF6500;
				}

				.schedule {
					width: 586rpx;
				}
			}
		}

		.EquityComparison {
			margin-top: 36rpx;

			.Informationcomparison {
				display: flex;
				border-radius: 14rpx 14rpx 0rpx 0rpx;
				overflow: hidden;

				.InformationItem {
					flex: 1;
					box-sizing: border-box;

					.headTitle {
						display: flex;
						align-items: center;
						justify-content: center;
						height: 66rpx;
						background: #F2F2F2;
						// border-radius: 14rpx 0rpx 0rpx 0rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;

						&.bojin {
							background: linear-gradient(96deg, #6B92FF 0%, #3A57EB 100%);
							color: #FFFFFF;
						}

						&.huangjin {
							background: linear-gradient(96deg, #FFE1C0 0%, #E88045 100%);
							color: #FFFFFF;
						}
					}

					.name {
						display: flex;
						align-items: center;
						justify-content: center;
						// width: 175rpx;
						height: 66rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;

						&.bojin {
							background-color: #E8EEFF;
						}

						&.huangjin {
							background-color: #FFF3E9;
						}

						image {
							width: 12rpx;
							height: 22rpx;
						}
					}
				}
			}
		}
	}

	.swiper {
		height: 322rpx;

		.swiper-item {
			width: calc(100% - 30rpx);
			background-color: #F2F2F2;
			border-radius: 18rpx;
		}
	}

	.fix-bot {
		width: 100%;
		position: fixed;
		bottom: 22rpx;
		left: 0;
		padding: 10rpx 0;
		background-color: #ffffff;

		.unlockEquities {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: auto;
			width: 702rpx;
			height: 82rpx;
			background: linear-gradient(90deg, #FF4502 0%, #FF8903 100%);
			border-radius: 41rpx 41rpx 41rpx 41rpx;
			color: #ffffff;
		}

	}
</style>