<template>
	<view class="lotteryCode">
		<view class="vtbs">
			<v-tabs
				:lineScale="0.3" 
				:lineRadius="'4px 4px 0px 0px'" 
				:lineHeight="'6rpx'"
				:height="'100rpx'"
				:fontSize="'30rpx'" 
				:paddingItem="'40rpx 22rpx 40rpx'" 
				:activeColor="'#ff4444'" 
				:activeFontSize="'30rpx'"
				:lineColor="'#ff4444'"
				v-model="sort" 
				@change="changeTab"
				:scroll="false"
				:bold="false"
				:tabs="['全部','未开奖','已中奖','未中奖']"></v-tabs>
		</view>
		<view class="listBox" v-if="codeList && codeList.length > 0">
			<view class="codeItem" v-for="(item,index) in codeList" :key="index" @click="drawIndex(item)">
				<view class="codeDetail">
					<view class="f-32 f-w">
						<view class="codename">
						{{item.drawname}}
						</view>
						
						<view class="codenum"
						:style="{background: 'url('+ imgfixUrls + 'lotteryImg/jinkuang.png)',backgroundSize: '100% 100%',backgroundRepeat: 'no-repeat'}">
							{{item.codenum}}
						</view>
					</view>
					<view class="t-r flex-box">
						<view class="codeState">
							<view class="stateText" v-if="item.status == 0">
								未开奖
							</view>
							<view class="stateText" style="color: #999999;" v-else-if="item.status == 1">
								未中奖
							</view>
							<view  v-else-if="item.status == 2">
								<image :src="imgfixUrls + 'lotteryImg/yone.png'" mode=""></image>
							</view>
							<view  v-else-if="item.status == 3">
								<image :src="imgfixUrls + 'lotteryImg/ytwo.png'" mode=""></image>
							</view>
							<view  v-else>
								<image :src="imgfixUrls + 'lotteryImg/ythree.png'" mode=""></image>
							</view>
							
						</view>
						<view class="buyingBtn">
							{{item.title}}
						</view>
					</view>
				</view>
				<view class="receiveAward" v-if="item.status != 1 && item.status != 0">
					<image :src="item.goodlogo" mode=""></image>
					<view class="prize">
						{{item.goodname}}
					</view>
					<view class="getBtn" v-if="item.is_get == 0" @click.stop="getBoom(index,item.id)">
						领取奖品
					</view>
					<view class="onGetBtn" v-else>
						已领奖
					</view>
				</view>
			</view>
			<load-more :isMore="loadingMore"></load-more>
		</view>
		<view  v-else>			
		<image style="width: 750upx;height: 560upx;" :src="imgfixUrls + 'homemakingImg/wushuju.png'" mode=""></image>		
		</view>
		<TabBars :tabBarAct="0" />
	</view>
</template>

