<template>
	<view class="draw-page">
		<HeaderCom @click="goBack" type="click"></HeaderCom>
		<view class="header">
			<image src="@/static/box/bqjc.png" mode="" class="title-icon"></image>
			<swiper class="swiper" circular autoplay :interval="500" :duration="1800" :display-multiple-items="4" :disable-touch="true">
				<swiper-item v-for="(item,index) in detailData.items" :key="index" class="swiper-item">
					<image v-if="item.coverResource" :src="item.coverResource.url" mode="aspectFit" class="swiper-image"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="raffle">
			<image src="@/static/box/d-box.png" mode="" class="raffle-box-icon"></image>
			<RaffleCom></RaffleCom>
		</view>
		<view class="open">
			<BtnCom @click="open"></BtnCom>
		</view>
		<view class="headerline">
			<image src="@/static/result/bg-title.png" mode="aspectFit" class="title"></image>
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in openResultList" :key="index">
				<view class="shop">
					<image src="@/static/grade/pt.png" mode="" v-if="item.grade === 'NORMAL'" class="grade-icon"></image>
					<image src="@/static/grade/xy.png" mode="" v-if="item.grade === 'RARE'" class="grade-icon"></image>
					<image src="@/static/grade/yc.png" mode="" v-if="item.grade === 'HIDDEN'" class="grade-icon"></image>
					<image src="@/static/grade/zz.png" mode="" v-if="item.grade === 'SUPREME'" class="grade-icon"></image>
					<image v-if="item.productCoverResource" :src="item.productCoverResource.url" class="shop-img" mode="aspectFit"></image>
				</view>
				<view class="name">{{item.productAbbreviation}}</view>
			</view>
		</view>
		 <!-- @touchmove.stop.prevent -->
		<div v-if="isOpen">
			<template v-if="typeNum === 3">
				<OpenFreeBoxThreeCom @click="again" @close="closeAgain" :visible="isOpen" :row="rowData" :resultList="resultList" :listLength="openResultIndex === typeNum" :isActivity="isActivity" :isNormal="isNormal"></OpenFreeBoxThreeCom>
			</template>
			<template v-else-if="typeNum === 5">
				<OpenFreeBoxFiveCom @click="again" @close="closeAgain" :visible="isOpen" :row="rowData" :resultList="resultList" :listLength="openResultIndex === typeNum" :isActivity="isActivity" :isNormal="isNormal"></OpenFreeBoxFiveCom>
			</template>
			<template v-else>
				<OpenFreeBoxCom @click="again" @close="closeAgain" :visible="isOpen" :row="rowData" :resultList="resultList" :listLength="openResultIndex === typeNum" :isActivity="isActivity" :isNormal="isNormal"></OpenFreeBoxCom>
			</template>
			
		</div>
		<!-- 弹窗 -->
		<view class="dlg" v-if="activityShow" @click="activityClose">
			<view class="activity-main" @click.stop="">
				<image src="@/static/new/xsmh.png" mode="" class="dlg-title"></image>
				<image src="" mode="aspectFit" class="activity-img" @click="goActivityDetail"></image>
				<image src="@/static/new/box/hdgm.png" mode="aspectFit" class="now-buy" @click="goActivityPre"></image>
				<image src="@/static/order/close.png" mode="" class="dlg-close-img" @click="activityClose"></image>
			</view>
		</view>
		
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/index/drawFree"></page-popup>
		
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	import { boxRecordResultApi,boxesDetail,openListApi,noOpenListApi,freeBoxApi } from '@/API/index.js'
	import RaffleCom from './components/raffle.vue'
	import BtnCom from './components/btn'
	import OpenFreeBoxCom from './components/openFreeBox.vue'
	import OpenFreeBoxThreeCom from './components/openFreeBoxThree.vue'
	import OpenFreeBoxFiveCom from './components/openFreeBoxFive.vue'
	import HeaderCom from '@/pages/components/header.vue'
	export default{
	mixins: [myMixins],
		data(){
			return{
				id:"",//盲盒详情id
				detailData:{
					items:[],
				},//商品详情
				
				gradeData:{
					NORMAL:'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/home/bai.png',
					HIDDEN:'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/home/lan.png',
					RARE: 'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/home/zi.png',
					SUPREME:'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/home/huang.png',
				},
				icon:{
					NORMAL:'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/new-icon-1/lv1.png',//普通款
					HIDDEN:'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/new-icon-1/lv2.png',//隐藏款
					RARE:'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/new-icon-1/lv3.png',//稀有款
					SUPREME:'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/new-icon-1/lv4.png',//至尊款
				},
				bg:{
					NORMAL:'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/new-icon-1/bg-lv1.png',//普通款
					HIDDEN:'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/new-icon-1/bg-lv2.png',//隐藏款
					RARE:'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/new-icon-1/bg-lv3.png',//稀有款
					SUPREME:'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/new-icon-1/bg-lv4.png',//至尊款
				},
				detailData:{},
				no:"",
				resultList:[],
				resultvisible:false,
				isOpen:false,
				typeNum:0,//几连抽
				openResultList:[],//
				openResultIndex:0,
				rowData:{},
				
				gradeList:[
					'static/result/NORMAL.png','static/result/HIDDEN.png','static/result/RARE.png','static/result/SUPREME.png'
				],
				bgList:['static/box/draw.png'],
				list:[],
				noOpen:'',
				activityShow:false,
				isActivity:'',
				isNormal:true,
				
				listLengthObj: {
					SINGLE: 1,
					TRIPLE: 3,
					PENTA: 5
				},
				type:''
			}
		},
		components:{HeaderCom,RaffleCom,BtnCom,OpenFreeBoxCom,OpenFreeBoxThreeCom,OpenFreeBoxFiveCom},
		onLoad(opation) {
			this.id = opation.boxId
			this.type = opation.type
			this.typeNum = this.listLengthObj[opation.type]
			this.getDetail()
		},
		mounted() {
			// this.preloadImages('box')
			// this.preloadImages('lihua')	
			// this.preloadImages('gx')
			// this.preloadImages('grade')	
			
		},
		methods:{
			
			// 获取盲盒详情
			getDetail(){
				boxesDetail({id:this.id}).then(res => {
					if(res.code === 200){
						this.detailData = res.data
						freeBoxApi({boxId:this.id,type:this.type}).then(result => {
							uni.hideLoading()
							if(result.code === 200){
								this.resultList = result.data
								console.log("resultListresultList:",this.resultList)
								this.rowData = this.resultList[this.openResultIndex]
								this.isOpen = true
								// if(this.typeNum > this.openResultList.length){
								// 	this.openResultList.push(this.resultList[this.openResultIndex])
								// 	this.openResultIndex += 1
								// }
								this.openResultList = result.data
							}else{
								this.$api.msg(result.message)
							}
						}).catch(err => {
							uni.hideLoading()
						})
					}
				})
			},
			activityClose() {
				this.activityShow = false
			},
			goActivityPre(){
				
			},
			open(){
				this.$api.msg('已开完所有盲盒')
				return
				// if(this.openResultIndex === this.typeNum){
				// 	this.$api.msg('已开完所有盲盒')
				// 	return
				// }
				// if(this.noOpen){
				// 	boxesDetail({id:this.resultList[this.openResultIndex].boxId}).then(res => {
				// 		if(res.code === 200){
				// 			this.detailData = res.data
				// 		}
				// 	})
				// }
				// this.rowData = this.resultList[this.openResultIndex]
				// this.isOpen = true
				// setTimeout(() => {
				// 	// this.upDateOpenList(this.resultList[this.openResultIndex].id)
				// 	if(this.typeNum > this.openResultList.length){
				// 		this.openResultList.push(this.resultList[this.openResultIndex])
				// 		this.openResultIndex += 1
				// 	}
				// },3500)
			},
			again(){
				uni.$emit('updateTabData', {'boxId':this.id,type:'PENTA'});
				uni.switchTab({
					url:`/pages/index/new-index`
				})
				// this.isOpen = false
				// if(this.openResultIndex === this.typeNum){
				// 	uni.$emit('updateTabData', {'boxId':this.id,type:'SINGLE'});
				// 	uni.switchTab({
				// 		url:`/pages/index/new-index`
				// 	})
				// 	if(this.isActivity == 'activity'){
				// 		let appid = ''
				// 		try{
				// 			appid = uni.getStorageSync('box-appid')
				// 		}catch(e){
				// 			//TODO handle the exception
				// 		}
				// 		console.log("appid:",appid)
				// 		if(appid == '1773996802999717888'){
				// 			// 皮皮
				// 			uni.redirectTo({
				// 				url:`/pages/index/boxDetail?id=1788477417849921538`
				// 			})
				// 		}else if(appid == '1780809212570030080'){
				// 			// 最右
				// 			uni.redirectTo({
				// 				url:`/pages/index/boxDetail?id=1788516794714071041`
				// 			})
				// 		}else{
				// 			uni.redirectTo({
				// 				url:`/pages/index/boxDetail?id=1788516794714071041`
				// 			})
				// 		}
						
				// 	}else if(this.isActivity == 'runActivity'){
				// 		uni.redirectTo({
				// 			url:`/pages/index/activity`
				// 		})
				// 	}
					
					
				// 	return
				// }
				// if(this.noOpen){
				// 	boxesDetail({id:this.resultList[this.openResultIndex].boxId}).then(res => {
				// 		if(res.code === 200){
				// 			this.detailData = res.data
				// 		}
				// 	})
				// }
				// setTimeout(() => {
				// 	this.isOpen = true
				// },500)
				// this.rowData = this.resultList[this.openResultIndex]
				// // setTimeout(() => {
				// 	// this.upDateOpenList(this.resultList[this.openResultIndex].id)
				// 	if(this.typeNum > this.openResultList.length){
				// 		this.openResultList.push(this.resultList[this.openResultIndex])
				// 		this.openResultIndex += 1
				// 	}
				// },3500)
			},
			closeAgain(){
				this.isOpen = false
				this.activityShow = false
			},
			goBack(){
				// if(this.openResultIndex !== this.typeNum){
				// 	this.$api.msg('还有未开盲盒')
				// 	return
				// }
				uni.$emit('updateTabData', {newData:'newData'});
				uni.navigateBack()
			},
			// 获取中奖信息
			getBoxRecordResult(no){
				boxRecordResultApi({no}).then(res => {
					if(res.code === 200){
						this.resultList = res.data
						this.rowData = this.resultList[this.openResultIndex]
						console.log(this.rowData)
						this.isOpen = true
						if(this.typeNum > this.openResultList.length){
							this.openResultList.push(this.resultList[this.openResultIndex])
							this.openResultIndex += 1
						}
					}else{
						this.$api.msg(res.message)
					}
				})
			},
			close(){
				this.resultvisible = false
			},
		},
		onUnload(){
			
		},
	}
