<template>
	<view class="work-pages">
		<!-- 工作控制按钮及进度 -->
		<view class="work-cons flex-center">
			<!-- 操作按钮组件 -->
			<view class="work-button-wrap">
				<!-- 按钮 -->
				<view class="work-button flex-center" @click="startWork">
					<!-- 扇形进度条 -->
					<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-sex flex-center">{{ status == 'working' ? '紧急停止' : '点击启动' }}</view>
				</view>
				<!-- 状态提示 -->
				<view class="work-button-tips">设备准备就绪</view>
			</view>
		</view>
		<!-- 说明提示 -->
		<view class="work-tips">
			<view v-if="status=='start'">
				<view class="work-dtime">
					距离订单强制完成还剩
					<u-count-down
						@change="changeDtime"
						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>
						支付完成后
						<text class="red">请尽快启动洗车服务</text>
						，否则订单将在5分钟后自动完成。
					</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;">
						<u-button @click="callPhone" style="width: 45%;border-radius: 0;">联系客服</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,
			rdeg: -135,
			ldeg: -135,
			step: 0,
			interId: null,
			status: 'start', // 状态，start 开始启动，working 正在工作，reseting 归位中
			showStart: false ,// 启动弹框提示
			showStop: false, // 急停提示
		};
	},
	onLoad() {},
	methods: {
		// 电话客服
		callPhone () {
			uni.makePhoneCall({
			    phoneNumber: '114' 
			})
		},
		// 倒计时监听，0 时自动结束订单
		changeDtime(time) {
			console.log(time);
		},
		// 归位机器
		resetRabt(){
			this.status = 'reseting';
			this.showStart = true;
			this.showStop = false;
			// 归位结束后
			setTimeout(()=>{
				uni.redirectTo({
					url:"/pages/work/success/success"
				})
			},3000)
		},
		// 启动，急停按钮
		startWork() {
			// 启动
			if (this.status == 'start') {
				this.showStart = true;
				// 启动成功
				setTimeout(() => {
					this.status = 'working';
					this.showStart = false;
					// 进度条
					this.interId = setInterval(()=>{
						this.loading(this.step++)
					},7000)
				}, 3000);
			}
			// 急停
			if (this.status == 'working') {
				// 显示急停提示弹框
				this.showStop = true;
				// 停止进度
				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);
			}
		}
	}
};
</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: 1px;
}
.circle_process .left {
	left: 1px;
}
.circle_process .circle {
	width: 390rpx;
	height: 390rpx;
	border: 40rpx solid transparent;
	border-radius: 100%;
	position: absolute;
	top: 0;
	transform: rotate(-135deg);
}
.circle_process .rightcircle {
	border-top: 40rpx solid red;
	border-right: 40rpx solid red;
	right: 0;
}
.circle_process .leftcircle {
	border-bottom: 40rpx solid red;
	border-left: 40rpx solid red;
	left: 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;
				cursor: pointer;
				.cirle-one {
					background-image: linear-gradient(180deg, #555, #333 20%);
					width: 370rpx;
					height: 370rpx;
					border-radius: 100%;
					position: absolute;
				}
				.cirle-two {
					width: 370rpx;
					height: 370rpx;
					border-radius: 100%;
					position: absolute;
					.sector {
						transform-origin: center center;
						width: 350rpx;
						height: 5rpx;
						background: #888;
					}
				}
				.cirle-three {
					background: #444;
					width: 280rpx;
					height: 280rpx;
					border-radius: 100%;
					position: absolute;
				}
				.cirle-free {
					width: 230rpx;
					height: 230rpx;
					border-radius: 100%;
					position: absolute;
					animation: mymove 5s infinite;
				}
				@keyframes mymove {
					0% {
						transform: scale(1); /*开始为原始大小*/
						opacity: 1;
					}
					25% {
						transform: scale(1.1); /*放大1.1倍*/
						opacity: 0.5;
					}
					50% {
						transform: scale(1);
						opacity: 1;
					}
					75% {
						transform: scale(1.1);
						opacity: 0.5;
					}
				}
				.cirle-sex {
					background-image: linear-gradient(180deg, #888, #333 50%);
					width: 210rpx;
					height: 210rpx;
					border-radius: 100%;
					position: absolute;
					color: #ffffff;
					font-size: 28rpx;
					color: #eee;
				}
				.w-start {
					background: #ffc800;
				}
				.w-stop {
					background: #ff0000;
				}
				&:active {
					.cirle-sex {
						background-image: linear-gradient(180deg, #888, #333 80%);
					}
				}
			}
			.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>
