<template>
	<view>
		<uni-popup ref="resPop" type="center" mask-background-color="rgba(0,0,0,0.8)">
			<view class="res-pop common_bg column center" @click="close">
				<view class="res-pop-hd"></view>
				<scroll-view class="res-pop-bd" scroll-y>
					<view class="res-list">
						<view class="res-item" v-for="(item, i) in prizeList" :key="i" @click.stop="onPrizeClick(item)">
							<view class="pic center">
								<image :src="item.goodslist_imgurl" lazy-load></image>
								<view class="type-tag center"
									:style="{ backgroundColor: getBgColor(item.shang_title), color: getTextColor(item.shang_title) }">
									{{ item.shang_title }}
								</view>
								<view class="num center">{{ item.prize_num || '1' }}</view>
								<view v-if="item.doubling > 1" class="yu-tag-text ziti log-multiple-tag" style="">
									x{{ item.doubling }}</view>
								<view v-if="item.is_lingzhu > 0" class="yu-tag-text ziti log-lingzhu-tag" style="">
								</view>
								<view v-if="item.goodslist_type == 4||item.parent_goods_list_id != 0"
									class="yu-tag-text ziti baoxiang-tag" style="">
								</view>
							</view>
							<view class="title hang1" style="text-align: center;">
								<text> {{ item.goodslist_title }}</text>
							</view>
						</view>
					</view>
				</scroll-view>

				<view class="res-pop-ft">
					<view class="btn-list">
						<view class="ft-btn common_bg justify-center center" :style="{
							backgroundImage: `url(${$img1('common/quhegui.png')})`
						}" @click="toBag">
							<text>去发货</text>
						</view>

						<view class="ft-btn common_bg justify-center center"
							style="background-color: #FFED94; border-radius: 17rpx;" @click="continueDraw">
							<text>继续抽</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<DetailBaoXiang ref="baoXiangPop" @end="onBaoXiangEnd"></DetailBaoXiang>
		<uni-popup ref="resPop1" type="center" mask-background-color="rgba(0,0,0,0.8)">
			<view class="res-pop common_bg column center" @click="close1">
				<view class="res-pop-hd"></view>
				<scroll-view class="res-pop-bd" scroll-y>
					<view class="res-list">
						<view class="res-item" v-for="(item, i) in baoXiangList" :key="i">
							<view class="pic center">
								<image :src="item.goodslist_imgurl" lazy-load></image>
								<view class="type-tag center"
									:style="{ backgroundColor: getBgColor(item.shang_title), color: getTextColor(item.shang_title) }">
									{{ item.shang_title }}
								</view>
								<view class="num center">{{ item.prize_num || '1' }}</view>
								<view v-if="item.doubling > 1" class="yu-tag-text ziti log-multiple-tag" style="">
									x{{ item.doubling }}</view>
								<view v-if="item.is_lingzhu > 0" class="yu-tag-text ziti log-lingzhu-tag" style="">
								</view>
								<view v-if="item.goodslist_type == 4" class="yu-tag-text ziti baoxiang-tag" style="">
								</view>
							</view>
							<view class="title hang1" style="text-align: center;">
								<text> {{ item.goodslist_title }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import DetailBaoXiang from '@/components/detail-lucky/detail-bao-xiang.vue'
	import {
		sleep
	} from '../../common/util'
	export default {
		name: 'DetailResults',
		components: {
			DetailBaoXiang
		},
		data() {
			return {
				prizeData: [],
				isSkip: false
			}
		},
		computed: {
			prizeList() {
				if (this.isSkip) {
					let t = this.prizeData.filter(item => item.goodslist_type != 4);
					return t;
				}
				return this.prizeData.filter(item => item.parent_goods_list_id == 0)
			},
			baoXiangList() {
				return this.prizeData.filter(item => item.parent_goods_list_id != 0)
			}
		},
		methods: {
			onBaoXiangEnd() {
				console.log('宝箱特效结束');
				this.$refs.resPop1.open();
			},
			async open(data, is_skip = false) {
				this.prizeData = data;
				this.isSkip = is_skip;
				this.audioManager.playOpenBgm();
				this.$refs.resPop.open();
				if (this.baoXiangList.length > 0 && !this.isSkip) {
					await sleep(800);
					console.log('展示宝箱特效');
					this.$refs.baoXiangPop.init();
					this.$refs.baoXiangPop.show();
				}
			},
			close() {
				this.$refs.resPop.close()
				this.$emit('close')
			},
			close1() {
				this.$refs.resPop1.close()
			},
			onPrizeClick(item) {
				if (item.goodslist_type == 4) {
					this.$refs.resPop1.open();
				}
			},
			toBag() {
				this.$emit('to-bag')
			},
			continueDraw() {
				this.$emit('continue-draw')
			},
			// 设置背景颜色
			getBgColor(text) {
				switch (text) {
					case "普通":
						return "#DAFF27";
					case "黄金":
						return "#9A8EF6";
					case "欧皇":
						return "#FFEB8E";
					case "超神":
						return "#FF8E8E";
					default:
						return "#DAFF27";
				}
			},
			// 设置文字颜色
			getTextColor(text) {
				switch (text) {
					case "普通":
						return "#86AD46";
					case "黄金":
						return "#FFFFFF";
					case "欧皇":
						return "#DA8A50";
					case "超神":
						return "#FFEFB4";
					default:
						return "#86AD46";
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.res-pop {
		width: 100%;
		height: 100vh;
		position: relative;
		background: url($imgurl+'common/yb.png') no-repeat 0 0 / 100% 100%;

		.res-pop-hd {
			width: 560rpx;
			height: 178.06rpx;
			background: url($imgurl+'common/gxhd.png') no-repeat 0 0 / 100% 100%;
		}

		.res-pop-bd {
			width: 636rpx;
			height: 760rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			margin: 36rpx auto;

			.res-list {
				padding: 20rpx 10rpx;
				display: grid;
				grid-template-columns: repeat(3, 210rpx);
				gap: 24rpx 10rpx;

				.res-item {
					width: 180rpx;
					height: 240rpx;
					background-color: #F8F8F8;
					border-radius: 16rpx;

					.pic {
						width: 180rpx;
						height: 180rpx;
						position: relative;
						background: #D8D8D8;
						border-radius: 16rpx 16rpx 0rpx 0rpx;

						>image {
							width: 180rpx;
							height: 180rpx;
							border-radius: 16rpx 16rpx 0rpx 0rpx;
						}

						.type-tag {
							position: absolute;
							left: 12rpx;
							top: 12rpx;
							z-index: 2;
							width: 68rpx;
							height: 32rpx;
							border-radius: 18rpx;
							font-weight: 400;
							font-size: 14rpx;
						}

						.num {
							position: absolute;
							z-index: 2;
							left: 50%;
							transform: translateX(-50%);
							bottom: 10rpx;
							min-width: 42rpx;
							height: 28rpx;
							font-weight: 400;
							font-size: 14rpx;
							color: #ffffff;
							background: rgba(0, 0, 0, 0.5);
							border-radius: 18rpx;
						}
					}

					.title {
						width: 90%;
						padding: 0rpx 10rpx;
						font-weight: 400;
						font-size: 20rpx;
						color: #333333;
						height: 60rpx;
						line-height: 60rpx;
					}
				}
			}
		}

		.res-pop-ft {
			padding-top: 40rpx;

			.btn-list {
				width: 750rpx;
				display: flex;
				justify-content: space-evenly;

				.ft-btn {
					width: 200rpx;
					height: 68rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #404040;
				}
			}
		}
	}

	.yu-tag-text {
		position: absolute;
		right: 10rpx;
		bottom: 10rpx;
		z-index: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 400;
		font-size: 32rpx;
	}

	.log-multiple-tag {
		position: absolute;
		z-index: 5;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 400;
		background: url($iconurl + "fanbei.png") no-repeat;
		background-size: 100% 100%;
		color: #000;
		width: 68rpx;
		height: 32rpx;
		top: 12rpx;
		right: 12rpx;
		font-size: 22rpx;
		line-height: 32rpx;
	}

	.log-lingzhu-tag {
		position: absolute;
		z-index: 5;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 400;
		background: url($iconurl + "lingzhu.png") no-repeat;
		background-size: 100% 100%;
		color: #000;
		width: 68rpx;
		height: 32rpx;
		top: 12rpx;
		right: 12rpx;
		font-size: 22rpx;
		line-height: 32rpx;
	}

	.baoxiang-tag {
		position: absolute;
		right: 15rpx;
		top: 15rpx;
		z-index: 5;
		font-weight: 400;
		font-size: 24rpx;
		color: #333;
		border-radius: 30rpx;
		background-image: url($iconurl + "baoxiang.png");
		background-size: 100% 100%;
		height: 32rpx;
		width: 68rpx;
	}
</style>