<template>
	<view class="page-equity">
		<view class="equity-header">
			<view class="header-caption">
				<block v-for="(item,index) in cateList">
					<view class="text" :class="index==cateIndex?'active':''" @click="onSetCate(index)">{{item.name}}</view> 
				</block> 
			</view>
			<view class="header-sub">
				<block v-for="(it,index) in statusList">
					<view class="text" :class="index==statusIndex?'active':''" @click="onSetStatus(index)">{{it.value}}</view>
				</block> 
			</view> 
		</view>
		
		<view class="ticket-list">
			<view class="list-item" >
				
				<block v-for="(it,index) in dataList" >
					<block v-if="queryForm.status==''">
						<view class="item" :class="'shadow'" >
							<view class="ticket-content" >
								<view class="content">
									<view class="ticket-img">
										<!-- 商品券 -->
										<image src="/static/images/cof_ico.png" v-if="it.ticket.type==1" class="img" mode="aspectFill"></image>
										<!-- 课程券 -->
										<image src="/static/images/fit_ico.png" v-if="it.ticket.type==2" class="img" mode="aspectFill"></image>
										<!-- 剧场活动,早鸟会员 -->
										<image src="/static/images/soci_ico.png" v-if="it.ticket.type==3||it.ticket.type==4" class="img" mode="aspectFill"></image>
									</view>
									<view class="ticket-info"  @click="onViewTicketMore(it)">
										 
										<view class="ticket-name">
											<block v-if="it.ticket.type==2 && it.ticket.limitCourse>0">{{it.ticket.course.name}}</block>
											<block v-else>{{it.ticket.name}}</block> 
										</view>
										<block v-if="it.qty<=1 && it.list[0].fitnessReq">
											<view class="ticket-expire">预约课程:{{it.list[0].fitnessReq.course.name}}</view>
											<view class="ticket-expire">教练:{{it.list[0].fitnessReq.teacher.name}}</view>
											<view class="ticket-expire">预约时间:{{it.list[0].fitnessReq.startTime}}</view> 
										</block>
										<block v-else>
											
											<view class="ticket-expire-rule">{{it.ticket.intro}}</view>
											<view class="ticket-expire">开始日期：{{it.list[0].startTime}}</view>
											<view class="ticket-expire">截止日期：{{it.list[0].endTime}}</view>
										</block>
										
										
									</view>
									<view class="ticket-status used"> 
										<view class="ticket-text" v-if="it.qty>1">
									     {{it.qty}} 张 
										</view>
										
									</view>
									<view class="ticket-status-st used" v-if="it.qty==1" >
										
										<view class="ticket-st" >
										{{it.list[0].status==5?"待使用":""}}
										{{it.list[0].status==6?"待核销":""}}
										{{it.list[0].status==7?"已核销":""}}
										{{it.list[0].status==8?"已取消":""}}
										
										
										</view>
									</view>
								</view> 
							</view>
							<view class="ticket-splite">
								<view class="left"></view>
								<view class="mid"></view>
								<view class="right"></view>
							</view>
							<view class="ticket-other">
								<view class="other-txt">
								 
								 
								</view>
							</view> 
						</view>
					</block>
					
					<block v-else>
						
						
						<view class="item" :class="'shadow'" >
							<view class="ticket-content" >
								<view class="content">
									<view class="ticket-img">
										<!-- 商品券 -->
										<image src="/static/images/cof_ico.png" v-if="it.ticket.type==1" class="img" mode="aspectFill"></image>
										<!-- 课程券 -->
										<image src="/static/images/fit_ico.png" v-if="it.ticket.type==2" class="img" mode="aspectFill"></image>
										<!-- 剧场活动,早鸟会员 -->
										<image src="/static/images/soci_ico.png" v-if="it.ticket.type==3||it.ticket.type==4" class="img" mode="aspectFill"></image>
									</view>
									<view class="ticket-info"  @click="onViewTicketMore(it)"> 
										<view class="ticket-name">
											<block v-if="it.ticket.type==2 && it.ticket.limitCourse>0">{{it.ticket.course.name}}</block>
											<block v-else>{{it.ticket.name}}</block> 
										</view> 
										<view class="ticket-expire-rule">{{it.ticket.intro}}</view>
										<view class="ticket-expire">开始日期：{{it.userTicket.startTime}}</view>
										<view class="ticket-expire">截止日期：{{it.userTicket.endTime}}</view> 
									</view>
									 
									<view class="ticket-status-st used" > 
										<view class="ticket-st" >
											{{it.userTicket.status==5?"待使用":""}}
											{{it.userTicket.status==6?"待核销":""}}
											{{it.userTicket.status==7?"已核销":""}}
											{{it.userTicket.status==8?"已取消":""}} 
										</view>
									</view>
								</view> 
							</view>
							<view class="ticket-splite">
								<view class="left"></view>
								<view class="mid"></view>
								<view class="right"></view>
							</view>
							<view class="ticket-other">
								<view class="other-txt">
								 
								 
								</view>
							</view> 
						</view>
						
						
						
					</block>
					 
					 
					 
					 
				 </block>
				
			</view> 
		</view>
		
		
		<uni-popup ref="moreItemForm">
			<view class="more-ticket">
				<view class="more-ticket-title">优惠券查看</view> 
				<view class="more-items" v-if="currentItem!=null">
					<block v-for="(it,index) in currentItem.list" >
						<view class="item shadow " >
							<view class="ticket-content" @click="onViewTicket(it.hxCode)">
								<view class="content">
									<view class="ticket-img">
										<!-- 商品券 -->
										<image src="/static/images/cof_ico.png" v-if="currentItem.ticket.type==1" class="img" mode="aspectFill"></image>
										<!-- 课程券 -->
										<image src="/static/images/fit_ico.png" v-if="currentItem.ticket.type==2" class="img" mode="aspectFill"></image>
										<!-- 剧场活动,早鸟会员 -->
										<image src="/static/images/soci_ico.png" v-if="currentItem.ticket.type==3||currentItem.ticket.type==4" class="img" mode="aspectFill"></image>
									</view>
									<view class="ticket-info"> 
										<view class="ticket-name">
											<block v-if="currentItem.ticket.type==2 && currentItem.ticket.limitCourse>0">{{currentItem.ticket.course.name}}</block>
											<block v-else>{{currentItem.ticket.name}}</block> 
										</view>
										<block v-if="it.fitnessReq">
											<view class="ticket-expire">预约课程:{{it.fitnessReq.course.name}}</view>
											<view class="ticket-expire">教练:{{it.fitnessReq.teacher.name}}</view>
											<view class="ticket-expire">预约时间:{{it.fitnessReq.startTime}}</view> <view class="ticket-expire">截止时间：{{it.fitnessReq.endTime}}</view>
										</block>
										<block v-else>
											
											<view class="ticket-expire-rule">{{currentItem.ticket.intro}}</view><view class="ticket-expire">开始时间：{{currentItem.list[index].startTime}}</view>
											<view class="ticket-expire">截止时间：{{currentItem.list[index].endTime}}</view>
										</block> 
									</view>
									<view class="ticket-status-st used" > 
										<view class="ticket-st">
											 {{it.status==5?"待使用":""}}
											 {{it.status==6?"待核销":""}}
											 {{it.status==7?"已核销":""}}
											 {{it.status==8?"已取消":""}}
										</view>
									</view>
								</view> 
							</view>
							<view class="ticket-splite">
								<view class="left"></view>
								<view class="mid"></view>
								<view class="right"></view>
							</view>
							<view class="ticket-other">
								<view class="other-txt"> 
								
									<!-- <view class="btn">
										<button  @click="onViewTicket(it.hxCode)" v-if="it.type==2 || it.type==1 && it.status==6 " class="btn-user" >使用</button> 
									</view> -->
								</view>
							</view> 
						</view>
					</block>
				</view> 
			</view> 
		</uni-popup>
		
		
		
		<uni-popup ref="qrForm">
			<view class="qr-code" > 
					
				  	<view class="qr-box">
							<view class="qrcode">
							  <view v-for="(row, rowI) in modules" :key="rowI" style="display: flex;flex-direction: row;">
									 <view v-for="(col, colI) in row" :key="colI">
										   <view v-if="col.isBlack" style="width: 5px;height: 5px;background-color: black;">
											 <!-- 黑色码点 -->
										   </view>
										   <view v-else style="width: 5px;height: 5px;background-color: white;">
											 <!-- 白色码点 -->
										   </view>
									 </view>
							  </view>
							</view>
					</view>
					<view class="qr-text">核销码:{{qrText}}</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
 
	// import UQRCode from 'uqrcodejs'; // npm install uqrcodejs
		  import UQRCode from '../../uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';

	export default {
	 
		data() {
			return {
				    it: {
				        list: [
				          { status: 5 },
				          // 其他项
				        ]
				      },
				cateList:[
					{
						type:"",
						name:"全部"
					},
					{
						type:1,
						name:'咖啡屋',
					},
					{
						type:2,
						name:'健身房',
					},
					{
						type:3,
						name:'社区中心',
					}
				],
				cateIndex:0,
				statusList:[
					{
						status:'',
						value:'全部',
					},
					{
						status:6,
						value:'待核销',
					},
					{
						status:7,
						value:'已核销',
					} 
					 
				],
				statusIndex:0,
				queryForm:{
					page:0,
					pageSize:10,
					status:'',
					type:'', 
					userId:0,
				},
				dataList:[], 
				modules: [],
				currentItem:null,
				qrText:'二维码内容', 
			};
		},
		onLoad(){
			let _this=this;
			_this.statusIndex=0;
			_this.cateIndex=0;
			_this.queryForm.status=_this.statusList[_this.statusIndex].status;
			_this.queryForm.type=_this.cateList[_this.cateIndex].type;
			_this.queryForm.userId=_this.userInfo.id;
			if(this.queryForm.status==''){
				this.onSearch();
			}else{
				this.onSearchStatus();
			} 
		},
		
		onPullDownRefresh() {
			this.queryForm.page=0;
			uni.startPullDownRefresh();
			if(this.queryForm.status==''){
				this.onSearch();
			}else{
				this.onSearchStatus();
			}
		},
		onReachBottom() { 
			if(this.queryForm.status==''){
				this.onSearch();
			}else{
				this.onSearchStatus();
			}
		},
		computed: {
			...mapState(['userInfo']), 
		},
		 
		methods:{
			
			
			onViewTicketMore(item){
				this.currentItem=item;
				this.$refs.moreItemForm.open("bottom");
			},
			
			onViewTicket(e){  
				let _this=this; 
				_this.qrText=e;
				 // 获取uQRCode实例
				 const qr = new UQRCode();
				 qr.data = _this.qrText+"&T"; 
				 qr.make();
				_this.modules = qr.modules; 
				_this.$refs.qrForm.open("center"); 
			},
			
			onSetCate(e){
				let _this=this;
				this.cateIndex=e;
				this.queryForm.type=_this.cateList[e].type;
				this.queryForm.page=0;
				if(this.queryForm.status==''){
					this.onSearch();
				}else{
					this.onSearchStatus();
				}
			},
			onSetStatus(e){
				let _this=this;
				this.statusIndex=e;
				this.queryForm.status=_this.statusList[_this.statusIndex].status;
				this.queryForm.page=0; 
				if(this.queryForm.status==''){
					this.onSearch();
				}else{
					this.onSearchStatus();
				} 
			},
		 
			onSearch(){
				let _this=this; 
				if(_this.queryForm.page<=0){
					_this.dataList=[];
				}
				_this.queryForm.page++; 
				_this.$http.request('userticket/search', _this.queryForm, "", "", true).then(res => {  
					 uni.stopPullDownRefresh();
					_this.dataList=_this.dataList.concat(res.data.dataList);  
				}).catch(err => {})
			},
			onSearchStatus(){
				let _this=this; 
				if(_this.queryForm.page<=0){
					_this.dataList=[];
				}
				_this.queryForm.page++; 
				_this.$http.request('userticket/searchstatus', _this.queryForm, "", "", true).then(res => {  
					 uni.stopPullDownRefresh();
					_this.dataList=_this.dataList.concat(res.data.dataList);  
				}).catch(err => {})
			}
		},
	}
</script>

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