<template>
	<view class="box-pay-success-page">
		<HeaderCom></HeaderCom>
		<view class="status">
			<image src="@/static/pay/success.png" class="status-icon" mode=""></image>
			<view class="status-txt">支付成功</view>
		</view>
		<view class="box">
			<view class="title">我的盲盒</view>
			<scroll-view scroll-x="true" class="scroll-view">
				<view class="mains" v-for="(item,index) in listLength" :key="index">
					<view class="box-shop">
						<image src="@/static/box/box-bg.png" mode="aspectFit" class="box-icon"></image>
					</view>
				</view>
			</scroll-view>
			<view class="open" @click="open">立即开奖</view>
		</view>
		<view class="info">
			<view class="item">
				<view class="label">用户信息</view>
				<view class="value">{{nickName}}</view>
			</view>
			<view class="item">
				<view class="label">盲盒名称</view>
				<view class="value">{{name}}</view>
			</view>
			<view class="item">
				<view class="label">盲盒数量</view>
				<view class="value">{{statusObj[type]}}</view>
			</view>
			<view class="item">
				<view class="label">实付代币</view>
				<view class="value">{{sale}}</view>
			</view>
		</view>
		
		
		<!-- 预加载图片 -->
		<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;" />
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/index/boxPaySuccess"></page-popup>
	</view>
</template>

<script>
	import HeaderCom from '@/pages/components/header.vue'
	import { myMixins } from "@/mixins/mixins.js";
	export default{
		mixins: [myMixins],
		data(){
			return{
				id:"",
				no:"",
				price:"",
				point:"",
				payType:"",
				boxId:'',
				name:"",
				type:'',
				sale:'',
				statusObj: {
					SINGLE: "一发入魂",
					TRIPLE: "三连抽",
					PENTA: "五连抽",
				},
				listLength:1,
				nickName:uni.getStorageSync('box-nickname'),
				
				
				
				// 预加载图片
				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'
				],
			}
		},
		components:{HeaderCom},
		onLoad(opation) {
			this.price = opation.price ? opation.price : 0
			this.point = opation.point ? opation.point : 0
			this.payType = opation.payType ? opation.payType : 'NONE'
			this.id = opation.id
			
			this.no = opation.no
			this.boxId = opation.boxId
			this.name = opation.name
			this.type = opation.type
			this.sale = opation.sale
			if(this.type === 'SINGLE'){
				this.listLength = 1
			}else if(this.type === 'TRIPLE'){
				this.listLength = 3
			}else{
				this.listLength = 5
			}
			this.preloadImages('box')
			this.preloadImages('lihua')	
			this.preloadImages('gx')
			this.preloadImages('grade')	
		},
		methods:{
			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;
					});
				}
			      
			    },
			goBack(){
				uni.navigateBack()
			},
			copy(no) {
				uni.setClipboardData({
					data: no,
				})
			},
			open(){
				uni.redirectTo({
					url: `/pages/index/draw?no=${this.no}&boxId=${this.boxId}&type=${this.listLength}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F5F5F5;
	}
	.box-pay-success-page{
		padding: 112rpx 32rpx 0 32rpx;
		.status{
			// height: 312rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			// justify-content: center;
			padding-top: 16rpx;
			padding-bottom: 80rpx;
			.status-icon{
				width: 144rpx;
				height: 144rpx;
			}
			.status-txt{
				font-weight: bold;
				font-size: 40rpx;
				color: #333333;
				// margin-top: 16rpx;
			}
		}
		.box{
			width: 688rpx;
			height: 392rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			padding: 24rpx;
			.title{
				font-weight: 800;
				font-size: 28rpx;
				color: #000000;
			}
			.scroll-view{
				margin-top: 24rpx;
				white-space: nowrap;
				.mains{
					margin-right: 16rpx;
					width: 160rpx;
					height: 160rpx;
					display: inline-block;
					.box-shop{
						width: 160rpx;
						height: 160rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background-image: url('@/static/new/box-shop.png');
						background-repeat: no-repeat;
						background-size: 100%;
					}
					.box-icon{
						width: 142rpx;
						height: 132rpx;
					}
				}
				
			}
			.open{
				margin-top: 24rpx;
				width: 640rpx;
				height: 96rpx;
				background: linear-gradient( 90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
				border-radius: 8rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.info{
			width: 686rpx;
			height: 384rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			margin-top: 24rpx;
			.item{
				height: 96rpx;
				padding: 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.label{
					font-weight: 500;
					font-size: 28rpx;
					color: #666666;
				}
				.value{
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
				}
			}
		}
	}
</style>