</script>

<style lang="scss" scoped>
	page{
		
	}
	.draw-page{
		min-height: 100vh;
		background-image: url('@/static/box/draw.png');
		// background-repeat: no-repeat;
		background-size: 100%;
		padding-top: 112rpx;
		.header{
			width: 670rpx;
			height: 192rpx;
			background-image: url('@/static/box/header.png');
			background-repeat: no-repeat;
			background-size: 100%;
			margin-left: 40rpx;
			padding: 0 16rpx;
			.title-icon{
				width: 168rpx;
				height: 38rpx;
				display: block;
				margin: 0 auto;
			}
			.swiper{
				width: 100%;
				height: 120rpx;
				.swiper-item{
					width: 160rpx;
					height: 120rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-image: url('@/static/box/bg-jp.png');
					background-size: 100%;
					background-repeat: no-repeat;
					.swiper-image{
						width: 88rpx;
						height: 112rpx;
					}
				}
				
			}
		}
		.raffle{
			padding-top: 308rpx;
			position: relative;
			.raffle-box-icon{
				position: absolute;
				width: 360rpx;
				height: 264rpx;
				top: 112rpx;
				left: 202rpx;
			}
		}
		.open{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: -40rpx;
		}
		.headerline{
			width: 100%;
			height: 208rpx;
			background-image: url('@/static/result/title-bg.png');
			background-size: 100%;
			background-repeat: no-repeat;
			margin-top: 70rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.title{
				width: 356rpx;
				height: 88rpx;
			}
		}
		.list {
			display: grid;
			gap: 22rpx;
			grid-template-rows: 1fr;
			margin: 0px auto;
			grid-template-columns: repeat(2, 1fr);
			padding: 24rpx;
			border-radius: 8rpx;
		
			.item {
				width: 340rpx;
				// height: 436rpx;
				padding-bottom: 12rpx;
				background-color: #fff;
				border-radius: 8rpx 8rpx 0 0;
		
				.shop {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 340rpx;
					height: 240rpx;
					background-image: url('@/static/new/card-shop.png');
					background-repeat: no-repeat;
					background-size: 100%;
					// background: linear-gradient(180deg, rgba(98, 126, 153, 0) 0%, #627E99 100%), #E6EBF0;
					border-radius: 8rpx 8rpx 0px 0px;
					position: relative;
					.grade-icon{
						position: absolute;
						top: 0;
						right: 0;
						width: 104rpx;
						height: 72rpx;
					}
		
					.shop-img {
						width: 192rpx;
						height: 196rpx;
					}
				}
		
				.name {
					width: 304rpx;
					min-height: 50rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 28rpx;
					color: #000000;
					margin: 16rpx 0 0 16rpx;
				}
		
				.point {
					margin: 8rpx 0 0 16rpx;
					display: flex;
					align-items: center;
					font-weight: 800;
					font-size: 28rpx;
					color: #000000;
					.point-icon {
						margin-right: 8rpx;
						width: 40rpx;
						height: 40rpx;
					}
				}
		
				.price {
					margin-left: 16rpx;
					height: 44rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
					display: flex;
					align-items: center;
					margin-top: 8rpx;
					// text-decoration: line-through;
					.point-icon{
						width: 48rpx;
						height: 48rpx;
						margin-right: 8rpx;
					}
				}
			}
		}
		
		// @keyframes flip {
		//   0% {
		//     transform: rotateY(0deg) scale(0);
		//   }
		//   10% {
		//     transform: rotateY(36deg) scale(0.1);
		//   }
		//   20% {
		//     transform: rotateY(72deg) scale(0.2);
		//   }
		//   30% {
		//     transform: rotateY(108deg) scale(0.3);
		//   }
		//   40% {
		//     transform: rotateY(144deg) scale(0.4);
		//   }
		//   50% {
		//     transform: rotateY(180deg) scale(0.5);
		//   }
		//   60% {
		//     transform: rotateY(216deg) scale(0.6);
		//   }
		//   70% {
		//     transform: rotateY(252deg) scale(0.7);
		//   }
		//   80% {
		//     transform: rotateY(288deg) scale(0.8);
		//   }
		//   90% {
		//     transform: rotateY(324deg) scale(0.9);
		//   }
		//   100% {
		//     transform: rotateY(360deg) scale(1);
		//   }
		// }
	}
	.dlg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;
		.activity-main{
			flex-direction: column;
			width: 480rpx;
			height: 608rpx;
			background-image: url('@/static/new/box/hdtc.png');
			background-repeat: no-repeat;
			background-size: 100%;
			.dlg-title{
				display: block;
				margin: 0 auto;
				width: 148rpx;
				height: 52rpx;
			}
			.activity-img{
				width: 448rpx;
				height: 440rpx;
				border-radius: 20rpx;
				display: block;
				margin: 20rpx auto;
				z-index: 2;
			}
			.now-buy{
				width: 348rpx;
				// height: 120rpx;
				display: block;
				margin: -120rpx auto 0 auto;
				z-index: 1;
			}
			.dlg-close-img {
				display: block;
				width: 64rpx;
				height: 64rpx;
				z-index: 9999;
				margin: -120rpx auto 0 auto;
			}
		}
	}
</style>