<script>
	import App from "@/common/js/app.js";
	// #ifdef H5
	import wxApi from '@/common/js/wxApi.js';
	//#endif
	import vTabs from '@/components/v-tabs/v-tabs.vue';
	import TabBars from '@/components/template/tabBar';
	import loadMore from '@/components/template/loadmore.vue';
	export default{
		components:{
			vTabs,
			loadMore,
			TabBars
		},
		data(){
			return{
				sort:0,
				page:1,
				codeList:[],
				pagetotal:1,
				loadingMore:true,
				pluginList:[
					{
						type:'rush',
						title:'抢购'
					},
					{
						type:'groupon',
						title:'团购'
					},
					{
						type:'fightgroup',
						title:'拼团'
					},
					{
						type:'coupon',
						title:'卡券'
					},
					{
						type:'bargain',
						title:'砍价'
					},
					{
						type:'activity',
						title:'活动'
					},
					{
						type:'payonline',
						title:'买单'
					},
					{
						type:'citydelivery',
						title:'配送'
					},
					{
						type:'drawvideo',
						title:'视频'
					},
					{
						type:'drawshare',
						title:'分享'
					},
					{
						type:'wlfightgroup',
						title:'拼团'
					}
				]
			}
		},
		onLoad(e) {
			if(e.type){
				this.sort = e.type;
			}
			this.getCodeList();
		},
		methods:{
			drawIndex(item){
				App.navigationTo({					url: `pages/subPages2/lottery/lotteryIndex/lotteryIndex?recordid=${item.recordid}&id=${item.drawid}`				});
			},
			changeTab(e){
				this.sort = e;
				this.page = 1;
				this.getCodeList();
			},
			getBoom(i,id){
				let _this = this;
				App._post_form('&p=luckydraw&do=getDrawGoods', {
					id:id
				}, res => {
					if(JSON.stringify(res.data) == '[]'){
						uni.showToast({
							icon:'success',
							title:'领取成功'
						})
						_this.codeList[i].is_get = '1';
					}else{
						let buy_barginData = {
								goods_id: res.data.goodsid,
								plugin: res.data.plugin,
								luckydrawid:id,
								goods_num: 1
							};
						App.navigationTo({
							url: 'pages/subPages/submitOrder/submitOrder?' + App.urlEncode(buy_barginData)
						});
					}
					
				}, false, () => {
					// _this.loadlogo = false;
				})
			},
			getCodeList(flag){
				let _this = this;
				App._post_form('&p=luckydraw&do=getCodeList', {
					status:_this.sort,
					page:this.page
				}, res => {
					if(flag){
						this.codeList = this.codeList.concat(res.data.list);
						this.loadingMore = true;
					}else{
						this.codeList = res.data.list;
						this.pagetotal = res.data.pagetotal;
					}
					_this.codeList.map((item,index)=>{
						_this.pluginList.map((items,indess)=>{
							if(item.plugin == items.type){
								item.title = items.title;
							}
						})
					})
				}, false, () => {
					// _this.loadlogo = false;
				})
			},
		},
		onReachBottom() {
			if(this.page == this.pagetotal) return
			this.loadingMore = false;
			this.page++;
			this.getCodeList(true);
		},
	}
</script>

<style scoped lang="scss">
	.lotteryCode{
		padding-bottom: 120upx;
		.vtbs{
			background-color: #ffffff;
		}
		.listBox{
			margin: 30upx;
			.codeItem{
				padding: 20upx;
				border-radius: 20upx;
				margin-bottom: 20upx;
				background-color: #ffffff;
				.codeDetail{
					display: flex;
					.codenum{
						width: 136upx;
						height: 56upx;
						font-size: 24upx;
						line-height: 56upx;
						text-align: center;
						color: #AB815D;
						margin-top: 30upx;
						background-size: 100% 100%;
						background-repeat: no-repeat;
					}
					.codename{
						width: 480upx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}
					.codeState{
						font-size: 28upx;
						color: #ff4444;
						image{
							width: 80upx;
							height: 80upx;
							border-radius: 50%;
						}
						.stateText{
							margin-bottom: 40upx;
						}
					}
					.buyingBtn{
						width: 70upx;
						height: 34upx;
						line-height: 34upx;
						background-color: #eeeeee;
						text-align: center;
						color: #999999;
						font-size: 20upx;
						border-radius: 10upx;
						float: right;
						margin-top: 15upx;
					}
				}
				.receiveAward{
					margin-top: 20upx;
					border-top: 1upx solid #eeeeee;
					padding-top: 20upx;
					display: flex;
					image{
						width: 60upx;
						height: 60upx;
						margin-right: 20upx;
					}
					.prize{
						flex: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						font-size: 28upx;
						line-height: 56upx;
					}
					.getBtn{
						width: 120upx;
						height: 50upx;
						line-height: 50upx;
						background-color: #ff4444;
						color: #ffffff;
						text-align: center;
						font-size: 24upx;
						border-radius: 10upx;
					}
					.onGetBtn{
						width: 120upx;
						height: 50upx;
						line-height: 50upx;
						background-color: #eeeeee;
						color: #999999;
						text-align: center;
						font-size: 24upx;
						border-radius: 10upx;
					}
				}
			}
		}
	}
</style>
<style>
	page{
		background-color: #f8f8f8;
	}
</style>
