<template>
	<view class="content" v-if="!loding">
		<!-- 上传凭证弹出 -->
		<view class="canBack" v-if="canForm"></view>
		<view class="canPop" v-if="canForm">
			<image class="canPop-tips" @click="canClick" src="/static/user/order-cancelPay.png" mode="widthFix"></image>
			<view class="canPop-cont">上传打款凭证</view>
			<image class="canPop-cover" :src="canFromImg.showpath || require('@/static/icons/add-icon.png')" @click="updImg()" mode="aspectFill"></image>
			<view class="canPop-btn" @click="canSubmit">提交</view>
		</view>

		<swiper class="vip-container" previous-margin="55rpx" next-margin="55rpx" :current="tabsIndex" circular @change="swiperChange">
			<swiper-item class="swiper-item" v-for="(item, index) in identitie" :key="index">
				<view class="vip-item" :class="tabsIndex == index ? 'color-item-img' : ''">
					<image class="vip-back" :src="item.card_cover" mode="scaleToFill"></image>
					<view class="vip-cont">
						<view class="vip-name">
							{{ item.name }}
							<image class="vip-name-img" @click="showRemark(item.name, item.node_definition)" src="../../static/user/vip_privilege_03.png" mode="widthFix"></image>
						</view>
						<view class="vip-number" v-if="item.count">{{ item.count.stock > 0 ? '剩余名额：' + item.count.residue : '不限名数' }}</view>
						<view class="vip-tips">
							<!-- 会员 -->
							<view v-if="item.identity_id == 2" class="vip-tips-text vip-tips-color-01">{{ item.title }}</view>

							<!-- VIP节点 -->
							<view v-else-if="item.identity_id == 3" class="vip-tips-text vip-tips-color-02">{{ item.title }}</view>

							<!-- 主节点 -->
							<view v-else-if="item.identity_id == 4" class="vip-tips-text vip-tips-color-03">{{ item.title }}</view>

							<!-- 超级节点 -->
							<view v-else-if="item.identity_id == 5" class="vip-tips-text vip-tips-color-04">{{ item.title }}</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>

		<!-- 会员特权 -->
		<view class="privilege">
			<view class="privilege-list">
				<image class="privilege-img" src="/static/user/vip_privilege_00.png" mode=""></image>
				<view class="privilege-text">
					<view class="privilege-name">节点定义</view>
					{{ identitie[tabsIndex].node_definition }}
				</view>
			</view>
			<view class="privilege-list">
				<image class="privilege-img" src="/static/user/vip_privilege_01.png" mode=""></image>
				<view class="privilege-text">
					<view class="privilege-name">升级条件</view>
					<block v-if="openCondition.energy_shard">
						<view class="privilege-label" :class="{ active: openCondition.energy_shard.finish }">
							{{ openCondition.energy_shard.message }}
							<uni-icons v-if="openCondition.energy_shard.finish" type="checkmarkempty" size="17" color="#f6b338"></uni-icons>
						</view>
						<view class="privilege-label" :class="{ active: openCondition.price.finish }" v-if="!openCondition.energy_shard.finish">
							{{ openCondition.price.message }}
						</view>
						<view class="privilege-label" v-else>{{ openCondition.service_charge.message }}</view>
					</block>
					<block v-else>
						<view class="privilege-label" :class="{ active: openCondition.price.finish }">{{ openCondition.price.message }}</view>
					</block>
				</view>
			</view>
			<view class="privilege-list">
				<image class="privilege-img" src="/static/user/vip_privilege_02.png" mode=""></image>
				<view class="privilege-text">
					<view class="privilege-name">节点权益</view>
					<view class="privilege-label privilege-right" v-for="(item, index) in identitie[tabsIndex].rights" :key="index">&{{ item.remark }}</view>
				</view>
			</view>
		</view>

		<!-- 用户协议 -->
		<view class="agree"><view class="agree-tips" @click="$Router.push({ name: 'vipAgree', params: { type: 'vipAgree' } })">请仔细阅读并确认服务协议</view></view>
		<view class="agree-btn" @click="agreeChange">
			<radio :checked="selected" style="transform: scale(.7);" color="#7c52fc"></radio>
			会员服务协议
		</view>

		<!-- 开通按钮 -->
		<view class="footer">
			<image class="footer-btn" :src="identitie[tabsIndex].button_cover" mode="widthFix" @click="openOrder"></image>
			<!-- <button class="footer-btn" type="default" >
                <view class="footer-btn-num">
                    合计：{{total}}
                </view>
                <view class="footer-btn-pay">
                    立即支付
                </view>
            </button> -->
		</view>
	</view>
