<template>
	<view class="content" v-if="!loding">
		<!-- 上传凭证弹出 -->
		<view class="canBack" v-if="canForm"></view>
		<view class="canPop" v-if="canForm">
			<block v-if="voucher">
				<image class="canPop-tips" @click="canForm = false" src="/static/user/order-cancelPay.png" mode="widthFix"></image>
				<view class="canPop-cont">打款凭证</view>
				<image class="canPop-cover" v-if="voucher.status.value === 3" :src="canFromImg.showpath || require('@/static/icons/add-icon.png')" @click="updImg()" mode="aspectFill" />
				<image class="canPop-cover" v-else :src="canFromImg.showpath || require('@/static/icons/add-icon.png')" @click="preImg()" mode="aspectFill" />
				<view class="canPop-status">状态：{{voucher.status.text}}</view>
				<view class="canPop-remark" v-if="voucher.remark && voucher.status.value === 3">驳回原因：{{voucher.remark}}
				</view>
				<view class="canPop-btn" v-if="voucher.status.value === 3" @click="canSubmitEdit(voucher.voucher_id)">重新提交</view>
			</block>
			<block v-else>
				<image class="canPop-tips" @click="canForm = false" 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>
			</block>
		</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 identitiesData" :key="index">
				<view class="vip-item">
					<image class="vip-back" :src="item.card_cover" mode="scaleToFill"></image>
					<view class="vip-cont">
						<view class="vip-name">
							{{ item.name }}
							<uni-icons class="vip-help" type="help-filled" @click="showRemark(item.name, item.node_definition)" color="rgba(255,255,255,.5)" size="20"></uni-icons>
						</view>
						<view class="currentInfo" v-if="user.identity.identity_id === item.identity_id">当前身份</view>
						<view class="vip-tips">
							<view
								class="vip-tips-text"
								:class="{'vip-tips-color-01': item.identity_id === 2, 'vip-tips-color-02': item.identity_id === 3, 'vip-tips-color-03': item.identity_id === 4, 'vip-tips-color-04': item.identity_id === 5 }"
							>{{ 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>
					{{ identitiesData[tabsIndex].description }}
				</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="identitiesData[tabsIndex].is_activity">
						<view class="privilege-price">折扣价：{{identitiesData[tabsIndex].price}}元</view>
						<view class="privilege-price lineation">日常价：{{identitiesData[tabsIndex].cost}}元</view>
						<view class="privilege-label">活动名额剩余{{identitiesData[tabsIndex].count.residue}}/{{identitiesData[tabsIndex].count.stock}}</view>
					</block>
					<block v-else>
						<view class="privilege-price">{{identitiesData[tabsIndex].cost}}元</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 identitiesData[tabsIndex].rights" :key="index">&{{ item.remark }}</view>
				</view>
			</view>
		</view>
		<!-- 用户协议 -->
		<view class="agree-btn" v-if="identitiesData[tabsIndex].can.show_button">
			<checkbox-group @change="selected = !selected">
				<checkbox :checked="selected" id="vipAgree" style="transform: scale(.7);" color="#7c52fc"></checkbox>
			</checkbox-group>
			<label for="vipAgree">请认真阅读并确认</label>
			<text @click="$Router.push({ name: 'vipAgree', params: { type: 'vipAgree' } })">【会员服务协议】</text>
		</view>
		<!-- 开通按钮 -->
		<view class="footer">
			<image class="footer-btn" v-if="identitiesData[tabsIndex].can.show_button && voucher === ''" :src="identitiesData[tabsIndex].button_cover" mode="widthFix" @click="openOrder" />
			<view class="current-btn-sh" v-if="identitiesData[tabsIndex].can.show_button && voucher !== ''" @click="openOrder">
				{{voucher.status.value === 1?'申请审核中':''}}{{voucher.status.value === 3?'申请被驳回查看原因':''}}
			</view>
			<!-- <view class="current-btn-sh" v-if="!identitiesData[tabsIndex].can.show_button && voucher === ''">已开通</view> -->
			<view class="ios-bottom"></view>
		</view>
	</view>
</template>

<script>
	import { identities, vipOrder, vipWechatPay, vipCont, vipVoucherUpdate, vipVoucher } from '@/apis/interfaces/vip';
	import { getAliPayConfig } from '@/apis/interfaces/alipay'
	import { uploads } from '@/apis/interfaces/uploading';
	import cashierPay from '@/public/cashierPay'
	export default {
		data() {
			return {
				loding			: true,
				user			: {},
				tabsIndex		: 0,
				identitiesData	: [],
				selected		: false,
				canForm			: false,
				voucher			: '',
				canFromImg		: {
					showpath: '',
					path	: ''
				}
			}
		},
		created() {
			// 获取当前用户信息
			this.idenInfo()
		},
		methods: {
			// 当前用户信息
			idenInfo(type) {
				identities().then(res => {
					this.user			= res.user
					this.identitiesData = res.identities
					if(!type && type != 'refresh'){
						this.tabsIndex = res.identities.findIndex(val => val.identity_id == this.$Route.query.identity_id)
					}
					this.swiperChange()
					this.loding			= false
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					})
				})
			},

			// 切换开通身份
			swiperChange(e) {
				if(e){
					this.tabsIndex = e.detail.current
				}
				this.voucher   = this.identitiesData[this.tabsIndex].voucher ? this.identitiesData[this.tabsIndex].voucher : ''
				if(this.voucher){
					this.canFromImg = this.identitiesData[this.tabsIndex].voucher.cover
				}else{
					this.canFromImg = {
						path	: '',
						showpath: ''
					}
				}
			},

			// 开通会员
			openOrder() {
				let can 		 = this.identitiesData[this.tabsIndex].can,
					identitiesId = this.identitiesData[this.tabsIndex].identity_id;
					
				if (!this.selected) {
					uni.showToast({
						title: '请勾选用户协议',
						icon: 'none'
					});
					return;
				}
				if (can.on_line) {
					uni.showActionSheet({
						itemList: ['微信支付', '支付宝支付'],
						success: res => {
							this.payAppConfig(res.tapIndex)
						}
					})
				} else {
					this.canForm = true
				}
			},
			// 创建订单
			payAppConfig(payType) {
				let identity = this.identitiesData[this.tabsIndex].identity_id
				vipOrder(identity, {
					year: 1,
				}).then(res => {
					if (payType === 0) this.wechatAppPay(res.id)
					if (payType === 1) this.aliPayConfig(res.id)
				}).catch(err => {
					console.log(err)
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			},

			// 支付
			aliPayConfig(orderId) {
				getAliPayConfig(orderId, {
					type: 'app'
				}).then(res => {
					cashierPay.pay('alipay', res.wechat.original.data, 'vip').then(payRes => {
						this.idenInfo('refresh')
					})
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			},
			// 微信支付 APP
			wechatAppPay(orderId) {
				vipWechatPay(orderId, {
					type: 'app'
				}).then(res => {
					let payConfig = JSON.parse(res)
					cashierPay.pay('wxpay', payConfig, 'vip').then(payRes => {
						this.idenInfo('refresh')
					})
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			},
			// 会员权益介绍
			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'
							})
						})
					}
				})
			},
			// 预览图片
			preImg() {
				uni.previewImage({
					current: this.voucher.cover.showpath,
					urls: [this.voucher.cover.showpath]
				})
			},
			
			// 打款凭证提交
			canSubmit() {
				let newCover = this.canFromImg.path,
					newId 	 = this.identitiesData[this.tabsIndex].identity_id;
					
				vipVoucher({
					cover: newCover,
					identity_id: newId
				}).then(res => {
					this.$Router.push({
						name: 'Examine'
					})
					this.canForm = !this.canForm
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					})
				})
			},
			// 编辑凭证
			canSubmitEdit(id) {
				let newCover = this.canFromImg.path
				vipVoucherUpdate(id, {
					cover: newCover
				}).then(res => {
					this.$Router.push({
						name: 'Examine'
					})
					this.canForm = !this.canForm
				}).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: 40rpx auto 20rpx auto;
			width: 240rpx;
			height: 240rpx;
			border: 2rpx solid #f3f3f3;
		}

		.canPop-remark {
			margin-bottom: 20rpx;
		}

		.canPop-status {
			margin-bottom: 10rpx;
		}

		.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 * 1.5;
	}

	.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: 38rpx;
				color: #ffffff;
				font-weight: bold;
				.vip-help{
					margin-left: 10rpx;
					margin-top: 6rpx;
				}
			}
			
			.currentInfo {
				position: absolute;
				right: 82rpx;
				top: 20rpx;
				color: #fff;
				font-size: 24rpx;
			}

			.vip-tips {
				font-size: 30rpx;
				background-color: white;
				display: inline-block;
				border-radius: 80rpx;
				height: 60rpx;
				line-height: 60rpx;
				padding: 0 30rpx;
				margin-top: 100rpx;
				
				.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: 30rpx;
			display: flex;

			.privilege-img {
				width: 50rpx;
				height: 50rpx;
				margin-top: 5rpx;
			}

			.privilege-text {
				width: calc(100% - 50rpx);
				padding-left: 20rpx;
				font-size: 30rpx;
				color: $text-gray-m;
				line-height: 40rpx;

				.privilege-name {
					font-size: 34rpx;
					color: #333;
					margin: 10rpx 0 20rpx;
					font-weight: bold;
				}
				
				.privilege-price{
					color: #f6b338;
					font-weight: bold;
					line-height: 50rpx;
					&.lineation{
						text-decoration:line-through;
						color: $text-gray-m;
						font-weight: normal;
					}
				}
				
				.privilege-label{
					line-height: 50rpx;
				}
				
				.privilege-right {
					color: $mian-color;
				}
			}
		}
	}

	// 用户协议
	.agree {
		margin: 0 0 10rpx 0;
		text-align: center;

		.agree-tips {
			background-color: #cacaca;
			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;
		text{
			color: $mian-color;
		}
	}

	// 开通须知
	.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;
		margin-bottom: 30rpx;

		.footer-btn {
			width: 74%;
		}

		.current-btn {
			width: 74%;
			height: 80rpx;
			background-image: linear-gradient(to right, #7c52fc, #976dff);
			color: #fff;
			margin-left: 13%;
			border-radius: 80rpx;
			line-height: 80rpx;
			font-size: 36rpx;
		}

		.current-btn-sh {
			background-color: $border-color-lg;
			width: 74%;
			height: 100rpx;
			color: $text-gray;
			margin-left: 13%;
			border-radius: 80rpx;
			line-height: 100rpx;
			font-size: 36rpx;
		}
	}

	// 会员权限
	.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>
