<template>
	<view class="" style="">
		<view class="choubox" v-for="(b,v) in awardArr.length" :key="v" :style="'width:'+width" v-if="pattern">
			<view class="choulist">
				<view class="choulists" :style="moveCss[v]">
					<!--:style="[{backgroundImage:`url(${a.cate_backimgurl})`}]"  -->
					<view class="jp_img animated  infinite" v-for="(a,x) in items[v]" :key="x">
						<image :src="a.imgurl" style="width: 164rpx;height: 110rpx;z-index: 2;box-shadow:0px 5rpx 0px 0px #FF8A00" class="imgqx" v-if="a.shang_id==31"></image>
						<image :src="a.imgurl" style="width: 164rpx;height: 110rpx;z-index: 2;box-shadow:0px 5rpx 0px 0px #00FFFD" class="imgqx" v-else-if="a.shang_id==32"></image>
						<image :src="a.imgurl" style="width: 164rpx;height: 110rpx;z-index: 2;box-shadow:0px 5rpx 0px 0px #F95FFF" class="imgqx" v-else-if="a.shang_id==33"></image>
						<image :src="a.imgurl" style="width: 164rpx;height: 110rpx;z-index: 2;box-shadow:0px 5rpx 0px 0px #FFE721" class="imgqx" v-else-if="a.shang_id==34"></image>
						<image :src="a.imgurl" style="width: 164rpx;height: 110rpx;z-index: 2;box-shadow:0px 5rpx 0px 0px #FFFFFF" class="imgqx" v-else-if="a.shang_id==35"></image>
						<image :src="a.imgurl" style="width: 164rpx;height: 110rpx;z-index: 2;box-shadow:0px 5rpx 0px 0px #FFFFFF" class="imgqx" v-else="a.shang_id==35"></image>
						<view class="cj_title_name">{{a.title}}</view>
						<!-- 						<image style="width: 166rpx;height: 41rpx;margin-top: -10rpx;" src="../static/infinite/a.png"    mode="" class="imgqx" v-if="a.shang=='A'"></image>	
						<image style="width: 166rpx;height: 41rpx;margin-top: -10rpx;" src="../static/infinite/b.png"    mode="" class="imgqx" v-if="a.shang=='B'"></image>			
						<image style="width: 166rpx;height: 41rpx;margin-top: -10rpx;" src="../static/infinite/c.png"    mode="" class="imgqx" v-if="a.shang=='C'"></image>
						<image style="width: 166rpx;height: 41rpx;margin-top: -10rpx;" src="../static/infinite/d.png"    mode="" class="imgqx" v-if="a.shang=='D'"></image>	 -->
					</view>
				</view>
			</view>
		</view>
		<view class="choubox" v-for="(b,v) in awardArr.length" :key="v" :style="'width:'+width" v-else>
			<view class="choulist">
				<view class="choulists_b" :style="moveCss[v]">
					<!--:style="[{backgroundImage:`url(${a.cate_backimgurl})`}]"  -->
					<view class="jp_img animated  infinite" v-for="(a,x) in items[v]" :key="x">
						<image :src="a.imgurl" style="width: 100rpx;height: 110rpx;"></image>
						<image style="width: 166rpx;height: 41rpx;" :src="a.shang" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="zzz" ref="refDivName"></view>
	</view>
</template>

