<template>
     <!-- v-if="!loding" -->
	<view class="content">
        <swiper class="vip-container" previous-margin="45rpx" next-margin="45rpx" circular @change="swiperChange">
        	<swiper-item class="vip-item">
        		<view>
        		    VIP企业会员
        		</view>
        	</swiper-item>
            <swiper-item class="vip-item">
            	<view>
            	    普通会员
            	</view>
            </swiper-item>
            <swiper-item class="vip-item">
            	<view>
            	    超级会员
            	</view>
            </swiper-item>
        </swiper>
        
		<!-- 会员类型 -->
		<!-- <view class="tabs">
			<view class="item" :class="{'show': index === tabsIndex}" v-for="(item, index) in identities" :key="index" @click="onTabs(index)">{{item.name}}</view>
		</view> -->
		<!-- 会员信息 -->
		<!-- <view class="cards">
			<view class="card">
				<view class="card-content">
					<image class="cover" src="@/static/dev/good_cover_01.png" mode="aspectFill"></image>
					<view class="user nowrap">{{user.username}}</view>
					<view class="sub-time nowrap">{{user.identity.name}}至{{user.identity.ended_at}}</view>
					<view class="btn" @click="openOrder">开通/续费</view>
				</view>
			</view>
			<view class="cards-back"></view>
			<image class="cards-angle" src="@/static/imgs/vip-angle-back.png" mode="widthFix"></image>
		</view> -->
		<!-- 会员权限 -->
		<!-- <view class="privilege">
			<view class="title">开通会员享特权</view>
			<view class="privilege-box">
				<view class="item" v-for="(item, index) in rights" :key="index" @click="showRemark(item.name, item.remark)">
					<image class="icon" :src="item.cover" mode="aspectFill"></image>
					<view class="text">{{item.name}}</view>
				</view>
			</view>
		</view> -->
		<!-- 会员 -->
		<!-- <view class="footer">
			<button class="footer-btn" type="default" @click="openOrder">￥{{identities[tabsIndex].price}}/年&nbsp;开通</button>
		</view> -->
		<!-- 会员服务信息 -->
		<!-- <view class="notice">
			<view class="title">开通须知</view>
			<view class="item">
				<text>{{description}}</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	import { identities, vipOrder, vipWechatPay } from '@/apis/interfaces/vip'
	export default {
		data() {
			return {
				loding		: true,
				tabsIndex	: 0,
				user		: {},
				identities	: [],
				rights		: [],
				description	: ''
			}
		},
		created() {
			// identities().then(res => {
			// 	this.loding		= false
			// 	this.user 		= res.user
			// 	this.description= res.description
			// 	this.identities = res.identities
			// 	this.rights		= res.identities[0].rights
			// }).catch(err =>{
			// 	uni.showToast({
			// 		title: err.message,
			// 		icon : 'none'
			// 	})
			// })
		},
		methods: {
			// 切换开通身份
			onTabs(index){
				if(this.tabsIndex === index) return
				this.tabsIndex = index
				this.rights	   = this.identities[index].rights
			},
			// 会员权益介绍
			showRemark(title, text){
				uni.showModal({
					title		: title + '说明',
					content		: text,
					showCancel	: false
				})
			},
			// 开通会员
			openOrder(){
				let identitiesId = this.identities[this.tabsIndex].identity_id
				vipOrder(identitiesId).then(res => {
					console.log(res.test)
					if(!res.test){
						let verifyForm = res
						this.wechatPay(res.id)
					}else{
						// 测试环境
						uni.showModal({
							title		: '开通提示',
							content		: '会员开通成功，是否继续完成企业认证',
							showCancel	: true,
							cancelText	: '稍后认证',
							confirmText	: '立即认证',
							success		: modalRes => {
								if(modalRes.confirm){
									this.$Router.replace({name: 'Approve'})
									return
								}
								this.$Router.back()
							},
							fail(err) {
								console.log(err)
							}
						})
					}
				}).catch(err =>{
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			
			// 微信支付
			wechatPay(id){
				vipWechatPay(id).then(res => {
					let payConfig 	= JSON.parse(res.wechat),
						payIdentity	= res.identity
					uni.requestPayment({
						provider	: "wxpay",
						orderInfo	: payConfig,
						success		: payRes => {
							console.log(payRes)
						},
						fail		: payErr => {
							console.log(payErr)
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
    page {
        background-color: #FFFFFF;
    }
    
    // 新增样式
    .vip-container {
    	width: 750rpx;
    	height: 350rpx;
        .vip-item {
            background-color: #c8c8c8;
            border-radius: 20rpx;
        }
    }
    
	.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: $padding $padding*2;
		.footer-btn{
			background-color: #201212;
			height: 90rpx;
			line-height: 90rpx;
			padding: 0;
			border-radius: 0;
			color: #f7d79c;
			font-size: $title-size;
			font-weight: bold;
		}
	}
	// 会员权限
	.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: .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: .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: .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>
