<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 v-if="item.productCoverResource" :src="item.productCoverResource.url" class="shop-img" mode="aspectFit"></image>
				</view>
				<view class="name">{{item.productAbbreviation}}</view>
				<!-- <view class="price">
					<image src="@/static/an/point.gif" mode="aspectFit" class="point-icon"></image>{{item.salePrice}}
				</view> -->
			</view>
		</view>
		<div v-if="isOpen">
			<OpenBoxCom @click="again" @close="closeAgain" :visible="isOpen" :row="rowData" :listLength="openResultIndex === typeNum" :isActivity="isActivity" :isNormal="isNormal"></OpenBoxCom>
		</div>
		
		
		
		<!-- 预加载图片 -->
		<!-- <img v-for="(imgSrc, index) in boxList" :key="index" :src="imgSrc" style="display: none;" />
		<img v-for="(imgSrc, index) in liHuaList" :key="index" :src="imgSrc" style="display: none;" />
		<img v-for="(imgSrc, index) in gxList" :key="index" :src="imgSrc" style="display: none;" />
		<img v-for="(imgSrc, index) in gradeList" :key="index" :src="imgSrc" style="display: none;" /> -->
		
		
		<!-- 弹窗 -->
		<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="@/static/new/mryh.png" mode="" class="dlg-title" v-if="activityDetail.source === 'PREFERENTIAL_DAY'"></image>
				<image src="@/static/new/xsmh.png" mode="" class="dlg-title" v-if="activityDetail.source === 'ROOKIE'"></image>
				<image v-if="activityDetail.coverResource" :src="activityDetail.coverResource.url" mode="aspectFit" class="activity-img" @click="goActivityDetail"></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/draw"></page-popup>
		
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	import { boxRecordResultApi,boxesDetail,openListApi,noOpenListApi } from '@/API/index.js'
	import RaffleCom from './components/raffle.vue'
	import BtnCom from './components/btn'
	import OpenBoxCom from './components/openBox.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:{},
				
				
				
				// // 预加载图片
				boxList: ['static/an/box/1.png', 'static/an/box/2.png', 'static/an/box/3.png', 'static/an/box/4.png',
					'static/an/box/5.png', 'static/an/box/6.png', 'static/an/box/7.png', 'static/an/box/8.png',
					'static/an/box/9.png', 'static/an/box/10.png', 'static/an/box/11.png', 'static/an/box/12.png',
					'static/an/box/13.png', 'static/an/box/14.png', 'static/an/box/15.png', 'static/an/box/16.png',
					'static/an/box/17.png', 'static/an/box/18.png', 'static/an/box/19.png', 'static/an/box/20.png',
					'static/an/box/21.png', 'static/an/box/22.png', 'static/an/box/23.png', 'static/an/box/24.png',
					'static/an/box/25.png', 'static/an/box/26.png', 'static/an/box/27.png', 'static/an/box/28.png',
					'static/an/box/29.png', 'static/an/box/30.png', 'static/an/box/31.png', 'static/an/box/32.png',
					'static/an/box/33.png', 'static/an/box/34.png', 'static/an/box/35.png', 'static/an/box/36.png',
					'static/an/box/37.png', 'static/an/box/38.png', 'static/an/box/39.png', 'static/an/box/40.png',
					'static/an/box/41.png', 'static/an/box/42.png', 'static/an/box/43.png', 'static/an/box/44.png',
					'static/an/box/45.png', 'static/an/box/46.png', 'static/an/box/47.png', 'static/an/box/48.png',
					'static/an/box/49.png', 'static/an/box/50.png', 'static/an/box/51.png', 'static/an/box/52.png',
					'static/an/box/53.png', 'static/an/box/54.png', 'static/an/box/55.png', 'static/an/box/56.png',
					'static/an/box/57.png', 'static/an/box/58.png', 'static/an/box/59.png', 'static/an/box/60.png',
					'static/an/box/61.png', 'static/an/box/62.png', 'static/an/box/63.png', 'static/an/box/64.png',
					'static/an/box/65.png', 'static/an/box/66.png', 'static/an/box/67.png', 'static/an/box/68.png',
					'static/an/box/69.png', 'static/an/box/70.png', 'static/an/box/71.png', 'static/an/box/72.png'
				],
				liHuaList: ['static/an/lihua/1.png', 'static/an/lihua/2.png', 'static/an/lihua/3.png',
					'static/an/lihua/4.png', 'static/an/lihua/5.png', 'static/an/lihua/6.png', 'static/an/lihua/7.png',
					'static/an/lihua/8.png', 'static/an/lihua/9.png', 'static/an/lihua/10.png',
					'static/an/lihua/11.png', 'static/an/lihua/12.png', 'static/an/lihua/13.png',
					'static/an/lihua/14.png', 'static/an/lihua/15.png', 'static/an/lihua/16.png',
					'static/an/lihua/17.png', 'static/an/lihua/18.png', 'static/an/lihua/19.png',
					'static/an/lihua/20.png', 'static/an/lihua/21.png', 'static/an/lihua/22.png',
					'static/an/lihua/23.png', 'static/an/lihua/24.png', 'static/an/lihua/25.png',
					'static/an/lihua/26.png', 'static/an/lihua/27.png', 'static/an/lihua/28.png',
					'static/an/lihua/29.png', 'static/an/lihua/30.png', 'static/an/lihua/31.png',
					'static/an/lihua/32.png', 'static/an/lihua/33.png', 'static/an/lihua/34.png',
					'static/an/lihua/35.png', 'static/an/lihua/36.png', 'static/an/lihua/37.png',
					'static/an/lihua/38.png', 'static/an/lihua/39.png', 'static/an/lihua/40.png',
					'static/an/lihua/41.png', 'static/an/lihua/42.png', 'static/an/lihua/43.png'
				],
				gxList: ['static/an/g/1.png', 'static/an/g/2.png', 'static/an/g/3.png', 'static/an/g/4.png',
					'static/an/g/5.png', 'static/an/g/6.png', 'static/an/g/7.png', 'static/an/g/8.png',
					'static/an/g/9.png', 'static/an/g/10.png', 'static/an/g/11.png', 'static/an/g/12.png',
					'static/an/g/13.png', 'static/an/g/14.png', 'static/an/g/15.png', 'static/an/g/16.png',
					'static/an/g/17.png', 'static/an/g/18.png', 'static/an/g/19.png', 'static/an/g/20.png',
					'static/an/g/21.png', 'static/an/g/22.png', 'static/an/g/23.png', 'static/an/g/24.png',
					'static/an/g/25.png'
				],
				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
			}
		},
		components:{HeaderCom,RaffleCom,BtnCom,OpenBoxCom},
		onLoad(opation) {
			try{
				this.isNormal = opation.isNormal
			}catch(e){
				//TODO handle the exception
			}
			if(opation.isActivity){
				this.isActivity = opation.isActivity
			}
			if(opation.noOpen){
				this.noOpen = opation.noOpen
				this.getNoOpenList()
			}else{
				this.id = opation.boxId
				this.no = opation.no
				this.typeNum = Number(opation.type)
				this.getDetail()
			}
		},
		mounted() {
			// this.preloadImages('box')
			// this.preloadImages('lihua')	
			// this.preloadImages('gx')
			// this.preloadImages('grade')	
			
		},
		methods:{
			activityClose() {
				this.activityShow = false
			},
			goActivityPre(){
				
			},
			preloadImages(type) {
				if(type === 'box'){
					this.boxList.forEach((imgSrc) => {
					  const img = new Image();
					  img.src = imgSrc;
					});
				}else if(type === 'lihua'){
					this.liHuaList.forEach((imgSrc) => {
					  const img = new Image();
					  img.src = imgSrc;
					});
				}else if(type === 'gx'){
					this.gxList.forEach((imgSrc) => {
					  const img = new Image();
					  img.src = imgSrc;
					});
				}else if(type === 'grade'){
					
					this.gradeList.forEach((imgSrc) => {
					  const img = new Image();
					  img.src = imgSrc;
					});
				}
			      
			    },
			// 获取是否有开奖记录
			getNoOpenList(){
				noOpenListApi().then(res => {
					console.log(res)
					if(res.code === 200){
						this.resultList = res.data
						this.typeNum = this.resultList.length
						this.rowData = this.resultList[this.openResultIndex]
						console.log(this.rowData)
						this.isOpen = true
						boxesDetail({id:this.resultList[this.openResultIndex].boxId}).then(res => {
							if(res.code === 200){
								this.detailData = res.data
							}
						})
						setTimeout(() => {
							console.log(this.resultList[this.openResultIndex].id)
							this.upDateOpenList(this.resultList[this.openResultIndex].id)
							if(this.typeNum > this.openResultList.length){
								this.openResultList.push(this.resultList[this.openResultIndex])
								this.openResultIndex += 1
							}
						},3500)
					}else{
						this.$api.msg(res.message)
					}
				}).catch(err => {
					
				})
			},
			open(){
				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(){
				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.switchTab({
				// 	url:`/pages/index/new-index`
				// })
				uni.navigateBack()
			},
			// 获取盲盒详情
			getDetail(){
				boxesDetail({id:this.id}).then(res => {
					if(res.code === 200){
						this.detailData = res.data
						console.log("this.detailData:",this.detailData)
						this.getBoxRecordResult(this.no)
					}
				})
			},
			// 获取中奖信息
			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
						
						
						// setTimeout(() => {
						// 	console.log(this.resultList[this.openResultIndex].id)
						// 	this.upDateOpenList(this.resultList[this.openResultIndex].id)
						// 	if(this.typeNum > this.openResultList.length){
						// 		this.openResultList.push(this.resultList[this.openResultIndex])
						// 		this.openResultIndex += 1
						// 	}
						// },3500)
						
						
						// setTimeout(() => {
							// console.log("aaaa")
							this.upDateOpenList(this.resultList[this.openResultIndex].id)
							if(this.typeNum > this.openResultList.length){
								this.openResultList.push(this.resultList[this.openResultIndex])
								this.openResultIndex += 1
							}
						// },100)
						// setTimeout(() => {
						// 	// console.log("aaaa")
						// 	this.upDateOpenList(this.resultList[this.openResultIndex].id)
						// 	if(this.typeNum > this.openResultList.length){
						// 		this.openResultList.push(this.resultList[this.openResultIndex])
						// 		this.openResultIndex += 1
						// 	}
						// },3500)
					}else{
						this.$api.msg(res.message)
					}
				})
			},
			// 上传已开奖记录ID
			upDateOpenList(ids){
				openListApi({ids}).then(res => {
					console.log(res)
					if(res.code === 200){
						
					}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;
		
					.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>