<template>
	<view class="work-pages">
		<!-- 工作控制按钮及进度 -->
		<view class="work-cons flex-center">
			<!-- 操作按钮组件 -->
			<view class="work-button-wrap">
				<!-- 按钮 -->
				<view class="work-button flex-center">
					<!-- 扇形进度条 -->
					<view class="circle_process">
						<view class="wrapper right"><view class="circle rightcircle" :style="{ transform: `rotate(${rdeg}deg)` }"></view></view>
						<view class="wrapper left"><view class="circle leftcircle" :style="{ transform: `rotate(${ldeg}deg)` }"></view></view>
					</view>
					<view class="cirle-one"></view>
					<!-- 指针 -->
					<view class="cirle-two flex-center" v-for="item in 60" :key="item">
						<view class="sector" :style="{ transform: `rotate(${item * 6}deg)` }"></view>
					</view>
					<view class="cirle-three flex-center"></view>
					<view class="cirle-free" :class="status == 'working' ? 'w-stop' : 'w-start'"></view>
					<view class="cirle-free-1" :class="status == 'working' ? 'w-stop' : 'w-start'"></view>
					<view class="cirle-free-2" :class="status == 'working' ? 'w-stop' : 'w-start'"></view>
					<view class="cirle-sex flex-center" @tap="startWork">
					 {{ status == 'working' ? '紧急停止' : '点击启动' }}
					</view>
				</view>
				<!-- 状态提示 -->
				<view class="work-button-tips">
					{{curWorkStutesText}}
				</view>
			</view>
		</view>
		<!-- 说明提示 -->
		<view class="work-tips">
			<view>
				<view class="work-dtime" v-if="status=='start'">
					距离订单强制完成还剩
					<u-count-down
						@end="endDtime"
						separator="zh"
						font-size="36"
						separator-size="28"
						color="#ff0000"
						:timestamp="timestamp"
						:show-days="false"
						:show-hours="false"
					></u-count-down>
				</view>
				<view class="work-remarks">
					<view class="title">说明：</view>
					<view v-if="status=='start'">
						支付完成后
						<text class="red">请尽快启动洗车服务</text>
						，否则订单将在5分钟后自动完成。
					</view>
					<view v-else>
						<view>设备启动中请注意安全，如果设备工作中出现故障，请按紧急停止按钮或联系客服。</view>
						<view @click="callPhone">如有疑问，请联系客服：<text>400-xxx-xxx</text> </view>
					</view>
				</view>
			</view>
		</view>

		<!-- 正在启动，归位弹框提示 -->
		<u-popup v-model="showStart" :mask-close-able="false" border-radius="10" mode="center" width="500rpx" height="400rpx">
			<view style="padding: 30rpx;display: flex;justify-content: center;text-align: center;">
				<!-- 启动中 -->
				<view v-if="status == 'start'">
					<u-image width="216px" height="120px" src="/static/img/start.png"></u-image>
					<view style="padding: 15rpx;">洗车机正在启动...</view>
				</view>
				<!-- 归位中 -->
				<view v-if="status == 'reseting'">
					<u-image width="216px" height="120px" src="/static/img/reset.png"></u-image>
					<view style="padding: 15rpx;">洗车机正在归位中...</view>
				</view>
			</view>
		</u-popup>
		<!-- 急停提示弹框 -->
		<u-popup v-model="showStop" :mask-close-able="false" border-radius="10" mode="center" width="80%">
			<view style="padding: 30rpx;text-align: center;">
				<view>
					<view style="font-weight: bold;">设备提示</view>
					<view style="display: flex;justify-content: center;padding: 10rpx 0;">
						<u-image width="165px" height="138px" src="/static/img/sbts.png"></u-image>
					</view>
					<u-divider>可能原因</u-divider>
					<view style="padding: 15rpx;text-align: left;">
						<view>1、洗车机紧急停止，本次服务结束</view>
						<view>2、因设备故障无法继续为您服务，所支付金额将退至您的支付账户</view>
						<view>3、如需再次服务，请退出车辆重新进入，再扫码支付洗车</view>
						<view>4、如需帮助请联系客服</view>
					</view>
					<view style="display: flex;padding: 20rpx 0;justify-content: center;">
						<u-button @click="callPhone" style="width: 45%;border-radius: 0;margin-right: 5%;">联系客服</u-button>
						<u-button @click="resetRabt" style="width: 45%;" type="error">洗车机归位</u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			timestamp: 300, // 初始情况下5分钟后自动结束
			rdeg: -135, // 进度条初始角度
			ldeg: -135, /// 进度条初始角度
			step: 0, // 进度条增值，共60步
			interId: null, // 进度时间id
			status: 'start', // 状态，start 开始启动，working 正在工作，stop急停，reseting 归位中, success 洗车成功
			curWorkStutesText: '设备准备就绪', // 当前机器运行的进度提示
			showStart: false ,// 启动弹框提示
			showStop: false, // 急停提示
			washCarType: '', // 洗车服务类型，不同的类型对应的时间不一样
			washDuration: 0, // 机器运行时间
			orderNo: '',// 订单编号
		};
	},
	onLoad(options) {
		// 创建websocket
		this.$store.commit('$webSocket')
		// 获取用户及订单信息
		let orderInfo = this.$store.state.vuex_orderInfo
		this.washCarType = orderInfo.itemCode
		this.orderNo = orderInfo.orderNo
		this.washDuration = orderInfo.duration
		
		// 监听消息
		uni.$on('wsMessage',(e)=>{
			console.log(e)
			// 进度消息
			// 错误消息
			// 启动成功
			this.startWashCarSuccess()
			// 紧急停止成功
			this.stopWashCarSuccess()
			// 复位成功
			this.resetRabtSuccess()
		})
	},
	methods: {
		// 电话客服
		callPhone () {
			uni.makePhoneCall({
			    phoneNumber: '15202957025' 
			})
		},
		// 倒计时结束时，自动完成洗车订单
		endDtime() {
			this.washCarSuccess()
		},
		// 操作按钮
		startWork() {
			let _this = this
			let cmd = {
				orderNo: this.orderNo, // 订单编号
				washType: this.washCarType,// 洗车模式
			}
			// 启动
			if (this.status == 'start') {
				cmd.operateType = 'start' //操作命令
				this.$store.commit("$sendWebsocket",JSON.stringify(cmd))
				this.step= 0;
				this.showStart = true;
			}
			// 急停
			if (this.status == 'working') {
				uni.showModal({
				    title: '提示',
				    content: '确定紧急停止洗车机？',
				    success: function (res) {
				        if (res.confirm) {
							cmd.operateType = 'stop' //操作命令
							_this.$store.commit("$sendWebsocket",JSON.stringify(cmd))
							_this.showStop = true;
							_this.status = 'stop';
				        }
				    }
				});
			}
		},
		// 启动成功
		startWashCarSuccess(){
			this.status = 'working';
			this.curWorkStutesText='设备已启动';
			this.showStart = false;
			// 进度条，服务时间根据不同的服务类型而不同
			let serverTime = this.washDuration/60
			this.interId = setInterval(()=>{
				// 小于60时说明洗车机正在工作中
				if(this.step<=60){
					this.loading(this.step++)
				}else{
					// 洗车机正常状态下工作结束
					this.washCarSuccess()
				}
			},1000*serverTime)
		},
		// 紧急停止成功
		stopWashCarSuccess(){
			// 显示急停提示弹框
			this.curWorkStutesText='设备已紧急停止';
			this.resetLoadingStatus();
		},
		// 洗车完成
		washCarSuccess(){
			this.status = "success";
			this.curWorkStutesText='洗车已结束';
			this.resetLoadingStatus();
			// 关闭socket
			this.$store.commit("$closeWebsocket")
			uni.showModal({
			    title: '提示',
			    content: '洗车已结束？',
				showCancel: false,
			    success: function (res) {
			        if (res.confirm) {
						uni.redirectTo({
							url: "/pages/order/orderDetail"
						})
			        }
			    }
			});
		},
		// 重置到进度条初始状态
		resetLoadingStatus(){
			// 停止进度
			this.rdeg= -135;
			this.ldeg= -135;
			clearInterval(this.interId);
		},
		// 洗车机进度条动画
		loading(second) {
			if (second <= 30) {
				this.rdeg = -135 + 6 * second;
				this.ldeg = -135;
			} else {
				this.rdeg = 45;
				this.ldeg = -135 + 6 * (second - 30);
			}
		},
		// 归位机器
		resetRabt(){
			// 归位命令
			let cmd = {
				orderNo: this.orderNo, // 订单编号
				operateType: 'reset', //操作命令
				washType: this.washCarType,// 洗车模式
			}
			this.$store.commit("$sendWebsocket",JSON.stringify(cmd))
			this.status = 'reseting';
			this.showStart = true;
			this.showStop = false;
		},
		// 归位结束后
		resetRabtSuccess(){
			this.curWorkStutesText='设备已归位';
			// 关闭socket
			this.$store.commit("$closeWebsocket");
			uni.redirectTo({
				url:"/pages/work/success/success"
			})
		}
	}
};
</script>

