<!-- 抽奖界面 -->
<template>
	<view class="prize-page">
		<view class="nav">
			<image src="@/static/mine/fh.png" mode="" class="nav-back" @click="goBack"></image>
			<view class="nav-title">开奖</view>
			<view class="nav-back"></view>
		</view>
		<scroll-view scroll-y class="scroll-view">
			<view class="box-main">
				<view class="box-main-top">
					<image src="@/static/index/cjt.png" mode="" class="title-img"></image>
				</view>
				<view class="prize-swiper-main">
					<view class="swiper-title">本期盲盒奖池</view>
					<view class="detail">
						<image src="@/static/index/left.png" mode="" class="detail-left-img"></image>
						<swiper class="swiper-content" circular autoplay :interval="500" :duration="1800" :display-multiple-items="4">
							<swiper-item v-for="(item,index) in detailData.items" :key="index">
								<view class="swiper-item" style="margin-right: 10rpx;">
									<view class="swiper-item-img">
										<image :src="item.coverResource.url" mode="" class="swiper-image"></image>
										<!-- <image :src="gradeData[item.grade]" mode="" class="lv-icon"></image> -->
									</view>
									<!-- <view class="shop-name">{{item.name}}</view>
									<view class="shop-price">¥{{item.sellPrice}}</view> -->
								</view>
							</swiper-item>
						</swiper>
						<image src="@/static/index/right.png" mode="" class="detail-right-img"></image>
					</view>
				</view>
			</view>
			
			<view class="main">
				<view class="main-btn">
					<view class="btn-view-open">开奖</view>
				</view>
				<view class="footer">
					<view class="footer-header">
						<view class="header-title">中奖信息</view>
					</view>
					<view class="footer-bg">
						<view class="footer-main">
							<view class="footer-shop-item" v-for="(item,index) in resultList" :key="index">
								<view class="grade">
									<image :src="gradeData[item.grade]" mode="" class="shop-grade"></image>
								</view>
								<image :src="item.productCoverResource.url" mode="aspectFill" class="shop-img"></image>
								<view class="box-detail">
									<view class="box-detail-name">{{item.productName}}</view>
									<view class="info">
										<view class="point">
											<image src="@/static/mine/jf.png" class="point-img"></image>
											{{item.ponit}}
										</view>
										<view class="box-detail-money">
											<text class="box-detail-symbol">¥ </text>
											{{item.salePrice}}
										</view>
									</view>
									<!-- <view class="box-detail-money">
										<text class="box-detail-symbol">¥ </text>
										{{item.salePrice}}
									</view> -->
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<popup-view v-model="resultvisible" mode="center" border-radius="15" zIndex="100" centerBoxBgColor="rgba(255, 255, 255, 0)">
			<view class="result-dlg">
				<view class="result">
					<image src="@/static/prize/dlg-top.png" mode="" class="result-img"></image>
					<image src="@/static/prize/close.png" mode="" class="result-clsoe" @click="close"></image>
					<view class="result-top">温馨提示</view>
					<view class="result-sub">未开完盲盒  请返回继续开盒</view>
				</view>
			</view>
		</popup-view>
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/index/prize"></page-popup>
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	import { boxRecordResultApi,boxesDetail } from '@/API/index.js'
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
	export default{
	mixins: [myMixins],
		data(){
			return{
				statusBarHeight,
				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:true
			}
		},
		onLoad(opation) {
			this.id = opation.boxId
			this.no = opation.no
			this.getDetail()
			
		},
		onHide(){
		},
		methods:{
			goBack(){
				uni.redirectTo({
					url:`/pages/index/detail?id=${this.id}`
				})
			},
			// 获取盲盒详情
			getDetail(){
				boxesDetail({id:this.id}).then(res => {
					if(res.code === 200){
						this.detailData = res.data
						this.getBoxRecordResult(this.no)
					}
				})
			},
			// 获取中奖信息
			getBoxRecordResult(no){
				boxRecordResultApi({no}).then(res => {
					if(res.code === 200){
						this.resultList = res.data
					}else{
						this.$api.msg(res.message)
					}
				})
			},
			close(){
				this.resultvisible = false
			},
		},
		onUnload(){
			
		},
	}
</script>

