<template>
	<view class="container">
		<view class="banner-box">
			<image v-if="currentTabIndex == 0" src="/static/imgs/dzck-banner.png" mode=""></image>
			<image v-if="currentTabIndex == 1" src="/static/imgs/dzck-banner.png" mode=""></image>
		</view>
		<view class="main">
			<view class="tab-box">
				<view class="tab-item" :class="currentTabIndex == 0 ? 'active' : ''" @click="currentTabIndex = 0">电子餐卡</view>
				<!-- <view class="tab-item" :class="currentTabIndex == 1 ? 'active' : ''" @click="currentTabIndex = 1">推荐菜品</view> -->
		
			</view>
			<view class="content-box my-code" v-if="currentTabIndex == 0">
				 
				<view class="codecass" style=" text-align: center;" v-if="payFlag == 0" >
					<img :src="qrURL" style="width: 300upx;height: 300upx; text-align: center;margin-top: 30upx;"  />
				</view>
				<view class="codecass" style=" text-align: center;" v-else-if="payFlag == 1">
					<image src="/static/imgs/payscess.png" style="width: 300upx;height: 300upx; text-align: center;margin-top: 30upx;"  />
				</view>
				<view class="codecass" style=" text-align: center;" v-else-if="payFlag == 3">
					<image src="/static/imgs/code2.png" style=" width: 300upx;height: 300upx; text-align: center;margin-top: 30upx;"  />
				</view>
				<view  class="money" v-if="payFlag == 3" >
					<image class="icon" src="/static/imgs/tips.png" 
					style="display:inline-block;width: 30upx;height: 30upx;top: 4upx;"></image>
					<view   style="display:inline-block;color: #ff5959;margin-left: 6upx;">暂未绑定餐卡，请联系管理员</view>	
				</view>
				<view class="money" v-else-if="payFlag == 4" ></view>	
				<view class="money" v-else>可用余额: &yen;{{amount}}</view>
				<view class="tip" v-if="payFlag != 3">如付款失败，请使用实体员工卡支付</view>
			</view>
			<!-- <view v-else>
				<image class="prize" src="../../static/food/prize.png" @click="showPrize" mode=""></image>
				<view class="content-box uni-list" v-if="list.length > 0">
					<view class="list-item" v-for="(item, index) in list" :key="index">
						<view class="content">
							<view class="image-box" >
								<image mode="" :src="item.picture" />
							</view>
							<view class="fr-content">
								<view class="text"><text>菜品名称:</text> {{item.food_name}}</view>
								<view class="text"><text>菜品类型:</text> {{item.kinds}}</view>
								<view class="text"><text>第{{item.activity_no}}期推荐菜品</text> </view>
							</view>
						</view>
					</view>
				</view> -->
				<content-none v-else></content-none>
			</view>
			<load-more v-if="currentTabIndex == 1" :loadingType="loadingType" :contentText="contentText"></load-more>
		</view>
	</view>
</template>	

