<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"><view class="sector" :style="{ transform: `rotate(${item * 6}deg)` }"></view></view>
					<view class="cirle-three flex-center"></view>
					<view class="cirle-free w-start"></view>
					<view class="cirle-sex flex-center">点击启动</view>
				</view>
				<!-- 状态提示 -->
				<view class="work-button-tips">设备准备就绪</view>
			</view>
		</view>
		<!-- 说明提示 -->
		<view class="work-tips">
			<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>
</template>

<script>
export default {
	data() {
		return {
			timestamp: 300,
			rdeg: -135,
			ldeg: -135,
			step: 0,
			interId:null
		};
	},
	onLoad() {
		
	},
	methods: {
		// 倒计时监听，0 时自动结束订单
		changeDtime(time) {
			console.log(time);
		},
		// 启动按钮
		startWork() {
			this.interId = setInterval(()=>{
				this.loading(this.step++)
			},1000)
		},
		// 进度条动画
		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: 380rpx;
	height: 380rpx;
}
.circle_process .wrapper {
	width: 190rpx;
	height: 380rpx;
	position: absolute;
	top: 0;
	overflow: hidden;
}
.circle_process .right {
	right: 0;
}
.circle_process .left {
	left: 0;
}
.circle_process .circle {
	width: 380rpx;
	height: 380rpx;
	border: 20rpx solid transparent;
	border-radius: 50%;
	position: absolute;
	top: 0;
	transform: rotate(-135deg);
}
.circle_process .rightcircle {
	border-top: 20rpx solid red;
	border-right: 20rpx solid red;
	right: 0;
}
.circle_process .leftcircle {
	border-bottom: 20rpx solid red;
	border-left: 20rpx solid red;
	left: 0;
}

.work-pages {
	width: 100%;
	.flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.work-cons {
		height: 60vh;
		background-image: linear-gradient(0deg, #666, #333);
		border-bottom-left-radius: 300rpx 30rpx;
		border-bottom-right-radius: 300rpx 30rpx;
		position: relative;
		// 按钮
		.work-button-wrap {
			width: 400rpx;
			margin-top: -50rpx;
			.work-button {
				background: #aaa;
				border-radius: 100%;
				width: 380rpx;
				height: 380rpx;
				cursor: pointer;
				.cirle-one {
					background: #444;
					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: #aaa;
					}
				}
				.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 80%);
					width: 210rpx;
					height: 210rpx;
					border-radius: 100%;
					position: absolute;
					color: #ffffff;
					font-size: 28rpx;
					color: #eee;
				}
				.w-start {
					background: #ffcc00;
				}
				.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>