<style lang="scss" scoped>
	// page{
	// 	background: linear-gradient( 180deg, #FEFEFE 0%, #F3F4F7 100%);
	// }
	.prize-page{
		.nav {
			width: 100%;
			height: 172rpx;
			background-image: url('@/static/index/nav.png');
			background-size: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 23rpx;
			box-sizing: border-box;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 10;
			// padding-bottom: 21rpx;
			// border: 1px solid red;
			.nav-back {
				width: 19rpx;
				height: 34rpx;
			}
		
			.nav-title {
				font-weight: 500;
				font-size: 34rpx;
				color: #000000;
			}
		}
		.scroll-view{
			// height: calc(100vh - 172rpx);
			padding-top: 172rpx;
			.box-main {
				
				width: 100%;
				height: 806rpx;
				background-image: url('@/static/index/ba.png');
				background-size: 100%;
				background-repeat: no-repeat;
				position: relative;
				.box-main-top{
					display: flex;
					align-items: center;
					justify-content: center;
					// padding-top: 30rpx;
					.title-img{
						width: 199rpx;
						height: 90rpx;
						
					}
				}
				.prize-swiper-main{
					width: 663rpx;
					height: 219rpx;
					background: rgba(255,255,255,0.5);
					border-radius: 20rpx;
					margin-left: 44rpx;
					margin-top: 28rpx;
					.swiper-title{
						width: 234rpx;
						height: 46rpx;
						background-image: url('@/static/index/jp.png');
						background-size: 100%;
						background-repeat: no-repeat;
						display: flex;
						align-items: center;
						padding-left: 30rpx;
						font-size: 24rpx;
						color: #FFFFFF;
					}
					.detail{
						margin-top: 13rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.detail-left-img{
							width: 14rpx;
							height: 92rpx;
						}
						.swiper-content{
							width: 600rpx;
							height: 127rpx;
							.swiper-item{
								width: 127rpx;
								height: 127rpx;
								border-radius: 10rpx;
								.swiper-item-img{
									position: relative;
									.swiper-image{
										width: 127rpx;
										height: 127rpx;
										border-radius: 10rpx;
									}
									.lv-icon{}
								}
							}
						}
						.detail-right-img{
							width: 14rpx;
							height: 92rpx;
						}
					}
				}
				
			}
			.main{
				background-image: url('@/static/index/bs.png');
				background-size: 100%;
				background-repeat: no-repeat;
				width: 100%;
				margin-top: -116rpx;
				padding-top: 130rpx;
				.main-btn{
					background-image: url('@/static/index/prizr-btn.png');
					background-repeat: no-repeat;
					background-size: 100%;
					width: 100%;
					height: 188rpx;
					display: flex;
					// align-items: center;
					justify-content: center;
					.btn-view-open{
						width: 354rpx;
						height: 160rpx;
						background-image: url('@/static/index/h.png');
						background-repeat: no-repeat;
						background-size: 100%;
						font-weight: bold;
						font-size: 48rpx;
						color: #DC7C15;
						display: flex;
						justify-content: center;
						padding-top: 28rpx;
						margin-top: -26rpx;
						// z-index: 200;
					}
					.btn-view{
						width: 374rpx;
						height: 160rpx;
						background-image: url('@/static/index/hui.png');
						background-repeat: no-repeat;
						background-size: 100%;
						font-weight: bold;
						font-size: 48rpx;
						color: #464646;
						display: flex;
						justify-content: center;
						padding-top: 28rpx;
						margin-top: -26rpx;
						z-index: 200;
					}
				}
				.footer{
					// margin-top: 30rpx;
					.footer-header{
						display: flex;
						align-items: center;
						justify-content: center;
						.header-title{
							width: 401rpx;
							height: 85rpx;
							background-image: url('@/static/index/f.png');
							background-repeat: no-repeat;
							background-size: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							font-weight: 500;
							font-size: 30rpx;
							color: #FFFFFF;
						}
					}
					.footer-bg{
						background-color: #ffbc74;
						padding-bottom: 40rpx;
						.footer-main{
							padding: 90rpx 19rpx 30rpx 19rpx;
							width: 690rpx;
							background: #FFFFFF;
							border-radius: 20rpx;
							display: grid;
							gap: 33rpx;
							grid-template-rows: 1fr;
							margin: 0px auto;
							margin-left: 30rpx;
							margin-top: -72rpx;
							grid-template-columns: repeat(2, 1fr);
							
							.footer-shop-item{
								width: 307rpx;
								border-radius: 10rpx;
								position: relative;
								.grade{
									z-index: 10;
									position: absolute;
									left: 0;
									top: 0;
									width: 91rpx;
									height: 55rpx;
									border-radius: 10rpx 0 0 0;
									background-image: url('@/static/index/g-bg.png');
									background-size: 100%;
									.shop-grade{
										width: 25rpx;
										height: 29rpx;
										margin-left: 14rpx;
									}
								}
								
								.shop-img{
									width: 307rpx;
									height: 189rpx;
									background: #E2E2E2;
									border-radius: 10px;
								}
								.box-detail {
								
									// margin-left: 16rpx;
									.box-detail-name {
										width: 280rpx;
										font-weight: 500;
										font-size: 32rpx;
										color: #333333;
										// min-height: 84rpx;
										overflow: hidden;
										white-space: nowrap;
										text-overflow: ellipsis;
										// display: -webkit-box;
										// -webkit-box-orient: vertical;
										// -webkit-line-clamp: 2;
									}
								
									.box-detail-price {
										font-size: 24rpx;
										color: #999999;
										text-decoration: line-through;
									}
								
									.info{
										display: flex;
										align-items: center;
										margin-top: 13rpx;
										.point{
											display: flex;
											align-items: center;
											font-weight: bold;
											font-size: 26rpx;
											color: #F0463A;
											.point-img{
												width: 30rpx;
												height: 31rpx;
												margin-right: 10rpx;
											}
										}
										.box-detail-money {
											display: flex;
											align-items: center;
											font-weight: 500;
											font-size: 22rpx;
											color: #888888;
											text-decoration: line-through;
											margin-left: 12rpx;
										
											.box-detail-symbol {
												// font-size: 24rpx;
												// font-weight: 400;
											}
										}
									}
								}
							}
						}
					}
					
				}
			}
		}
		.result-dlg{
			padding: 40rpx 0 ;
			.result{
				width: 600rpx;
				background-image: url('@/static/prize/result.png');
				background-size: 100%;
				background-repeat: no-repeat;
				// background-color: rgba(255, 255, 255, 0);
				position: relative;
				border-radius: 20rpx;
				.result-img{
					width: 128rpx;
					height: 120rpx;
					top: -34rpx;
					left: 233rpx;
					position: absolute;
				}
				.result-clsoe{
					position: absolute;
					top: 11rpx;
					right: 20rpx;
					width: 37rpx;
					height: 38rpx;
					
				}
				.result-top{
					font-weight: 500;
					font-size: 38rpx;
					color: #101010;
					text-align: center;
					padding-top: 118rpx;
				}
				.result-sub{
					font-size: 26rpx;
					color: #666666;
					padding: 32rpx 0 66rpx 0;
					text-align: center;
				}
			}
		}
	}
</style>