<template>
	<view class="grade-index">
		<view class="user-card">
			<view class="user-info">
				<view class="avatar">
					<u-avatar size="50" class="avatar-img"
						:src="userInfo.avatar"></u-avatar>
					<view class="user">
						<view class="nickname">{{ userInfo.nickname }}</view>
						<view class="desc">您当前是{{ userInfo.gradeName }}</view>
					</view>
				</view>
				<view class="buy-log">已解锁的功能</view>
			</view>
		</view>
		<u-gap height="10"></u-gap>
		<view class="member-service">
			<view class="tabs">
				<u-tabs :list="tabs" lineColor="#7f006f" :activeStyle="{ color: '#7f006f' }" @click="onTabs"></u-tabs>
			</view>
			<view v-if="index == 0" class="service-card">
				<view class="item" v-for="(item,index) in service" :key="index" v-if="item.roleId == 271">
					<view class="tool-btn" @click="openEdit(item)">
						<view class="icon">
							<image :src="item.icon" mode="widthFix"></image>
						</view>
						<text class="btn-name">{{ item.name }}</text>
						<text class="btn-equity" v-if="item.equity.length > 0 || userInfo.gradeId >= 7 ">已解锁</text>
						<text class="btn-desc" v-else>{{ item.subName }}</text>
					</view>
				</view>
			</view>
			<view v-if="index == 1" class="service-card">
				<view class="item" v-for="(item,index) in service" :key="index" v-if="item.roleId == 272">
					<view class="tool-btn" @click="openEdit(item)">
						<view class="icon">
							<image :src="item.icon" mode="widthFix"></image>
						</view>
						<text class="btn-name">{{ item.name }}</text>
						<text class="btn-equity" v-if="item.equity.length > 0 || userInfo.gradeId >= 7">已解锁</text>
						<text class="btn-desc" v-else>{{ item.subName }}</text>
					</view>
				</view>
				<!-- <view class="item">
					<view class="tool-btn" @click="showTool = true">
						<view class="icon">
							<image src="../../../static/icon/grade-02.png" mode="widthFix"></image>
						</view>
						<text class="btn-name">搜索优先</text>
					</view>
				</view>
				<view class="item">
					<view class="tool-btn" @click="showTool = true">
						<view class="icon">
							<image src="../../../static/icon/grade-03.png" mode="widthFix"></image>
						</view>
						<text class="btn-name">会员标志</text>
					</view>
				</view>
				<view class="item">
					<view class="tool-btn" @click="showTool = true">
						<view class="icon">
							<image src="../../../static/icon/grade-04.png" mode="widthFix"></image>
						</view>
						<text class="btn-name">查看粉丝</text>
					</view>
				</view>
				<view class="item">
					<view class="tool-btn" @click="showTool = true">
						<view class="icon">
							<image src="../../../static/icon/grade-05.png" mode="widthFix"></image>
						</view>
						<text class="btn-name">查看证件</text>
					</view>
				</view> -->
			</view>
		</view>
		<u-popup :show="showEdit" mode="center" :round="10" :closeable="true" @close="closeEidt">
			<view class="show-tool">
				<view class="head">
					<view class="info">
						<text class="title">{{ current.name }}</text>
						<block v-if="current.equity">
							<text class="sub-title" v-if="current.equity.length > 0">有效期至：{{ current.equity[0].expirationTime }}</text>
						</block>
					</view>
					<view class="desc">{{ current.comments }}</view>
					<view class="buy" v-if="current.price">
						<view class="item" v-for="(d,i) in current.price" :key="i"
							:class="priceId == d.id ? 'active' : ''" @click="onPlan(d)">
							￥{{ d.price }}
							<view class="nums">{{ d.name }}</view>
						</view>
					</view>
				</view>
				<view class="footer">
					<view class="btn-wrapper">
						<u-button :text="onBuyText" color="linear-gradient(to bottom, #010002, #681752)"
							:disabled="priceId == 0 || disabled" shape="circle" @click="onBuy"></u-button>
					</view>
					<view class="xieyi">
						开通会员前请务必仔细阅读<text @click="$push('pages/article/detail/detail?id=114')">《用户协议》</text>规则
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
 	import store from '@/store/index.js'
 	import storage from '@/utils/storage'
	import * as UserPlanApi from '@/api/love-user-plan.js'
	import * as UserPlanLogApi from '@/api/love-user-plan-log.js'
	const service = [{
			id: 1,
			type: 0,
			name: '无限畅聊',
			desc: '每日不限次数聊天',
			comments: '每天无限次聊天，让你遇到更心动的Ta！',
			icon: '../../../static/icon/comment.png',
			expirationTime: '2023-07-12',
			plan: [{
					id: 1,
					name: '月卡',
					price: 99
				},
				{
					id: 2,
					name: '半年卡',
					price: 299
				},
				{
					id: 3,
					name: '年卡',
					price: 399
				}
			]
		},
		{
			id: 2,
			type: 1,
			name: '精准搜索',
			desc: '按条件筛选结果',
			comments: '按条件筛选结果',
			icon: '../../../static/icon/grade-02.png',
			expirationTime: '2023-07-12',
			plan: [{
					id: 1,
					name: '月卡',
					price: 99
				},
				{
					id: 2,
					name: '半年卡',
					price: 299
				},
				{
					id: 3,
					name: '年卡',
					price: 399
				}
			]
		},
		{
			id: 3,
			type: 1,
			name: '会员标志',
			desc: '显示会员身份',
			comments: '显示会员身份',
			icon: '../../../static/icon/grade-03.png',
			expirationTime: '2023-07-12',
			plan: [{
					id: 1,
					name: '月卡',
					price: 99
				},
				{
					id: 2,
					name: '半年卡',
					price: 299
				},
				{
					id: 3,
					name: '年卡',
					price: 399
				}
			]
		},
		{
			id: 4,
			type: 1,
			name: '查看粉丝',
			desc: '允许查看粉丝',
			comments: '允许查看粉丝',
			icon: '../../../static/icon/grade-04.png',
			expirationTime: '2023-07-12',
			plan: [{
					id: 1,
					name: '月卡',
					price: 99
				},
				{
					id: 2,
					name: '半年卡',
					price: 299
				},
				{
					id: 3,
					name: '年卡',
					price: 399
				}
			]
		},
		{
			id: 5,
			type: 1,
			name: '查看证件',
			desc: '允许查看证件特权',
			comments: '允许查看证件特权',
			icon: '../../../static/icon/grade-05.png',
			expirationTime: '2023-07-12',
			plan: [{
					id: 1,
					name: '月卡',
					price: 99
				},
				{
					id: 2,
					name: '半年卡',
					price: 299
				},
				{
					id: 3,
					name: '年卡',
					price: 399
				}
			]
		}
	]

	export default {
		data() {
			return {
				form: {},
				tabs: [{
						name: '普通会员'
					},
					{
						name: '尊享会员'
					}
				],
				userInfo: {},
				index: 0,
				service: [],
				where: {},
				showEdit: false,
				current: {},
				priceId: 0,
				priceName: '',
				onBuyText: '立即解锁',
				disabled: false
			}
		},
		onLoad() {
			this.getUserPlan()
		},
		onShow() {
			this.userInfo = storage.get('userInfo')
			this.userInfo.roleName = storage.get('roleName')
		},
		methods: {
			// 跳转页面
			navTo(url, params) {
				this.$push(url, params)
			},
			onTabs(e) {
				this.index = e.index
				this.getUserPlan()
			},
			onPlan(item) {
				this.priceId = item.id
				this.priceName = item.name
				console.log("this.pri: ",item);
			},
			openEdit(item) {
				if(this.userInfo.gradeId >= 7){
					uni.showToast({
						title: '您已解锁此功能',
						icon: 'none'
					})
					return
				}
				this.showEdit = true
				this.current = item
				if(item.equity && item.equity.length > 0){
					this.onBuyText = '立即续费'
				}else{
					this.onBuyText = '立即解锁'
				}
				this.priceId = item.price[0].id
				console.log("item: ", item);
				console.log("this.current: ", this.current);
			},
			closeEidt() {
				this.showEdit = false
				this.priceId = 0
			},
			getUserPlan() {
				const {
					index
				} = this
				if (index == 0) {
					this.where.roleId = 271
				}
				if (index == 1) {
					this.where.roleId = 272
				}
				UserPlanApi.listUserPlan(this.where).then(res => {
					this.service = res.data
				})
			},
			onBuy() {
				const app = this
				const {
					priceId,
					priceName
				} = this
				const {
					planId,
					name
				} = this.current

				app.disabled = true

				UserPlanLogApi.addUserPlanLog({
					priceId,
					planId,
					comments: name,
					priceName
				}).then(res => {

					const orderInfo = res.data
					// 调起微信支付
					uni.requestPayment({
						provider: orderInfo.provider, // 服务提供商
						timeStamp: orderInfo.timeStamp, // 时间戳
						nonceStr: orderInfo.nonceStr, // 随机字符串
						package: orderInfo.package,
						signType: orderInfo.signType, // 签名算法
						paySign: orderInfo.paySign, // 签名
						success: function(res) {
							// 业务逻辑。。。
							app.$success('支付成功')
							setTimeout(function() {
							  app.showEdit = false
							  app.disabled = false
							  app.$navTo('pages/order/index')
							}, 1500);
						},
						fail: function(err) {
							console.log('支付失败', err);
							app.disabled = false
						}
					});
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f3f3f3 !important;
	}

	.grade-index {
		background-color: #f3f3f3;
		height: 100vh;
		.user-card {
			width: 700rpx;
			height: 260rpx;
			margin: 30rpx auto;
			border-radius: 24rpx;
			background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');

			.user-info {
				padding: 40rpx;
				position: relative;

				.avatar {
					display: flex;
					align-items: center;
					color: #ffffff;

					.avatar-img {
						border: 4rpx solid #ffffff;
					}

					.user {
						margin-left: 15rpx;

						.nickname {
							font-size: 34rpx;
						}

						.desc {
							font-size: 26rpx;
							color: #b2b2b2;
						}
					}

					image {
						border: 4rpx solid #ffffff;
					}
				}

				.buy-log {
					position: absolute;
					z-index: 999;
					text-align: center;
					top: 50rpx;
					right: 40rpx;
					font-size: 24rpx;
					padding: 5rpx 20rpx;
					border-radius: 12rpx 0 12rpx 0;
					background-color: #f3f3f3;
				}
			}
		}

		.form {
			background-color: #ffffff;

			.btn {
				position: absolute;
				top: 550rpx;
				width: 750rpx;
				height: 200rpx;
			}
		}

		.member-service {
			width: 750rpx;

			.tabs {
				width: 600rpx;
				margin: auto;
				display: flex;
				justify-content: center;
			}

			.service-card {
				width: 700rpx;
				min-height: 200rpx;
				margin: 30rpx auto;
				border-radius: 24rpx;
				background-color: #ffffff;
				display: flex;
				flex-wrap: wrap;

				.item {
					width: 190rpx;
					margin: 30rpx 20rpx;

					.tool-btn {
						display: flex;
						justify-content: center;
						flex-direction: column;
						align-items: center;
						font-size: 26rpx;

						.icon {
							width: 100rpx;
							height: 100rpx;
							border-radius: 100rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							text-align: center;
							background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');

							// background: linear-gradient(to bottom, #010002, #681752);
							image {
								width: 50rpx;
							}
						}

						.btn-name {
							color: #333333;
						}

						.btn-equity{
							color: #7f006f;
							font-size: 24rpx;
						}

						.btn-desc {
							color: #b2b2b2;
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}

	.show-tool {
		border-radius: 20rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 600rpx;
		height: 600rpx;
		padding: 30rpx;

		.head {
			padding-top: 10rpx;
			width: 600rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.title {
				font-size: 32rpx;
				font-weight: 600;
			}

			.sub-title {
				padding-top: 8rpx;
				padding-left: 40rpx;
				color: #7f006f;
				font-size: 26rpx;
			}
		}

		.desc {
			color: #999999;
			font-size: 26rpx;
			line-height: 3rem;
		}

		.buy {
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;

			.item {
				width: 160rpx;
				height: 200rpx;
				background-color: #ffffff;
				border: 1rpx solid #dbdbdb;
				border-radius: 12rpx;
				color: #333333;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;

				.nums {
					font-size: 24rpx;
					position: absolute;
					top: 0;
					left: 0;
					background-color: #999999;
					color: #ffffff;
					padding: 0 14rpx;
					border-radius: 12rpx 0 12rpx 0;
				}
			}

			.active {
				background-color: #460c47;
				color: #ffc7d3;

				.nums {
					background-color: #ff0000;
					color: #ffffff;
				}
			}
		}

		.plan-desc {
			padding: 20rpx;
			width: 560rpx;
			height: 100rpx;
			font-size: 26rpx;
			color: #333333;
			background-color: #dfd3e0;
		}

		.triangle {
			width: 0;
			height: 0;
			margin-top: 20rpx;
			border-bottom: 20rpx solid #dfd3e0;
			border-right: 20rpx solid transparent;
			border-left: 20rpx solid transparent;
		}
	}

	.footer {
		.btn-wrapper {
			width: 360rpx;
			margin: 50rpx auto;
			// display: flex;
			// align-items: center;
			padding: 0 20rpx;
		}

		.xieyi {
			font-size: 26rpx;
			text-align: center;
			color: #999999;

			text {
				color: #7f006f;
			}
		}
	}
</style>
