ProAdvanced/pages/personal-page/personal/personal.vue

<template>
	<view class="bg-person " :class="bEFHitShake?' screen-jitter ':''">
		<!-- :title="title" @clickRight="onNavAppInfo() title="PK模式"" -->
		<!-- 自定义导航栏 backgroundColor="rgba(164, 136, 220, 1)"  @clickRight="onSyncData" @clickRight="onTestShare"-->
		<uni-nav-bar id="nav-bar" status-bar="true" backgroundColor="rgba(153, 150, 252, 255)" <!-- #ifdef APP-PLUS -->
			@clickLeft="showDrawer()"
			<!-- #endif -->
			<!-- #ifdef H5 || MP-WEIXIN -->
			@clickLeft="showClickEvent()"
			<!-- #endif -->
			color="#FFFFFF" fixed="true" :border="false">
			<view slot="left">
				<view class=" flex align-center margin-left">
					<image class="png-more" src="/static/more.png"></image>
				</view>
			</view>
			<!-- @clickRight="onNavFcGame()" -->
			<view slot="middle">
				<!-- <view style="position: relative; border: 1rpx solid #FFFFFF;">
					<view
						style="position: absolute;top: 0;left: -155rpx;right: 0;bottom: 0;margin: auto; width: 194rpx;height: 52rpx; border-radius: 26rpx 0 0 26rpx; background-color: rgba(255,255,255,0.12);"
						class="flex align-center justify-center">
						<image style="width: 26rpx;height: 24rpx; margin-right: 12rpx;"
							src="/static/personal/linkWhite.png"></image>
						<view class="text-14px ">连接设备</view>
					</view>
					
				</view> -->
				<view class="flex justify-center align-center" style="margin-left: 160rpx; ">
					<view class="flex align-center"
						style="margin-right: 40rpx; padding: 0 18px; height: 56rpx; background-color: rgba(255,255,255,0.11); border-radius: 13.5px;">
						<image class="png-more" style="margin-right: 16rpx;" src="/static/common/sideBar/sGold.png">
						</image>
						<view class="text-14px" style="line-height: 28rpx;">{{cGold}}</view>
					</view>
					<view class="flex  align-center"
						style="padding: 0 18px; height: 56rpx; background-color: rgba(255,255,255,0.11); border-radius: 13.5px;">
						<image class="png-more" style="margin-right: 16rpx; " src="/static/common/sideBar/sDiamond.png">
						</image>
						<view class="text-14px" style="line-height: 28rpx;">{{cDiamond}}</view>
					</view>
				</view>
			</view>
		</uni-nav-bar>
		<!-- 导航栏下面滚动区域 -->
		<scroll-view class="scroll-class" @scroll="mainScroll" :scroll-top="scrollTop" :scroll-into-view="toView"
			scroll-y="true" :style="{ height: scrollviewHight + 'px' }">
			<view class="flex align-center">
				<view class="justify-center">
					<!-- 计划显示 区域 topScrollHight :style="{ height: + '100%' }"-->
					<scroll-view scroll-y="true" style="height: 100%; width: 100%;">
						<view class="plan-view">
							<!-- 拳击模块 -->
							<view v-if="currentMode == 'pkMode' && 0 === currentModeIndex"
								style="display: flex; flex-direction: row; height: 200rpx; margin-top: 140rpx; justify-content: space-around;align-items: center;">
								<view>
									<view class="cu-avatar-group" style="position: relative;">
										<view class="cu-avatar round xl" :class="bAiHitShake?' screen-jitter':''"
											:style="[{ backgroundImage:'url('+avatarUrl+')' }]"></view>
										<HitEffect ref="aiHitEffectRef"></HitEffect>
									</view>
									<view style="margin-top: 20rpx; width: 165rpx;" class="text-cut text-white">
										{{userName}}
									</view>
								</view>

								<view>
									<image style="width: 104rpx; height: 42rpx ;margin-bottom: 60rpx;"
										src="/static/personal/pk@2x.png"></image>
								</view>
								<view>
									<view class="cu-avatar-group" style="position: relative;">
										<view class="cu-avatar round xl" :class="bHitShake?' screen-jitter':''"
											:style="[{ backgroundImage:'url('+aiObj.avatar+')' }]"></view>
										<HitEffect ref="hitEffectRef"></HitEffect>
									</view>
									<view style="margin-top: 20rpx; width: 165rpx;" class="text-cut text-white">
										{{aiObj.name}}
									</view>
								</view>

								<view
									style="position: absolute;left: 0;right: 0;top: 0;bottom: 0; height: 200rpx; margin-top: 120rpx;">
									<HitFistEffect ref="hitFistRef"></HitFistEffect>
								</view>

							</view>

							<!-- pk模式下的跳绳 -->
							<block v-if="1 === currentModeIndex">
								<view v-if="currentMode == 'pkMode'" class="flex justify-center "
									style="height: 180rpx; margin-top: 20rpx;">
									<view class="flex flex-direction justify-center align-center">
										<view class="cu-avatar-group" style="position: relative;">
											<view class="cu-avatar round xl" :class="bAiHitShake?' screen-jitter':''"
												:style="[{ backgroundImage:'url('+avatarUrl+')' }]"></view>
										</view>
										<view style="margin-top: 20rpx; width: 165rpx; "
											class="text-cut text-white text-center">
											{{userName}}
										</view>
									</view>

									<view class="flex justify-center align-center " style=" width: 300rpx;">
										<LEDFont style="" :showValue='AJData.myScore' :size="30" color='#FFFFFF'>
										</LEDFont>
										<view class="text-white text-bold">:</view>
										<LEDFont style="" :showValue='AJData.othreScore' :size="30" color='#FFFFFF'>
										</LEDFont>
									</view>
									<view v-if="finallySelectFriendInfo"
										class="flex flex-direction justify-center align-center"
										@click="onNavToSelectFriend()">
										<view class="cu-avatar-group" style="position: relative;">
											<view class="cu-avatar round xl" :class="bHitShake?' screen-jitter':''"
												:style="[{ backgroundImage:'url('+finallySelectFriendInfo.avatarUrl+')' }]">
											</view>
										</view>
										<view style="margin-top: 20rpx; width: 165rpx;"
											class="text-cut text-white text-center">
											{{finallySelectFriendInfo.username}}
										</view>
									</view>
									<view v-else class="flex flex-direction justify-center align-center"
										@click="onNavToSelectFriend()">
										<image style="width: 100rpx ;height: 100rpx;"
											src="/static/friend/friend-add.png">
										</image>
										<view style="margin-top: 20rpx; width: 165rpx;"
											class="text-cut text-white text-center">
											选择好友
										</view>
									</view>
								</view>
								<view v-else style="height:80rpx;"> </view>
							</block>

							<!-- 圆形进度条 -->
							<view
								v-if="(currentMode == 'pkMode' && 1 === currentModeIndex)||currentMode== 'calorieMode'"
								class="qiun-charts-arcbar">
								<!-- 进度条 -->
								<canvas canvas-id="canvasArcbar" id="canvasArcbar" class="charts-arcbar "></canvas>
								<!-- 图标 -->
								<view class="personal-fruit-container">
									<image style="width: 36rpx;height: 56rpx; margin-top: -120px;"
										src="../../../static/modal/action-jump/arcbarJumpIcon.png"></image>
								</view>

								<!-- 图标 -->
								<view class="personal-fruit-container">
									<view class="text-13px text-white" style="margin-top: -50px;">
										失误:{{AJData.faultCount}}</view>
								</view>
								<!-- 水果卡路里-->
								<!-- <view class="personal-fruit-container">
									<fruit ref="personalFruitRef" :calorie="planData.allCalorie"></fruit>
								</view> -->

								<!-- 跳动次数 -->
								<view class="personal-fruit-container">
									<LEDFont style="margin-top: 40px;" :showValue='AJData.allCount' :size="60"
										color='#FFFFFF'>
									</LEDFont>
									<!-- <view style="margin-top: 130px;font-size:12px;color: #FFFFFF;">计划时间{{planData.sportTime}}分钟</view> -->
								</view>
								<!-- 计划按钮 -->
								<!-- <view id="projectButtonView" style="position: absolute;left: 0;top: 18px;">
									<view class="flex justify-center" style="width: 100%;">
										<view class="charts-pring-button  make-line-bPurple " :class="bPlanExpired?'breathing-lamp':''" style="background-color: #FFFFFF;"
										 @tap="openPlan">
											<image src="/static/reform.png" class="p-data-png" mode="aspectFit"></image>
											<view class="text-11px">改计划</view>
										</view>
									</view>
								</view> -->

								<!-- 计时器 -->
								<view class="personal-fruit-container">
									<arcbarCountDown
										style="margin-top: 150px; border: 1rpx solid rgba(255,255,255,0.33); padding: 0 10px; border-radius: 40rpx;"
										ref="arcbarCountDownRef" :show-day="false" :second="AJData.gameLimitTime"
										color="#FFFFFF" background-color="rgba(255,255,255,0);" border-color="#007AFF"
										:size="18" splitorColor="#FFFFFF" @timeUp="arcbarCountDownTimeUp"
										@timeUpdate="arcbarCountDownTimeUpdate" />
								</view>


								<!-- 卡路里提示 -->
								<!-- <view class="personal-fruit-container">
									<prompt-box :calorie="planData.allCalorie"></prompt-box>
								</view> -->
							</view>
							<!-- 钻石和金币部分 -->
							<!-- <view class="charts-pring-bottom" style="margin-top: 34rpx;">
								<view class="flex justify-center align-center"
									style="height: 52rpx; width: 412rpx; background-color: rgba(255,255,255,0.11); border-radius: 12rpx;">
									<view class=" flex align-center justify-center" style="color: #fff;">
										<view class="flex  align-center">
											<image class="png-more" style="margin-right: 18rpx;"
												src="/static/personal/cDiamond.png"></image>
											<view>{{cDiamond}}</view>
										</view>
										<view class="flex  align-center" style="margin-left: 60rpx;">
											<image class="png-more" style="margin-right: 18rpx;"
												src="/static/personal/cGold.png"></image>
											<view>{{cGold}}</view>
										</view>
									</view>
								</view>
							</view> -->

							<!-- 用于定位 -->
							<!-- <view id="boxingHitID" style="position: absolute;top: 180rpx; pointer-events: none;" ></view> -->
							<view id="boxingHitID" v-if="0 === currentModeIndex" class="charts-pring-bottom">
								<!-- 添加一个 ConnectBindingDevice 测试 -->
								<boxing-hit ref="boxingPostRef"
									:bUpdate="!bHide&&(ConnectBindingDevice!=null)||(cIndex!=-1 && BLEConnectDevice!=null &&
								 (BLEConnectDevice.deviceType == 'mySelf'||BLEConnectDevice.deviceType == 'BLEHandle' || BLEConnectDevice.deviceType == 'BLERope' ))"
									:showTime="localSportTime"
									:bRebound="BLEConnectDevice&&BLEConnectDevice.limitType == 'rebound'"
									@updateCalorie="boxingUpdateCalorie" @boxingPostCheck="onPersonalCheck"
									@shake="onScreenShake" @updateSportTime="onUpdateSportTime"
									@boxingGuideFinish="onBoxingGuideFinish"
									@boxingPostControlPlay="onActionControlPlay" @modeEvent="onModeEvent"
									@hitEvent="onHitEvent" @aiHitEvent="onAiHitEvent" @gameOver="onBoxingGameOver"
									@closeBoxingControl="onCloseBoxingHit"></boxing-hit>

							</view>

							<view id='actionJumpID' v-if="1 === currentModeIndex" class="charts-pring-bottom">
								<action-jump ref="actionJumpRef"
									:levelData="currentJumpTask!=null?currentJumpTask.item:null"
									@actionJumpCheck="onPersonalCheck" @actionJumpControllerPlay="onActionControlPlay"
									@actionJumpDataUpdate="onActionJumpDataUpdate"
									@actionJumpCountDownUpdate="onActionJumpCountDownUpdate"
									@gameOver="onActionJumpGameOver"></action-jump>
							</view>
							<!-- <button @tap="onTestAddLocalCalorie">11</button> -->
						</view>

					</scroll-view>
					<!-- <view class="margin flex flex-direction">
						<view class="title">当前游戏链接：{{LocationGameUrl}}</view>
						<input style="border: 1rpx solid #000000;margin: 10rpx;" @input="onKeyInput" placeholder="输入同步到view中" />
					</view> -->
					<!-- <button  @tap="onShowBoxingHitTip">11</button> -->
				</view>
			</view>
			<!-- <modal-mask></modal-mask> -->

			<!-- <view class="example">
				<view class="example-title">从左侧滑出</view>
				<button @click="showDrawer">显示抽屉</button>
			</view> -->
			<!-- <view class="example">
				<button @click="showPopup('signIn',null)">显示 每日签到</button>
			</view> -->
			<view class="example" style="margin-top: 10rpx;">
				<button @click="onNavToDirection">跳转校准页面</button>
			</view>
			<view style="height: 100rpx;"></view>
		</scroll-view>

		<!-- 底部中间上滑按钮 -->
		<view class="flex flex-direction justify-center align-center task-up-button">
			<image style="width: 156rpx; height: 32rpx;" src="../../../static/personal/slideUp.png" @tap="showModal"
				data-target="slideUpModal"></image>
			<view style="width: 100%;height: 36rpx; background-color: #FFFFFF; color: #FFFFFF;"></view>
		</view>

		<!-- 右下角导航栏 -->
		<round-fab :connect="cIndex!=-1 && BLEConnectDevice!=null" @fabClick="fabClick"></round-fab>

		<!-- 侧边栏 -->
		<sideBar ref="sideBar"></sideBar>

		<!-- 训练卡 -->
		<view class="cu-modal" :class="modalName == 'sportCompletion' ? 'show' : ''">

			<view style="
			position: relative; 
			width: 586rpx;
			height: 766rpx;
			background-color: #FFFFFF; 
			border-radius: 25px;
			display: inline-block;
			vertical-align: middle;
			margin-left: auto;
			margin-right: auto;
			overflow: hidden;">
				<view style="position: relative; width: 100%; height: 328rpx;">
					<image style="position: absolute;top: 0;left: 0; width: 100%;height: 100%;"
						src="../../../static/sidebar_top_bg.png"></image>
					<view class="flex flex-direction justify-around align-center"
						style="position: relative; height: 100%;">
						<view class="text-white">已在哔嘣健身训练了</view>
						<view class="text-white"><span style="font-size: 43px;">{{sportData.time}}</span> 分钟</view>
						<view class="text-white">本次达标率{{sportData.percent}}%</view>
					</view>
				</view>
				<view class="flex justify-around">
					<view class="flex flex-direction justify-around align-center"
						style="position: relative; height: 162rpx;">
						<view class="text-grey">消耗</view>
						<view class="text-grey"><span
								style="font-size: 18px; color: #000000;">{{sportData.calorie}}</span> 卡</view>
					</view>
					<view class="flex flex-direction justify-around align-center"
						style="position: relative; height: 162rpx;">
						<view class="text-grey">踩中</view>
						<view class="text-grey"><span style="font-size: 18px; color: #000000;">{{sportData.hit}}</span>
							次</view>
					</view>
					<view class="flex flex-direction justify-around align-center"
						style="position: relative; height: 162rpx;">
						<view class="text-grey">失误</view>
						<view class="text-grey"><span style="font-size: 18px; color: #000000;">{{sportData.miss}}</span>
							次</view>
					</view>
				</view>
				<view class="flex flex-direction justify-around align-center margin-top-sm">
					<view style="position: relative; width: 500rpx; border:1rpx solid #EEEEEE ;"></view>
				</view>
				<view class="flex flex-direction justify-around align-center" style="height: 230rpx;">
					<view class="text-black text-16px">非常优秀，继续加油!</view>
					<view class="flex justify-center align-center text-white make-bg-bPurple round text-16px"
						style="width: 300rpx;height: 80rpx;" @tap="hideModal">确定</view>
				</view>
			</view>
		</view>
		<!-- :class="modalName == 'jumpAnimation' ? 'show' : ''" -->
		<view class="cu-modal " :class="modalName == 'jumpAnimation' ? '' : ''">

			<view style="
			position: relative; 
			width: 586rpx;
			height: 400rpx;
			background-color: #FFFFFF; 
			border-radius: 4px;
			display: inline-block;
			vertical-align: middle;
			margin-left: auto;
			margin-right: auto;
			overflow: hidden;">
				<view style="height: 100%;display: flex;justify-content: center;align-items: center;">
					<character></character>
				</view>
			</view>
		</view>

		<!-- 引导蒙层 bGuidePages guideCurrent-->
		<code-elf-guide ref="codeElfGuide" v-if="bGuidePages" @hide="guideHide" @change="onGuideChange"
			:current="guideCurrent" :currentMode="currentMode"></code-elf-guide>

		<!-- <view v-if="bStartBoxingPost" class="CountDownMask">
			{{BoxingPostCountDownText}}
		</view> -->

		<view class="cu-modal " :class="modalName=='showPlanTipModal'?'show':''"
			@touchmove.stop.prevent="moveBoxingHandle">
			<view class="cu-bind-modal">
				<view style="position: absolute; top: 0; left: 0; width: 100%; height:100%;">
					<image style="position: absolute;top: 0;left: 0; width: 100%;height: 100%;"
						src="/static/modelBg.png"></image>
				</view>
				<view class="flex flex-direction justify-between " style="position: relative; height: 100%;">
					<view class="flex justify-around justify-center align-center" style="margin: 170rpx 30rpx 0 30rpx;">
						<view style="width: 80rpx;height: 2rpx;border-radius: 2px; background-color: #cbcdcf;"></view>
						<view class="make-text-bPurple" style=" font-size: 20px;">提示</view>
						<view style="width: 80rpx;height: 2rpx;border-radius: 2px;background-color: #cbcdcf;"></view>
					</view>
					<view class="text-16px" style="align-self: center; max-width: 200px; word-break: break-all;">
						{{planTip[planTipIndex]}}
					</view>

					<view class="flex justify-around align-center"
						style=" border-top: 1rpx solid #EEEEEE; margin-bottom: 2px;">
						<view class="flex justify-center align-center  text-16px" style="width: 100%;height: 123rpx;"
							@tap="hidePlanTipModal">取消</view>
						<view style="height: 123rpx;width: 1px;background-color: #EEEEEE;"></view>
						<view class="flex justify-center align-center  text-16px" style="width: 100%;height: 123rpx;"
							@tap="confirmPlanTipModal">确定</view>
					</view>
				</view>


			</view>
		</view>

		<ModalTip ref='modalTipRef' :class="modalName=='showModalTip'?' show':''" @hide="onModalTipHide"
			@confirm="onModalTipConfirm"></ModalTip>

		<!-- 任务栏 -->
		<view class="cu-modal bottom-modal" :class="modalName=='slideUpModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog bg-white" style="border-radius: 15px 15px 0 0 ;" @tap.stop="">
				<view class="flex justify-center align-center" style="width: 100%; height: 60rpx;" @tap="hideModal">
					<view class="text-blue make-bg-bPurple radius" style="width: 80rpx; height: 4px;"></view>
				</view>
				<view class="flex justify-between" style="width: 100%; padding: 34rpx 60rpx 46rpx 81rpx;">
					<view class="flex align-center justify-center">
						<view class="text-16px text-bold make-text-bPurple"
							style="line-height: 32rpx;  margin-right: 18rpx;">{{currentMode == 'pkMode'?'PK模式':'健身模式'}}
						</view>
						<image style="width: 42rpx;height: 24rpx;" src="/static/common/modal/right-arrow.png"></image>
					</view>
					<view>
						<button class="make-bg-bPurple flex justify-center align-center" @click="onSwitchMode">
							<view class="flex align-center justify-center" style="width: 190rpx;height: 60rpx;">
								<image style="width: 24rpx;height: 22rpx; margin-right: 18rpx;"
									src="/static/personal/switchWhite.png"></image>
								<view class="text-14px text-white" style="line-height: 28rpx;">
									{{currentMode !== 'pkMode'?'PK模式':'健身模式'}}
								</view>
							</view>
						</button>
					</view>

				</view>
				<scroll-view scroll-y="true" style="height: 800rpx; max-height: 800rpx;min-height: 460rpx;"
					:style="{ height: modalHeight + 'px' }" :scroll-into-view="taskIntoView"
					:scroll-top="taskScrollTop">
					<view class="my-column-cu-steps">
						<view class="cu-item" :class="!item.isUnlock?'':'make-text-bPurple'"
							v-for="(item,index) in currentTaskList" :key="index" :id='"task_"+index'
							@click="selectTask(index,item)">
							<image v-if="item.isUnlock" class="my-column-cu-image"
								src="../../../static/common/modal/unLock.png"></image>
							<image
								v-else-if="index>=1&&currentTaskList[index-1].isUnlock&&currentTaskList[index-1].isPassed"
								class="my-column-cu-image" src="../../../static/common/modal/canUnlock.png">
							</image>
							<image v-else class="my-column-cu-image" src="../../../static/common/modal/lock.png">
							</image>
							<view class="content">
								<view class="text-15px text-bold text-cut text-left "
									style="margin-left: 48rpx; width: 360rpx;">
									{{index+1}}. {{item.name}}
								</view>
								<view class="flex justify-start align-center" style="margin:30rpx 0 30rpx 86rpx;">
									<!-- 居中绘制星星样式 -->
									<view class="flex align-center justify-center"
										style="margin-right: 36rpx;margin-top: 4rpx;">
										<image style="width: 24rpx;height: 26rpx; margin-right: 18rpx;"
											src="/static/common/sideBar/sGold.png"></image>
										<view class="text-13px" style="line-height: 26rpx;">{{item.consumeGold}}
										</view>
									</view>
									<view class="flex align-center justify-center"
										style="margin-right: 36rpx;margin-top: 4rpx;">
										<image style="width: 24rpx;height: 26rpx; margin-right: 18rpx;"
											src="/static/common/sideBar/sDiamond.png"></image>
										<view class="text-13px" style="line-height: 26rpx;">{{item.consumeDiamond}}
										</view>
									</view>

								</view>
								<!-- <view class="text-13px text-grey text-left" style="margin: 20rpx 20rpx 0 86rpx;">
									{{item.conditionPassed.explain}}
								</view> -->
								<view class="flex justify-start align-center" style="margin-left: 86rpx;">
									<view class="flex flex-direction align-center" v-for="(item, index) in 5"
										:key="index">
										<image style="width: 34rpx;height: 32rpx;"
											src="../../../static/modal/action-jump/stars.png">
										</image>
									</view>

								</view>

							</view>
							<image class="my-column-cu-right-image" style="pointer-events:auto;"
								src="../../../static/common/modal/medal.png" @click="showPopup('prompt',item)">
							</image>

							<image class="my-column-cu-image"
								style="left: 130rpx;top: 40rpx; width: 50rpx;height: 50rpx;"
								:src="(currentJumpTask!=null&&item.id==currentJumpTask.item.id)?'/static/devicesOther/radio-b.png':'/static/devicesOther/radio-g.png'"
								mode="aspectFit"></image>

						</view>
					</view>
				</scroll-view>


				<button class="cu-btn make-bg-bPurple text-white margin-top margin-bottom"
					style="width: 604rpx;height: 88rpx;" @tap="onPassTheLevel">点击直接通过所选关卡</button>

			</view>
		</view>


	</view>
