<template>
	<view class="content">
        <swiper class="vip-container" previous-margin="45rpx" next-margin="45rpx" circular @change="swiperChange">
        	<swiper-item class="swiper-item" v-for="(item, index) in identities" :key="index">
				<image class="swiper-item-bg" src="/static/imgs/account-bg.png" mode="widthFix" />
        		<view class="vip-item" :class="tabsIndex == index ? 'color-item-img' : ''">
        		    <view class="vip-top">
        		        <view  :class="tabsIndex == index ? 'vip-name' : 'vip-name1'">
                            <image class="vip-name-icon" src="../../static/icons/vip_icon.png" mode="aspectFill" />
        		            {{item.name}}
        		        </view>
        		        <view class="vip-price">
        		            {{identities[tabsIndex].price}}/年
        		        </view>
        		    </view>
        		    <view class="vip-time">
        		        {{identityTime}}
        		    </view>
        		</view>
        	</swiper-item>
        </swiper>
        
        <!-- 轮播点 -->
        <view class="vip-spot">
            <view class="vip-spot-label" :class="tabsIndex == index ? 'vip-spot-color' : ''" v-for="(item, index) in identities" :key="index"></view>
        </view>
        
        <!-- 选择开通年限 -->
        <view class="vip-years">
            <view class="vip-years-name">
                <image class="vip-years-icon" src="../../static/icons/vip_yearsIcon.png" mode="aspectFill"></image>
                选择开通年限
            </view>
            <view class="vip-years-tool">
                <view class="vip-years-btn" @click="yearsBtn('remove')">-</view>
                <view class="vip-years-input">{{sumNumber}}</view>
                <view class="vip-years-btn" @click="yearsBtn('plus')">+</view>
            </view>
        </view>
        
        <!-- 会员特权 -->
        <view class="privilege">
            <image class="privilege-img" src="../../static/icons/vip_privilege_tittle.png" mode="heightFix"></image>
            <view class="privilege-list">
                <view class="privilege-label" v-for="(item, index) in rights" :key="index">
                    <image class="privilege-label-tips" src="../../static/icons/vip_privilege_tips.png" mode="heightFix"></image>
                    <view class="privilege-label-text">
                        {{item.name}}
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 支付方式 -->
        <view class="privilege payWay">
            <image class="privilege-img" src="../../static/icons/vip_pay_title.png" mode="heightFix"></image>
            <view class="payWay-way">
                <radio-group @change="radioChange">
                    <view class="payWay-way-label">
                        <view class="payWay-way-name">
                            <image class="payWay-way-img" src="../../static/icons/payWay_icon_00.png"></image>
                            <text>微信支付</text>
                        </view>
                        <radio class="radio" value="weChat" checked style="transform: scale(.8);" color="#ff2828"></radio>
                    </view>
                    <view class="payWay-way-label">
                        <view class="payWay-way-name">
                            <image class="payWay-way-img" src="../../static/icons/payWay_icon_01.png"></image>
                            <text>余额支付</text>
                        </view>
                        <radio class="radio" value="balance" style="transform: scale(.8);" color="#9b9b9b"></radio>
                    </view>
                </radio-group>
            </view>
        </view>
        
        <!-- 用户协议 -->
        <view class="agree">
            <view class="agree-tips" @click="$Router.push({name: 'vipAgree'})">
                请仔细阅读并确认服务协议
            </view>
        </view>
        <view class="agree-btn" @click="agreeChange">
            <radio :checked="selected" style="transform: scale(.7);" color="#ff2828"></radio>会员服务协议
        </view>
        
        
        <!-- 开通按钮 -->
        <view class="footer">
        	<button class="footer-btn" type="default" @click="openOrder" :disabled="payChecked">
                <view class="footer-btn-num">
                    合计：{{total}}
                </view>
                <view class="footer-btn-pay">
                    立即支付
                </view>
            </button>
        </view>
	</view>
</template>

