<template>
	<view class="com-renew-form">

		<view class="renew-form">
			<view class="vip_head"><view class="vip-form-title">{{userInfo.nickname}},您的权益情况：</view> 	<view class="cardcoup" @click="onViewEquity"><text>查看我的卡券</text></view></view>
				<view class="vip-form">
				
				<view class="vip-form-tab"   >
					<block v-if="ticketList ">
					<block v-for="(it,index) in ticketList" >
						<view class="tab" @click="onViewEquity">
							<view class="col1">
								<!-- 商品券 -->
								<image src="/static/images/coffeecup.png" v-if="it.ticket.type==1" class="icon"  mode="aspectFit"/>
								<!-- 课程券 -->								
								<image src="/static/images/gl.png" v-if="it.ticket.type==2" class="icon"  mode="aspectFit"/>
								<!-- 剧场活动 -->								
								<image src="/static/images/door.png" v-if="it.ticket.type==3" class="icon"  mode="aspectFit"/>
								<!-- 早鸟会员 -->									
								<image src="/static/images/door.png" v-if="it.ticket.type==4" class="icon"  mode="aspectFit"/>
							</view>
							<view class="col2"><text class="txtred">{{it.ticket.name}}</text>--{{formatIntro(it.ticket.intro)}}</view> 
							<view class="col3"  > 
							
							<block v-if="it.ticket.type==1">{{it.qty}}份</block>
							<block v-if="it.ticket.type==2">{{it.qty}}节</block>
							<block v-if="it.ticket.type==3">{{it.qty}}场</block>
							<block v-if="it.ticket.type==4">{{it.qty}}节</block>
							</view>
						</view>
						
						
						
						
						
						
						
						
						
						
						
					</block>
					
					<view class="tab" v-if="userInfo.zlDays>0">
						<view class="col1">
							
							<!-- 早鸟会员 -->									
							<image src="/static/images/door.png"  class="icon"  mode="aspectFit"/>
						</view>
						<view class="col2"><text class="txtred">会员早鸟</text>--社区中心早鸟权益提前{{userInfo.zlDays}}天</view> 
						<view class="col3"  > 
						
						<block >享有</block>
						
						</view>
					</view>
					</block>
				
					<block v-else><view class="RenewInfo">目前您还没有购买任何会员</view></block>
				
				</view>
				
			</view>
			<view class="renew-tips">
				<block v-for="(it,index) in leveList">
				<view class="text" v-if="activeIndex==index">您当前选择了：<text class="txt">{{it.name}}</text></view>
				</block>
			</view>

			<view class="renew-list">

				<view class="list-items">

					<block v-for="(it,index) in leveList">
						<view class="item " :class="activeIndex==index?'actived':''" @click="onPickLeve(index)">
							<view class="tips" >{{it.name}}</view>
							<view class="item-img">
								<view class="vip-list">
									
									<block v-for="(item,itemIndex) in it.items">
										<view class="vip-item bottomBg">
											<view class="vip-img">
												<!-- 商品券 -->
												<image src="/static/images/coffeecup.png" v-if="item.ticket.type==1" class='img' mode="aspectFit"/>
												<!-- 课程券 -->								
												<image src="/static/images/gl.png" v-if="item.ticket.type==2" class='img' mode="aspectFit"/>
												<!-- 剧场活动 -->								
												<image src="/static/images/door.png" v-if="item.ticket.type==3" class='img' mode="aspectFit"/>
												
											</view>
											<view class="vip-content">
												<view class="content-item">
													<view class="vip-item-cap">{{item.name}}</view>
													<view class="vip-item-text" v-if="item.ticket.type!=4">{{item.qty}} 
													<block v-if="item.ticket.type==1">份</block>
													<block v-if="item.ticket.type==2">节</block>
													<block v-if="item.ticket.type==3">场</block>
													</view>
													
												</view>
												
												
											</view>
											
										</view>
										
									</block>
                   
 <!-- 
									<view class="vip-item bottomBg">
										<view class="vip-img"><image src="/static/images/gl.png" mode="widthFix" class="img"></image></view>
										<view class="vip-content">
											<view class="content-item">
												<view class="vip-item-cap">器械区</view>
												<view class="vip-item-text">{{it.qixie}}天</view>
											</view>
											<view class="content-item">
												<view class="vip-item-cap">私教课</view>
												<view class="vip-item-text">{{it.sijiaoday}}天内{{it.sijiaojie}}节</view>
											</view>
											<view class="content-item">
												<view class="vip-item-cap">小班课</view>
												<view class="vip-item-text">{{it.xiaobanday}}天内{{it.xiaobanjie}}节</view>
											</view>
										</view>
									</view>

									<view class="vip-item bottomBg">
										<view class="vip-img"><image src="/static/images/ftmenu2.png" mode="widthFix" class="img"></image></view> 
										<view class="vip-content">
											<view class="content-item">
												<view class="vip-item-cap">早鸟特权</view>
												<view class="vip-item-text">{{it.early}}天</view>
											</view>
										</view>
									</view>   -->