</template>

<script>
import { identities, vipOrder, vipWechatPay, vipCont, vipVoucher } from '@/apis/interfaces/vip';
import { wxConfig } from '@/apis/interfaces/wx';
import { uploads } from '@/apis/interfaces/uploading';
export default {
	data() {
		return {
			loding: true,
			tabsIndex: 0,
			user: {},
			identitie: [],
			rights: [],
			description: '',
			identityTime: '', // 到期时间
			sumNumber: 1, // 开通年限
			total: '', // 开通年限总资金额
			selected: false, // 用户协议
			canBtn: '', // 按钮操作
			canForm: false, // 凭证弹出
			canFromImg: {
				showpath: '',
				path: ''
			},
			openCondition: {}
		};
	},
	created() {
		// 获取当前用户信息
		this.idenInfo('cre');
           
	},
	methods: {
		// 当前用户信息
		idenInfo(type) {
			identities().then(res => {
				res.identities.map(item => {
					item.obj_condition = new Object();
					for (let val of item.get_condition) {
						item.obj_condition[val.name] = {
							message: val.message,
							finish: val.finish
						};
					}
					return item;
				});
				this.identitie = res.identities;
                if(type === 'cre'){
                    this.tabsIndex = res.identities.findIndex(val => val.identity_id == this.$Route.query.identity_id)
                }
				this.openCondition = res.identities[this.tabsIndex].obj_condition;
				this.rights = res.identities[this.tabsIndex].rights;
				this.total = res.identities[this.tabsIndex].price;
				this.canBtn = res.identities[this.tabsIndex].can;
				this.loding = false;
			}).catch(err => {
				uni.showToast({
					title: err.message,
					icon: 'none'
				});
			});
		},

		// 切换开通身份
		swiperChange(e) {
			this.tabsIndex = e.detail.current;
			// 获取当前用户信息
			this.idenInfo();
		},

		// 开通会员
		openOrder() {
			let can = this.canBtn,
				identitiesId = this.identitie[this.tabsIndex].identity_id;
			if (this.selected == false) {
				uni.showToast({
					title: '请勾选用户协议',
					icon: 'none'
				});
				return;
			}
			if (can.on_line) {
				if (can.buy) {
					this.wxPayConfig();
				} else {
					uni.showToast({
						title: can.message,
						icon: 'none'
					});
				}
			} else {
				if (can.buy) {
					// 上传凭证
					this.canClick();
				} else {
					uni.showToast({
						title: can.message,
						icon: 'none'
					});
				}
			}
			return;
		},
		// 微信支付鉴权
		wxPayConfig() {
			wxConfig({
				url: window.location.href,
				jsApiList: ['chooseWXPay']
			}).then(res => {
				let payConfig = JSON.parse(res);
				let jweixin = require('jweixin-module');
				jweixin.ready(() => {
					// res
				});
				jweixin.error(err => {
					uni.showToast({
						title: err,
						icon: 'none'
					});
				});
				jweixin.config({ ...payConfig });
				vipOrder(this.identitie[this.tabsIndex].identity_id, {
					year: this.sumNumber
				}).then(payId => {
					this.wechatPay(payId.id, jweixin);
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					});
				});
			}).catch(err => {
				uni.showToast({
					title: err.message,
					icon: 'none'
				});
			});
		},

		// 微信支付
		wechatPay(id, wx) {
			vipWechatPay(id, {
				openid: this.$store.getters.getCode
			}).then(payConfig => {
				wx.chooseWXPay({...payConfig,
					success() {
						uni.showModal({
							title	: '提示',
							content	: '支付成功，恭喜您成功开通',
							cancelColor: '#8b64fd',
							success() {
								this.$Router.back()
							}
						})
					},
					fail(err) {
						uni.showToast({
							title: '支付被取消',
							icon : 'none'
						})
					}
				});
			}).catch(err => {
				uni.showToast({
					title: err.message,
					icon : 'none'
				})
			})
		},

		// 勾选协议
		agreeChange() {
			this.selected = !this.selected;
		},

		// 会员权益介绍
		showRemark(title, val) {
			uni.showModal({
				title: title,
				content: val,
				showCancel: false
			});
		},

		// 上传打款凭证图片
		updImg() {
			uni.chooseImage({
				count: 1,
				success: path => {
					uploads([{uri: path.tempFilePaths[0]}]).then(res => {
						this.canFromImg = {
							showpath: res.url[0],
							path: res.path[0]
						};
					}).catch(err => {
						uni.showToast({
							title: err.message,
							icon: 'none'
						});
					});
				}
			});
		},

		// 打款凭证弹出状态
		canClick() {
			this.canForm = !this.canForm;
		},

		// 打款凭证提交
		canSubmit() {
			let newCover = this.canFromImg.path,
				newId = this.identitie[this.tabsIndex].identity_id;
			vipVoucher({
				cover: newCover,
				identity_id: newId
			}).then(res => {
				this.$Router.push({ name: 'Examine' });
			}).catch(err => {
				uni.showToast({
					title: err.message,
					icon: 'none'
				});
			});
		}
	}
};
</script>