<script>
	export default {
		props: {
			//中奖弹出框内容
			awardArr: {
				type: Array,
				default: function() {
					return [] //如果是对就是return {}
				}
			},
			//抽赏商品列表
			ShopList: {
				type: Array,
				default: function() {
					return [] //如果是对就是return {}
				}
			},
			width: {
				type: String,
				default: '750rpx'
			},
			pattern: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				OrderList: [],
				rollTimer: null, //动画定时器句柄
				leftM: 10, //指针停止位置的偏移量  用来计算弹出框的初始位置
				moveCss: [], //奖励滚动组件的滑动的动画效果css
				itemWidth: 164, //每张卡牌的宽度
				luckyNums: 0, //中奖位置
				luckydata: [], //中奖位置数组
				lnStart: 50, //中奖位置区间开始
				lnEnd: 60, //中奖位置区间结束
				items: [], //滚动的卡片列表
				awardItem: [], //中奖道具
				tiaotype: 1,
				gudata: [],
				// 适配手机
				left_px: '',
				scaleCsss: []
			}
		},
		methods: {

			//随机数
			getRand(start, end) {
				return Math.floor(Math.random() * (end - start + 1) + start);
			},
			getItem() {
				let r = this.getRand(0, (this.ShopList.length - 1));
				let item;
				item = this.ShopList[r];
				return item;
			},
			// 开始动画
			openBox(v) {
				let that = this
				// #ifdef H5
				// console.log(this.$refs.refDivName.$el.offsetWidth)
				that.left_px = that.$refs.refDivName.$el.offsetWidth
				// #endif
				// #ifdef MP
				// console.log(uni.createSelectorQuery().in(this).select(".zzz"))
				uni.createSelectorQuery().in(that).select(".zzz").boundingClientRect(data => {
					//data  可以打印data输出看详细数据，有很多数据信息
					// console.log(data)
					that.left_px = data.width; //表示元素宽度
				}).exec();
				// #endif
				//初始化数据
				that.tiaotype = 1;
				that.InitPageModel(v);
				//150ms后显示奖励皮肤滚动组件
				// debugger
				setTimeout(() => {
					//500ms 之后开始奖励列表滑动
					that.rollTimer = setTimeout(() => that.startScroll(v), 100);
				}, 150);

			},
			//初始化列表
			InitPageModel(v) {

				var that = this;
				//随机一个总数
				that.items = [];
				//中间号码的列队
				that.luckydata = [];
				//中奖卡片的位置
				for (var a = 0; a < v; a++) {
					var jldata = [];
					that.luckyNums = that.getRand(that.lnStart, that.lnEnd);
					that.luckydata.push(that.luckyNums)
					let loopNum = that.lnEnd - that.luckyNums < 4 ? that.luckyNums + 4 : that.lnEnd;
					// console.log(that.gudata)
					for (let i = 0; i < loopNum; i++) {
						let item = {};
						if (i == that.luckyNums) {
							item = that.ShopList.filter((item) => item.id == that.awardArr[a].goodslist_id)[
								0]; //把奖励加到列表里
							// item.class = 'rubberBand'

							that.awardItem.push(item); //拿到奖励的各个参数
						} else {
							item = that.getItem();
						}
						jldata.push(item);
					}
					that.items[a] = jldata;

				}
			},
			//滑动效果
			startScroll() {
				var that = this;
				let direction = ''
				if (that.pattern) {
					direction = 'left'
				} else {
					direction = 'top'
				}
				that.$nextTick(function() {
					if (that.rollTimer != null) {
						// setTimeout(() => {
						// 	that.Audio.play()
						// 	that.Audio.onPlay(function() {
						// 		console.log('onPlay');
						// 	});
						// }, 500)
					} else {
						setTimeout(() => {
							that.Audio.stop()
						}, 500)
					}

					setTimeout(() => {
						for (var a = 0; a < that.luckydata.length; a++) {
							// let m = that.getRand(0, 50) - 110;
							let m = -58;

							that.leftM = m;
							// debugger
							// console.log((that.luckydata[a] - 2), that.left_px)
							var yanzi = direction + ':-' + ((that.luckydata[a] - 2) * that.left_px - m) +
								'px;transition:all 8s cubic-bezier(.1,.59,.1,.9)'
							that.moveCss.push(yanzi)
							//6s 动画结束后 开始弹出奖励图片，6500ms后执行
						}
					}, 500);

					that.rollTimer = setTimeout(() => {
						// display和动画会有前后执行的冲突，所以加上10ms延时处理
						that.scaleCss = [];
						that.scaleCsss = [];
						that.$emit("close_animation")
						setTimeout(() => {
							//奖品按顺序淡出
							for (var a = 0; a < that.luckydata.length; a++) {
								setTimeout(() => {
									// 奖品显示框
									var scale = 'opacity:1 ;transition:all .8s;'
									var scales =
										'opacity:0 ;transform: scale(5);transition:all 2.5s;'
									that.scaleCss.push(scale)
									that.scaleCsss.push(scales)
								}, 800 + a * 330);
							}
							that.moveCss = [];
							that.items = [];
							that.luckydata = [];
						}, 500);
					}, 9000);
				})
			},
			tiaoguo() {
				var that = this;
				clearTimeout(that.rollTimer);
				that.scaleCss = [];
				that.scaleCsss = [];
				that.$emit("close_animation")
				setTimeout(() => {
					//奖品按顺序淡出
					for (var a = 0; a < that.luckydata.length; a++) {
						setTimeout(() => {
							// 奖品显示框
							var scale = 'opacity:1 ;transition:all .8s;'
							var scales =
								'opacity:0 ;transform: scale(5);transition:all 2.5s;'
							that.scaleCss.push(scale)
							that.scaleCsss.push(scales)
						}, 800 + a * 330);
					}
					that.moveCss = [];
					that.items = [];
					that.luckydata = [];
				}, 500);
			}
		}
	}
</script>

<style lang="scss">
	// 适配手机
	.zzz {
		width: 164rpx;
		height: 1rpx;
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
	}

	.choubox {
		// width: 730rpx;
		height: 160rpx;
		position: relative;
		margin: auto;
		overflow: hidden;

		.choulist {
			position: absolute;
			display: flex;
			margin-top: 10rpx;

			.choulists_b {
				position: relative;
				top: 0;

				// left: -50rpx;
				// display: flex;
				.jp_img {
					position: relative;
					width: 164rpx;
					height: 144rpx;
					// overflow: hidden;
					animation-delay: 9s;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					background-position: 0% 100%;
					background-size: 100% auto;
					background-repeat: no-repeat;

					image {
						width: 144rpx;
						height: 144rpx;
						box-sizing: border-box;
						overflow: hidden;
					}
				}
			}

			.choulists {
				position: relative;
				left: -50rpx;
				display: flex;

				.jp_img {
					position: relative;
					width: 164rpx;
					height: 144rpx;
					overflow: hidden;
					animation-delay: 9s;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					background-position: 0% 100%;
					background-size: 100% auto;
					background-repeat: no-repeat;

					image {
						width: 144rpx;
						height: 144rpx;
						box-sizing: border-box;
						overflow: hidden;
					}
				}
			}
		}
	}

	.cj_title_name {
		width: 144rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 24rpx;
		color: #FFFFFF;
	}
</style>
