<template>
	<view class="shop-vip-form" v-if="userInfo!=null">
		<view class="vip-bg"></view>
	
		<view class="tips">{{userInfo.nickname}},</view>
		<view class="tips">您当前权益状态如下：</view>
		<view class="vip-step">
			<view class="step-item">
				<view class="icon"><image src="/static/images/coffeecup.png" class="icon"  mode="aspectFit"/></view>
				<view class="name">							
					<view class="box" @click="onOpenRenew">查看</view>
				</view>
			</view>
			<view class="step-item">
				<view class="icon"><image src="/static/images/gl.png" class="icon"  mode="aspectFit"/></view>
				<view class="name">							
					<view class="box disabled" @click="onOpenRenew">查看</view>
				</view>
			</view>
			<view class="step-item">
				<view class="icon"><image src="/static/images/door.png" class="icon" mode="aspectFit"/></view>
				<view class="name">							
					<view class="box disabled" @click="onOpenRenew">查看</view>
				</view>
			</view> 
		</view>
		<view class="vip-form">
			<view class="vip-form-title">您当前正在享受的收取权益情况：</view>
			<view class="vip-form-tab">
				<block v-for="(it,index) in currentLevel">
					<view class="tab">
						<view class="col1">
							<image src="/static/images/coffeecup.png" class="icon"  mode="aspectFit"/>
						</view>
						<view class="col2">{{it.name}}</view>
						<view class="col3">
						
						{{it.qty}}
						<block v-if="it.type==1">天</block>
						<block v-if="it.type==2">份</block>
						</view>
					</view>
				</block>
			</view>
	
		</view>
		

			<view class="letter"></view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {

	props: {
	  leveList: {
	    type: Array,
	    default: () => {
	      return [];
	    }
	  }
	},
		watch:{
			
			'userInfo':{
				handler(newVar,oldVar){
					
					this.initUserLevel();
				},
				deep:true,
				immediate:true,
			}
		},
		
		
		
	
		data() {
			return {
				
				activeIndex: 0,
				currentLevel: null,
			};
			
			
		},
		
		computed: {
			...mapState(['systemInfo', 'store_id', 'userInfo']),
		},
		onShow() {

		},
		methods:{
			onPickLeve(e) {
				this.activeIndex = e;
			},
			onBuyOrder(e) {
				let _this = this;
				let level = _this.leveList[_this.activeIndex];
				let par = {
					level_id: level.id,
					user_id: _this.userInfo.id,
					pay_type: 1,
				}
				_this.$http.request('theater/addLevelOrder', {
					...par
				}, "", "", true).then(res => {
					if (res.code == '200') {
						// #ifdef MP-WEIXIN
						wx.requestPayment({
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success: (res) => { 
								uni.showToast({
									title:'您已支付成功',
									icon:'success',
									success: (e) => {
										_this.$emit("onCloseRenew");
									}
								}) 
							},
							fail: (res) => { 
								uni.showToast({
									title:'支付失败',
									icon:'error',
									success: (e) => {
										_this.$emit("onCloseRenew");
									}
								})
							}
						})
						// #endif
					}
				}).catch(err => {})
				
			},
			
			onOpenRenew(e){
				this.$emit('onOpenRenew', this.leveList);
			},
			initUserLevel(){
				let _this=this;
				_this.$http.request('member/getMemberLevelInfo', {
					openid:_this.userInfo.openid,
				}, "", "", true).then(res => {  
					let js=JSON.parse(res.data.data.levelData); 
					_this.currentLevel=js;   
				}).catch(err => {}) 
			},
		}
	}
</script>

<style lang="scss">
	@import './VipForm.scss'

</style>