<script>
	import { identities, vipOrder, vipWechatPay, vipCont } from '@/apis/interfaces/vip'
	export default {
		data() {
			return {
				loding		: true,
				tabsIndex	: 0,
				user		: {},
				identities	: [],
				rights		: [],
				description	: '',
                identityTime: '',        // 到期时间
                valuePay    : 'weChat',  // 支付方式
                sumNumber   : 1,         // 开通年限
                total       : '',        // 开通年限总资金额
                selected    : false,     // 用户协议
                payChecked  : false      // 支付选择
			}
		},
		created() {
            // 获取当前用户信息
			identities().then(res => {
				console.log(res)
				this.loding		= false
				this.user 		= res.user
				this.description= res.description
				this.identities = res.identities
				this.rights		= res.identities[0].rights
			    this.total      = res.identities[0].price
			}).catch(err =>{
				uni.showToast({
					title: err.message,
					icon : 'none'
				})
			})
            
            // 获取支付总金额  默认传VIP会员id=2
            this.totalData(2);
		},
		methods: {
            // 切换开通身份
            swiperChange(e) {
            	this.tabsIndex = e.detail.current
                this.total     = this.identities[e.detail.current].price
                this.rights     = this.identities[e.detail.current].rights
                this.totalData(this.identities[e.detail.current].identity_id);
                this.sumNumber = 1
            },
            
			// 开通会员
			openOrder(){
                if(this.selected == false) {
                    uni.showToast({
                        title: '请勾选用户协议',
                        icon : 'none'
                    })
                    return
                }
				let identitiesId = this.identities[this.tabsIndex].identity_id
				vipOrder(identitiesId,{
                    year: this.sumNumber
                }).then(res => {
					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'
					})
				})
			},
            
            // 选择权限
            yearsBtn(val) {
                let newNumber = this.sumNumber
                if (val == 'plus'){
                    newNumber ++;
                }else{
                    if (newNumber > 1){
                        newNumber --;
                    }else{
                        uni.showToast({
                            title   : '商品数量不能小于1',
                            icon    : 'none'
                        })
                    }
                }
                this.sumNumber = newNumber
                this.totalData(this.identities[this.tabsIndex].identity_id);
            },
            
            // 支付总金额数据
            totalData(id) {
                vipCont(id,{
                    year: this.sumNumber
                }).then(res => {
                    this.identityTime = res.identity.description
                    this.total        = res.identity.price
                }).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)
						}
					})
				})
			},
            
            // 支付选择
            radioChange(val) {
                let valuePay = val.detail.value
                if( val.detail.value == 'balance') {
                    uni.showToast({
                        title: '抱歉暂未开通',
                        icon : 'none'
                    })
                    this.payChecked = true
                    return
                }
                this.payChecked = false
            },
            
            // 勾选协议
            agreeChange() {
                this.selected = !this.selected
            },
            
            // 会员权益介绍
            showRemark(title, text){
            	uni.showModal({
            		title		: title + '说明',
            		content		: text,
            		showCancel	: false
            	})
            }
		}
	}
</script>