<view class="vip-item bottomBg" v-if="it.zlDays>0">
											<view class="vip-img">
												
												<!-- 剧场活动 -->								
												<image src="/static/images/door.png"  class='img' mode="aspectFit"/>
												
											</view>
											<view class="vip-content">
												<view class="content-item">
													<view class="vip-item-cap">赠送社区中心早鸟权益</view>
													<view class="vip-item-text" >提前{{it.zlDays}} 
													
													<block >天</block>
													
													</view>
													
												</view>
												
												
											</view>
											
										</view>






                        
								</view>
                           <view class="btncoup_date">有效期：{{it.items[0].expireTime}}天</view>  <view class="btncoup" @click="onViewEquity"><text>我的卡券</text></view>

                            <view class="RenewInfo">{{it.intro}}</view>
							</view>
							<view class="item-price">
								<view class="price">
									<text class="sign">￥</text>{{it.price}}
								</view>
							</view>

							<view class="active" v-if="activeIndex==index">
								<uni-icons type="checkbox-filled" size="30"></uni-icons>

							</view>
						</view>

					</block>




				</view>


			</view>
			<view class="renew-btns">
				
				<button class="btn-pay" @click="onBuyOrder">立即支付</button>
			</view>
			
			
			
		</view>

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

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		formattedIntro:'',	
		name: "RenewForm",
		emits:['onCloseRenew'],
		props: {
		  leveList: {
		    type: Array,
		    default: () => {
		      return [];
		    }
		  }
		},
        watch:{
			'leveList':{
				handler(newVar,oldVar){
					
					console.log("NewVar",newVar);
				},
				deep:true,
				immediate:true,
			},
        	
        	'userInfo':{
        		handler(newVar,oldVar){
        			
        			this.initUserLevel();
        		},
        		deep:true,
        		immediate:true,
        	}
        },
		computed: {
			
		    userInfo() {
		      return this.$store.state.userInfo;
		    },
		  },
		data() {
			
				
				
				return {
					activeIndex: 0,
					
					ticketList: [],
				    };
			
			
			
		},
		created() {
		   this.fetchUserTicket();
		 },
		computed: {
			...mapState(['systemInfo', 'store_id', 'userInfo']),
		},
		onShow() {

		},
		methods: {
			formatIntro: function(intro) {
			   if (intro && intro.length > 15) {
			     return intro.substring(0, 15) + "...";
			   } else {
			     return intro || '';
			   }
			 },
						
			fetchUserTicket() {
			  this.$http
			    .request('userticket/search', { userId: this.userInfo.id, page: 1, pageSize: 999 }, 				'', '', true)
			    .then((res) => {
			      this.ticketList = res.data.dataList;
			    })
			    .catch((err) => {
			      console.error(err);
			    });
			},
			onPickLeve(e) {
				this.activeIndex = e;
			},
           onViewEquity(e){
           	uni.navigateTo({
           		url:'/pages/equity/equity',
           	})
			},
			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 => {}) 
			},
			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.fetchUserTicket();
										_this.$emit("onCloseRenew");
									}
								}) 
							},
							fail: (res) => { 
								uni.showToast({
									title:'支付失败',
									icon:'error',
									success: (e) => {
										_this.$emit("onCloseRenew");
									}
								})
							}
						})
						// #endif
					}




				}).catch(err => {})
			},

		}
	}
</script>

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