<style lang="scss">
// 扇形圆环
.circle_process {
	position: absolute;
	width: 390rpx;
	height: 390rpx;
}
.circle_process .wrapper {
	width: 195rpx;
	height: 390rpx;
	position: absolute;
	top: 0;
	overflow: hidden;
}
.circle_process .right {
	right: 0;
}
.circle_process .left {
	left: 0;
}
.circle_process .circle {
	width: 390rpx;
	height: 390rpx;
	border: 20rpx solid transparent;
	border-radius: 50%;
	position: absolute;
	top: 0;
	transform: rotate(-135deg);
}
.circle_process .rightcircle {
	border-top: 20rpx solid #4CD964;
	border-right: 20rpx solid #4CD964;
	right: 1px;
}
.circle_process .leftcircle {
	border-bottom: 20rpx solid #4CD964;
	border-left: 20rpx solid #4CD964;
	left: 1px;
}
// 动画
@keyframes mymove {
	0% {
		transform: scale(1); /*开始为原始大小*/
		opacity: 1;
	}
	50% {
		transform: scale(1.2); /*放大1.1倍*/
		opacity: 0;
	}
}

.work-pages {
	width: 100%;
	.flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.work-cons {
		height: 50vh;
		background-image: linear-gradient(0deg, #666, #333);
		border-bottom-left-radius: 500rpx 50rpx;
		border-bottom-right-radius: 500rpx 50rpx;
		position: relative;
		// 按钮
		.work-button-wrap {
			width: 400rpx;
			margin-top: -50rpx;
			.work-button {
				background: #666;
				border-radius: 100%;
				width: 390rpx;
				height: 390rpx;
				box-shadow:inset 0rpx 2rpx 10rpx #000;
				.cirle-one {
					background-image: linear-gradient(180deg, #666, #333 30%);
					width: 370rpx;
					height: 370rpx;
					border-radius: 100%;
					position: absolute;
					box-shadow: 0rpx 2rpx 10rpx #333;
				}
				.cirle-two {
					width: 370rpx;
					height: 370rpx;
					border-radius: 100%;
					position: absolute;
					.sector {
						transform-origin: center center;
						width: 350rpx;
						height: 5rpx;
						background: #777;
					}
				}
				.cirle-three {
					background: #444;
					width: 280rpx;
					height: 280rpx;
					border-radius: 100%;
					position: absolute;
					box-shadow: inset 0rpx 3rpx 10rpx #000;
				}
				.cirle-free, .cirle-free-1, .cirle-free-2 {
					width: 230rpx;
					height: 230rpx;
					border-radius: 100%;
					position: absolute;
					animation: mymove 5s infinite;
				}
				.cirle-free-1{
					width: 210rpx;
					height: 210rpx;
					animation: mymove 4.5s infinite;
				}
				.cirle-free-2{
					width: 190rpx;
					height: 190rpx;
					animation: mymove 4s infinite;
				}
				.cirle-sex {
					background-image: linear-gradient(180deg, #888, #333 50%);
					box-shadow: 0rpx 5rpx 10rpx #333;
					width: 210rpx;
					height: 210rpx;
					border-radius: 100%;
					position: absolute;
					color: #ffffff;
					font-size: 28rpx;
					color: #eee;
					&:active {
						background-image: linear-gradient(-180deg, #666, #333 80%);
					}
				}
				.w-start {
					background: #ffc800;
				}
				.w-stop {
					background: #ff0000;
				}
			}
			.work-button-tips {
				color: #eee;
				text-align: center;
				padding-top: 30rpx;
			}
		}
	}
	.work-tips {
		padding: 45rpx;
		.work-dtime {
			text-align: center;
			font-weight: bold;
			font-size: 34rpx;
		}
		.work-remarks {
			padding-top: 50rpx;
			.red {
				color: red;
			}
			.title {
				font-weight: bold;
			}
		}
	}
}
</style>
