<template>
	<view :class="{'vip': isOpen}">
		<view class="vip-card">
			<view class="vip-user">
				<image class="user-cover" :src="user.avatar" mode="aspectFill"></image>
				<view class="user-nickname">{{user.nickname}}</view>
				<view class="user-date">到期日期：{{endedAt}}</view>
				<view class="vip-renewal" v-if="!isOpen">续费</view>
			</view>
			<view class="user-cards">
				<image class="vip-icon" :src="identity.cover_url" mode="widthFix"></image>
				<view>
					<view class="vip-lv">{{identity.identity_text}}</view>
					<block>
						<view class="vip-progress">
							<view class="vip-progress-loding" style="width: 50%;"></view>
						</view>
						<view class="vip-loding">
							<view>0/0共分</view>
						</view>
					</block>
				</view>
				<navigator class="vip-more" hover-class="none">成长体系<uni-icons size="14" type="forward" color="#9f5529"></uni-icons></navigator>
			</view>
		</view>
		<view class="vip-content">
			<block v-if="secondRule.length > 0">
				<view class="vip-content-title">距离<text>{{nextIdentity.identity_text}}</text>还需条件</view>
				<view class="vip-up-conditions">
					<view class="vip-up-conditions-item"><text>10/10</text>家庭会员</view>
					<view class="vip-up-conditions-item"><text>9/100</text>邀请家族会员员</view>
					<view class="vip-up-conditions-item"><text>10/10000</text>伙伴</view>
				</view>
			</block>
			<view class="vip-content-title">会员特权</view>
			<view class="vip-privilege">
				<view class="vip-privilege-item" v-for="(item, index) in 8" :key="index">
					<image class="vip-privilege-icon" src="" mode="widthFix"></image>
					<view class="vip-privilege-text">特权名称{{index}}</view>
					<view class="vip-privilege-sub">特权名称{{index}}</view>
				</view>
			</view>
			<view class="vip-content-title">会员折扣说明</view>
			<view class="vip-content-rich">
				<view v-for="(item,index) in prices" :key="index">前{{item.open_number}} - {{item.open_number + item.stock}}名享开通会员折扣价{{item.price}}元</view>
				<view>10000后会员恢复原价199.00元</view>
			</view>
		</view>
		<view class="footer-vip" v-if="isOpen">
			<button @click="onOpenVip">开通会员</button>
			<view class="footer-text">开通即表示同意共力生态<navigator url="./agreement">《会员开通协议》</navigator></view>
		</view>
	</view>
</template>

