<template>
	<view id="app">
		<loadlogo v-if="!loadlogo" />
		<view class="drawGame" :style="{backgroundColor: drawPageData.bg_color || '#FF5555'}" v-if="loadlogo">
			<view class="audio-main" @click="playAudio" style="top: 1.5%;right: 30upx;" v-if="!!drawPageData.background_music">
				<view class="audio-bg" :class="{ 'stop-audio': !play_Audio }">
					<view class="audio-gif" :style="{ 'background-image': 'url(' + imageRoot + 'musicgif.gif)' }">
						<view class="audio-png" :style="{ 'background-image': 'url(' + imageRoot + 'music.png)' }"></view>
					</view>
				</view>
			</view>
			<view class="titleBG" :style="{width: imgstyle.width + 'px',height: imgstyle.height + 'px'}">
				<view class="titleimg" v-if="drawPageData.share_image">
					<swiper 
					class="titleimg" 
					indicator-color="rgba(255,255,255,.4)" 
					indicator-active-color="rgba(255,255,255,.85)" 
					:indicator-dots="true" 
					:autoplay="true" 
					:interval="interval" 
					:duration="duration">
						<swiper-item v-for="(item, index) in drawPageData.share_image" :key="index" style="border-radius: 15upx;">
							<image class="titleimg" :src="item" ></image>
						</swiper-item>
					</swiper>
				</view>
				<!-- <image class="titleimg"  :src="drawPageData.share_image" mode=""></image> -->
				<!-- <view class="gameRule" @click="isRuleShow(1)">
					活动规则<text class="iconfont icon-gantanhaozhong" style="font-size: 34upx;"></text>
				</view>
				<view class="gameRule left" @click="isRuleShow(2)">
					抽奖规则<text class="iconfont icon-gantanhaozhong" style="font-size: 34upx;"></text>
				</view> -->
			</view>
			<view class="bigbg" style="margin: 30upx;">
				<view class="dis-flex col-f" style="padding: 0 20upx 20upx;">
					<view class="flex-box f-26 t-l">
						参加人数:{{drawPageData.visit}}人
					</view>
					<view class="flex-box f-26 t-c">
						浏览人数:{{drawPageData.pv}}人
					</view>
					<view class="flex-box f-26 t-r">
						中奖人数:{{drawPageData.prize}}人
					</view>
				</view>
				<view class="bg" :style="{background: 'url('+drawPageData.background_image +')',backgroundSize: '100% 100%'}">
					<!-- <view class="bg"> -->
					<view  style="height: 188upx;">
						<view class="scroll-wrap">
							<view class="scroll-content" :style="{ top }" @mouseenter="Stop()" @mouseleave="Up()">
								<view class="scroll-content-item" v-for="item in prizeList" v-bind:key="item.id">{{item.nickname}}获得{{item.title}}</view>
							</view>
						</view>
					</view>
					<!-- 抽奖组件 -->
					<view style="position: relative;" v-if="parameterid">
						<view  v-if="drawPageData.type == '1'">
							<FGame :goodsList="goodsList" @startMusic="startMusic" @endMusic="endMusic" :opendraw="opendraw" :parameterid="parameterid"></FGame>
						</view>
						<view v-else-if="drawPageData.type == '2'">
							<FGamesix :goodsList="goodsList" @startMusic="startMusic" @endMusic="endMusic" :opendraw="opendraw" :parameterid="parameterid"></FGamesix>
						</view>
						<view  style="height: 600upx;padding: 10upx;" v-else-if="drawPageData.type == '3' && goodsList">
							<raffle-wheel
							  ref="raffleWheel"
							  :prizeList="goodsList"
							  strKey="name"
							  :ringCount="5"
							  :duration="5"
							  :colors="drawPageData.wheel_bg"
							  :canvas-width="canvasData.width"
							  :canvas-height="canvasData.height"
							  :num="opendraw"
							  @actionStart="handleActionStart"
							  @actionEnd="handleActionEnd"
							  @done="handleDrawDone"
							  @playdraw="playdraw"
							  v-if="goodsList.length"
							/>
						</view>
						<view class="imgs" v-if="startImg">
							<image :src="drawPageData.start_image" style="position: absolute;z-index: 99;top: 30%;left: 50%;transform: translate(-50%);width: 300upx;height: 300upx;"
							 mode=""></image>
						</view>
						
					</view>
					
					<view class="dis-flex f-28" style="padding: 71upx 0upx 0upx;color: #955F19;">
						<view class="dis-flex" style="flex: 0.3;">
							<view >
								<view class="dis-flex" style="margin-top: 20upx;">
									<view class="b-f" style="width: 10upx;height: 10upx;border-radius: 50% 0% 0% 50%;border-right: 3upx solid #D4D3D4;"></view>
									<view class="b-f" style="width: 8upx;height: 10upx;;border-right: 3upx solid #D4D3D4;"></view>
									<view class="b-f" style="width: 8upx;height: 10upx;;border-right: 3upx solid #D4D3D4;"></view>
								</view>
								<view class="dis-flex" style="margin-top: 60upx;">
									<view class="b-f" style="width: 10upx;height: 10upx;border-radius: 50% 0% 0% 50%;border-right: 3upx solid #D4D3D4;"></view>
									<view class="b-f" style="width: 8upx;height: 10upx;;border-right: 3upx solid #D4D3D4;"></view>
									<view class="b-f" style="width: 8upx;height: 10upx;;border-right: 3upx solid #D4D3D4;"></view>
								</view>
							</view>
							<view class="ifeng" :style="{backgroundColor: drawPageData.button_shadow || '#AF1010'}">
								<view class="ifelit" :style="{backgroundColor: drawPageData.button_color || '#FD7058'}">
									<view class="f-28 col-f t-c" style="height: 50upx;line-height: 50upx;">
										我的<text>{{TextSubstitution.credittext}}</text>
									</view>
									<view class="b-f f-28 f-w t-c" style="margin: 0 3upx;height: 62upx;border-radius: 0upx 0upx 8upx 8upx;color: #FF4444;line-height: 62upx;">
										{{parseInt(drawPageData.user_integral)}}
									</view>
								</view>
							</view>
						</view>
						<view  style="flex: 0.4;">
							<view style="width: 248upx;height: 120upx;margin: auto;" @click="playdraw">
								<image class="btnimg" style="width: 100%;height: 100%;" :src="drawPageData.button_draw ||  imgfixUrls + '/ljcj.png'"
								 mode=""></image>
							</view>
						</view>
						<view class="t-r f-24 col-f" style="padding-top: 6upx;flex: 0.3;">
							<view  style="float: right;margin-right: 2upx;">
								<view class="dis-flex">
									<view class="dis-il-block dis-flex description" :style="{backgroundColor: drawPageData.button_shadow || '#AF1010'}">
										<view class="dis-il-block descriptionrulo" @click="isRuleShow(2)" :style="{backgroundColor: drawPageData.button_color || '#FD7058'}">
											<view class="dis-il-block t-c" style="height: 45upx;line-height: 45upx;">
												规则说明
											</view>
											<view class="dis-il-block iconfont icon-video t-c" style="font-weight: 400;font-size: 28upx;height: 45upx;width: 46upx;line-height: 45upx;">
												
											</view>
										</view>
										
										<!-- <view class="b-f dis-il-block" style="width: 20upx;height: 58upx;border-radius: 0 60upx 60upx 0;background-color: #FFFFFF;">
											<view  style="width: 10upx;height: 30upx;border-radius: 0 60upx 60upx 0;background-color: #ff4444;float: right;">
												
											</view>
										</view> -->
									</view>
									<view class="dis-flex" style="margin-top: 20upx;">
										<view  style="width: 10upx;height: 10upx;background-color: #FFFFFF;border-right: 2upx solid #D4D3D4;"></view>
										<view  style="width: 8upx;height: 10upx;background-color: #FFFFFF;border-right: 2upx solid #D4D3D4;"></view>
										<view  style="width: 6upx;height: 10upx;background-color: #FFFFFF;border-right: 2upx solid #D4D3D4;border-radius: 0 60upx 60upx 0upx;"></view>
									</view>
									
								</view>
								<view class="dis-flex" style="margin-top: 10upx;">
									<view class="dis-il-block dis-flex awardbtn" :style="{backgroundColor: drawPageData.button_shadow || '#AF1010'}">
										<view class="dis-il-block awardbtnrulo" @click="myprize" :style="{backgroundColor: drawPageData.button_color || '#FD7058'}">
											<view class="dis-il-block t-c" style="height: 45upx;line-height: 45upx;">
												我的奖品
											</view>
											<view class="dis-il-block iconfont icon-video t-c" style="font-weight: 400;font-size: 28upx;height: 45upx;width: 46upx;line-height: 45upx;">
												
											</view>
										</view>
										
										<!-- <view class="b-f dis-il-block" style="width: 20upx;height: 58upx;border-radius: 0 60upx 60upx 0;background-color: #FFFFFF;">
											<view  style="width: 10upx;height: 30upx;border-radius: 0 60upx 60upx 0;background-color: #ff4444;float: right;">
												
											</view>
										</view> -->
									</view>
									<view class="dis-flex" style="margin-top: 20upx;">
										<view  style="width: 10upx;height: 10upx;background-color: #FFFFFF;border-right: 2upx solid #D4D3D4;"></view>
										<view  style="width: 8upx;height: 10upx;background-color: #FFFFFF;border-right: 2upx solid #D4D3D4;"></view>
										<view  style="width: 6upx;height: 10upx;background-color: #FFFFFF;border-right: 2upx solid #D4D3D4;border-radius: 0 60upx 60upx 0upx;"></view>
									</view>
									
								</view>
							</view>
						<!-- 	<view class="t-r" >
								规则说明
							</view>
							<view class="t-r" style="margin-top: 40upx;height: 44upx;line-height: 44upx;" > 
								我的奖品
							</view> -->
							
							
							
							<!-- <view class="dis-il-block" v-if="drawPageData.surplus_day_join_times == 0" style="padding: 10upx 20upx;border-radius: 60upx;background-color: rgba(0,0,0,0.1);">
								<text style="color: #FF4444;">{{drawPageData.integral_consume}}</text>
								<text>{{TextSubstitution.credittext}}</text>抽
								<text style="color: #FF4444;">1</text>
								次
							</view>
							<view class="dis-il-block" v-else style="padding: 10upx 20upx;border-radius: 60upx;background-color: rgba(0,0,0,0.1);">
								<text>今日免费次数:</text>
								<text style="color: #FF4444;">{{drawPageData.surplus_day_join_times}}</text>
							</view> -->
						</view>
						
					</view>
					
					<view class="dis-flex" style="padding: 20upx 30upx 0;">
						<view  style="flex: 0.5;">
							<view style="width: 382upx;height: 90upx;" @click="gogetintegral">
								<image class="btnimg" style="width: 100%;height: 100%;" :src="drawPageData.button_more || imgfixUrls + '/hqgdbtn.png'"
								 mode=""></image>
							</view>
						</view>
						<view  style="flex: 0.5;">
							<view style="width: 220upx;height: 90upx;float: right;" @click="GenerateAPoster">
								<image class="btnimg" style="width: 100%;height: 100%;" :src="drawPageData.button_prize || imgfixUrls + '/schbbtn.png'"
								 mode=""></image>
							</view>
						</view>
					</view>
					<view class="f-26 t-c" style="color: rgb(184, 47, 57);height: 60upx;line-height: 60upx;">
						<text style="padding-right: 30upx;" v-if="drawPageData.surplus_day_join_times != 0">今日免费<text style="color: #FF4444;">{{drawPageData.surplus_day_join_times}}</text>次</text>
						<text style="color: #FF4444;"></text>
						<text>每消耗</text>
						<text style="color: #FF4444;">{{drawPageData.integral_consume}}</text>
						<text>{{TextSubstitution.credittext}}</text>抽
						<text style="color: #FF4444;">1</text>
						次
						<text style="padding-left: 30upx;" v-if="drawPageData.surplus_day_parin_times != 0">今日可抽<text style="color: #FF4444;">{{drawPageData.surplus_day_parin_times}}</text>
						次</text>
						
					</view>
					<!-- 按钮组 -->
					<!-- <view class="dis-flex" style="padding: 0 20upx;">
						<view >
							<view style="height: 124upx;width: 184upx;" @click="gogetintegral">
								<image class="btnimg" style="width: 100%;height: 100%;" :src="imgfixUrls + '/hqgd.png'" mode=""></image>
							</view>
						</view>
						<view  style="padding: 0 20upx;" @click="playdraw">
							<view style="width: 288upx;height: 124upx;">
								<image class="btnimg" style="width: 100%;height: 100%;" :src="drawPageData.start_image ||  imgfixUrls + '/ljcj.png'"
								 mode=""></image>
							</view>
						</view>
						<view >
							<view style="width: 122upx;height: 124upx;" @click="myprize">
								<image class="btnimg" style="height: 100%;width: 100%;" :src="imgfixUrls + '/wdjp.png'" mode=""></image>
							</view>
						</view>
					</view> -->
					<!-- <view class="t-c f-26" style="color: #955F19;">
						<text>今日免费次数:</text>
						<text>3</text>
					</view> -->

				</view>
				<!-- 活动商家 -->
				<view class="activity" v-if="storeList.length > 0">
					<view class="tagbox">
						<view class="dis-il-block" style="width: 0;
						height: 0;
						border-bottom: 34upx solid #D68009;
						border-left: 26upx solid transparent;
						position: absolute;
						top: 0;
						left: -8%;
						z-index: 98;
						">
						</view>
						<view class="dis-il-block" style="width: 0;
						height: 0;
						border-top: 69upx solid #FCD83D;
						border-left: 8upx solid transparent;
						position: relative;
						z-index: 99;
						">
						</view>
						<view class="contentbox dis-il-block">
							<view class="text">
								商家列表
							</view>
						</view>
						<view class="dis-il-block" style="width: 0;
						height: 0;
						position: relative;
						z-index: 99;
						border-top: 69upx solid #FCD83D;
						border-right: 8upx solid transparent;
						">
						</view>
						<view class="dis-il-block" style="width: 0;
						height: 0;
						border-bottom: 34upx solid #D68009;
						border-right: 24upx solid transparent;
						position: absolute;
						right: -8%;
						top: 0;
						">
						</view>

						<!-- <view class="dis-il-block" 
						style="width: 0;
						height: 0;
						border-top: 36upx solid #FFEA72;
						border-left: 8upx solid transparent;">
						</view> -->

					</view>
					<view class="activity-content">
						<view class="storeList dis-flex" :style="{ left }" @mouseenter="cartStop()" @mouseleave="cartUp()">
							<view class="storeList-item dis-il-block" v-for="(item,index) in storeList" :key="index" @click="gostore(item.id)">
								<image :src="item.logo" style="width: 189upx;height: 189upx;border-radius: 10upx;" mode=""></image>
								<view class="f-26" style="color: #999999;font-weight: 500;padding-bottom: 20upx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 180upx;">
									{{item.storename}}
								</view>
								<view class="dis-flex" style="font-size: 24upx;font-family: PingFang SC;font-weight: 500;color: #333333;line-height: 36upx;">
									<image style="width: 40upx;height: 40upx;" :src="item.goods_logo" mode=""></image>
									<view class="f-26">
										<view style="padding-left: 10upx;width: 140upx;overflow: hidden;
										text-overflow:ellipsis; white-space: nowrap;">{{item.goods_name}}</view>
										<!-- <text style="padding-left: 10upx;">1个</text> -->
									</view>
								</view>
							</view>
						</view>
						<view class="f-24 t-c" style="font-size: 24upx;color: #999999;line-height: 50upx;">
							<text class="iconfont icon-back_light" style="font-size: 24upx;"></text>
							<text class="iconfont icon-back_light" style="font-size: 24upx;"></text>
							左右滑动
							<text class="iconfont icon-jinrujiantouxiao1" style="font-size: 24upx;"></text>
							<text class="iconfont icon-jinrujiantouxiao1" style="font-size: 24upx;"></text>
						</view>
					</view>
				</view>
				<!-- 活动商家 -->
				<view class="activity" style="top: 150upx;" v-if="friendList.list.length > 0">
					<view class="tagbox">
						<view class="dis-il-block" style="width: 0;
						height: 0;
						border-bottom: 34upx solid #D68009;
						border-left: 26upx solid transparent;
						position: absolute;
						top: 0;
						left: -8%;
						z-index: 98;
						">
						</view>
						<view class="dis-il-block" style="width: 0;
						height: 0;
						border-top: 69upx solid #FCD83D;
						border-left: 8upx solid transparent;
						position: relative;
						z-index: 99;
						">
						</view>
						<view class="contentbox dis-il-block">
							<view class="text">
								助力好友排行
							</view>
						</view>
						<view class="dis-il-block" style="width: 0;
						height: 0;
						position: relative;
						z-index: 99;
						border-top: 69upx solid #FCD83D;
						border-right: 8upx solid transparent;
						">
						</view>
						<view class="dis-il-block" style="width: 0;
						height: 0;
						border-bottom: 34upx solid #D68009;
						border-right: 24upx solid transparent;
						position: absolute;
						right: -8%;
						top: 0;
						">
						</view>

						<!-- <view class="dis-il-block" 
						style="width: 0;
						height: 0;
						border-top: 36upx solid #FFEA72;
						border-left: 8upx solid transparent;">
						</view> -->

					</view>
					<view class="activity-friend">
						<view class="f-28 t-c" style="color: #333333;padding-bottom: 20upx;" v-if="friendList.total_friends !== 0 && friendList.total_friends !== '0'">
							已有
							<text style="color: #FF4444;">{{friendList.total_friends}}</text>
							位好友帮您获得
							<text style="color: #FF4444;">{{friendList.total_integral}}</text>
							{{TextSubstitution.credittext}}
						</view>
						<view  style="overflow: auto;">
							<view class="dis-flex" style="padding: 30upx 0;border-bottom: 2upx dashed #cccccc;" v-for="(item,index) in friendList.list"
							 :key="index">
								<view  style="flex: 0.1;margin: auto;">
									<image style="width: 39upx;height: 47upx;" v-if="index == 0" :src="imgfixUrls + '/j.png'" mode=""></image>
									<image style="width: 39upx;height: 47upx;" v-else-if="index == 1" :src="imgfixUrls + '/y.png'" mode=""></image>
									<image style="width: 39upx;height: 47upx;" v-else-if="index == 2" :src="imgfixUrls + '/t.png'" mode=""></image>
									<text class="f-28 t-c" style="line-height: 60upx;" v-else>{{index + 1}}</text>
								</view>
								<view class="dis-flex" style="flex: 0.6;">
									<view >
										<image style="height: 60upx;width: 60upx;border-radius: 50%;border: 2upx solid #333333;" :src="item.avatar"
										 mode=""></image>
									</view>
									<view class="f-28" style="line-height: 60upx;padding-left: 15upx;color: #333333;overflow: hidden;text-overflow:ellipsis; white-space: nowrap;width: 300upx;">
										{{item.nickname}}
									</view>
								</view>
								<view class="f-28" style="flex: 0.3;line-height: 60upx;">
									<text style="color: #FF4444;">{{item.total_integral}}</text>
									{{TextSubstitution.credittext}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 规则 -->
		<PopManager :show="ruleShow" :type="'center'" :overlay="'false'" :showOverlay="'false'" @clickmask="ruleShow = false">
			<view class="rulebox t-c">
				<view class="f-32" style="font-weight: 500;color: #6f6f6f;padding-bottom: 30upx;">
					活动规则
				</view>
				<view v-if="parser" style="height: 75vh;overflow: auto;">
					<jyf-parser domain="https://6874-html-foe72-1259071903.tcb.qcloud.la" gesture-zoom lazy-load ref="article"
					 selectable show-with-animation use-anchor :html="parser"></jyf-parser>
				</view>
			</view>
			<view  style="position: relative;height: 40upx;">
				<view  style="border-left: 1upx solid #FFFFFF;height: 50upx;position: absolute;left: 50%;transform: translateX(-50%);">

				</view>
			</view>
			<view  style="position: relative;">
				<view class="iconfont icon-roundclose col-f" style="position: absolute;left: 50%;transform: translateX(-50%);font-size: 50upx;"
				 @click="ruleShow = false">

				</view>
			</view>
		</PopManager>
		<PopManager :show="endImg" :type="'center'" :overlay="'false'" :showOverlay="'false'" @clickmask="endImg = false">
			<view class="zjbj" :style="{background: 'url('+ (drawPageData.prize_image|| (imgfixUrls + '/kjbj2.png')) +')',backgroundSize: '100% 100%'}">
				<!-- <image style="width: 70vw;height: 80vh;" :src="imgfixUrls + '/kjbj.png'" mode=""></image> -->
				<text class="iconfont icon-close dis-il-block t-c f-w closeBtn" @click="close"></text>
				<!-- <view class="contenttitle t-c">
					<view class="text" v-if="endid !== '0' && endid !== 0">
						中奖啦
					</view>
					<view class="text" v-else>
						谢谢惠顾
					</view>
				</view> -->
				<view class="zjbox" style="margin: auto;" v-if="endImg">
					<view class="f-w f-48 t-c" style="color: #FB2F24;padding-bottom: 36upx;">
						{{endid !== '0'&& endid !== 0?'中奖了':'感谢参与'}}
					</view>
					<view >
						<image style="border-radius: 50%;height: 240upx;width: 240upx;margin-left: 20vw;border: 2upx solid #FFC853;" :src="effect_image || drawPageData.not_prize_image"
						 mode=""></image>
					</view>
					<view  style="padding:20upx 0 50upx;">
						<!-- <view class="col-f f-38" style="text-align: center;">
							{{}}
						</view> -->

						<view class="col-f f-40 " style="text-align: center;margin-bottom: 10upx;">
							<text style="color: #E5492C;">{{endid !== '0'&& endid !== 0?'恭喜你抽中了':'很遗憾'}}</text>
						</view>
						<view class="col-f f-50 t-c" style="text-align: center;">
							<text style="color: #FF2D26;">{{endid !== '0'&& endid !== 0?endDraw:'没有中奖哦！'}}</text>
						</view>
					</view>
					<view class="dis-flex">
						<view  style="flex: 0.45;position: relative;height: 90upx;">
							<!-- <view class="t-c f-34" style="background-color: #EB9B2F;color: #FFFFFF;padding: 15upx 30upx;border-radius: 10upx;margin-top: 30upx;"
							 >
								查看奖品
							</view> -->
							<image style="width: 250upx;height: 90upx;" :src="imgfixUrls + '/hsbtn.png'" mode=""></image>
							<view @click="myprize" class="f-32 t-c" style="position: absolute;left: 0;top: 0;height: 90upx;line-height: 80upx;width: 250upx;color: #FF3D25;">
								查看奖品
							</view>
						</view>
						<view  style="flex: 0.1;width: 30upx;">

						</view>
						<view class="f-34" style="flex: 0.45;position: relative;height: 90upx;">
							<!-- <view class="t-c" style="background-color: #EB9B2F;color: #FFFFFF;padding: 15upx 30upx;border-radius: 10upx;margin-top: 30upx;"
							 @click="close(1)">
								继续抽奖
							</view> -->
							<image style="width: 250upx;height: 90upx;" :src="imgfixUrls + '/cjredbtn.png'" mode=""></image>
							<view @click="close(1)" class="f-32 t-c" style="position: absolute;left: 0;top: 0;height: 90upx;line-height: 80upx;width: 250upx;color: #FFFFFF;">
								继续抽奖
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="imgs-box" v-if="endImg" :style="{background: 'url('+drawPageData.effect_image+')',backgroundSize: '100% 100%'}"> -->

				<!-- <image :src="drawPageData.effect_image" style="z-index: 99;width: 300upx;height: 300upx;" mode=""></image> -->

				<!-- </view> -->

			</view>

		</PopManager>
		<PopManager :show="showCommunity" type="center" @clickmask="showCommunity = false">
			<view  v-if="showCommunity" style="width: 80vw;height: 90vh;padding: 30upx;overflow: hidden;border-radius: 20upx;">
				<posterlate :postId="parameterid" :postType="'13'"></posterlate>
			</view>
		</PopManager>
		<view  v-if="menuList.id">
			<TabBars :tabBarAct="0" :pageType="'draw'" :tabBarData="menuList.data" />
		</view>
		<PhoneMask :show1="popShow" @clickmask1="closePop"></PhoneMask>
		<getvxphone :show="vxshow" @showFalse="showFalse"></getvxphone>
		<view>
			<follow
				:followShow="followShow"
				:followType="followType"
				:followTitleShow="followTitleShow"
				@clickmask="openQrShow"
				@closeFollowPop="closeFollowPop"
				@closeFollowTitle="closeFollowTitle"
				:followData="followData"
			></follow>
		</view>
		
	</view>

</template>

<script>
	import App from '@/common/js/app.js';
	import FGame from '../tamplate/FGame.vue';
	import FGamesix from '../tamplate/FGamesix.vue';
	import jyfParser from '@/components/jyf-parser/jyf-parser.vue';
	import PopManager from '@/components/template/PopManager';
	import Loadlogo from '@/components/template/loadlogo.vue';
	import posterlate from '@/components/template/posterlate';
	import TabBars from '@/components/template/tabBar';
	import PhoneMask from '@/components/template/PhoneMask';
	import getvxphone from '@/components/template/getVXphone.vue';
	import follow from '@/components/template/follow.vue';
	import RaffleWheel from '@/components/raffle-wheel/raffle-wheel.vue'
	let innerAudioContext = uni.createInnerAudioContext();
	let drawAudio = uni.createInnerAudioContext();
	export default {
		components: {
			FGame,
			FGamesix,
			PopManager,
			jyfParser,
			Loadlogo,
			posterlate,
			TabBars,
			PhoneMask,
			getvxphone,
			follow,
			RaffleWheel
		},
		data() {
			return {
				//获奖名单滚动列表
				prizeList: [],
				loadlogo: false,
				activeIndex: 0,
				cartactiveIndex: 0,
				intnum: undefined,
				cartintnum: undefined,
				storeList: [], //横着滑动的商家列表
				friendList: [], //竖着排列的助力列表
				ruleShow: false,
				drawPageData: {
					effect_image: ''
				}, //页面基本信息
				goodsList: null, //抽奖列表
				play_Audio: false,
				opendraw: 0,
				startImg: false,
				endImg: false,
				endDraw: '',
				endid: 0,
				parameter: {},
				effect_image: '',
				parser: '',
				TextSubstitution: {}, //文本替换
				parameterid: '',
				ratio:0,
				imgstyle:{},
				showCommunity:false,
				menuList:{},
				popShow: false,
				vxshow:false,
				followTitleShow: true,
				followShow: false,
				followType: '10',
				followData:{
				},
				// canvas 宽高
				canvasData: {
				  width: 260,
				  height: 260
				},
				duration:500,
				interval:2000,
				// 奖品数据
				// 中奖下标
				targetIndex: 0,
				// 中奖类目名称
				targetName: '',
				// 是否由前端控制概率
				isFrontend: true,
				// 权重随机数的最大值
				weightTotal: 0,
				// 权重数组
				weightArr: [],
				serial_number:0
			}
		},
		computed: {
			top() {
				return -this.activeIndex * 15 + 'px';
			},
			left() {
				return -this.cartactiveIndex * 10 + 'rpx';
			}
		},
		onHide() {
			let _this = this,
				play_Audio = false,
				pageAudio = _this.drawPageData.background_music;
			if (!play_Audio) {
				innerAudioContext.pause()
				innerAudioContext.onPause(() => {
					console.log('暂停播放');
				});
			}
			_this.play_Audio = play_Audio
		},
		onLoad(e) {
			let _this = this;
			this.parameter = e;
			this.parameterid = e.id;
			this.ScrollUp();
			this.imgstyle = uni.getStorageSync('imgstyle');
			uni.setStorageSync('Dparameterid', this.parameterid);
			this.TextSubstitution = uni.getStorageSync('TextSubstitution');
			if (!this.parameter.head_id || this.parameter.head_id == '0') {
				this.parameter.head_id = 0;
			}
			console.log(e, 'canshu')

			// this.cartScrollUp();
		},
		onShow() {
			this.startDraw = false;
			this.getDrawData();
			this.playAudio();
		},
		destroyed() {
			innerAudioContext.stop();
			innerAudioContext.onStop(() => {
				console.log('页面跳转暂停播放');
			});
		},
		onUnload() {
			this.play_Audio = false;
			innerAudioContext.stop();
			innerAudioContext.onStop(() => {
				console.log('页面跳转暂停播放');
			});
		},
		methods: {
			play(){
						this.prizeList.map(item=>{
							item.weight = 0;
						});
						this.prizeList[6].weight = 1;
						if (this.isFrontend) {
						  this.prizeList.forEach((item) => this.weightTotal += item.weight)
						  this.weightArr = this.prizeList.map((item) => item.weight)
						}
						setTimeout(()=>{
							this.num++;
						})
						
						
					},
			// 重新生成
			handleInitCanvas () {
			  this.prizeList = []
			  this.getPrizeList();
			},
			// 获取奖品列表
			getPrizeList () {
			  uni.showLoading({
			    title: '奖品准备中...'
			  })
			  // 模拟请求奖品列表
			  let stoTimer = setTimeout(() => {
			    clearTimeout(stoTimer)
			    stoTimer = null
			    
			    // stock 奖品库存
			    // weight 中奖概率，数值越大中奖概率越高
			    this.prizeList = [
			      
			    ]
			    
			    // 计算出权重的总和并生成权重数组
			    if (this.isFrontend) {
			      this.prizeList.forEach((item) => this.weightTotal += item.weight)
			      this.weightArr = this.prizeList.map((item) => item.weight)
			    }
			  }, 500)
			},
			// 本次抽奖开始
			handleActionStart () {
					  // this.prizeList.map(item=>{
						 //  item.weight = 0;
					  // })
					  // this.prizeList[1].weight = 1;
					  // console.log();
			  this.targetName = ''
			  
			  let list = [...this.goodsList]
			  
			  // 模拟请求
			  let stoTimer = setTimeout(() => {
			    clearTimeout(stoTimer)
			    stoTimer = null
			    
			    // 判断是否由前端控制概率
			    // 前端控制概率的情况下，需要拿到最接近随机权重且大于随机权重的值
			    // 后端控制概率的情况下，通常会直接返回 prizeId
			    if (this.isFrontend && this.weightTotal) {
			      console.warn('###当前处于前端控制中奖概率，安全起见，强烈建议由后端控制###')
			      console.log('当前权重总和为 =>', this.weightTotal)
			      
			      // 注意这里使用了 Math.ceil，如果某个权重的值为 0，则始终无法中奖
			      let weight = Math.ceil(Math.random() * this.weightTotal)
			      console.log('本次权重随机数 =>', weight)
			      
			      // 生成大于等于随机权重的数组
			      let tempMaxArrs = []
			      list.forEach((item) => {
			        if (item.weight >= weight) {
			          tempMaxArrs.push(item.weight)
			        }
			      })
			      
			      // 如果大于随机权重的数组有值，先对这个数组排序然后取值
			      // 反之新建一个临时的包含所有权重的已排序数组，然后取值
			      if (tempMaxArrs.length) {
			        tempMaxArrs.sort((a, b) => a - b)
			        this.targetIndex = this.weightArr.indexOf(tempMaxArrs[0])
			      } else {
			        let tempWeightArr = [...this.weightArr]
			        tempWeightArr.sort((a, b) => a - b)
			        this.targetIndex = this.weightArr.indexOf(tempWeightArr[tempWeightArr.length - 1])
			      }
			    } else {
			      // 这里随机产生的 prizeId 是模拟后端返回的 prizeId
			      let prizeId = Math.floor(Math.random() * list.length)
			      list.forEach((item, index) => {
			        if (item.draw_goods_id === prizeId) {
			          // 中奖下标
			          this.targetIndex = 0
			        }
			      })
			    }
			    
			    console.log('本次抽中奖品 =>', this.goodsList[this.targetIndex].title)
			    // console.log('本次奖品库存 =>', this.prizeList[this.targetIndex].stock)
			    
			    // 开始执行旋转定位
			    this.$refs.raffleWheel.handleStartRotate(this.targetIndex)
			  }, 200)
			},
			// 本次抽奖结束
			handleActionEnd () {
				this.endMusic(this.serial_number);
			  console.log('旋转结束，执行拿到结果后到逻辑')
			  // let prizeName = this.prizeList[this.targetIndex].name
			  // let prizeStock = this.prizeList[this.targetIndex].stock
			  // this.targetName = prizeName === '谢谢参与' ? prizeName : prizeStock ? `恭喜您，获得 ${prizeName}` : '很抱歉，您来晚了，当前奖品已无库存'
			},
			// 抽奖转盘绘制完成
			handleDrawDone () {
			  console.log('抽奖转盘绘制完成')
			  uni.hideLoading()
			  // uni.showToast({
			  //   title: '奖品准备就绪'
			  // })
			},
			closeFollowTitle() {
				let _this = this;
				_this.followTitleShow = false;
			},
			closeFollowPop() {
				let _this = this;
				_this.followShow = false;
			},
			openQrShow() {
				let _this = this;
				_this.followShow = true;
			},
			showFalse(){
				console.log('进了showfalse')
				this.vxshow = false;
			},
			closePop() {
				let _this = this
				_this.popShow = false
			},
			GenerateAPoster(){
				this.showCommunity = true;
			},
			gostore(id) {
				App.navigationTo({
					url: `pages/mainPages/store/index?sid=${id}`
				})
			},
			close(type) {
				this.endImg = false;
				if (type == 1) {
					this.playdraw()
				}
			},
			endMusic(ind) {
				drawAudio.stop();
				drawAudio.onStop(() => {
					console.log('页面跳转暂停播放');
				});
				this.goodsList.map(item => {
					if (item.serial_number == ind) {
						this.effect_image = item.image;
						if (item.draw_goods_id == '0') {
							this.effect_image = '';
						};
						// this.effect_image = '../../../static/images/xxhg3.png';
						this.endDraw = item.title;
						this.endid = item.draw_goods_id;
						console.log(item, this.endid);
						this.endImg = true;
						this.startDraw = false;
						if(this.drawPageData.use_music){
							this.playAudio();
						}
						this.getDrawData(1);
					}
				})
			},
			startMusic(flag,msg) {
				let _this = this;
				if (flag == false) {
					this.startDraw = false;
					if(this.drawPageData.use_music){
						this.playAudio();
					}
					if(msg == '未绑定手机号'){
						//#ifdef H5
						_this.popShow = true;
						//#endif
						//#ifndef H5
						_this.vxshow = true;
						//#endif
					}
					return
				}
				drawAudio.src = _this.drawPageData.use_music;
				//#ifdef H5
				jWeixin.ready(() => {
					jWeixin.getLocation({
						type: 'gcj02',
						success: function(res) {
							drawAudio.play();
						}
					});
				});
				//#endif
				//#ifndef H5
				drawAudio.play();
				//#endif

				drawAudio.onPlay(() => {
					console.log('开始播放');
				});
			},
			playAudio() {
				let _this = this,
					play_Audio = _this.play_Audio ? false : true,
					pageAudio = _this.drawPageData.background_music;
				if (play_Audio) {
					//#ifdef H5
					jWeixin.ready(() => {
						jWeixin.getLocation({
							type: 'gcj02',
							success: function(res) {
								innerAudioContext.play();
								innerAudioContext.loop = true;
							}
						});
					});
					//#endif
					//#ifndef H5
					innerAudioContext.loop = true;
					innerAudioContext.play();
					//#endif

					innerAudioContext.onPlay(() => {
						console.log('开始播放');
					});
				}
				if (!play_Audio) {
					innerAudioContext.pause();
					innerAudioContext.onPause(() => {
						console.log('暂停播放');
					});
				}
				innerAudioContext.onError(res => {
					// console.log(res.errMsg);
					// console.log(res.errCode);
					innerAudioContext.destroy();
					//发生错误后，销毁实例
				});
				_this.play_Audio = play_Audio;
			},
			getDrawData(flag) {
				let _this = this;
				App._post_form(
					`&p=draw&do=home&id=${_this.parameterid}&draw_id=${_this.parameterid || 0}&head_id=${_this.parameter.head_id}`, {},
					res => {
						// console.log(res);
						_this.drawPageData = res.data.info;
						if (!_this.drawPageData.not_prize_image) {
							_this.drawPageData.not_prize_image = _this.imgfixUrls + 'wzjbj.png'
							// debugger
						}
						if(!_this.drawPageData.share_image){
							_this.drawPageData.share_image = [_this.imgfixUrls + 'cjzybj.jpg']
							// debugger
						}
						// let rule = decodeURIComponent(_this.drawPageData.rule);
						// _this.drawPageData.rule = rule;
						// console.log(rule)
						if (!_this.drawPageData.background_image) {
							_this.drawPageData.background_image = _this.imgfixUrls + 'cjbj.png';
						}
						_this.prizeList = res.data.record;
						_this.storeList = res.data.shop;
						_this.friendList = res.data.help;
						if(res.data.help instanceof Array){
							if(res.data.help.length == 0){
								_this.friendList = {
									list:[]
								}
							}
						}
						_this.goodsList = res.data.prize;
						_this.menuList = res.data.menu;
						if(_this.drawPageData.type == '3'){
							if(!_this.drawPageData.wheel_bg){
								_this.drawPageData.wheel_bg = ['#8EC074','#E6A53F'];
							}
							_this.goodsList.map((item,index)=>{
								item.weight = 1;
								item.prizeId = index + 1;
								item.stock = 100;
								item.name = item.title;
								if(!item.title){
									item.name = '谢谢参与'
								}
								// item.name = item.title;
							})
							// 这个是初始化转盘抽奖序列的
							if (this.isFrontend) {
							  this.goodsList.forEach((item) => this.weightTotal += item.weight)
							  this.weightArr = this.goodsList.map((item) => item.weight)
							}
						}
						
						
						if (flag == 1) return;
						if (res.data.info.background_music) {
							innerAudioContext.src = res.data.info.background_music;
							console.log(innerAudioContext.src);
							setTimeout(()=>{
								//#ifdef H5
								jWeixin.ready(() => {
									innerAudioContext.loop = true;
									innerAudioContext.play();
								});
								//#endif
								//#ifndef H5
								innerAudioContext.loop = true;
								innerAudioContext.play();
								//#endif
								// _this.playAudio();
							})
						}
						// uni.showToast({
						// 	title:'转发成功'
						// })
					},
					false,
					() => {
						_this.loadlogo = true;
					}
				);
			},
			gogetintegral() {
				App.navigationTo({
					url: `pages/subPages2/drawGame/gameIntegral?id=${this.parameterid}`
				})
			},
			myprize() {
				App.navigationTo({
					url: `pages/subPages2/drawGame/myPrize`
				})
			},
			isRuleShow(flag) {
				if (flag == 1) {
					this.parser = this.drawPageData.rule;
				} else {
					this.parser = this.drawPageData.introduce;
				}

				this.ruleShow = true;
			},
			// 开始抽奖
			playdraw() {
				let _this = this;
				let data = {
					type:'10',
					id:this.parameterid
				}
				let type = '10'
				App._post_form('&do=follow',
					data
				, res => {
					if (res.data.status == 0) {
						console.log('点了');
						if (this.startDraw) return;
						this.startDraw = true;
						this.startImg = true;
						setTimeout(() => {
							this.startImg = false;
						}, 1000);
						if(this.drawPageData.use_music){
							this.playAudio();
						};
						if(this.drawPageData.type == '3'){
							App._post_form(
								`&p=draw&do=draw&id=${_this.parameterid}`,
								{},
								res => {
									
									console.log(res)
									console.log('点击');
									_this.startMusic()
									_this.goodsList.map(item=>{
										item.weight = 0;
									});
									_this.goodsList[Number(res.data.serial_number) - 1].weight = 1;
									if (this.isFrontend) {
									  this.goodsList.forEach((item) => this.weightTotal += item.weight)
									  this.weightArr = this.goodsList.map((item) => item.weight)
									}
									_this.serial_number = res.data.serial_number;
									_this.startDraw = false;
									this.opendraw++;
									// _this.ind = Number(res.data.serial_number) - 1 // 随机产生一个中奖号码
									// // _this.ind = 14;
									// _this.index = 1;
									// _this.speed = 30;
									// _this.times = 0;
									// _this.startRoll();
								},fail=>{
									let msg = '';
									if(fail.data.message == '未绑定手机号'){
										msg = fail.data.message;
									}
								_this.startMusic(false,msg)
							});
						}else{
							this.opendraw++;
						}
						
					}else{
						_this.followShow = true;
						_this.followData = res.data;
					}
				})
				
			},
			ScrollUp() {
				// eslint-disable-next-line no-unused-vars
				this.intnum = setInterval(_ => {
					if (this.activeIndex < this.prizeList.length) {
						this.activeIndex += 1;
					} else {
						this.activeIndex = 0;
					}
				}, 1000);
			},

			Stop() {
				clearInterval(this.intnum);
			},
			Up() {
				this.ScrollUp();
			},
			cartScrollUp() {
				// eslint-disable-next-line no-unused-vars
				this.cartintnum = setInterval(_ => {
					if (this.cartactiveIndex < this.storeList.length * 22.8) {
						this.cartactiveIndex += 1;
					} else {
						this.cartactiveIndex = 0;
					}
				}, 50);
			},

			cartStop() {
				// clearInterval(this.cartintnum);
				setTimeout(() => {
					// this.cartScrollUp();
				}, 3000)
			},
			cartUp() {
				// this.cartScrollUp();
			}
		}
	}
</script>

<style>
	/* page {
		background-color: #F74740;
	} */
</style>
<style lang="scss" scoped>
	$wheelBgUrl: '~static/raffle-wheel/raffle-wheel__bg';
	.home {
		width: 100vw;
		height: 100vh;
	  padding: 50px 0;
	}
	.home-title {
	  text-align: center;
	  margin-bottom: 50px;
	}
	.home-title__text {
	  color: #ffffff;
	  font-size: 30px;
	  font-weight: bold;
	}
	.home-result {
	  text-align: center;
	  margin-top: 50px;
	}
	.home-result__text {
	  color: #ffffff;
	  font-size: 20px;
	  font-weight: bold;
	}
	.home-wheel {
	  text-align: center;
	}
	.raffle-wheel__tip {
	  font-size: 24rpx;
	}
	.home-action {
	  position: absolute;
	  left: 0;
	  right: 0;
	  bottom: 40rpx;
	  width: 260rpx;
	  height: 80rpx;
	  display: flex;
	  flex-direction: row;
	  justify-content: center;
	  align-items: center;
	  border-radius: 10rpx;
	  text-align: center;
	  background-color: #00ff99;
	  margin: 0 auto;
	}
	.home-action__text {
	  color: #FFFFFF;
	  font-size: 24rpx;
	}
	.drawGame {
		padding-bottom: 300upx;

		.titleBG {
			// width: 100vw;
			// height: 450upx;
			position: relative;

			.titleimg {
				width: 100vw;
				height: 100%;
			}

			.gameRule {
				font-size: 28upx;
				font-weight: 500;
				color: #FFFFFF;
				width: 50upx;
				text-align: center;
				background-color: #FB3A3A;
				height: 160upx;
				padding: 20upx 0 0upx;
				position: absolute;
				right: 0;
				top: 30%;
				transform: translateY(-50%);
				border-radius: 10upx 0 0 10upx;
				border: 2upx solid #FFFFFF;
				line-height: 28upx;
				border-right: none;
			}

			.left {
				left: 0;
				border-radius: 0upx 10upx 10upx 0upx;
				border: 2upx solid #FFFFFF;
				border-left: none;
			}
		}

		.bigbg {
			background-size: 100% 100%;
			// position: relative;
			// top:-5%;
			// margin-top: 48upx;
		}

		.bg {
			// background: url(../../../static/images/bg.png);
			background-size: 100% 100%;
			height: 1200upx;
			// margin: 30upx;
			margin-top: 0;
			position: relative;

			.scroll-wrap {
				height: 30upx;
				overflow: hidden;
				// font-size: 20upx;
				position: absolute;
				line-height: 30upx;
				left: 50%;
				top: 2.5%;
				transform: translate(-50%);
			}

			.scroll-content {
				position: relative;
				height: 15px;
				transition: top 0.5s;
				color: #FF4444;
				font-size: 15px;
			}

			.scroll-content-item {
				line-height: 15px;
				text-align: center;
			}

			.btnimg {
				transition: transform 0.3s ease-out;
			}

			.btnimg:active {
				transform: scale(0.9)
			}
			.ifeng{
				width: 160upx;
				height: 120upx;
				border-radius: 8upx;
				.ifelit{
					width: 160upx;
					height: 112upx;
					border-radius: 8upx;
				}
			}
			.description{
				width: 160upx;
				height: 52upx;
				border-radius: 60upx;
				.descriptionrulo{
					width: 160upx;
					height: 45upx;
					border-radius: 60upx;
					box-shadow: 0px 0px 5px #FFFFFF inset;
				}
			}
			.awardbtn{
				width: 160upx;
				height: 52upx;
				border-radius: 60upx;
				.awardbtnrulo{
					width: 160upx;
					height: 45upx;
					border-radius: 60upx;
					box-shadow: 0px 0px 5px #FFFFFF inset;
				}
			}

		}

		.activity {
			position: relative;
			top: 60upx;

			// padding: 30upx;
			.tagbox {
				position: absolute;
				left: 50%;
				top: -34upx;
				transform: translateX(-50%);
			}

			.contentbox {
				width: 236upx;
				height: 69upx;
				position: relative;
				z-index: 99;
				// margin: auto;
				background: linear-gradient(to bottom, #FEE76A 0%, #FBCD1C 100%);

				.text {
					position: absolute;
					text-align: center;
					color: #FFFFFF;
					line-height: 69upx;
					font-size: 33upx;
					width: 100%;
					height: 100%;
					font-weight: 700;
					text-shadow:
						-2upx -2upx 0 #FE8834,
						4upx -2upx 0 #FE8834,
						-4upx 4upx 0 #FE8834,
						4upx 4upx 0 #FE8834,
						0upx 4upx 4upx rgba(0, 0, 0, 0.6);
				}
			}

			.activity-friend {
				padding: 80upx 30upx 0;
				background-color: #FFFFFF;
				border-radius: 30upx;
			}

			.activity-content {
				border-radius: 30upx;
				width: 100%;
				height: 490upx;
				
				background-color: #FFFFFF;
				margin: auto;
				overflow: auto;

				.storeList {
					position: relative;
					transition: top 0.5s;
					overflow: auto;
					margin: 0upx 10upx 0upx;
					padding: 80upx 20upx 20upx;
					.storeList-item {
						padding: 20upx;
						margin-right: 20upx;
						box-shadow: 1upx 1upx 12upx 1upx #CCCCCC;
					}
				}
			}
		}

		// .bgcs{
		// 	background: url(../../../static/images/cjbj.png);
		// 	width: 100vw;
		// 	height: 100vh;
		// }
	}

	.rulebox {
		background: #FFFFFF;
		padding: 20upx;
		width: 75vw;
		height: 80vh;
		overflow: hidden;
		border-radius: 20upx;
	}

	.imgs-box {
		width: 500upx;
		height: 500upx;
		border-radius: 20upx;
	}

	.zjbj {
		// background-image: url(../../../static/images/xxhg3.png);
		// background-size: 100% 100%;
		// padding: 54upx;
		border-radius: 10upx;
		width: 85vw;
		height: 870upx;
		position: relative;

		.zjbox {
			position: absolute;
			left: 50%;
			top: 24%;
			transform: translate(-50%);
		}

		.closeBtn {
			font-size: 28upx;
			height: 40upx;
			width: 40upx;
			border-radius: 60upx;
			background-color: rgba(0, 0, 0, 0.8);
			color: #A8A2B2;
			line-height: 40upx;
			position: absolute;
			right: 0upx;
			top: 0upx;
		}

		.contenttitle {
			// width: 236upx;
			// height: 69upx;
			// position: relative;
			z-index: 99;
			// margin: auto;
			// background: linear-gradient(to bottom, #FEE76A 0%, #FBCD1C 100%);
			padding-bottom: 30upx;
			margin-bottom: 30upx;
			border-bottom: 1upx dotted #CCCCCC;

			.text {

				text-align: center;
				color: #ffffff;
				line-height: 69upx;
				font-size: 40upx;
				font-weight: 700;
				text-shadow:
					-2upx -2upx 0 #ff4444,
					4upx -2upx 0 #ff4444,
					-4upx 4upx 0 #ff4444,
					4upx 4upx 0 #ff4444,
					0upx 4upx 4upx rgba(0, 0, 0, 0.6);
			}
		}
	}
</style>