<script>
	import uniRate from "@/components/uni-rate/uni-rate.vue";
	import {queryMyFood,getPrize,queryMealCard,queryMealCardState} from '@/common/api.js';
	import {callbackRequest,callbackRequestNoTip,getStorage,alertTip,callbackRequestCanteen,domain} from '@/common/util.js';
	import loadMore from '@/components/loadMore.vue';
	import contentNone from '@/components/contentNone.vue';
	import jrQrcode from '@/components/wxqrcode/wxqrcode.js';
	      
	export default {
		 
		data() {
			return {
				// userId:getStorage('userInfo').id,
				currentTabIndex:0,
				page:1,
				payFlag:4,
				pageSize:10,
				qrURL:'',
				userId:getStorage('userInfo').id,
				staffId:'',
				putFalg:0,
				amount :0,
				interval1:'',
				interval2:'',
				loadingType:0,//0-loading前；1-loading中；2-没有更多了
				contentText: {
					contentdown: "上拉加载更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				list : [],
				orderId:new Date().getTime(),
				cardId:'',
			}
		},
		components:{
			loadMore,
			contentNone
		},
		onLoad(){
			// this.getFoodList()
			this.initData();
			// this.qrURL = this.createQrCodeImg("12345");
			self = this;
			self.interval1 =setInterval(function(){
				console.log(self.orderId)
				if(self.putFalg == 0){
					self.getMealCar();
				}
			    
			},3000);
			self.interval2 = setInterval(function(){
				if(self.putFalg == 0){
					self.initData();
				}
			},180000);  
		},
		destroyed() {
			self.putFalg = 1;
			clearInterval(self.interval1 );//停止interval
			clearInterval(self.interval2 );//停止interval
			console.log('关闭')
		},
		methods: {
			initData(){
				self = this;
				
				let data = {
					method:queryMealCardState,
					data:{
						userId:self.userId,
						orderId:self.orderId
					}
					
				};
				
				callbackRequestNoTip(domain,data)
				.then(res => {
					console.log(res)
					if(res.data.returnCode == 1){
						
						let result = res.data.returnData;
						// self.amount = result.amout;
						self.payFlag = 0;
						self.show(result.qCode);
						self.staffId = result.staffId;
						this.getMealCar();
					}else if(res.data.returnCode == 1001){
						self.payFlag = 3;
					}
				})
			},
			getMealCar(){
				self = this;
				let data = {
					method:queryMealCard,
					staffId:self.staffId,
					orderId:self.orderId,
				};
				callbackRequestCanteen(data)
				.then(res => {
					if(res.data.returnCode == 0){
						let result = res.data.obj.list[0];
						var falg = res.data.obj.flag;
						self.amount = result.TOTAL_BALANCE;
						 
						if(falg == 1){
							// alertTip("支付成功");
							self.payFlag = 1;
							self.putFalg = 1;
						}
						 
						// self.show(result.qCode);
					}
				})
			},
			show:function(msg){
				 
				this.qrURL = jrQrcode.createQrCodeImg(msg);
				// this.refresh();
			},
			onNavigationBarButtonTap : function(){
				uni.navigateTo({
					url: '../luck-food/luck-food'
				})
			},
			showPrize : function(){
				let params = {
					"method":getPrize,
					data:{
						userId:this.userId
					}
				}
				var fd;
				callbackRequest(params)
				.then(res => {
					if(res.data.returnCode == 1){
						fd = res.data.returnData.list;
						if(res.data.returnData.isPrizeTime == 0){
							alertTip("未到抽奖时间");
							return;
						}
						if(res.data.returnData.isPrize == 1){
							alertTip("你已抽奖，不能重复抽奖");
							return;
						}
						uni.navigateTo({
							url: '../prize/prize?foods=' + encodeURIComponent(JSON.stringify(fd))
						})
					}
					
				})
			},
			colseP : function(){
				this.showp = false;
			}
		},
		onReachBottom() {
			if(this.loadingType !== 0 || this.currentTabIndex == 0){
				return 
			}
			this.loadingType = 1;
			this.page = this.page+1;
			this.getFoodList();
		}
	}
</script>




<style lang="scss">
	@import '@/static/css/common.scss';
	.container{
		min-height:100vh;
		overflow:hidden;
		background: #f8f8f8;
		.banner-box {
			width: 100%;
			height: 240upx;
			position: absolute;
			top: 0;
			left: 0;
			image {
				width: 100%;
				height: 100%;
			}
		
			border-radius: 30upx;
		}
		.main {
			margin: 172upx 40upx 0;
			position: relative;
			z-index: 10;
			.tab-box {
				overflow: hidden;
				border-radius: 10upx 10upx 0 0;
				background: rgba(132, 149, 167, 0.8);
				height: 70upx;
				.tab-item {
					float: left;
					height: 70upx;
					width: 100%;
					font-size: 30upx;
					color: #e5f6ff;
					text-align: center;
					line-height: 70upx;
				}
				.active {
					background: #fff;
					color: #333;
					border-radius: 10upx 10upx 0 0;
					font-weight: bold;
				}
			}
			.content-box{
				background: #fff;
			}
			.prize{
				width: 80rpx;
				height: 80rpx;
				position: fixed;
				right: 30rpx;
				bottom: 80rpx;
			}
		}
		.my-code{
			background: #fff;
			padding-top:80rpx;
			.code-box{
				background: #fff;
				overflow:hidden;
				.code-img{
					display:block;
					width:350rpx;
					height:350rpx;
					margin:70rpx auto 100rpx;
				}
			}
			.money{
				height:60rpx;
				text-align:center;
				line-height:60rpx;
				font-size:28rpx;
			}
			.tip{
				font-size:26rpx;
				color:#666;
				line-height:40rpx;
				padding:0 0 30rpx;
				text-align:center;
			}
		}
	}
	.uni-list{
		background: #fff;
		.list-item{
			border-bottom:10upx solid #f8f8f8;
			padding:30upx 20upx;
			.content{
				overflow:hidden;
				.image-box{
					float:left;
					width:200upx;
					height:200upx;
					image{
						display:block;
						width:100%;
						height:100%;
					}
				}
				.fr-content{
					margin-left:220upx;
					font-size:26upx;
					.text{
						color:#666;
						line-height:40upx;
						margin-bottom:10upx;
						text{
							float:left;
							color:#333;
							padding-right:10upx;
						}
					}
					.status {
						color:red;
						margin-left: 280upx;
						position: absolute;
					}
				}
			}
			.bottom{
				overflow:hidden;
				padding:10upx 20upx 0;
				.num-box{
					float:left;
					font-size:28upx;
					color:#333;
					line-height:40upx;
					padding-top:20upx;
					text{
						color:#5fbf3d;
						padding-left:4upx;
					}
				}
				.vote-btn{
					float:right;
					width:160upx;
					height:60upx;
					background: #5fbf3d;
					font-size:26upx;
					color:#fff;
					text-align:center;
					line-height:60upx;
					border-radius:4upx;
				}
			}
		}
	}
	.raffle {
		width: 600rpx;
		height: 600rpx;
		// background: #00C564;
		// position: absolute;
		// margin-left: 78rpx;
		// margin-top: 300rpx;
		
	}
</style>