<script>
	import { vip, vipPay, payInfo } from '@/apis/interfaces/vip.js'
	export default {
		data() {
			return {
				// 用户信息
				user: {
					username: '-',
					nickname: '-',
					avatar	: '-',
				},
				// 当前身份
				identity: {
					identity_text: '',
					cover_url: '',
				},
				// 到期时间
				endedAt: '',
				// 下级身份
				nextIdentity:{
					identity_text: ''
				},
				// 升级条件
				secondRule: [],
				// 会员特权
				rights: [],
				// 会员折扣说明
				prices: [],
				// 是否可续费
				isOpen: true
			};
		},
		onShow() {
			this.getVipInfo()
		},
		methods: {
			// 获取会员信息
			getVipInfo(){
				vip().then(res =>{
					this.isOpen = res.is_open
					this.prices = res.prices
					this.rights = res.rights
					this.secondRule = res.second_rule
					this.nextIdentity = res.next_identity
					this.identity = res.identity
					this.endedAt = res.identity_ended_at
					this.user = res.user
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 提交订单
			onOpenVip(){
				// 获取订单
				uni.showLoading({
					title: '提交订单'
				})
				vipPay().then(res => {
					// 支付参数
					if(res.id) {
						uni.showLoading({
							title: '获取支付信息'
						})
						this.wxPay(res.id)
					}
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 微信支付
			wxPay(orderId){
				payInfo(orderId).then(orderInfo => {
					uni.requestPayment({
						provider : "wxpay",
						orderInfo: JSON.parse(orderInfo),
						success: res => {
							uni.showModal({
								title: '提示',
								content: '开通成功',
								showCancel: false,
								success: ()=> {
									this.getVipInfo()
								}
							})
						},
						fail(err) {
							let showToast = err.message
							if(err.errMsg === 'requestPayment:fail [payment微信:-2]User canceled'){
								showToast = '支付被取消'
							}
							uni.showToast({
								title: showToast,
								icon : 'none'
							})
						}
					})
				}).catch(err =>{
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	// 会员卡
	.vip-card{
		background-color: #242430;
		padding: $padding $padding 0;
		.vip-user{
			position: relative;
			padding: 6rpx 200rpx $padding 120rpx;
			.user-cover{
				position: absolute;
				left: 0;
				top: 0;
				background: white;
				border-radius: 50%;
				width: 92rpx;
				height: 92rpx;
			}
			.user-nickname{
				color: #fcc590;
				font-weight: bold;
				font-size: 36rpx;
				line-height: 50rpx;
			}
			.user-date{
				line-height: 30rpx;
				color: rgba(255, 255, 255, .5);
				font-size: 26rpx;
			}
			.vip-renewal{
				background: linear-gradient(to bottom right, #fce3c5, #fcc590);
				color: #9f5529;
				line-height: 60rpx;
				width: 170rpx;
				border-radius: 30rpx;
				text-align: center;
				position: absolute;
				top: 16rpx;
				right: 0;
				font-size: 30rpx;
				font-weight: bold;
			}
		}
		.user-cards{
			padding: $padding;
			box-sizing: border-box;
			position: relative;
			z-index: 1;
			background: linear-gradient(to bottom right, #fce3c5, #fcc590);
			border-radius: 30rpx 30rpx 0 0;
			height: 300rpx;
			padding-right: 260rpx;
			margin-top: $margin;
			border-radius: $radius;
			color: #9f5529;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.vip-icon{
				position: absolute;
				right: 30rpx;
				top: 50rpx;
				width: 200rpx;
				height: 200rpx;
			}
			.vip-lv{
				font-weight: bold;
				font-size: 40rpx;
				padding-bottom: 30rpx;
			}
			.vip-progress{
				height: 10rpx;
				background-color: #feefe0;
				border-radius: 5rpx;
				overflow: hidden;
				&-loding{
					background: #9c5125;
					height: 10rpx;
					border-radius: 5rpx;
				}
			}
			.vip-loding{
				font-size: 26rpx;
				padding-top: 15rpx;
			}
			.vip-more{
				font-size: 26rpx;
				font-weight: bold;
				display: inline-block;
			}
		}
	}
	// 会员权益
	.vip-content{
		padding: 180rpx $padding $padding $padding;
		margin-top: -150rpx;
		background-color: white;
		border-radius: 30rpx 30rpx 0 0;
		box-sizing: border-box;
		.vip-content-title{
			position: relative;
			font-weight: bold;
			font-size: 30rpx;
			line-height: 70rpx;
			padding-left: 30rpx;
			color: #333;
			&::after{
				position: absolute;
				top: 20rpx;
				left: 0;
				content: " ";
				background: #fcc590;
				width: 10rpx;
				height: 30rpx;
			}
			text{
				color: #fcc590;
				padding: 0 10rpx;
			}
		}
		.vip-up-conditions{
			padding-top: 10rpx;
			padding-bottom: $padding;
			&-item{
				font-size: 28rpx;
				line-height: 60rpx;
				color: gray;
				text{
					color: #fcc590;
					margin-right: $margin/2;
					font-weight: bold;
				}
			}
		}
		.vip-content-rich{
			font-size: 28rpx;
			line-height: 50rpx;
			color: gray;
		}
		.vip-privilege{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			padding: 10rpx 0;
			&-item{
				padding: 20rpx 10rpx;
				box-sizing: border-box;
				width: 25%;
				text-align: center;
			}
			&-icon{
				background: #fce3c5;
				border-radius: 50%;
				width: 82rpx;
				height: 82rpx;
			}
			&-text{
				font-size: 28rpx;
				color: #333;
				font-weight: bold;
				@extend .nowrap;
			}
			&-sub{
				font-size: 24rpx;
				color: gray;
				@extend .nowrap;
			}
		}
	}
	// 会员
	.vip{
		padding-bottom: ($padding*3) + 140;
	}
	// 会员支付
	.footer-vip{
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: $padding;
		box-sizing: border-box;
		background: white;
		button{
			height: 90rpx;
			line-height: 90rpx;
			padding: 0;
			border-radius: 45rpx;
			border: none;
			background: linear-gradient(to right, #fce3c5, #fcc590);
			color: #31364a;
			font-size: 32rpx;
			font-weight: bold;
			&::after{
				display: none;
			}
		}
		.footer-text{
			font-size: 26rpx;
			color: #888;
			line-height: 50rpx;
			text-align: center;
			padding: $padding 0;
			navigator{
				display: inline-block;
				color: #fcc590;
				font-weight: bold;
			}
		}
	}
</style>