</template>

<script>
	// import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import uCharts from '@/components/u-charts/u-charts.js';
	import myPicker from '@/components/slambb-picker/slambb-picker.vue';
	import pickerData from '@/components/slambb-picker/picker.js';
	import date from '@/util/util-js/date.js';
	import sideBar from '@/components/side-bar/side-bar.vue';

	import reqUtil from '@/util/util-js/requstUtil.js';
	import config from '@/common/config.js';

	import uniCountDown from '@/components/uni-count-down/uni-count-down.vue'

	import character from "@/components/electAni/character.vue"
	import fruit from "@/components/fruitMachine/fruitMachine.vue"

	import promptBox from "@/components/prompt-box/prompt-box.vue"

	import roundFab from "@/components/round-fab/round-fab.vue"

	import codeElfGuide from '@/components/code-elf-guide/code-elf-guide.vue'

	import boxingPost from "@/components/modal/boxing-post/boxing-post.vue"

	import boxingHit from "@/components/modal/boxing-hit/boxing-hit.vue"

	import actionJump from "@/components/modal/action-jump/action-jump.vue"

	import AccAndOri from "@/util/util-js/AccAndOri.js"

	import AvatarConfig from "@/util/util-js/avatar.js"

	import HitEffect from "@/components/effectHit/hitEffect.vue"
	import HitFistEffect from "@/components/effectHit/hitFistEffect.vue"

	import ModalTip from "@/components/modal-tip/modalTip.vue"

	import keyboardListener from '@/components/keyboard-listener/keyboard-listener.vue'

	import LEDFont from '@/components/LEDFont/LEDFont.vue'

	import arcbarCountDown from '@/components/uni-count-down/uni-count-down.vue'

	import modalMask from '@/components/modal-mask/modal-mask.vue'

	// 获取 module 
	// var testModule = uni.requireNativePlugin("MyAttitude")
	// const modal = uni.requireNativePlugin('modal');


	import {
		mapState,
		mapMutations
	} from 'vuex';

	var _self;
	var canvaArcbar1;

	export default {
		computed: mapState(['bCanvasShow', 'forcedLogin', 'hasLogin', 'userName', 'avatarUrl', 'days', 'remainingDays',
			'signature', 'weight', 'height', 'planData', 'BLEDeviceShowList', 'BLEConnectDevice', 'bPlanExpired',
			'bPlanFinish',
			'bGuidePages',
			'globalAcc', 'globalOri', 'DeviceBindingList', 'ConnectBindingDevice', 'cIndex', 'bNewGuide',
			'localSportTime',
			'currentModeIndex', 'oldArcbarProCalorie', 'oldArcbarAllCalorie', 'bOpenBluetooth', 'bOpenSuccess',
			'bListenAdapterStateChange', 'bConnection', 'bVerifiedConnection', 'currentInstruction',
			'instructionState',
			'LocationGameUrl',
			'bPhoneMatched',
			'versionCodeState',
			'platform',
			'systemInfo', 'navHeight', 'tabbarHeight',
			'cDiamond', 'cGold',
			'finallySelectFriendInfo',
			'currentJumpTask', 'singlePersonList', 'multiPersonList'
		]),
		components: {
			// uniNavBar,
			myPicker,
			sideBar,
			uniCountDown,
			character,
			fruit,

			roundFab,

			codeElfGuide,
			boxingPost,
			boxingHit,
			promptBox,
			HitEffect,
			HitFistEffect,
			ModalTip,
			keyboardListener,

			actionJump,
			LEDFont,
			arcbarCountDown,

			modalMask
		},

		data() {
			return {
				title: 'pk模式', //pk模式 健身模式
				modalName: null,
				originalDate: '', //记录new date
				currentDate: '', //当前日期
				cWidthArcbar: '', //圆弧进度图
				cHeightArcbar: '', //圆弧进度图
				arcbarWidth: '', //圆弧进度图，进度条宽度,此设置可使各端宽度一致
				pixelRatio: 1,
				// textarea: '',
				// arcbarImagePath: '/static/logo.png',
				// cWidth: '',
				// cHeight: '',
				scrollviewHight: '',
				// 顶部区域部分
				topScrollHight: '',
				// 选择器
				pickerObj: {},
				// lineAImagePath: '/static/logo.png',
				// visible: true,
				// indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth / (750 / 100))}px;`,
				//设备列表
				deviceList: [{
					name: '蹦床',
					icon: '/static/trampoline.png'
				}],
				cState: 1,
				//游戏列表
				gameList: [],
				//视频列表,现在视频是和游戏一起管理
				videoList: [],
				//运动数据
				sportData: {
					calorie: 0,
					hit: 0,
					miss: 0,
					percent: 0,
					time: 0,
					allData: 0
				},

				//设置滚动栏高度
				scrollTop: 0,
				//scroll view 跳转到对应的组件上
				toView: '',
				guideCurrent: 0,

				bHide: false,

				//屏幕抖动
				bEFHitShake: false,
				bStartBoxingPost: false,
				BoxingPostCountDownText: 3,
				b_countDown: null,

				countDownUrl: [
					"/static/personal/audio/GO.mp3",
					"/static/personal/audio/1.mp3",
					"/static/personal/audio/2.mp3",
					"/static/personal/audio/3.mp3"
				],
				threeUrl: "/static/personal/audio/3.mp3",
				twoUrl: "/static/personal/audio/2.mp3",
				oneUrl: "/static/personal/audio/1.mp3",
				goUrl: "/static/personal/audio/GO.mp3",

				dangdang: "/static/personal/audio/dangdang.mp3",
				personalAudioContext: null,

				planTip: [
					'您今天的目标已经达成,是否进行自由训练.',
					'您今天的目标还没完成,是否结束训练.'
				],
				planTipIndex: 0,

				//匹配的ai信息
				aiObj: {
					name: '匿名',
					avatar: '/static/defaultAvatar.png'
				},
				aiOldObj: {
					name: '匿名',
					avatar: '/static/defaultAvatar.png'
				},

				currentMode: 'calorieMode', //pkMode calorieMode

				bHitShake: false,

				bAiHitShake: false,
				//限制重连，比如去了对应硬件连接页面，限制这个页面的重连操作
				bLimitReconnection: false,

				/**
				 * 首页这里连接了蓝牙，然后选择框回来后show会触发，触发时候检测一下是否有对应的
				 * 匹配蓝牙
				 */
				bGetBondTesting: false,

				basicsList: [{
						cuIcon: 'usefullfill',
						name: '开始',
						bLock: false,
					}, {
						cuIcon: 'radioboxfill',
						name: '等待',
						bLock: true,
					},
					{
						cuIcon: 'roundclosefill',
						name: '错误'
					}, {
						cuIcon: 'roundcheckfill',
						name: '完成'
					},
					{
						cuIcon: 'roundcheckfill',
						name: '完成'
					},
					{
						cuIcon: 'roundcheckfill',
						name: '完成'
					},
				],
				basics: 3,
				currentTask: null, //当前选择的任务
				taskIntoView: '',
				taskScrollTop: 0,
				currentTaskList: [],
				nextTaskCanUnlock: false, //下一个关卡是否可解锁

				/**
				 * actionJump 模块对应的交互参数
				 */
				//pk部分参数
				AJData: {
					allCount: 0,
					faultCount: 0,
					perCountDown: 0,
					gameCountDown: 0,
					myScore: 0,
					othreScore: 0,
					gameLimitTime: 0,
					describe: '', //关卡说明
				},

				/**
				 * 任务参数
				 */
				modalHeight: 300,
			};
		},
		onLoad() {
			//设置self
			_self = this;
			// 圆形进度条样式
			this.cWidthArcbar = uni.upx2px(415); //这里要与样式的宽高对应
			this.cHeightArcbar = uni.upx2px(440); //这里要与样式的宽高对应
			this.arcbarWidth = uni.upx2px(14);
			// 体重数据样式
			// this.cWidth = uni.upx2px(750);
			// this.cHeight = uni.upx2px(300);
			// #ifdef APP-PLUS || H5
			//监听
			uni.$on('updateArcbarData', this.updateArcbarData);
			// #endif

			//监听
			uni.$on('callbackCloseBLE', this.callbackCloseBLE);
			// uni.$on('callbackBLEState', this.callbackBLEState);

			//获得游戏列表
			// reqUtil
			// 	.requestData(config.URL.GAMERECOMMENDBYPLATFORM, {
			// 		recommendType: 2,
			// 		endTime: config.endTime
			// 	})
			// 	.then(
			// 		res => {
			// 			// console.log('GAMERECOMMEND =====', res);
			// 			if (res.code == 0) {
			// 				if (res.data.gameList.length > 3) {
			// 					this.gameList = this.gameList.concat(res.data.gameList.slice(0, 3));
			// 				} else {
			// 					this.gameList = this.gameList.concat(res.data.gameList);
			// 				}
			// 			}
			// 		},
			// 		e => {
			// 			console.log(e);
			// 		}
			// 	);
			//获得视频列表
			// reqUtil
			// 	.requestData(config.URL.GAMERECOMMENDBYPLATFORM, {
			// 		recommendType: 1,
			// 		endTime: config.endTime
			// 	})
			// 	.then(
			// 		res => {
			// 			if (res.code == 0) {
			// 				if (res.data.gameList.length > 3) {
			// 					this.videoList = this.videoList.concat(res.data.gameList.slice(0, 3));
			// 				} else {
			// 					this.videoList = this.videoList.concat(res.data.gameList);
			// 				}
			// 			}
			// 		},
			// 		e => {
			// 			console.log(e);
			// 		}
			// 	);


			//初始化后设置一下pickerObj
			this.pickerObj = {
				pickerLeftList: pickerData.getWeightList().leftList,
				pickerRightList: pickerData.getWeightList().rightList,
				pickerType: 'doubleItem',
				pickerUnit: '公斤',
				pickerTitle: '记体重',
				defaultValue: this.weight,
				showInput: true,
			};


			this.getPlanData(function() {
				// 如果个人页面直接获取数据
				_self.showArcbar();

			});

			this.personalAudioContext = uni.createInnerAudioContext();
			this.personalAudioContext.autoplay = false;
			this.personalAudioContext.src = this.dangdang;
			this.personalAudioContext.volume = 1;

			//获取本地记录的运动时间
			uni.getStorage({
				key: 'localSportTime',
				success: function(res) {
					// console.log("本地的时间:",res.data);
					_self.$store.state.localSportTime = res.data;
				}
			});

			//获取设备信息，上报服务器
			this.gOnAddClientInfo();


			this.registerPopupEvent();

			//获取任务数据
			this.getLevelList(() => {
				this.switchTaskInfo();
			});
			//钱包信息
			this.getUserWallets();
			
			//测试socket
			// console.log('test*******************************');
			// this.$testWS.connectSocket(()=>{
			// 	this.$testWS.sendSocketMessage('unity');
			// });
		},
		onShow() {
			_self.bHide = false;

			if (canvaArcbar1)
				_self.updateArcbarData();

			//this.bConnection && 
			if (this.bVerifiedConnection && this.BLEConnectDevice) {
				this.updateBLECIndex();

				// setTimeout(() => {
				// 	/**
				// 	 * 如果是首页连接，则检测
				// 	 */
				// 	if (this.bGetBondTesting) {
				// 		this.onGetBondDevice();
				// 		this.bGetBondTesting = false;
				// 	}
				// }, 5000)

			}
			//如果是测试数据
			if (this.ConnectBindingDevice) {
				if (this.$refs.boxingPostRef) {
					this.$refs.boxingPostRef.onSetMode('pkMode');
				} else {
					setTimeout(() => {
						this.$refs.boxingPostRef.onSetMode('pkMode');
					}, 500)
				}
			}

			console.log('personal show');

			this.bLimitReconnection = false;

			//测试环境检测，给个modal提示 active
			// if (config.active == 'dev') {
			// 	function thanDate(date2) {
			// 		var oDate1 = new Date();
			// 		console.log("检测日期", oDate1);
			// 		var oDate2 = new Date(date2);
			// 		if (oDate1.getTime() > oDate2.getTime()) {
			// 			return true;
			// 		} else {
			// 			return false;
			// 		}
			// 	}
			// 	if (thanDate('2021-05-31 13:10:36')) {
			// 		uni.showModal({
			// 			title: "提示",
			// 			content: "此版本为测试版本，有需要请和开发者联系。微信 sweetdontcry"
			// 		})
			// 	}
			// }

		},
		onReady() {
			// 计算屏幕剩余高度  填补剩余高度
			let phoneHeight = this.systemInfo.windowHeight;

			console.log('计算屏幕剩余高度 ===:', phoneHeight,this.systemInfo);
			// 计算组件的高度
			_self.scrollviewHight = phoneHeight - this.navHeight - this.tabbarHeight - 16 - this.systemInfo.statusBarHeight;
			// let view = uni.createSelectorQuery().select('#nav-bar');
			// view.boundingClientRect(data => {
			// 	// console.log('data===:', data);
			// 	if (data != null) {
			// 		_self.navHeight = data.height;
			// 		_self.scrollviewHight = _self.phoneHeight - _self.navHeight;
			// 		_self.topScrollHight = _self.phoneHeight - _self.navHeight - 30;
			// 	}
			// }).exec();

		},
		onUnload() {
			console.log("personal ********* onUnload *********");
			// #ifndef APP-PLUS||H5
			//监听
			console.log('移除监听');
			uni.$off('updateArcbarData', this.updateArcbarData);
			// #endif
			//*****注释蓝牙操作******
			uni.$off('callbackCloseBLE', this.callbackCloseBLE);
			// uni.$off('callbackBLEState', this.callbackBLEState);
			uni.$off('updateBLEDeviceData', this.callbackUpdateBLEData);

			//unload 时候清除timeout
			this.onUnloadCreateBLEConnectionTimeout();

			this.unregisterPopupEvent();

		},
		onHide() {
			_self.bHide = true;
			console.log("personal ******* onHide *******");
			//时间暂停 ,隐藏了 需要判断是否为空
			if (_self.$refs.countDownObj)
				_self.$refs.countDownObj.timePause('pause');
			//心电图暂停
			if (_self.$refs.electRef)
				_self.$refs.electRef.pausedElect(true);

		},
		methods: {
			...mapMutations(['accountLogin', 'getPlanData', 'addlocalCalorie', 'setLocalCalorie', 'setShowCalorie',
				'syncLocalDataToServer', 'syncRequestEvent', 'setLocalSportTime',
				'initAdapter', 'onCreateBLEConnection', 'onUnloadCreateBLEConnectionTimeout', 'onCloseBLEConnection',
				'gOnAddClientInfo', 'onWriteBLEConnectionValue',
				'gCreateFilterObj', 'gUpdateFilter', 'B_GetBondedDevices', 'B_OpenBLESetting', 'B_OpenRopeSkipping',
				'B_CloseRopeSkipping',
				'gCreateSandbagAlgorithm', 'gUpdateSandbagAlgorithm', 'gStartSimulateBLEUpdate',
				'gStopSimulateBLEUpdate',
				'getActionJumpTask',
				'setActionJumpTask', 'getLevelList',
				'getUserWallets', 'setGoldAndDiamond',
				'onConvertDeviceData',
				'showDrawerById','showPopupById'
			]),
			BasicsSteps() {
				this.basics = this.basics == this.basicsList.length - 1 ? 0 : this.basics + 1
			},
			onKeyDown(e) {
				console.log(e);
			},

			showClickEvent() {
				this.$refs.sideBar.showModal();
				this.$store.state.bCanvasShow = false;
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target;
				this.$store.state.bCanvasShow = false;

				if (this.modalName == "slideUpModal") {
					this.updateTaskScroll();
				}
			},
			hideModal(e) {
				if (this.modalName == "sportCompletion") {
					console.log("关闭卡片");
					this.sportData = {
						calorie: 0,
						hit: 0,
						miss: 0,
						percent: 0,
						time: 0,
						allData: 0,
					}
				}
				this.modalName = null;
				this.$store.state.bCanvasShow = true;
			},
			onTestAddLocalCalorie() {
				let _add = (10 * 1.875) / (4 * 30);
				console.log(_add);
				this.onUpdateCaloriePlane(10);
			},
			/**
			 * 首页圆形表部分时间计时器
			 */
			arcbarCountDownTimeUp() {
				//todo,涉及到倒计时的关卡。时间到。游戏结束
				if (1 === this.currentModeIndex) {
					this.$refs.actionJumpRef.onGameOver();
				}

			},
			arcbarCountDownTimeUpdate(data) {
				this.AJData.gameCountDown = data.curSeconds;
				this.updateArcbarDataFromActionJump();
			},
			arcbarCountDownTimeReset() {
				//清除时间计时器
				this.$refs.arcbarCountDownRef.timePause();
			},
			arcbarCountDownPlay() {
				this.$refs.arcbarCountDownRef.timePlay();
			},
			// 进度条数据
			arcbarData(_planData) {
				let showCal = 0,
					showLCal = 0,
					LCalTip = '',
					showTip = '';
				let series = [{
					name: showTip,
					data: 0,
					color: '#2fc25b'
				}];
				//这里区分进度条数据
				if (0 == this.currentModeIndex) {
					showCal = _planData.calorie;
					showLCal = _planData.allCalorie;
					LCalTip = '大卡';
					showTip = '（未达标）';

					// 如果运动的卡路里大于目标卡路里，设置为目标卡路里值，即为Max
					if (showLCal >= showCal) {
						showTip = '（达标）';
					}

					series = [{
						name: showTip,
						data: _planData.allCalorie == 0 ? 0 : _planData.allCalorie / showCal,
						color: '#2fc25b'
					}];
				} else if (1 == this.currentModeIndex) {
					showCal = _planData.calorie;
					showLCal = _planData.allCalorie;
					LCalTip = '大卡';
					showTip = '（未达标）';

					// 如果运动的卡路里大于目标卡路里，设置为目标卡路里值，即为Max
					if (showLCal >= showCal) {
						showTip = '（达标）';
					}

					series = [{
						name: showTip,
						data: this.AJData.gameCountDown == 0 ? 0 : this.AJData.gameCountDown / this.AJData
							.gameLimitTime,
						color: '#2fc25b'
					}];

					// console.log(series);
				}

				return {
					showCal,
					showLCal,
					LCalTip,
					showTip,
					series
				}

			},
			// 圆形进度条
			showArcbar() {
				let {
					showCal,
					showLCal,
					LCalTip,
					series
				} = this.arcbarData(_self.planData);
				// console.log("series==", series[0]);
				canvaArcbar1 = new uCharts({
					$this: _self,
					canvasId: 'canvasArcbar',
					type: 'myGradualChangeArcbar',
					fontSize: 11,
					legend: {
						show: false
					},
					background: '#FFFFFF',
					pixelRatio: 1,
					series: series,
					animation: false,
					width: _self.cWidthArcbar,
					height: _self.cHeightArcbar,
					dataLabel: true,
					//  Math.round(chartData.series[0].data * 100) + '%'
					// title: {
					// 	// arcbarDate: date.formatDate(_self.originalDate),
					// 	name: showLCal,
					// 	molecularUnit: LCalTip, //单位的分子部分
					// 	denominatorUnit: showCal, //单位的分母部分
					// 	unitFontSize: 11, //单位字符大小
					// 	color: 'rgba(255, 255, 255, 1)',
					// 	fontSize: 28,
					// 	offsetX: -30,
					// 	offsetY: 10
					// },
					// subtitle: {
					// 	name: series[0].name,
					// 	color: 'rgba(255, 255, 255, 1)',
					// 	fontSize: 13,
					// 	offsetY: -75
					// },
					extra: {
						arcbar: {
							type: 'default',
							backgroundColor: 'rgba(234, 234, 255, 1)',
							backgroundEndColor: 'rgba(234, 234, 255, 1)',
							backgroundMiddle: '#9291FF', //'rgba(158, 158, 255, 1)',
							width: _self.arcbarWidth, //圆弧的宽度
							lineColor: '#51EDFE',
							lineEndColor: '#F7C75D'
						}
					}
				});

				// 更新位置同步
				this.syncLocalDataToServer((res) => {
					this.originalDate = res.newDate;
					this.currentDate = date.formatTime(res.newDate);
					this.updateArcbarData();
				});
			},
			updateArcbarData(data) {
				// if (data == "plan") {
				// 	// 加入设置的卡路里小于本地，则更新本地最小值
				// 	_self.addlocalCalorie(0);
				// 	console.log("**************updateArcbarData");
				// 	// 如果是计划设置好后
				// 	// this.$store.state.bPlanFinish = true;
				// 	// setTimeout(() => {
				// 	// 	this.$store.state.bPlanFinish = false;
				// 	// }, 10000)
				// }
				// console.log("updateArcbarData：",this.planData);
				let {
					showCal,
					showLCal,
					LCalTip,
					series
				} = _self.arcbarData(_self.planData);

				if (showCal == _self.oldArcbarProCalorie && showLCal == _self.oldArcbarAllCalorie) {
					// console.log("没有改变值，不刷新表盘：", showCal, _self.oldArcbarProCalorie, showLCal, _self.oldArcbarAllCalorie);
					return;
				}
				//这个是显示当前的总卡路里
				_self.$store.state.oldArcbarAllCalorie = showLCal;
				//这个是计划的卡路里
				_self.$store.state.oldArcbarProCalorie = showCal;

				canvaArcbar1.updateData({
					series: series,
					// title: {
					// 	//这里的文案是自定义的，不写是不变的
					// 	name: showLCal,
					// 	molecularUnit: LCalTip, //单位的分子部分
					// 	denominatorUnit: showCal, //单位的分母部分
					// }
					//,
					// subtitle: {
					// 	//这里的文案是自定义的，不写是不变的
					// 	name: series[0].name
					// }
				});
			},
			updateArcbarDataFromActionJump(data) {
				let {
					showCal,
					showLCal,
					LCalTip,
					series
				} = _self.arcbarData(_self.planData);

				canvaArcbar1.updateData({
					series: series
				});
			},
			//没有限制下的更新表盘
			updateNoLimit() {
				let {
					showCal,
					showLCal,
					LCalTip,
					series
				} = _self.arcbarData(_self.planData);

				//这个是显示当前的总卡路里
				_self.$store.state.oldArcbarAllCalorie = showLCal;
				//这个是计划的卡路里
				_self.$store.state.oldArcbarProCalorie = showCal;

				canvaArcbar1.updateData({
					series: series,
					// title: {
					// 	//这里的文案是自定义的，不写是不变的
					// 	name: showLCal,
					// 	molecularUnit: LCalTip, //单位的分子部分
					// 	denominatorUnit: showCal, //单位的分母部分
					// }
					// ,
					// subtitle: {
					// 	//这里的文案是自定义的，不写是不变的
					// 	name: series[0].name
					// }
				});
			},
			// 跳转计划页面
			openPlan(e) {
				// console.log(e);
				uni.navigateTo({
					url: '../plan/plan?newsid=' + 11,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

			// 跳转转换页面
			onNavConver() {
				uni.reLaunch({
					url: '../../conversion-page/conversion/conversion',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			// 跳转我的页面
			onNavMyPage() {
				uni.navigateTo({
					url: '../../my-page/homepage/homepage',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

			updateBLECIndex() {
				for (let i = 0; i < this.BLEDeviceShowList.length; i++) {
					let eq = this.BLEDeviceShowList[i];
					if ((eq.ename.indexOf("mobilePhoneBandage") > -1 && this.BLEConnectDevice.id == 0) ||
						(eq.ename.indexOf("hotman") > -1 && this.BLEConnectDevice.id == 1) ||
						(eq.ename.indexOf("BLEHandle") > -1 && this.BLEConnectDevice.id == 2) ||
						(eq.ename.indexOf("rope") > -1 && this.BLEConnectDevice.id == 3)) {

						eq.bRatio = true;
						this.$store.state.cIndex = i;

					}

					if (eq.ename.indexOf("hotman") > -1 && this.BLEConnectDevice.id == 1) {
						if (this.$refs.boxingPostRef) {
							this.$refs.boxingPostRef.onSetMode('pkMode');
						} else {
							setTimeout(() => {
								this.$refs.boxingPostRef.onSetMode('pkMode');
							}, 500)
						}

					} else if (eq.ename.indexOf("BLEHandle") > -1 && this.BLEConnectDevice.id == 2) {
						if (this.$refs.boxingPostRef) {
							this.$refs.boxingPostRef.onSetMode('calorieMode');
						} else {
							setTimeout(() => {
								this.$refs.boxingPostRef.onSetMode('calorieMode');
							}, 500)
						}
					} else if (eq.ename.indexOf("rope") > -1 && this.BLEConnectDevice.id == 3) {
						//todo 暂时设置兼容跑步模式
						// if (this.$refs.boxingPostRef) {
						// 	this.$refs.boxingPostRef.onSetMode('ropeMode');
						// } else {
						// 	setTimeout(() => {
						// 		this.$refs.boxingPostRef.onSetMode('ropeMode');
						// 	}, 500)
						// }
					}
				}
			},

			/**
			 * 蓝牙断开连接时候
			 */
			callbackCloseBLE() {
				if (0 == this.currentModeIndex) {
					//蓝牙断开连接后，直接关闭
					this.$refs.boxingPostRef.onCloseDevices();
				}
			},
			//蓝牙状态回调
			callbackBLEState(res) {
				console.log("callbackBLEState==", res);
				if (this.cState != res.state) this.cState = res.state;
			},
			//设备回调事件
			callbackUpdateBLEData(data) {
				//如果在监听状态时候隐藏页面，返回
				if (_self.bHide) return;
				// console.log("callbackDeviceState==", data);

				if (this.ConnectBindingDevice) {
					this.gUpdateSandbagAlgorithm({
						data: data,
						callback: (res) => {
							if (res.type == 'hit') {
								this.$refs.boxingPostRef.onBLEHotmanUpdate(res);
							}
						}
					});
					return;
				}

				//连接了手柄模式
				//没有开启指令不刷新
				if (!this.instructionState.bOpen) return;

				if (this.BLEConnectDevice.usageMode == "hotman") {
					this.gUpdateFilter({
						data: data,
						callback: (res) => {
							if (res.type == 'hit') {
								this.$refs.boxingPostRef.onBLEHotmanUpdate(res);
							}
						}
					});
				} else if (this.BLEConnectDevice.usageMode == "general") {
					//这个是普通打击模式
					this.$refs.boxingPostRef.onBLEHandleUpdate(data);
				} else if (this.BLEConnectDevice.usageMode == "ropeSkipping") {
					
					this.onConvertDeviceData({
						data: data,
						callback: (outData) => {
							// this.outBLEData = {
							// 	acc: outData.convertAcc,
							// 	gyro: outData.convertGyro
							// }
							// console.log(JSON.stringify(outData),JSON.stringify(data));
							data.acc = outData.convertAcc;
							data.gyro = outData.convertGyro;
							//跳绳蓝牙反馈
							this.$refs.actionJumpRef.onBLERopeUpdate(data);
							
						}
					});

				}


			},
			//绑定设备函数
			onBindingDevice(item, index) {
				if (item == null) {
					item = this.DeviceBindingList[0];
				}
				if (this.BLEConnectDevice) {
					uni.showToast({
						icon: "none",
						title: "已连接硬件设备",
						duration: 1000
					})
					return;
				}

				if (this.ConnectBindingDevice) {
					this.$store.state.ConnectBindingDevice = null;
					setTimeout(() => {
						uni.showToast({
							icon: "none",
							title: "断开连接",
							duration: 1000
						})
					}, 300)
				} else {
					this.$store.state.ConnectBindingDevice = item;
					setTimeout(() => {
						uni.showToast({
							icon: "none",
							title: "已连接",
							duration: 1000
						})
					}, 300)
					//连接后保存最近连接的设备
				}

				//刷新状态
				this.$refs.boxingPostRef.onSetMode('pkMode');

			},
			//关闭设备函数
			onCloseBindingDevice(item, e) {
				if (e.currentTarget.dataset.index == this.cIndex) {
					uni.showModal({
						title: '设备状态',
						content: '是否断开连接',
						ConfirmColor: '#A488DC',
						success: res => {
							if (res.confirm) {
								this.$store.state.cIndex = -1;
								this.$store.state.ConnectBindingDevice = null;
							}
						}
					});
				}
			},
			onNavBindingDevice() {
				this.toView = "addDeviceView";
			},
			onDevice(item, e) {
				if (this.ConnectBindingDevice) {
					uni.showToast({
						title: '当前已开启数据',
						icon: 'none',
						mask: true
					})
					return;
				}
				if (this.cIndex !== -1) {
					uni.showToast({
						title: '当前已连接设备',
						icon: 'none',
						mask: true
					})
					return;
				}
				//连接蓝牙
				this.onCreateBLEConnection({
					item: item,
					index: e.currentTarget.dataset.index,
					initItem: true,
					getinitAdapter: () => {
						this.onDevice(item, e);
					},
					getSuccess: () => {
						if (this.bHide) {
							//弹出框时候,是隐藏状态
							this.bGetBondTesting = true;
						} else {
							//没有弹出框时候,直接检测
							// setTimeout(() => {
							// 	this.onGetBondDevice();
							// }, 5000)
						}

						//刷新状态
						if (this.cIndex != -1) {
							let eq = this.BLEDeviceShowList[this.cIndex];
							// console.log(eq,this.BLEConnectDevice);
							if (eq.ename.indexOf("hotman") > -1 && this.BLEConnectDevice.id == 1) {
								this.$refs.boxingPostRef.onSetMode('pkMode');
							} else if (eq.ename.indexOf("BLEHandle") > -1 && this.BLEConnectDevice.id == 2) {
								this.$refs.boxingPostRef.onSetMode('calorieMode');
							} else if (eq.ename.indexOf("rope") > -1 && this.BLEConnectDevice.id == 3) {
								// this.$refs.boxingPostRef.onSetMode('ropeMode');
							}
						}
					}
				});
			},
			/**
			 * 检测获取匹配的设备
			 */
			onGetBondDevice() {
				/**
				 * 假如手机没有匹配，断开连接
				 */
				console.log("****", this.BLEConnectDevice);
				if (!this.BLEConnectDevice) return;

				this.B_GetBondedDevices({
					deviceId: this.BLEConnectDevice.deviceId,
					success: (bondedDevice) => {
						// console.error("===========", bondedDevice);
						// uni.hideToast();
						if (bondedDevice == null) {
							// if (plus.os.name == 'Android') 
							{
								//此问题 华为手机容易出现
								//android手机已配对的设备 不存在，但是app 又直接连接成功了。提示，并且断开app连接
								//1.关闭当前连接
								this.onCloseBLEConnection({
									getSuccess: () => {}
								});
								uni.hideToast();
								//2.跳转蓝牙设置
								uni.showModal({
									title: '蓝牙配对失败',
									content: '请跳转后点击配对BGBox_2020,成功后手动跳转回哔蹦重新连接。',
									success: (res) => {
										if (res.confirm) {
											this.B_OpenBLESetting();
										}
									}
								})
							}
						}
					}
				});

			},

			openDeviceList(e) {

				if (this.ConnectBindingDevice) {
					uni.showToast({
						title: '当前已开启数据',
						icon: 'none',
						mask: true
					})
					return;
				}

				//先判断蓝牙是否初始化
				/**
				 * 蓝牙部分操作,转全局变量操作
				 * */
				console.log("openDeviceList bOpenBluetooth", this.bOpenBluetooth);
				// #ifdef APP-PLUS
				if (!this.bOpenBluetooth) {

					this.initAdapter(() => {
						uni.navigateTo({
							// url: '../devices-category/devices-category',
							url: '../devices-hardware/devices-hardware',
							success: res => {
								this.bLimitReconnection = true;
							},
							fail: () => {},
							complete: () => {}
						});
					});

					return;
				}
				// #endif
				uni.navigateTo({
					url: '../devices-hardware/devices-hardware',
					success: res => {
						this.bLimitReconnection = true;
					},
					fail: () => {},
					complete: () => {}
				});
			},
			onNavToMore() {
				uni.navigateTo({
					url: '../more/more?index=' + this.cIndex,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			onAddDevice() {
				let deviceItem = {
					name: '蹦床',
					icon: '/static/trampoline.png'
				};
				if (this.deviceList.length != 0) {
					this.deviceList = this.deviceList.concat(deviceItem);
				} else {
					this.deviceList = deviceItem;
				}
			},
			onCloseDevice(item, e) {
				//如果不是连接状态，则删除
				if (e.currentTarget.dataset.index != this.cIndex) {
					if (this.cIndex != -1) {
						uni.showToast({
							icon: 'none',
							title: "请先断开已连接设备",
							duration: 2000,
							mask: true
						})
						return;
					}
					uni.showModal({
						title: '设备状态',
						content: '是否删除设备?',
						ConfirmColor: '#A488DC',
						success: res => {
							if (res.confirm) {
								this.$store.commit('deleteBLEDevice', e.currentTarget.dataset.index);
							}
						}
					});
					return;
				}
				uni.showModal({
					title: '设备状态',
					content: '是否断开连接?',
					/**
					 * 如果需要强制，不显示取消按钮
					 */
					showCancel: true,
					ConfirmColor: '#A488DC',
					success: res => {
						if (res.confirm) {
							this.onCloseBLEConnection({
								getSuccess: () => {}
							});

						}
					}
				});
			},

			onNavDetail(item) {
				console.log(item);
				let temItem = encodeURIComponent(JSON.stringify(item));
				// return;
				uni.navigateTo({
					url: '../../game-page/game-detail/game-detail?item=' + temItem
				});
			},
			onNavToGameMore(e) {

				uni.reLaunch({
					url: '../../game-page/game/game?type=' + e.currentTarget.dataset.type
				});
			},

			//判断是否有其他限制
			onStartCheck() {
				//#ifdef H5
				// 直接走测试，如果是h5
				if (0 === this.currentModeIndex) {
					this.onBoxingGuideFinish();
				} else if (1 === this.currentModeIndex) {
					if (this.currentJumpTask == null) {
						uni.showToast({
							title: '先选一个挑战关卡',
							icon: 'none',
							duration: 2000,
						})
						return;
					}
					//调用开始
					this.onActionJumpPlay();
				}

				return;
				//#endif
				//分类型判断
				if (0 === this.currentModeIndex) {
					//拳击运动类型
					// 1.检测是否有对应设备,没有ConnectBindingDevice,再进行下一步
					if (this.ConnectBindingDevice == null) {
						uni.showToast({
							title: '开启连接数据',
							icon: 'none'
						})
						this.toView = "openAccGyroView";
						return;

					}
					// TODO,目前去掉蓝牙设备
					// //2.检测是否有设备
					// if (this.BLEDeviceShowList.length == 0) {
					// 	this.$store.state.bGuidePages = true;
					// 	this.guideCurrent = 3;
					// 	uni.showToast({
					// 		title: '请添加蓝牙设备',
					// 		icon: 'none'
					// 	})
					// 	this.toView = "addDeviceView";
					// 	return;
					// }
					// //2.检测是否连接设备 || this.BLEConnectDevice.ename !== 'BT04'
					// if (this.cIndex == -1) {
					// 	//没有连接设备，提示去连接设备
					// 	uni.showToast({
					// 		title: '请连接蓝牙设备',
					// 		icon: 'none'
					// 	})
					// 	this.toView = "addDeviceView";
					// 	return;
					// }

				} else if (1 === this.currentModeIndex) {

					//2.检测是否连接设备 || this.BLEConnectDevice.ename !== 'BT04'
					if (this.cIndex == -1) {
						//没有连接设备，提示去连接设备
						uni.showToast({
							title: '请连接蓝牙设备',
							icon: 'none'
						})
						this.toView = "addDeviceView";
						return;
					}
				}


				//3.检测一下计划日期
				console.log(this.remainingDays);
				// if (this.planData.startTime > this.planData.endTime || this.remainingDays == 0) {
				// 	if (!this.$store.state.bPlanExpired) {
				// 		this.$store.state.bPlanExpired = true;
				// 		setTimeout(() => {
				// 			this.$store.state.bPlanExpired = false;
				// 		}, 3000)
				// 		uni.showToast({
				// 			title: "计划到期,请制定计划。",
				// 			icon: 'none'
				// 		})
				// 	}

				// 	this.$store.state.bGuidePages = true;
				// 	setTimeout(() => {
				// 		this.$refs.codeElfGuide.setCurrent(0);
				// 	}, 0)
				// 	this.toView = "projectButtonView";
				// 	return;
				// }

				if (0 === this.currentModeIndex) {

					//如果新手，调用新手教程
					console.log("this.bNewGuide:", this.bNewGuide);
					// this.$store.state.bNewGuide = true;
					if (this.bNewGuide) {
						// this.$refs.boxingPostRef.onGuideBoxingPostPlay();
						// 拳击的新手提示
						this.$store.state.bGuidePages = true;
						this.guideCurrent = 5;
						this.toView = "boxingHitID";
						this.$store.state.bNewGuide = false;
					} else {
						if (this.ConnectBindingDevice) {
							//假如有连接bingding设备
							this.gCreateSandbagAlgorithm();
							this.gStartSimulateBLEUpdate();
						} else {
							//todo 跳绳模式 发送开启指令
							if (this.BLEConnectDevice.usageMode == "ropeSkipping") {
								//打开跳绳模式
								this.B_OpenRopeSkipping();
							} else {
								//初始化filter快速打击对象
								if (this.BLEConnectDevice.usageMode == "hotman") {
									this.gCreateFilterObj();
								}
								//打开加速计
								this.onWriteBLEConnectionValue({
									value: "3"
								});

								// setTimeout(() => {
								// 	//设置加速计b:20ms a:10ms
								// 	this.onWriteBLEConnectionValue({
								// 		value: config.refreshRate
								// 	});

								// }, 1000)
							}

						}

						//监听蓝牙回调
						uni.$on('updateBLEDeviceData', this.callbackUpdateBLEData);


						this.onBoxingGuideFinish();
					}

				} else if (1 == this.currentModeIndex) {
					if (this.BLEConnectDevice.usageMode == "ropeSkipping") {
						//打开跳绳模式
						// this.B_OpenRopeSkipping();
						this.onWriteBLEConnectionValue({
							value: "3"
						});
					}
					//监听蓝牙回调
					uni.$on('updateBLEDeviceData', this.callbackUpdateBLEData);

					//调用开始
					this.onActionJumpPlay();
				}
			},
			onShowBoxingHitTip() {
				this.$store.state.bGuidePages = true;
				this.guideCurrent = 5;
				this.toView = "boxingHitID";
				this.$store.state.bNewGuide = false;
			},
			//检测是否符合要求，没有的话进行新手提示
			onPersonalCheck() {

				if (1 === this.currentModeIndex && this.currentJumpTask == null) {
					uni.showToast({
						title: '先选一个挑战关卡',
						icon: 'none',
						duration: 2000,
					})
					return;
				}

				this.onStartCheck();
			},
			//
			onBoxingGuideFinish() {

				if (this.b_countDown) {
					clearInterval(this.b_countDown);
					this.b_countDown = null;
				}

				//|| this.currentMode == 'ropeMode'
				if (this.currentMode == 'calorieMode') {
					this.personalAudioContext.stop();
					this.personalAudioContext.play();

					setTimeout(() => {
						this.$refs.boxingPostRef.onBoxingPostPlay(true);
					}, 600);
				} else {
					this.BoxingPostCountDownText = 3;
					this.$refs.boxingPostRef.onSetRingAnimation(true);
					uni.showToast({
						title: '匹配中...',
						mask: true,
						icon: 'loading',
						duration: 2000
					})

					setTimeout(() => {
						//ai信息
						this.onGetAiRandom();

						// this.b_countDown = setInterval(() => {

						// 	if (this.BoxingPostCountDownText <= 1) {
						// 		if (this.b_countDown) {
						// 			clearInterval(this.b_countDown);
						// 			this.b_countDown = null;
						// 		}
						// 		setTimeout(() => {
						// 			this.personalAudioContext.stop();
						// 			this.personalAudioContext.play();
						// 			this.$refs.boxingPostRef.onBoxingPostPlay(true);
						// 			this.$refs.boxingPostRef.onSetRingAnimation(false);
						// 			uni.hideToast();
						// 		}, 800)
						// 	}
						// 	this.BoxingPostCountDownText--;
						// }, 1000)
						setTimeout(() => {
							this.personalAudioContext.stop();
							this.personalAudioContext.play();
							this.$refs.boxingPostRef.onBoxingPostPlay(true);
							this.$refs.boxingPostRef.onSetRingAnimation(false);
							uni.hideToast();
						}, 800)
					}, 2000);

				}


			},
			//运动时间
			onUpdateSportTime(res) {
				// console.log("同步的运动时间",res);
				this.setLocalSportTime(res);
			},

			//更新运动数据
			onUpdateCaloriePlane(data) {

				// 记录卡路里到本地
				this.addlocalCalorie(data);

				this.updateArcbarData();
			},

			onRoundTrigger(data) {
				// console.log("onRoundTrigger==", data);
				// return;
				let url = '';
				switch (data.item.type) {
					case "personal":
						//个人中心页面
						url = '../../personal-page/personal/personal';
						break;
					case "game":
						url = '../../game-page/game/game';
						break;
					default:
						url = '../../personal-page/personal/personal';
						break;
				}
				uni.reLaunch({
					url: url,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

			/**
			 * 同步本地数据到服务器
			 */
			onSyncData() {
				this.syncRequestEvent({
					success: () => {
						this.updateArcbarData();
					}
				});
				// 更新显示日期
				this.originalDate = new Date();
				this.currentDate = date.formatTime(this.originalDate);
			},
			hidePlanTipModal() {
				this.modalName = null;
				if (this.planTipIndex === 1) {
					// 您今天的目标还没完成  是否结束训练
					this.onActionPause(false);
				}
			},
			confirmPlanTipModal() {
				this.modalName = null;
				if (this.planTipIndex === 0) {
					this.onStartCheck()
				} else if (this.planTipIndex === 1) {
					// 您今天的目标还没完成  是否结束训练
					this.onActionPause(true);
				}
			},
			//断开连接时候，关闭
			onCloseBoxingHit() {
				console.log('关闭训练');
				if (this.currentMode == 'pkMode') {
					this.$refs.hitEffectRef.onStop();
				}
				this.onActionPause(true);
			},
			//点击暂停时候，判断一下是否完成目标
			onActionControlPlay(bPlay) {
				if (!bPlay) {
					if (this.planData.allCalorie < this.planData.calorie) {
						this.modalName = 'showPlanTipModal';
						this.planTipIndex = 1;
					} else {
						//假如完成了目标，更新卡路里
						this.onActionPause(true);
					}
				}
			},
			/**
			 * 切换体验模式
			 * @param {Object} data
			 */
			onModeEvent(data) {
				console.log("当前模式:", data);
				this.currentMode = data.mode;
				this.title = data.name;
				// || this.currentMode == 'ropeMode'
				if (this.currentMode == 'calorieMode') {
					setTimeout(() => {
						this.updateNoLimit();
					}, 0)

				}
			},
			onAiHitEvent(bloodPoint) {

				// this.onPlay({
				// 	bloodPoint: num,
				// 	createType: 'red',
				// 	callback: (res) => {
				// 		console.log("红色拳头击中对方：", res);
				// 	}
				// });
				this.$refs.hitFistRef.onPlay({
					bloodPoint: bloodPoint,
					createType: 'red',
					callback: () => {
						if (this.bAiHitShake) return;
						this.bAiHitShake = true;
						this.$refs.aiHitEffectRef.onPlay();
						this.$refs.aiHitEffectRef.onAIHit();
						setTimeout(() => {
							this.bAiHitShake = false;
						}, 500)
					}
				});


			},
			//打击时候头像修改
			onHitEvent(bloodPoint) {
				// console.log("this.bHitShake:",this.bHitShake);

				this.$refs.hitFistRef.onPlay({
						bloodPoint: bloodPoint,
						createType: 'blue',
						callback: () => {
							if (this.bHitShake) return;
							this.bHitShake = true;
							this.$refs.hitEffectRef.onPlay();
							this.$refs.hitEffectRef.onMyHit();
							setTimeout(() => {
								this.bHitShake = false;
							}, 500)
						}
					}

				);
			},

			//弹出目标提示后，进行下一步
			onActionPause(bFinish) {
				if (bFinish) {
					if (this.ConnectBindingDevice) {
						this.gStopSimulateBLEUpdate();
					} else {
						// if (this.BLEConnectDevice.usageMode == "ropeSkipping") {
						// 	this.B_CloseRopeSkipping();
						// } else {

						// }
						if (0 === this.currentModeIndex) {
							this.$refs.boxingPostRef.onBoxingPostStop();
							//停止时候，重置ai信息
							this.aiObj.name = this.aiOldObj.name;
							this.aiObj.avatar = this.aiOldObj.avatar;

						} else if (1 === this.currentModeIndex) {
							//todo actionJump
							this.$refs.actionJumpRef.onClearActionJumpData();
						}
						//停止蓝牙加速计
						this.onWriteBLEConnectionValue({
							value: "4"
						});

					}
					uni.$off('updateBLEDeviceData', this.callbackUpdateBLEData);
					this.syncRequestEvent({
						success: () => {
							this.updateArcbarData();
						}
					});
				} else {
					//如果不是，继续调用播放
					if (0 === this.currentModeIndex) {
						this.$refs.boxingPostRef.onBoxingPostPlay(true);
					} else if (1 === this.currentModeIndex) {
						//actionJump
						this.$refs.actionJumpRef.onContinueGame();
					}
					// if (this.BLEConnectDevice.usageMode == "ropeSkipping") {

					// } else {
					// }
				}

			},

			/**
			 * 新手任务引导
			 */
			onGuideChange(e) {
				let tempCurrent = e.detail.current;
				if (tempCurrent == 1) {
					_self.toView = "addDeviceView";
				} else if (tempCurrent == 0) {
					_self.toView = "projectButtonView";
				}

			},

			guideHide(e) {
				this.$store.state.bGuidePages = false;
				if (e.current == 0 && !e.onlyHide) {
					//跳转计划页面
					this.openPlan();
				} else if (e.current == 1 && !e.onlyHide) {
					console.log('guideHide:', e.current);
					//跳转搜索设备页面
					// this.openDeviceList();
				} else if (e.current == 3 && !e.onlyHide) {
					//新手引导跳转扫码页面，直接走绑定 再check
					// this.openQRCode((res) => {
					// 	setTimeout(() => {
					// 		this.onPersonalCheck();
					// 	}, 200);
					// });
					// 跳转连接蓝牙页面
					this.openDeviceList();
				} else if (e.current == 4 && !e.onlyHide) {
					//连接绑定设备
					// this.openQRCode();
					console.log(e);
					let _index = Number(e.device.dataset.index);
					this.onBindingDevice(this.DeviceBindingList[_index], _index);

					//连接设备后，再
					setTimeout(() => {
						this.onPersonalCheck();
					}, 200);
				} else if (e.current == 5 && !e.onlyHide) {
					console.log("==:", e);
					//todo 跳绳模式 新手引导
					if (this.BLEConnectDevice.usageMode == "ropeSkipping") {
						this.B_OpenRopeSkipping();
					} else {
						//初始化filter快速打击对象
						if (this.BLEConnectDevice.usageMode == "hotman") {
							this.gCreateFilterObj();
						}
						//打开加速计
						this.onWriteBLEConnectionValue({
							value: "3"
						});

						// setTimeout(() => {
						// 	//设置加速计b:20ms a:10ms
						// 	this.onWriteBLEConnectionValue({
						// 		value: config.refreshRate
						// 	});

						// }, 1000)
					}

					//监听蓝牙回调
					uni.$on('updateBLEDeviceData', this.callbackUpdateBLEData);
					this.onBoxingGuideFinish();
				}
			},

			mainScroll(e) {
				if (_self.toView == "addDeviceView") {
					_self.toView = "";
					if (!_self.bGuidePages) return;
					let view = uni.createSelectorQuery().select('#addDeviceView');
					view.boundingClientRect(data => {
						_self.$refs.codeElfGuide.setDeviceObj(data);
					}).exec();
				} else if (_self.toView == "projectButtonView") {
					_self.toView = "";
					if (!_self.bGuidePages) return;
					_self.onGetProjectView();
				} else if (_self.toView == "QRDeviceView") {
					_self.toView = "";
					if (!_self.bGuidePages) return;
					let view = uni.createSelectorQuery().select('#QRDeviceView');
					view.boundingClientRect(data => {
						_self.$refs.codeElfGuide.setDeviceObj(data);
					}).exec();
				} else if (_self.toView == "bing-boxingPost") {
					_self.toView = "";
					if (!_self.bGuidePages) return;
					let view = uni.createSelectorQuery().select('#bing-boxingPost');
					view.boundingClientRect(data => {
						_self.$refs.codeElfGuide.setDeviceObj(data);

						console.log(data);
					}).exec();
				} else if (_self.toView == "boxingHitID") {
					_self.toView = "";

					// let view = uni.createSelectorQuery().select('#boxingHitID');
					// view.boundingClientRect(data => {
					// 	_self.$refs.codeElfGuide.setModalObj(data);

					// 	console.log(data);
					// }).exec();
				} else if (_self.toView == "openAccGyroView") {
					_self.toView = "";
				}
			},

			onGetProjectView() {
				let view = uni.createSelectorQuery().select('#projectButtonView');
				view.boundingClientRect(data => {
					_self.$refs.codeElfGuide.setProjectObj(data);
				}).exec();
			},

			//拳击模块的回调
			boxingUpdateCalorie(calorie) {
				if (this.currentMode != 'pkMode') {
					//这里调用一下设置可以播放音效
					this.$refs.personalFruitRef.onCanPlay();
				}

				this.onUpdateCaloriePlane(calorie);


			},
			//扫码添加设备
			openQRCode(callback) {
				let that = this;
				// 允许从相机和相册扫码
				uni.scanCode({
					success: function(res) {
						// console.log('条码类型：' + res.scanType);
						// console.log('条码内容：' + res.result);
						let obj = JSON.parse(res.result)
						let data = {
							type: obj.type,
							uuid: obj.uuid,
						}
					}
				});
			},

			//屏幕抖动
			onScreenShake() {
				this.bEFHitShake = true;
				setTimeout(() => {
					this.bEFHitShake = false;
				}, 500)
			},

			onGetAiRandom() {
				let _self = this;

				let avatarlist = AvatarConfig.getAvatarList().avatarList;
				let _length = avatarlist.length;
				let _index = Math.floor(Math.random() * _length);

				console.log(avatarlist);

				_self.aiObj.name = avatarlist[_index].name;
				_self.aiObj.avatar = avatarlist[_index].url;
			},
			onBoxingGameOver(res) {
				this.$refs.hitEffectRef.onStop();

				this.onActionPause(true);

				let _title = res.myWin ? "胜利" : "失败";
				let _context = res.myWin ? "你已经赢得PK胜利！" : "你在PK中被打败了！";
				this.modalName = "showModalTip"

				this.$refs.modalTipRef.setShowData({
					title: _title,
					context: _context,
					operationItem: null
				});
			},
			onModalTipHide() {
				this.modalName = null;

			},
			onModalTipConfirm(data) {
				let {
					type,
					operationItem
				} = data;
				this.modalName = null;
				//再来一局
				//提示过关奖励
				console.log('onModalTipConfirm', type, operationItem);
				if (type == 'PASSTHELEVEL') {
					this.showPopup('levelReward', operationItem);
				}
			},
			onTestShare() {
				uni.share({
					provider: "weixin",
					scene: "WXSenceTimeline",
					type: 2,
					imageUrl: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			openAcc() {
				if (!this.globalAcc) {
					AccAndOri.bindAcc((accId) => {
						this.$store.state.globalAcc = accId;
						console.log("初始化：globalAcc=", this.globalAcc);
					});
				}

				if (!this.globalOri) {
					AccAndOri.bindOri((oriId) => {
						this.$store.state.globalOri = oriId;
						console.log("初始化：globalOri=", this.globalOri);
					});
				}
			},
			closeAcc() {
				AccAndOri.unBindAcc(this.globalAcc);
				this.$store.state.globalAcc = null;

				AccAndOri.unBindOri(this.globalOri);
				this.$store.state.globalOri = null;
			},
			outGyro(o) {
				console.log("Orientation\nAlpha:" + o.alpha + "\nBeta:" + o.beta + "\nGamma:" + o.gamma);
			},
			openGyro() {
				if (!this.globalOri) {
					AccAndOri.bindOri((oriId) => {
						this.$store.state.globalOri = oriId;
						console.log("初始化：globalOri=", this.globalOri);
					});
				}
				uni.$on('watchOrientation', this.outGyro);
			},
			stopGyro() {
				uni.$off('watchOrientation', this.outGyro);
				AccAndOri.unBindOri(this.globalOri);
				this.$store.state.globalOri = null;
			},

			onKeyInput: function(event) {
				this.$store.state.LocationGameUrl = event.target.value
			},

			onNavFcGame() {
				// console.log(0);
				uni.navigateTo({
					url: "../../fc-page/fc/fc"
				})
			},

			onNavAppInfo() {
				uni.navigateTo({
					url: '../../info-page/app-info/app-info'
				})
			},

			getBLEDeviceServices() {
				console.log("getBLEDeviceServices");

				// uni.getBLEDeviceServices({
				// 	deviceId: "C5:5C:19:04:00:30",
				// 	success: res => {
				// 		console.log("getBLEDeviceServices==", JSON.stringify(res));
				// 	},
				// 	fail: failRes => {
				// 		console.log('device services:', failRes)

				// 	}
				// });
			},

			// testAsyncFunc() {
			// 	// 调用异步方法
			// 	testModule.testAsyncFunc({
			// 			'name': 'unimp',
			// 			'age': 1
			// 		},
			// 		(ret) => {
			// 			modal.toast({
			// 				message: ret,
			// 				duration: 1.5
			// 			});
			// 		})
			// },
			// startSyncFunc() {
			// 	// 调用同步方法
			// 	var ret = testModule.onStartAccAndGyro({
			// 		'name': 'unimp',
			// 		'age': 1
			// 	})
			// 	modal.toast({
			// 		message: ret,
			// 		duration: 1.5
			// 	});
			// },

			// stopSyncFunc() {
			// 	// 调用同步方法
			// 	var ret = testModule.onStopAccAndGyro({
			// 		'name': 'unimp',
			// 		'age': 1
			// 	})
			// 	modal.toast({
			// 		message: ret,
			// 		duration: 1.5
			// 	});
			// },

			onNavToSelectFriend() {
				uni.navigateTo({
					url: '../../friend-page/select/select'
				})
			},
			/**
			 * 悬停按钮
			 */
			fabClick() {
				// uni.showToast({
				// 	title: '点击了悬浮按钮',
				// 	icon: 'none'
				// })

				if (this.cIndex != -1 && this.BLEConnectDevice != null) {
					//先检测
					uni.showModal({
						title: '设备状态',
						content: '是否断开连接?',
						/**
						 * 如果需要强制，不显示取消按钮
						 */
						showCancel: true,
						ConfirmColor: '#A488DC',
						success: res => {
							if (res.confirm) {
								this.onCloseBLEConnection({
									getSuccess: () => {}
								});

							}
						}
					});
				} else {

					this.openDeviceList();
				}

			},

			/**
			 * action 模块相关数据更新
			 */
			onActionJumpDataUpdate(obj) {
				// console.log(obj);
				this.AJData.allCount = obj.eliminationCount + obj.faultCount;
				this.AJData.faultCount = obj.faultCount;
			},
			onActionJumpCountDownUpdate(obj) {
				// console.log(obj);
				this.AJData.perCountDown = obj.countDown;
			},
			//actionJump 模块跳关卡开始处理
			onActionJumpPlay() {
				this.$refs.actionJumpRef.onActionJumpPlay();
				//todo 首先判断时间处理
				if (0 !== this.currentJumpTask.item.limitTime) {
					//0默认不限时,所以限时的才走计时间

					this.arcbarCountDownPlay();
				}
				//开始时候,设置默认参数
				this.onSetActionJumpData();
			},
			//重置actionJump数据
			onResetActionJumpData() {
				this.AJData = {
					allCount: 0,
					faultCount: 0,
					perCountDown: 0,
					gameCountDown: 0,
					myScore: 0,
					othreScore: 0,
					gameLimitTime: 0,
					describe: '', //关卡说明
				}
			},
			onSetActionJumpData() {
				let _item = this.currentJumpTask.item;
				this.AJData = {
					allCount: 0,
					faultCount: 0,
					perCountDown: 0,
					gameCountDown: 0,
					myScore: 0,
					othreScore: 0,
					gameLimitTime: _item.limitTime,
					describe: '', //关卡说明
				}
				console.log('onSetActionJumpData', JSON.stringify(this.AJData), JSON.stringify(_item));
			},
			onActionJumpGameOver(data) {
				// console.log('onActionJumpGameOver');
				//todo 可能区分 levelJump 关卡类型
				// if (this.currentMode == "calorieMode") {

				// }

				if (data.myWin) {
					//通过关卡，处理逻辑
					let _item = this.currentJumpTask.item;
					reqUtil
						.requestData(config.URL.PASSTHELEVEL, {
							levelId: _item.id,
							levelType: 1,
						})
						.then(
							res => {
								if (res.code == 0) {
									console.log('PASSTHELEVEL:' + JSON.stringify(res.data));
									//处理 列表数据
									this.nextTaskCanUnlock = false;
									for (let i = 0; i < this.currentTaskList.length; i++) {
										if (this.currentTaskList[i].id == _item.id) {
											this.currentTaskList[i].isPassed = true;
											break;
										}
									}
									let _title = data.myWin ? "胜利" : "失败";
									let _context = data.myWin ? "通关关卡成功！" : "通关关卡失败！";
									this.modalName = "showModalTip"
									if (0 !== res.data.rewardHonor.type || 0 !== res.data.rewardGold || 0 !== res.data
										.rewardDiamond) {
										//todo
										this.$refs.modalTipRef.setShowData({
											title: _title,
											context: _context,
											operationItem: res.data,
											type: 'PASSTHELEVEL'
										});
									} else {
										//没有奖励数据
										this.$refs.modalTipRef.setShowData({
											title: _title,
											context: _context,
											operationItem: null,
											type: 'none'
										});
									}






									//
									this.arcbarCountDownTimeReset();

									//todo 通过关卡后，处理荣誉值，解锁成就
								}
							},
							e => {
								console.log(e);
							}
						);
				}


			},
			showDrawer() {
				// uni.getSubNVueById('personal-drawer').show('slide-in-left', 200);
				// {id:'personal-drawer'}
				this.showDrawerById();
			},
			showPopup(type, item) {
				console.log(type, item);
				this.showPopupById({type,item});
				// switch (type) {
				// 	case 'levelReward':
				// 		uni.$emit('reward-popup', {
				// 			title: '奖励',
				// 			content: '',
				// 			type: type,
				// 			item: {
				// 				gold: item.rewardGold,
				// 				diamond: item.rewardDiamond,
				// 				honor: item.rewardHonor
				// 			},
				// 			operationItem: item
				// 		});
				// 		break;
				// 	case 'prompt':
				// 		// 向 popup 传递消息
				// 		uni.$emit('reward-popup', {
				// 			title: '奖励',
				// 			content: '',
				// 			type: type,
				// 			item: {
				// 				gold: item.rewardGold,
				// 				diamond: item.rewardDiamond,
				// 				honor: item.rewardHonor
				// 			},
				// 			operationItem: item
				// 		});
				// 		break;
				// 	case 'unlock':
				// 		// 向 popup 传递消息
				// 		uni.$emit('reward-popup', {
				// 			title: '解锁关卡',
				// 			content: '',
				// 			type: type,
				// 			item: {
				// 				consumeGold: item.consumeGold,
				// 				consumeDiamond: item.consumeDiamond
				// 			},
				// 			operationItem: item
				// 		});
				// 		break;
				// 	case 'signIn':
				// 		// 向 popup 传递消息
				// 		uni.$emit('reward-popup', {
				// 			title: '每日签到',
				// 			content: '',
				// 			type: type,
				// 			lists: [{
				// 					name: 'gold',
				// 					width: 28,
				// 					height: 28,
				// 					url: '../../../static/common/sideBar/sGold.png',
				// 					selectedUrl: '../../../static/common/subNVue/sign/sign-grey-gold@2x.png',
				// 					explain: '',
				// 					value: 20,
				// 					isSelect: true
				// 				},
				// 				{
				// 					name: 'diamond',
				// 					width: 28,
				// 					height: 28,
				// 					url: '../../../static/common/sideBar/sDiamond.png',
				// 					selectedUrl: '../../../static/common/subNVue/sign/sign-grey-diamond@2x.png',
				// 					explain: '',
				// 					value: 20,
				// 					isSelect: true
				// 				},
				// 				{
				// 					name: 'gold',
				// 					width: 28,
				// 					height: 28,
				// 					url: '../../../static/common/sideBar/sGold.png',
				// 					selectedUrl: '../../../static/common/subNVue/sign/sign-grey-gold@2x.png',
				// 					explain: '',
				// 					value: 20,
				// 					isSelect: true
				// 				},
				// 				{
				// 					name: 'gold',
				// 					width: 28,
				// 					height: 28,
				// 					url: '../../../static/common/sideBar/sGold.png',
				// 					selectedUrl: '../../../static/common/subNVue/sign/sign-grey-gold@2x.png',
				// 					explain: '',
				// 					value: 20,
				// 					isSelect: false
				// 				},
				// 				{
				// 					name: 'diamond',
				// 					width: 28,
				// 					height: 28,
				// 					url: '../../../static/common/sideBar/sDiamond.png',
				// 					selectedUrl: '../../../static/common/subNVue/sign/sign-grey-diamond@2x.png',
				// 					explain: '',
				// 					value: 20,
				// 					isSelect: false
				// 				},
				// 				{
				// 					name: 'gold',
				// 					width: 28,
				// 					height: 28,
				// 					url: '../../../static/common/sideBar/sGold.png',
				// 					selectedUrl: '../../../static/common/subNVue/sign/sign-grey-gold@2x.png',
				// 					explain: '',
				// 					value: 20,
				// 					isSelect: false
				// 				},
				// 				{
				// 					name: 'gold',
				// 					width: 28,
				// 					height: 28,
				// 					url: '../../../static/common/sideBar/sGold.png',
				// 					selectedUrl: '../../../static/common/subNVue/sign/sign-grey-gold@2x.png',
				// 					explain: '',
				// 					value: 20,
				// 					isSelect: false
				// 				}
				// 			]
				// 		});
				// 		break;

				// 	default:
				// 		uni.showToast({
				// 			title: 'showPopup 类型为空',
				// 		})
				// 		break;
				// }

				// // #ifdef APP-PLUS
				// const subNVue = uni.getSubNVueById('personal-popup')
				// subNVue.show('zoom-out', 250)
				// // #endif
			},

			/**
			 * 任务相关
			 */
			selectTask(_index, _item) {
				// console.log('taskSelect=', _index, JSON.stringify(_item));
				if (_item.isUnlock) {
					let _data = {
						modeName: this.currentMode, //记录时候记录当前的mode 
						index: _index,
						item: _item,
					}
					this.setActionJumpTask(_data);
				} else {
					let isCanUnlock = _index == 0 || (_index >= 1 && this.currentTaskList[_index - 1].isUnlock && this
						.currentTaskList[_index - 1].isPassed) ? true : false;
					if (!isCanUnlock) return;

					this.showPopup('unlock', _item);
					// return;
					// let _content = '条件:';

					// for (let i = 0; i < _item.conditionUnlock.length; i++) {
					// 	let _condition = _item.conditionUnlock[i];
					// 	let _consume = '';
					// 	if (_condition.limitType == 2) {
					// 		_consume = _item.consumeGold;
					// 	} else if (_condition.limitType == 3) {
					// 		_consume = _item.consumeDiamond;
					// 	}
					// 	_content += _consume + _condition.explain;
					// 	if (i == _item.conditionUnlock.length - 1) {
					// 		_content += '.';
					// 	} else {
					// 		_content += ',';
					// 	}
					// }
					// //解锁关卡
					// uni.showModal({
					// 	title: '解锁-' + _item.name,
					// 	content: _content,
					// 	/**
					// 	 * 如果需要强制，不显示取消按钮
					// 	 */
					// 	showCancel: true,
					// 	ConfirmColor: '#A488DC',
					// 	confirmText: '解锁',
					// 	success: res => {
					// 		if (res.confirm) {



					// 		} else if (res.cancel) {
					// 			//todo
					// 		}

					// 	}
					// });
				}

			},
			updateTaskScroll() {
				/**
				 * 获取任务对象
				 */
				this.getActionJumpTask();
				//console.error('当前的任务对象===========：' + JSON.stringify(this.currentJumpTask.modeName) + '= '+this.currentMode);
				if (this.currentJumpTask != null && this.currentJumpTask.modeName == this.currentMode) {
					let _index = this.currentJumpTask.index - 1 < 0 ? 0 : this.currentJumpTask.index - 1;
					this.$nextTick(() => {
						this.taskIntoView = "task_" + _index;
					});
					this.taskIntoView = '' //不清空再次跳到锚点位置会不起作用
				}

			},
			switchTaskInfo() {
				if (this.currentMode == 'calorieMode') {
					this.currentTaskList = this.singlePersonList;
				} else if (this.currentMode == 'pkMode') {
					this.currentTaskList = this.multiPersonList;
				}

			},
			onSwitchMode() {
				if (this.currentMode == 'calorieMode') {
					this.currentMode = 'pkMode';
				} else if (this.currentMode == 'pkMode') {
					this.currentMode = 'calorieMode';
				}

				this.switchTaskInfo();
			},
			onPassTheLevel() {

				this.onActionJumpGameOver({
					myWin: true
				});
			},
			registerPopupEvent() {
				// 接收 popup 的消息
				uni.$on('reward-popup-page', (data) => {
					switch (data.type) {
						case 'interactive':
							uni.showModal({
								title: '来自Popup的消息',
								content: data.info
							})
							break;
						case 'button':
							if (data.messageType == 'prompt') {
								if (data.confirm) {
									console.log('prompt confirm!');
								} else if (data.cancel) {

								}
							} else if (data.messageType == 'unlock') {
								if (data.confirm) {
									let _operationItem = data.operationItem;
									console.log('unlock confirm!', _operationItem);
									uni.showToast({
										title: '正在解锁',
										icon: 'loading',
										duration: 10000
									})
									//todo 处理解锁流程
									reqUtil
										.requestData(config.URL.UNLOCKLEVEL, {
											levelId: _operationItem.id,
											levelType: 1, //levelJump = 1
											numberType: _operationItem.numberType,

										})
										.then(
											res => {
												uni.hideToast();
												console.log('UNLOCKLEVEL:' + JSON.stringify(res));
												if (res.code === 404) {
													uni.showToast({
														title: '金币不足',
														icon: 'none',
														duration: 1000
													})
												} else if (res.code === 405) {
													uni.showToast({
														title: '钻石不足',
														icon: 'none',
														duration: 1000
													})
												} else if (res.code === 0) {
													//解锁成功
													uni.showToast({
														title: '解锁成功',
														icon: 'none',
														duration: 1000
													})
													//更新本地金币和钻石
													this.setGoldAndDiamond({
														gold: res.data.gold,
														diamond: res.data.diamond
													});

													for (let i = 0; i < this.currentTaskList.length; i++) {
														if (this.currentTaskList[i].id == _operationItem.id) {
															this.currentTaskList[i].isUnlock = true;
															break;
														}
													}
												} else if (res.code === 803) {
													uni.showToast({
														title: '需要' + res.data[0].explain,
														icon: 'none',
														duration: 2000
													})
												} else if (res.code === 802 || res.code === 805) {
													uni.showToast({
														title: res.msg,
														icon: 'none',
														duration: 2000
													})
												}
											},
											e => {
												console.log(e);
											}
										);
								}

							}
							break;
						default:
							uni.showToast({
								title: data.title,
							})
							break;
					}
				})
				// 监听 drawer 消息
				uni.$on('drawer-page', (data) => {
					uni.showToast({
						title: '点击了第' + data + '项',
						icon: "none"
					});
				})
			},
			unregisterPopupEvent() {
				uni.$off('reward-popup-page')
				uni.$off('drawer-page')
			},
			
			onNavToDirection(){
				uni.navigateTo({
					url:'../directionOfDetection/directionOfDetection'
				})
			}
		}
	};
</script>

<style>
	.bg-person {
		background-color: #9797ff;
	}

	.plan-view {
		overflow: hidden;
		background-color: #9797ff;
	}

	.plan-l-tip-view {
		border-radius: 80upx 0 0 80upx;
		background-color: rgba(255, 255, 255, 0.05);
	}

	.plan-r-tip-view {
		border-radius: 0 80upx 80upx 0;
		background-color: rgba(255, 255, 255, 0.05);
	}

	.bottom-view {
		background-color: rgba(246, 243, 249, 255);
		padding-bottom: 20rpx;
		border-radius: 80rpx 80rpx 0 0;
		width: 750rpx;
		overflow: hidden;
	}

	.time-view {
		width: 100%;
		margin-top: 53rpx;
		/* border: 1rpx solid #DD514C; */
	}

	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts-arcbar {
		/* padding: 20rpx 15rpx; */
		/* margin-top: 60rpx; */
		height: 480rpx;
		position: relative;
		width: 750rpx;

		/* border: 1rpx solid #fff; */
	}

	.charts-arcbar {
		position: absolute;
		/* margin-left: 81upx;
		 */
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		width: 490rpx;
		height: 480rpx;
		/* border: 1rpx solid #FFFFFF; */
	}

	.charts-arcbar-img {
		position: absolute;
		left: 135upx;
		width: 480upx;
		height: 480upx;
	}

	.charts-pring-bottom {
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

	}

	.charts-pring-button {
		width: 178rpx;
		height: 64rpx;
		display: flex;
		flex-direction: row;
		justify-content: start;
		align-items: center;
		border-radius: 0 25px 25px 0;
	}

	/* 心电图 */
	/* .qiun-charts-elect {
		width: 500rpx;
		height: 136rpx;
	} */

	.charts-elect {
		width: 464rpx;
		height: 96rpx;
		border: 1rpx solid #000000;
	}

	.e-button {
		background-color: rgba(255, 255, 255, 0.25);
		border-radius: 45px;
		margin: 5px 12px;
		box-shadow: 1px 1px 3px #888888;
		display: flex;
		justify-content: center;
	}

	/* 曲线图 */
	.qiun-charts-area {
		width: calc(750rpx - 40rpx);
		height: 300upx;
		/* background-color: #007AFF; */
		position: relative;
	}

	.charts-area {
		position: absolute;
		width: 750upx;
		height: 300upx;
	}

	.qiun-charts-bottom-container {
		height: 63px;
		position: relative;
		width: 100%;
		justify-content: center;
		align-items: center;
		display: flex;
		flex-direction: row;
	}


	.qiun-charts-bottom-right {
		position: absolute;
		left: calc(50% + 50rpx);
		top: 15px;
		margin-left: 20rpx;
	}

	/* picker */
	.mpvue-picker-view {
		width: calc(50% - 5px);
		height: 300px;
		/* background-color: rgba(255, 255, 255, 1); */
		border-radius: 20px;
	}

	.item {
		text-align: center;
		width: calc(100% - 0px);
		background-color: rgba(255, 255, 255, 1);
		height: 88upx;
		line-height: 88upx;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 40upx;
	}

	.picker-unit {
		position: absolute;
		right: 70px;
		top: 43%;
	}

	.left-button,
	.right-button {
		margin: 20px 0;
		padding: 10px 30px;
		background-color: #ffffff;
	}

	.left-button {
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
		border-right: 1px solid #e6e6e6;
	}

	.right-button {
		border-top-right-radius: 20px;
		border-bottom-right-radius: 20px;
	}

	.png-size-28 {
		width: 24px;
		height: 24px;
		margin-bottom: 4px;
	}

	.png-size-32 {
		width: 32px;
		height: 32px;
	}

	.png-size-34 {
		width: 34px;
		height: 34px;
	}

	/* 图标大小 */
	.data-play {
		width: 16px;
		height: 16px;
		margin-top: 10rpx;
	}

	.p-data-png {
		width: 16px;
		height: 16px;
		margin: 5rpx 20rpx;
	}

	.data-png {
		width: 16px;
		height: 16px;
		margin: 5rpx;
	}

	.data-png-20 {
		width: 20px;
		height: 20px;
		margin: 0 14rpx;
	}

	.data-png-54 {
		width: 54px;
		height: 54px;
		margin: 0 14rpx;
	}

	.data-png-add {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		width: 34px;
		height: 37px;
	}

	.time-container {
		margin-top: 13px;
		width: 100%;
		height: 218rpx;
		position: relative;
		/* border: 1rpx solid #007AFF; */
	}

	.time-png {
		width: 503rpx;
		height: 222rpx;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		z-index: 1;
	}

	.time-text {
		font-size: 9px;
		z-index: 10;
		position: relative;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
	}

	.padding {
		padding: 10rpx;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.float-png {
		position: absolute;
		right: 15px;
		bottom: 200px;
		width: 56px;
		height: 56px;
	}

	.moveCanvas {
		position: fixed;
		top: 9999rpx;
		left: 0;
		width: 188rpx;
		height: 188rpx;
	}

	.scroll-class {
		width: 100%;
		overflow-x: hidden;
		box-sizing: border-box;
		/* border: 1rpx solid #000000; */
	}

	.homepage-grid-square {
		width: 250rpx;
		/* height: 250rpx; */
		align-items: start;
	}

	.homepage-grid-square image {
		width: 176rpx;
		height: 176rpx;
	}

	.border {
		/* width: 176rpx; */
		font-size: 30rpx;
		color: rgba(175, 175, 175, 1);
		font-weight: 400;
		text-align: center;
		margin-top: 22rpx;
		margin-bottom: 40rpx;
	}

	.item-img {
		border-radius: 20rpx;
		/* border: 1rpx solid #EEEEEE; */
		box-shadow: 0px 1px 2px 0px rgba(113, 113, 219, 0.23);
	}

	.plan-Tip-child {
		height: 120rpx;
	}

	.plan-mode-tip {
		height: 90rpx;
	}

	.plan-grid-square {
		width: 250rpx;
		/* height: 250rpx; */
		align-items: start;
	}

	.plan-grid-square image {
		width: 168rpx;
		height: 58rpx;
	}

	.plan-mode {
		/* height: 54px; */
		border-radius: 10px;
		padding: 3px;
		margin: 0 5px 10px 5px;
		border: 1rpx solid #eeeeee;
		/* box-shadow: 0px 1px 2px 0px rgba(113, 113, 219, 0.23); */
		position: relative;
	}

	.plan-mode-selected {
		/* height: 54px; */
		padding: 3px;
		margin: 0 5px 10px 5px;
		background-size: contain;
		background-clip: border-box;
		background-repeat: no-repeat;
		background-image: url(../../../static/plan-select-bg.png);
		/* box-shadow: 0px 1px 2px 0px rgba(113, 113, 219, 0.23); */
		position: relative;
	}

	.plan-mode-border {
		/* width: 176rpx; */
		font-size: 26rpx;
		color: rgba(151, 151, 255, 1);
		font-weight: 400;
		text-align: center;
	}

	.button-fav {
		background-color: rgba(153, 150, 252, 255);
		color: #ffffff;
		/* border-radius: 10px; */
		/* width: 184rpx; */
		height: 122rpx;
		display: flex;
		justify-content: center;
		text-align: center;
		align-items: center;
		font-size: 14px;
	}

	.card-view-small {
		/* border: 1rpx solid #000000; */
		width: 80%;
		border-radius: 20px;
		margin-left: 50rpx;
		overflow: hidden;
		background-color: #ffffff;
		box-shadow: 0px 2px 4px 0px rgba(113, 113, 219, 0.23);
	}

	.right-bg {
		/* border: 1rpx solid #000000; */
		border-radius: 8px;
		background-color: #9797ff;
		padding: 15rpx;
		position: absolute;
		right: 5%;
		margin-top: 4%;
	}

	.plan-small-child {
		background-color: #f5f5ff;
		border-radius: 20px;
		width: 480rpx;
		height: 90rpx;
		margin: 0 0 30rpx 30rpx;
		/* margin-top: 60rpx; */
	}

	.cu-btn-plan {
		position: relative;
		border: 0upx;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 4upx 25upx 4upx 4upx;
		margin-left: 5px;
		font-size: 22upx;
		height: 64upx;
		line-height: 1;
		text-align: center;
		text-decoration: none;
		overflow: visible;
		margin-left: initial;
		transform: translate(0upx, 0upx);
		margin-right: initial;
	}

	.cu-btn-plan-child {
		position: relative;
		border: 0upx;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0 4upx;
		font-size: 22upx;
		height: 56upx;
		line-height: 1;
		text-align: center;
		text-decoration: none;
		overflow: visible;
		margin-left: initial;
		transform: translate(0upx, 0upx);
		margin-right: initial;
	}

	.cu-btn-plan-right {
		position: relative;
		border: 0upx;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 4upx 4upx 4upx 19upx;
		margin-left: 5px;
		font-size: 22upx;
		height: 64upx;
		line-height: 1;
		text-align: center;
		text-decoration: none;
		overflow: visible;
		margin-left: initial;
		transform: translate(0upx, 0upx);
		margin-right: initial;
	}

	/* 粗线条 */
	.line-make {
		margin-top: 11px;
		margin-left: 8px;
		border: 4rpx solid #FFFFFF;
		width: 152rpx;
		border-radius: 3px;
	}


	/* 头像背景处理 */
	.avatar-bg-personal {
		width: 34px;
		height: 34px;
		border-radius: 45px;
		border: 2px solid #9997fc;
		background-color: #9997fc;
		box-sizing: border-box;
	}


	.avatar-bg-arrow {
		position: absolute;
		top: 12px;
		left: calc(50% - 10px);
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-bottom: 10px solid #9997fc;
	}

	.elect-round-image {
		width: 48px;
		height: 48px;
		z-index: 10;
		box-shadow: 1px 1px 3px #888888;
		border-radius: 45px;
	}

	.elect-personal {
		/* width: 100%; */
		height: 120rpx;
		/* margin: 50rpx 0; */
		margin-bottom: 50rpx;
		border-radius: 45px;
		padding: 10rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.11);
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	/* 呼吸灯 */
	.breathing-lamp {
		animation-duration: 1s;
		animation-timing-function: ease-out;
		animation-fill-mode: inherit;
		animation-iteration-count: infinite;
		animation-name: run-lamp;
		animation-play-state: running;
	}

	@keyframes run-lamp {

		0%,
		100% {
			opacity: 1;
			transform: scale(1);
		}

		50% {
			opacity: 0.6;
			transform: scale(0.9);
		}

	}

	.personal-fruit-container {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		/* border: 1rpx solid #F0F0F0; */
	}


	.screen-jitter {
		animation-duration: 1s;
		animation-timing-function: ease-out;
		animation-fill-mode: inherit;
		animation-iteration-count: infinite;
		animation-name: personal-shake;
		animation-play-state: running;
	}

	.screen-red {
		border: 1rpx solid #ff0000;
	}

	@keyframes personal-shake {

		0%,
		100% {
			transform: translateX(0)
		}

		10% {
			transform: translateX(-9px)
		}

		20% {
			transform: translateX(8px)
		}

		30% {
			transform: translateX(-7px)
		}

		40% {
			transform: translateX(6px)
		}

		50% {
			transform: translateX(-5px)
		}

		60% {
			transform: translateX(4px)
		}

		70% {
			transform: translateX(-3px)
		}

		80% {
			transform: translateX(2px)
		}

		90% {
			transform: translateX(-1px)
		}
	}

	.CountDownMask {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 100px;
		font-weight: bold;
		color: #FFFFFF;
	}


	/**
	 * 任务样式
	 */

	.task-up-button {
		z-index: 10;

		/* #ifndef APP-PLUS */
		position: absolute;
		/* #endif */
		/* #ifdef APP-PLUS */
		position: fixed;
		/* #endif */
		bottom: -10px;
		right: 0;
		left: 0;
		margin: auto;
		width: 100%;
		height: 68rpx;
	}
</style>