<style>
page {
	background-color: #ffffff;
}
</style>
<style lang="scss" scoped>
.canBack {
	position: fixed;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	left: 0;
	top: 0;
	z-index: 99;
}
.canPop {
	position: absolute;
	background-color: #ffffff;
	left: 100rpx;
	right: 100rpx;
	top: 30%;
	z-index: 101;
	padding: 30rpx;
	box-sizing: border-box;
	border-radius: 10rpx;
	text-align: center;
	.canPop-tips {
		position: absolute;
		right: 20rpx;
		top: 32rpx;
		width: 32rpx;
		height: 32rpx;
		z-index: 1002;
	}
	.canPop-cont {
		font-size: 32rpx;
		font-weight: 600;
	}
	.canPop-cover {
		margin: 60rpx auto 40rpx;
		width: 240rpx;
		height: 240rpx;
		border: 2rpx solid #f3f3f3;
	}
	.canPop-btn {
		text-align: center;
		background: $mian-color;
		border-radius: 0;
		height: 90rpx;
		line-height: 90rpx;
		font-size: $title-size;
		color: white;
		&::after {
			border: none;
		}
	}
}

.vip-container {
	width: 750rpx;
	height: 340rpx;
	margin-top: $margin;
}

.swiper-item {
	width: 640rpx;
	height: 340rpx;
	display: flex;
}

