<template>
	<view class="myPrize">
		<loadlogo v-if="!loadlogo" />
		<view class="content" v-if="loadlogo" :style="{backgroundColor: bgc || '#ff4444'}">
			<view class="title" @click="gourl">
				<image :src="top || imgfixUrls + '/jpbj.png'" class="tilteimg" style="width: 750upx;height: 300upx;" mode=""></image>
			</view>
			<view class="prizeList">
				<view class="prize-item dis-flex" v-for="(item,index) in prizeList" :key="index">
					<view  style="flex: 0.15;">
						<image :src="item.image " style="height: 70upx;width: 70upx;margin-top: 10upx;" mode=""></image>
					</view>
					<view  style="flex: 0.6;">
						<view class="f-32" style="color: #343434;margin-bottom: 10upx;">
							{{item.title}}
						</view>
						<view class="f-24" style="color: #9A9A9A;">
							<text style="padding-right: 10upx;">{{item.create_time}}</text>
						</view>
					</view>
					<view class="col-f f-24 t-c" style="flex: 0.25;position: relative;" v-if="item.is_get == 1" @click="getordraw(item)">
						<view class="btnred">
							领取
						</view>
					</view>
					<view class="col-f f-24 t-c" style="flex: 0.25;position: relative;"  v-if="item.is_get == 2 && item.type == 5" @click="goUse(item)">
						<view class="btnred">
							去使用
						</view>
					</view>
					<view class="col-f f-24 t-c" style="flex: 0.25;position: relative;" v-if="item.is_get == 3 && item.token_code" @click="govip(item)">
						<view class="btnred">
							去激活
						</view>
					</view>
					<view class="col-f f-24 t-c" style="flex: 0.25;position: relative;" v-if="item.is_get == 4 || (item.is_get == 2 && item.type != 5)">
						<view class="btnfff">
							已使用
						</view>
					</view>
				</view>
			</view>
			<load-more :isMore="isMore"></load-more>
		</view>
		<PopManager :show="ruleShow" :type="'center'" :overlay="'false'" :showOverlay="'false'" @clickmask="ruleShow = false">
			<view class="rulebox t-c">
				<view class="f-32" style="font-weight: 500;color: #FFFEFE;padding-bottom: 50upx;">
					您的激活码是: <text style="color: #ffffff; font-size: 44upx;">{{code}}</text>
				</view>
			</view>
			<view  style="position: relative;height: 40upx;">
				<view  style="border-left: 1upx solid #FFFFFF;height: 50upx;position: absolute;left: 50%;transform: translateX(-50%);">
			
				</view>
			</view>
			<view  style="position: relative;">
				<view class="iconfont icon-roundclose col-f" style="position: absolute;left: 50%;transform: translateX(-50%);"
				 @click="ruleShow = false">
			
				</view>
			</view>
		</PopManager>
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
	import loadMore from '@/components/template/loadmore.vue';
	import Loadlogo from '@/components/template/loadlogo.vue';
	import PopManager from '@/components/template/PopManager';
	export default{
		data(){
			return{
				prizeList:[true,false,true,true,true,false,false],
				page:1,
				count:0,
				isMore:true,
				loadlogo:false,
				TextSubstitution:{},
				top:'',
				ruleShow:false,
				code:'',
				color:'',
				imgstyle:{},
				memberInfo:{},
				card:'have',
				url:''
			}
		},
		components:{
			loadMore,
			Loadlogo,
			PopManager
		},
		onLoad() {
			this.imgstyle = uni.getStorageSync('imgstyle');
			this.TextSubstitution = uni.getStorageSync('TextSubstitution');
			this.memberInfo = uni.getStorageSync('userinfo');
		},
		onShow() {
			this.getprizeList();
		},
		onReachBottom() {
			let _this = this;
			if(_this.count == _this.page) return;
			_this.isMore = false;
			_this.page++;
			this.getprizeList();
		},
		methods:{
			gourl(){
				App.navigationTo({
					url: this.url
				})
			},
			goUse(item){
				App.navigationTo({
					url: `pages/subPages/orderList/orderDetails/orderDetails?orderid=${item.order_id}&plugin=${item.goods_plugin}`
				});
			},
			govip(item){
				let _this = this;
				if (_this.memberInfo.halfcardflag == 0) {
					_this.card = 'nhave';
				} else {
					_this.card = 'have';
				}
				App.navigationTo({
					url: 'pages/mainPages/memberCard/getMembership/getMembership?card=' + _this.card + '&code=' + item.token_code
				});
			},
			lookcode(item){
				this.code = item.token_code;
				this.ruleShow = true;
			},
			getprizeList(){
				let _this = this;
				App._post_form(
					`&p=draw&do=prizeList&page=${_this.page}`,
					{},
					res => {
						console.log(res);
						if(_this.page == 1){
							_this.prizeList = res.data.list;
							_this.count = res.data.total;
							_this.top = res.data.top;
							_this.bgc = res.data.color;
							_this.url = res.data.url;
						}else{
							_this.prizeList = _this.prizeList.concat(res.data.list);
							_this.isMore = true;
						}
					},
					false,
					() => {
						_this.loadlogo = true;
					}
				);
			},
			getordraw(item){
				let _this = this;
				if(item.goods_plugin){
					let _this = this,
						buy_barginData = {
							goods_id: item.goods_id,
							plugin: item.goods_plugin,
							drawid: item.id,
							goods_num: 1
						};
					App.navigationTo({
						url: 'pages/subPages/submitOrder/submitOrder?' + App.urlEncode(buy_barginData)
					});
				}else if(item.token_code){
					_this.code = item.token_code;
				}else{
					App._post_form(
						`&p=draw&do=getPrize&id=${item.id}`,
						{},
						res => {
							uni.showToast({
								title:res.message
							})
						},
						false,
						() => {
							_this.loadlogo = true;
						}
					);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.myPrize{
		.content{
			.title{
				.tilteimg{
					// height: 300upx;
					// width: 750upx;
				}
			}
			.prizeList{
				padding: 30upx;
				.prize-item{
					background-color: #FFFFFF;
					padding: 30upx 30upx;
					border-radius: 10upx;
					margin-bottom: 20upx;
					.btnred{
						width: 100upx;
						height: 44upx;
						background-color: #FF4444;
						line-height: 44upx;
						border-radius: 7upx;
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
						text-align: center;
					}
					.btnfff{
						width: 100upx;
						height: 44upx;
						color: #9A9A9A;
						background-color: #F8F8F8;
						line-height: 44upx;
						border-radius: 7upx;
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
						text-align: center;
					}
				}
			}
		}
		.rulebox {
		background: linear-gradient(to bottom, #FD7238 0%, #FD444A 100%);
		padding: 50upx 30upx;
		width: 65vw;
		border-radius: 20upx;
	}
	}
</style>
<style>
	/* page{
		background-color: #FF4444;
	} */
</style>