<template>
	<view class="card-com" v-show="visible">
		<view class="main">
			<image src="@/static/result/title.png" mode="aspectFit" class="title-icon" v-show="isCard"></image>
			<view class="card" v-show="isCard" :class="{'rare-icon':row.grade === 'RARE','supreme-icon':row.grade === 'SUPREME','hidden-icon':row.grade === 'HIDDEN','normal-icon':row.grade === 'NORMAL'}">
				<image v-show="row.productCoverResource" :src="row.productCoverResource.url" mode="aspectFit" class="shop-img"></image>
				<view class="shop">
					<view class="name">{{row.productAbbreviation}}</view>
				</view>
			</view>
			<view style="display: flex;align-items: center;justify-content: center;">
				<view  class="again-icon" @click="again" v-show="isCard">
					<!-- <template v-if="listLength">来发真的</template>
					<template v-else>再来一次</template> -->
					来发真的
				</view>
			</view>
			<image src="@/static/result/close.png" class="close-icon" mode="aspectFit" @click="close" v-show="isCard"></image>
			
		</view>
	</view>
</template>

<script>
	import BoxCom from './box.vue'
	import LiHuaCom from './lihua.vue'
	import GXCom from './bgGuang.vue'
	export default{
		data(){
			return{
				isBox:true,
				isCard:false,
				isLiHua:false,
				isGx:false,
				btnVisible:false
			}
		},
		props:{
			visible:{
				type:Boolean,
				default:false
			},
			row:{
				type:Object,
				default:() => {}
			},
			resultList:{
				type:Array,
				default:() => []
			},
			listLength:{
				type:Boolean,
				default:false
			},//是否开完
			isActivity:{
				type:String,
				default:''
			},//是否是活动盲盒进入 activity普通活动 runActivity 关于活动
			
		},
		components:{BoxCom,LiHuaCom,GXCom},
		mounted() {
			this.isCard = true
		},
		methods:{
			close(){
				this.$emit('close')
			},
			again(){
				this.$emit('click')
			},
			boxRecrd(){
				uni.$emit('updateTabData', {newData:'newData'});
				uni.switchTab({
					url:`/pages/mine/boxRecrd`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card-com{
		.main{
			width: 100%;
			height: 100vh;
			background-color: rgba(0,0,0,0.7);
			position: fixed;
			top: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			.box-main{
				z-index: 20;
			}
		}
		.title-icon{
			width: 430rpx;
			height: 104rpx;
			display: block;
			margin: 0 auto;
		}
		.card{
			margin-top: 0rpx;
			width: 480rpx;
			height: 680rpx;
			background-repeat: no-repeat;
			background-size: 100%;
			transform-style: preserve-3d;
			animation: flip 0.8s linear;
			z-index: 20;
			position: relative;
			margin-bottom: 30rpx;
			padding-top: 154rpx;
			.shop-img{
				display: block;
				margin: 0 auto;
				width: 350rpx;
				height: 350rpx;
				// border: 1px solid red;
			}
			.shop{
				// position: absolute;
				// top: 578rpx;
				// left: 100rpx;
				margin: 30rpx auto;
				width: 420rpx;
				.name{
					width: 420rpx;
					text-align: center;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-weight: bold;
					font-size: 34rpx;
					// color: #99754D;
				}
				.price{
					width: 420rpx;
					text-align: center;
					margin-top: 12rpx;
					font-size: 34rpx;
					// color: #99754D;
				}
			}
		}
		
			.rare-icon{
				background-image:url('@/static/grade/RARE.png');
				color: #5a2fc8;
			}
			.supreme-icon{
				background-image:url('@/static/grade/SUPREME.png');
				color: #7d451e;
			}
			.hidden-icon{
				background-image:url('@/static/grade/HIDDEN.png');
				color: #2c4dbb;
			}
			.normal-icon{
				background-image:url('@/static/grade/NORMAL.png');
				color:#203456
			}
		@keyframes flip {
		  0% {
		    transform: rotateY(0deg) scale(0);
		  }
		  100% {
		    transform: rotateY(360deg) scale(1);
		  }
		}
		.again-icon{
			width: 228rpx;
			height: 96rpx;
			font-size: 44rpx;
			// display: block;
			// margin-top: -40rpx;
			z-index: 21;
			color: rgba(255,255,255,0.9);
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: YouSheBiaoTiHei; 
			margin: 0 20rpx;
			background-image: url('@/static/new/tip/btn.png');
			background-repeat: no-repeat;
			background-size: 100%;
			position: relative;
			.no-like{
				position: absolute;
				color: #fff;
				font-size: 20rpx;
				font-family: serif;
				bottom: 0;
			}
			// margin: 8rpx auto 8rpx auto;
		}
		.close-icon{
			width: 64rpx;
			height: 64rpx;
			display: block;
			margin: 20rpx auto;
			z-index: 22;
		}
		.lihua{
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;
		}
		.gx{
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1;
		}
	}
	
</style>