<style lang="scss" scoped>
    page {
        background-color: #FFFFFF;
    }
    
    .vip-container {
    	width: 750rpx;
    	height: 300rpx;
        margin-top: $margin;
    }
    
    .swiper-item {
    	width: 630rpx;
    	height: 280rpx;
    	display: flex;
		position: relative;
		.swiper-item-bg{
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 10;
			bottom: 0;
		}
    }
    
    .vip-item {
    	width: 630rpx;
    	height: 280rpx;
    	border-radius: 20rpx;
        background-color: #c7c7c7;
        padding: 0 40rpx;
        box-sizing: border-box;
		color: #cacaca;
        .vip-top {
            display: flex;
            position: relative;
            height: 80rpx;
            line-height: 80rpx;
            margin: $margin + 20 0 $margin + 20;
            .vip-name {
                font-size: $title-size + 6;
                border-radius: 60rpx;
                padding: 0 $padding;
                box-sizing: border-box;
				background-image: linear-gradient(to bottom ,#e93340,#e8252f);
                display: flex;
                .vip-name-icon {
                    width: 50rpx;
                    height: 50rpx;
                    margin: $margin - 15 $margin - 10 0 0;
                }
            }
			.vip-name1{
				font-size: $title-size + 6;
				border-radius: 60rpx;
				padding: 0 $padding;
				box-sizing: border-box;
				background-image: linear-gradient(to bottom ,#cacaca,#cacaca);
				display: flex;
				color: #fff;
				.vip-name-icon {
				    width: 50rpx;
				    height: 50rpx;
				    margin: $margin - 15 $margin - 10 0 0;
				}
			}
            .vip-price {
                font-size: $title-size + 10;
                font-weight: 600;
                position: absolute;
                right: 0;
                top: 0;
            }
        }
        .vip-time {
            font-size: $title-size-lg;
            text-align: center;
        }
    }
    
    .color-item-img {
        background-color: #e93340;
		background-image: linear-gradient(to bottom ,#e93340,#e8252f);
        color: #FFFFFF;
        box-shadow: 0 0 20rpx 4rpx rgba($color: #e93340, $alpha: 1.0);
    }
    
    // 轮播点
    .vip-spot {
        margin-bottom: $margin;
        text-align: center;
        .vip-spot-label {
            display: inline-block;
            background-color: #e8ecf1;
            width: 80rpx;
            height: 8rpx;
            margin: 0 10rpx;
            &.vip-spot-color {
                background-color: #fb560a;
            }
        }
    }
    
    // 选择年限
    .vip-years {
        display: flex;
        line-height: 60rpx;
        padding: $padding + 10 $padding + 20;
        box-sizing: border-box;
        border-top: $padding - 10 solid #f8fbfe;
        border-bottom: $padding - 10 solid #f8fbfe;
        .vip-years-name {
            flex: 1;
            display: flex;
            color: #c2c2c2;
            .vip-years-icon {
                width: 60rpx;
                height: 60rpx;
                margin-right: 20rpx;
            }
        }
        .vip-years-tool {
            display: flex;
            .vip-years-btn {
                background-color: #ff9f43;
                color: #ffffff;
                border-radius: 10rpx;
                width: 48rpx;
                height: 48rpx;
                line-height: 40rpx;
                text-align: center;
                border: 2rpx solid #f8fbfe;
                font-size: $title-size + 4;
                font-weight: 600;
            }
            .vip-years-input {
                line-height: 48rpx;
                padding: 0 $padding;
                color: #000000;
            }
        }
    }
    
    // 会员特权
    .privilege {
        text-align: center;
        .privilege-img {
            height: 40rpx;
			margin-top: 40rpx;
        }
        .privilege-list {
            padding: 0 $padding;
            box-sizing: border-box;
            text-align: left;
            margin-top: $margin * 0.5;
            .privilege-label {
                border-bottom: 2rpx #e6eaef dashed;
                font-size: 30rpx;
                padding: $padding 0;
                display: flex;
                .privilege-label-tips {
                    width: 40rpx;
                    height: 40rpx;
                    margin-right: 20rpx;
					margin-top: 10rpx;
                }
                .privilege-label-text {
                    width: calc(100% - 60rpx);
                }
            }
        }
    }
    
    // 支付方式
    .payWay {
        .payWay-way {
            padding: 0 $padding;
            box-sizing: border-box;
            margin-top: $margin;
            .payWay-way-label {
                display: flex;
                border-bottom: 2rpx #e6eaef dashed;
                padding: $padding 0;
                .payWay-way-name {
                    font-size: $title-size;
                    line-height: 58rpx;
                    flex: 1;
                    display: flex;
                    .payWay-way-img { 
                        width: 58rpx;
                        height: 58rpx;
                        margin-right: $margin - 10;
                    }
                }
            }
            .radio[type="radio"].disabled {  
              background-color: #007aff;  
              border-color: #007aff;  
              color: #007aff;  
            
              &::before {  
                background-color: #007aff;  
                border-color: #007aff;  
              }  
            
              &::after {  
                background-color: #007aff;  
                border-color: #007aff;  
              }  
            }
        }
    }
    
    // 用户协议
    .agree {
        margin: $margin 0;
        text-align: center;
        .agree-tips {
            background-color: #d9d9d9;
            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: $padding;
        box-sizing: border-box;
		.footer-btn{
            padding: 0 $padding + 10;
            box-sizing: border-box;
			background-color: #e93340;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 60rpx;
			color: #ececec;
			font-size: $title-size;
			font-weight: bold;
            text-align: left;
            display: flex;
            .footer-btn-num {
                flex: 1;
            }
            .footer-btn-pay {
                color: rgba($color: #ff0, $alpha: .8);
            }
            &[disabled] {
                background-color: #b1b1b1;
            }
		}
	}
	// 会员权限
	.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>