.vip-item {
	width: 640rpx;
	height: 340rpx;
	border-radius: 20rpx;
	position: relative;
	.vip-back {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
	.vip-cont {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 9;
		padding: 45rpx 70rpx;
		box-sizing: border-box;
		.vip-name {
			display: flex;
			font-size: 46rpx;
			color: #ffffff;
			font-weight: 600;
			.vip-name-img {
				width: 36rpx;
				height: 36rpx;
				margin: 12rpx 20rpx;
			}
		}
		.vip-number {
			margin: 10rpx 0 40rpx;
			color: #ffffff;
			font-size: 32rpx;
			opacity: 0.8;
		}
		.vip-tips {
			font-size: 30rpx;
			background-color: #e8ebf6;
			display: inline-block;
			border-radius: 80rpx;
			height: 60rpx;
			line-height: 60rpx;
			padding: 0 30rpx;
			.vip-tips-text {
				font-weight: 700;
				background-clip: text;
				color: transparent;
			}
			.vip-tips-color-00 {
				background-image: linear-gradient(to bottom, #6189f0, #b6b9c1);
			}
			.vip-tips-color-01 {
				background-image: linear-gradient(to top, #ffd459, #ff6c52);
			}
			.vip-tips-color-02 {
				background-image: linear-gradient(to top, #e0c9fe, #892edb);
			}
			.vip-tips-color-03 {
				background-image: linear-gradient(to top, #f6b237, #f035e3);
			}
			.vip-tips-color-04 {
				background-image: linear-gradient(to top, #c455ec, #5f76e9);
			}
		}
	}
}
// 会员特权
.privilege {
	padding: 20rpx 30rpx 80rpx;
	box-sizing: border-box;
	.privilege-list {
		margin-bottom: 50rpx;
		display: flex;
		.privilege-img {
			width: 74rpx;
			height: 74rpx;
		}
		.privilege-text {
			width: calc(100% - 74rpx);
			padding-left: 40rpx;
			font-size: 32rpx;
			color: #999999;
			line-height: 52rpx;
			.privilege-name {
				font-size: 40rpx;
				color: #000000;
				margin: 10rpx 0 20rpx;
			}
			.privilege-label.active {
				color: #f6b338;
			}
			.privilege-right {
				color: #7877eb;
			}
		}
	}
}

// 用户协议
.agree {
	margin: $margin 0;
	text-align: center;
	.agree-tips {
		background-color: #999999;
		display: inline-block;
		padding: 14rpx $padding;
		color: #ffffff;
		border-radius: 60rpx;
	}
}
.agree-btn {
	display: flex;
	font-size: $title-size-lg;
	text-align: left;
	color: #999999;
	padding: $padding;
}

// .content{
// 	min-height: 100vh;
// 	background: #fefaef;
// }
// 开通须知
.notice {
	font-size: $title-size-m;
	color: $text-gray;
	padding: $padding $padding * 2 $padding * 2;
	.title {
		padding-bottom: $padding/2;
		font-weight: bold;
	}
	.item {
		padding-bottom: $padding/2;
		line-height: 40rpx;
		text-align: justify;
	}
}
// footer
.footer {
	padding: 0 $padding;
	box-sizing: border-box;
	text-align: center;
	.footer-btn {
		width: 74%;
	}
}
// 会员权限
.privilege {
	padding: $padding;
	.title {
		font-weight: bold;
		color: #322711;
		font-size: $title-size;
		text-align: center;
		line-height: 90rpx;
	}
	.privilege-box {
		display: flex;
		flex-wrap: wrap;
		padding: $padding 0;
		.item {
			width: 25%;
			padding: $padding/2;
			box-sizing: border-box;
			text-align: center;
			.icon {
				width: 78rpx;
				height: 78rpx;
				background: #bd995d;
				border-radius: 50%;
				vertical-align: top;
			}
			.text {
				font-size: $title-size-sm;
				color: #201212;
				line-height: 60rpx;
			}
		}
	}
}
// 会员卡
.cards {
	position: relative;
	background: #1f1b1c;
	.card {
		position: relative;
		margin: 0 $margin;
		background: linear-gradient(to right, #3b3d4a, #231d1f);
		padding: 15rpx;
		border-radius: $radius/2;
		z-index: 2;
		.card-content {
			position: relative;
			border: solid 1rpx rgba($color: white, $alpha: 0.4);
			border-radius: $radius/2;
			padding: 30rpx 180rpx 60rpx 148rpx;
			min-height: 98rpx;
			.cover {
				position: absolute;
				left: 30rpx;
				top: 30rpx;
				width: 98rpx;
				height: 98rpx;
				border-radius: 50%;
			}
			.user {
				color: rgba($color: white, $alpha: 0.7);
				line-height: 58rpx;
				font-size: $title-size-lg;
			}
			.sub-time {
				line-height: 40rpx;
				color: #e6ce9e;
				font-size: $title-size-sm;
			}
			.btn {
				position: absolute;
				color: #261f0f;
				background: #e6ce9e;
				width: 160rpx;
				border-radius: 30rpx;
				font-size: $title-size-m;
				right: 30rpx;
				top: 50rpx;
				line-height: 58rpx;
				text-align: center;
			}
		}
	}
	.cards-angle {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 3;
	}
	&::after {
		content: ' ';
		height: 70rpx;
		background: #b29671;
		position: absolute;
		width: 100%;
		bottom: 0;
		border-radius: $radius/2;
		z-index: 0;
	}
}
// tabs
.tabs {
	background: #1f1b1c;
	color: white;
	padding: 0 0 $padding 0;
	display: flex;
	justify-content: center;
	font-size: $title-size-lg;
	.item {
		margin: 0 $margin;
		line-height: 70rpx;
		height: 70rpx;
		color: rgba($color: white, $alpha: 0.6);
		&.show {
			position: relative;
			font-weight: bold;
			font-size: $title-size;
			color: white;
			&::after {
				position: absolute;
				bottom: 0;
				left: 20%;
				width: 60%;
				height: 6rpx;
				border-radius: 3rpx;
				content: ' ';
				background: white;
			}
		}
	}
}
</style>
