<template>
	<view name="luck_draw" class="luck-draw">
		<!-- 抽奖界面 -->
		<view class="bg">
			<view class="goods">
				<view class="grid">
					<view v-for="(item, index) in goods" :class="[`g`+(index+1), {active: select === (index+1)}]"
						:key="index">
						<image class="goods-pic" :src="item['img']" mode="aspectFit"></image>
					</view>
					<view class="go-btn" :class="{running}" @click="luckDraw()"></view>
				</view>
			</view>
		</view>
		<!-- 中奖弹窗 -->
		<u-popup :show="popupShow" :round="5" mode="center" :closeable="true" @close="popupClose" @open="popupOpen"
			overlayOpacity="0.3" bgColor="rgba(255, 255, 255, 0.9)">
			<view class="popup">
				<text class="title">Won the prize!</text>
				<image :src="popupObj.img" mode="aspectFit"></image>
				<view class="btn">
					<u-button color="#ed6706" text="Take it" size="large" shape="circle" @click="popupClose(1)"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			checked: {
				type: [String, Number],
				default: 12
			},
			goodsArray: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				goods: this.goodsArray,
				select: 0,
				running: false,
				ms: 20,
				q: 0,
				popupShow: false,
				popupObj: {
					img: '',
					price: '',
					name: ''
				},
				backgroundAudio: ''
			}
		},
		mounted() {
			// this.luckDraw()
		},
		methods: {
			luckDraw() {
				// 运行中禁止点击按钮
				if (this.running == true) return
				this.running = true
				this.backgroundAudio = uni.createInnerAudioContext();
				this.backgroundAudio.autoplay = false;
				this.backgroundAudio.loop = true
				this.backgroundAudio.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';
				this.backgroundAudio.play()
				this.backgroundAudio.onPlay(() => {
					console.log('开始播放');
				})
				this.backgroundAudio.onPause(() => {
					console.log('停止播放');
				})
				this.run()
			},
			run() {
				setTimeout(() => {
					if (this.q >= 2 && this.select == this.checked) {
						// 抽中奖完成
						setTimeout(() => {
							this.backgroundAudio.pause()
							this.ms = 20
							this.q = 0
							this.popupObj = this.goods[this.select - 1]
							this.popupShow = true
						}, this.ms)
						return;
					}
					this.select++
					if (this.select > 12) {
						this.select = 1
						this.q++
						// this.ms *= 1.25
					}
					this.ms *= 1.1
					this.run()
				}, this.ms)
			},
			// 弹窗打开
			popupOpen() {
				console.log('open');
			},
			// 弹窗关闭
			popupClose(index=0) {
				this.running = false
				this.popupShow = false
				this.select = 0
				console.log('close');
				if(index == 1) {
					this.$emit('handle', this.popupObj)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	$goods-width: calc(100vw - 40rpx);
	$goods-height: calc(100vw - 40rpx);

	.luck-draw {
		margin: 20rpx;

		.bg {
			width: $goods-width;
			height: $goods-height;
			background: url("/static/images/bg.png");
			background-size: 100% 100%;
			background-repeat: no-repeat;
			border-radius: 10rpx;
			overflow: hidden;

			.goods {
				width: calc(100% - 100rpx);
				height: calc(100% - 100rpx);
				overflow: hidden;
				margin: 50rpx;
				border-radius: 10rpx;
				background-color: transparent;

				.grid {
					width: 100%;
					height: 100%;
					display: grid;
					grid-gap: 5rpx;
					grid: "g1 g2 g3 g4"
						"g12 bn bn g5"
						"g11 bn bn g6"
						"g10 g9 g8 g7";
					background-color: transparent;
					border-radius: 10rpx;
					overflow: hidden;

					[class*=g] {
						background-color: $uni-bg-color;
						border: 0rpx solid $uni-bg-color;
					}

					[class*=g],
					.go-btn {
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.g1 {
						grid-area: g1;
					}

					.g2 {
						grid-area: g2;
					}

					.g3 {
						grid-area: g3;
					}

					.g4 {
						grid-area: g4;
					}

					.g5 {
						grid-area: g5;
					}

					.g6 {
						grid-area: g6;
					}

					.g7 {
						grid-area: g7;
					}

					.g8 {
						grid-area: g8;
					}

					.g9 {
						grid-area: g9;
					}

					.g10 {
						grid-area: g10;
					}

					.g11 {
						grid-area: g11;
					}

					.g12 {
						grid-area: g12;
					}

					.go-btn {
						grid-area: bn;
						background-image: url("~@/static/images/GO.png");
						background-size: 100% 100%;
						margin: 20rpx;
						position: relative;
						border-radius: 20rpx;
						box-shadow: 0rpx 0rpx 20rpx $uni-bg-color-grey;

						&:active {
							box-shadow: 0rpx 0rpx 20rpx $uni-text-color-disable;
							transform: scale(0.999);

							&::before {
								content: "";
								position: absolute;
								height: 100%;
								width: 100%;
								background-color: rgba(255, 255, 255, .2);
								border-radius: 20rpx;
							}
						}
					}

					.running {
						// box-shadow: 0rpx 0rpx 12rpx $uni-bg-color-grey;
						// &::before {
						// 	content: "";
						// 	position: absolute;
						// 	height: 100%;
						// 	width: 100%;
						// 	background-color: rgba(255, 255, 255, .2);
						// 	border-radius: 20rpx;
						// }
					}

					.goods-pic {
						width: calc(100% - 20rpx);
						height: calc(100% - 20rpx);
						padding: 10rpx;
						background-color: transparent;
					}

					.active {
						background-color: #ed6706 !important;
					}
				}
			}
		}

		.popup {
			width: $goods-width - 50rpx;
			height: $goods-height - 50rpx;
			margin: 50rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;

			.title {
				font-size: $uni-font-size-subtitle;
				color: #ed6706;
				letter-spacing: 6rpx;
			}

			image {
				width: 600rpx;
				height: 300rpx;
				margin: 50rpx 0;
			}

			.btn {
				width: 400rpx;
				display: inline-block;
			}
		}
	}
</style>
