<template>
	<view class="full-width full-height" :style="{overflow: isReady ? 'hidden' : 'scroll' }" style="overflow: hidden;background: #FFFFFF; ">
		
		<myhead  :title="ddddd" :color="'#131319'" :titleShow="true" :backShow="true"
			:background="'#fff'"></myhead>
		
		
	
		<!-- 打印机音乐 -->
		<audio src="https://img.colorpark.cn/wechat/ring2.m4a" :action="ringaction" controls loop
			style="opacity: 0; position: absolute;"></audio>
		<!-- 继续定制 -->
		<view @click="tomall" style="position: fixed; right: 0; bottom: 100upx; display: flex;
		align-items: center;justify-content: center; width: 100upx; height: 88upx; 
		background: #43cf7c; border-radius: 44upx 0px 0px 44upx; z-index: 999;">
			<view style="font-size: 24upx; font-weight: 800; color: #FFFFFF;">
				<view>继续</view>
				<view>定制</view>
			</view>
		</view>
		<!-- https://img.colorpark.cn/wechat/track/dayinquGolf.png
		https://img.colorpark.cn/wechat/track/fukuanquGolf.png
		https://img.colorpark.cn/wechat/track/paiduiquGolf.png
		https://img.colorpark.cn/wechat/track/shejiquGolf.png -->
		<view style="height:100%;width: 100%; overflow: hidden; margin-top: 280upx;">
			<!-- goods.status.value 订单状态(0：等待生产，1：生产中，2: 生产完成，3：取消生产，4：出料中（弃用），5: 等待取料（弃用）， 6：待入货（弃用），7：取货完成，8：已发货，9：订单完成)  "-->
			<view :animation="BoxTwoAnimation" style="width: 100%; height: 100%;"
				v-if="(orderOrderStatusData.status == 0 || orderOrderStatusData.status == 1 || orderOrderStatusData.status == 10 || orderOrderStatusData.status == 2) && type != 1 && LoadState">
				<!-- 排队中-付款区底图 -->
				<view v-if="orderOrderStatusData.status == 0"
					style="position: absolute; top: 0; right: 200%; width: 100%; height: 100%;overflow: hidden;">
					<image src="https://img.colorpark.cn/wechat/track/fukuanquGolf.png" mode="widthFix"
						style="width: 100%;"></image>
				</view>
				<!-- 排队中 -->
				<view v-if="orderOrderStatusData.status == 0"
					style="position: absolute; width: 100%; height: 100%; overflow: hidden; right: 100%;">
					<view style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;overflow: hidden;">
						<image src="https://img.colorpark.cn/wechat/track/paiduiquGolf.png" mode="widthFix"
							style="width: 100%;"></image>
					</view>
					<view style="position: relative; width: 100%; height: 100%;overflow: hidden;">
						<view class='crate-wrapper'>
							<view style="display: flex;position: relative;">

								<view style="position: relative;transition: all 3s; z-index: 2;" :style="{width: data.editorWidth +'px',height: data.editorHeight +'px',
								transform: 'translateX(' + data.activebrushX + 'px)'}">
									<view style="position: absolute; width: 98%; height: 98%; left: 0; top: 0; right: 0; 
									margin: auto; bottom: 0; background: #FFFFFF; z-index: 1;"></view>
									<!-- 作品图 -->
									<view v-if="initstate" :style="{'z-index': data.render_cove_width ? 2:0}" style="display: flex; align-items: center; justify-content: center;
									position: absolute; width: 100%; height: 100%; left: 0; top: 0;
									right: 0; margin: auto; bottom: 0;">
										<view style="width: 90%; height: 90%; display: flex;">
											<view style="width: calc(100% / 4);" v-for="item in 4" :key="a">
												<view v-for="item in 3" :key="b"
													style="width: 100%; height: calc(100% / 3); position: relative; overflow: hidden;">
													<image style="width: 50%; height: 50%; position: absolute; 
													top: 0; left: 0; right: 0; bottom: 0;
													margin: auto; z-index:0;" :src="goods.works_image + '?x-oss-process=image/resize,lfit,w_300'"
														mode="aspectFit"></image>
													<image style="width: 100%; height: 100%;position: absolute; 
													top: 0; left: 0; right: 0; bottom: 0; 
													margin:auto; z-index: 1;" :src="goods.goods.front_image" mode="aspectFit"></image>
												</view>
											</view>
										</view>
									</view>
								</view>

							</view>
						</view>
					</view>
				</view>

				<!-- 打印中---付款区底图 -->
				<view v-if="orderOrderStatusData.status == 1"
					style="position: absolute; top: 0; right: 100%; width: 100%; height: 100%;overflow: hidden;">
					<image src="https://img.colorpark.cn/wechat/track/fukuanquGolf.png" mode="widthFix"
						style="width: 100%;"></image>
				</view>
				<!-- 生产中打印 1-->
				<view
					style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden;">
					<!-- 背景图 打印图和出货区-->
					<view style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;overflow: hidden;">
						<view style="position: relative; width: 100%;">
							<image src="https://img.colorpark.cn/wechat/track/dayinquGolf.png" mode="widthFix"
								style="width: 100%;"></image>
						</view>
						<view style="position: relative; width: 100%; margin-top: -13px;">
							<image src="https://img.colorpark.cn/wechat/track/shuxiang_2.png" mode="widthFix"
								style="width: 100%;"></image>
						</view>
					</view>
					<view style="position: relative;width: 100%; height: 100%;overflow: hidden;"
						:animation="printingEnd">
						<view class='crate-wrapper'>
							<!-- style="overflow: hidden;" -->
							<view class="brush" :style="{width: data.editorWidth +'px',height: data.editorHeight +'px',
								transform: 'translateX(' + data.printingStartX + 'px)'}">

								<view :style="{width: data.editorWidth +'px',height: data.editorHeight +'px'}"
									style="position: relative;overflow: hidden;">
									<!-- 底图 -->
									<view style="position: absolute; width: 98%; height: 98%; left: 0; top: 0; right: 0; 
									margin: auto; bottom: 0; background: #FFFFFF; z-index: 1;"></view>
									<!-- 底图 -->
									<view v-if="initstate" :style="{'z-index': data.render_cove_width ? 2:0}" style="display: flex; align-items: center; justify-content: center;
									position: absolute; width: 100%; height: 100%; left: 0; top: 0;
									right: 0; margin: auto; bottom: 0;">
										<view style="width: 90%; height: 90%; display: flex;">
											<view style="width: calc(100% / 4);" v-for="item in 4" :key="a">
												<view v-for="item in 3" :key="b"
													style="width: 100%; height: calc(100% / 3); position: relative; overflow: hidden;">
													<image style="width: 100%; height: 100%;position: absolute; 
													top: 0; left: 0; right: 0; bottom: 0; 
													margin:auto; z-index: 1;" :src="goods.goods.front_image_old" mode="aspectFit"></image>
												</view>
											</view>
										</view>
									</view>
									<!-- 作品图 -->
									<view v-if="initstate" :style="{'z-index': data.render_cove_width ? 3:0}" style="display: flex; align-items: center; justify-content: center;
									position: absolute; width: 100%; height: 100%; left: 0; top: 0;
									right: 0; margin: auto; bottom: 0;">
										<view style="width: 90%; height: 90%; display: flex;">
											<view style="width: calc(100% / 4);" v-for="item in 4" :key="a">
												<view v-for="item in 3" :key="b"
													style="width: 100%; height: calc(100% / 3); position: relative; overflow: hidden;">
													<image style="width: 50%; height: 50%; position: absolute; 
													top: 0; left: 0; right: 0; bottom: 0;
													margin: auto; z-index:0;" :src="goods.works_image + '?x-oss-process=image/resize,lfit,w_300'"
														mode="aspectFit"></image>
													<!-- <image style="width: 100%; height: 100%;position: absolute; 
													top: 0; left: 0; right: 0; bottom: 0; 
													margin:auto; z-index: 1;"
													:src="goods.goods.front_image" mode="aspectFit"></image> -->
												</view>
											</view>
										</view>
									</view>
									<!-- 刷子白图 -->
									<view
										:style="{width: data.render_cove_width +'px',height: data.render_cove_height +'px'}"
										style="position: absolute; left: 0; top: 0; right: 0; margin: auto; bottom: 0;z-index: 4;">
										<view :style="{width: leftx +'px',height: data.render_cove_height +'px'}"
											style="position: absolute; left: 0; top: 0;background: #fff;">
										</view>
									</view>
									<!-- 底图 -->
									<view :style="{width: leftx +'px',height: data.render_cove_height +'px'}"
										style="overflow: hidden; position: absolute;left: 0; top: 0; bottom: 0; z-index: 5;">
										<view
											:style="{width: data.render_cove_width +'px',height: data.render_cove_height +'px'}"
											style="display: flex; align-items: center; justify-content: center;
										position: absolute; left: 0; top: 0;
										right: 0; margin: auto; bottom: 0;">
											<view style="width: 90%; height: 90%; display: flex;">
												<view style="width: calc(100% / 4);" v-for="item in 4" :key="a">
													<view v-for="item in 3" :key="b"
														style="width: 100%; height: calc(100% / 3); position: relative; overflow: hidden;">
														<image style="width: 100%; height: 100%;position: absolute; 
														top: 0; left: 0; right: 0; bottom: 0; 
														margin:auto; z-index: 1;" :src="goods.goods.front_image_old" mode="aspectFit"></image>
													</view>
												</view>
											</view>
										</view>
									</view>
									<!-- 色彩公园Lite球图 -->
									<view v-if="initstate" :style="{'z-index': data.render_cove_width ? 6:0}" style="display: flex; align-items: center; justify-content: center;
									position: absolute; width: 100%; height: 100%; left: 0; top: 0;
									right: 0; margin: auto; bottom: 0;">
										<view style="width: 90%; height: 90%; display: flex;">
											<view style="width: calc(100% / 4);" v-for="item in 4" :key="a">
												<view v-for="item in 3" :key="b"
													style="width: 100%; height: calc(100% / 3); position: relative; overflow: hidden;">
													<image style="width: 100%; height: 100%;position: absolute; 
													top: 0; left: 0; right: 0; bottom: 0; 
													margin:auto; z-index: 1;" :src="goods.goods.front_image" mode="aspectFit"></image>
												</view>
											</view>
										</view>
									</view>
								</view>
								<!-- 刷子范围 -->
								<view
									:style="{width: data.render_cove_width +'px',height: data.render_cove_height +'px'}"
									style="position: absolute; left: 0; top: 0; right: 0; margin: auto; bottom: 0;z-index: 10;">
									<view class="item-text" :animation="animMaind" :class="{printer:printer}"
										:style="{left: leftx +'px',opacity: printer ? 1 : 0}"
										style="width:40px; height:100px; position:absolute; top: -50px;">
										<image src="../../static/img/shua.png" mode=""
											style="width:40px; height:100px;"></image>
									</view>
								</view>
							</view>

						</view>
					</view>
				</view>
				<!-- 取货状态 10,2-->
				<view style="position: relative; width: 100%; height: 100%; overflow: hidden;">
					<!-- 底图 -->
					<view style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;overflow: hidden;">
						<view style="position: relative; width: 100%;">
							<image src="https://img.colorpark.cn/wechat/track/shuxiang_2.png" mode="widthFix"
								style="width: 100%;"></image>
						</view>
						<view style="position: relative; width: 100%; margin-top: -13px;">
							<image src="https://img.colorpark.cn/wechat/track/shuxiang_2.png" mode="widthFix"
								style="width: 100%;"></image>
						</view>
					</view>
					<view class='crate-wrapper'>
						<view class="twobrush" :animation="PickUpStart" :style="{width: data.editorWidth +'px',height: data.editorHeight +'px',
						transform: 'translateY(' + -(data.editorHeight + (data.windowHeight - data.editorHeight)/2) + 'px)'}">
							<!-- 底图 -->
							<!-- <view style="position: absolute; width: 98%; height: 98%; left: 0; top: 0; right: 0; 
							margin: auto; bottom: 0; background: #FFFFFF; z-index: 1;"></view> -->
							<!-- 作品图 -->
							<!-- <view v-if="initstate" :style="{'z-index': data.render_cove_width ? 2:0}"
							style="display: flex; align-items: center; justify-content: center;
							position: absolute; width: 100%; height: 100%; left: 0; top: 0;
							right: 0; margin: auto; bottom: 0;">
								<view style="width: 90%; height: 90%; display: flex;">
									<view style="width: calc(100% / 4);" v-for="item in 4" :key="a">
										<view v-for="item in 3" :key="b"
										style="width: 100%; height: calc(100% / 3); position: relative; overflow: hidden;">
											<image style="width: 50%; height: 50%; position: absolute; 
											top: 0; left: 0; right: 0; bottom: 0;
											margin: auto; z-index:0;"
											:src="goods.works_image + '?x-oss-process=image/resize,lfit,w_300'" mode="aspectFit"></image>
											<image style="width: 100%; height: 100%;position: absolute; 
											top: 0; left: 0; right: 0; bottom: 0; 
											margin:auto; z-index: 1;"
											:src="goods.goods.front_image" mode="aspectFit"></image>
										</view>
									</view>
								</view>
							</view> -->
							<view :style="{width: data.editorWidth +'px',height: data.editorHeight +'px'}"
								style="position: relative;overflow: hidden;">
								<!-- 底色 -->
								<view style="position: absolute; width: 98%; height: 98%; left: 0; top: 0; right: 0; 
								margin: auto; bottom: 0; background: #FFFFFF; z-index: 1;"></view>
								<!-- 底图 -->
								<view v-if="initstate" :style="{'z-index': data.render_cove_width ? 2:0}" style="display: flex; align-items: center; justify-content: center;
								position: absolute; width: 100%; height: 100%; left: 0; top: 0;
								right: 0; margin: auto; bottom: 0;">
									<view style="width: 90%; height: 90%; display: flex;">
										<view style="width: calc(100% / 4);" v-for="item in 4" :key="a">
											<view v-for="item in 3" :key="b"
												style="width: 100%; height: calc(100% / 3); position: relative; overflow: hidden;">
												<image style="width: 100%; height: 100%;position: absolute; 
												top: 0; left: 0; right: 0; bottom: 0; 
												margin:auto; z-index: 1;" :src="goods.goods.front_image_old" mode="aspectFit"></image>
											</view>
										</view>
									</view>
								</view>
								<!-- 作品图 -->
								<view v-if="initstate" :style="{'z-index': data.render_cove_width ? 3:0}" style="display: flex; align-items: center; justify-content: center;
								position: absolute; width: 100%; height: 100%; left: 0; top: 0;
								right: 0; margin: auto; bottom: 0;">
									<view style="width: 90%; height: 90%; display: flex;">
										<view style="width: calc(100% / 4);" v-for="item in 4" :key="a">
											<view v-for="item in 3" :key="b"
												style="width: 100%; height: calc(100% / 3); position: relative; overflow: hidden;">
												<image style="width: 50%; height: 50%; position: absolute; 
												top: 0; left: 0; right: 0; bottom: 0;
												margin: auto; z-index:0;" :src="goods.works_image + '?x-oss-process=image/resize,lfit,w_300'"
													mode="aspectFit"></image>
											</view>
										</view>
									</view>
								</view>
								<!-- 色彩公园Lite球图 -->
								<view v-if="initstate" :style="{'z-index': data.render_cove_width ? 5:0}" style="display: flex; align-items: center; justify-content: center;
								position: absolute; width: 100%; height: 100%; left: 0; top: 0;
								right: 0; margin: auto; bottom: 0;">
									<view style="width: 90%; height: 90%; display: flex;">
										<view style="width: calc(100% / 4);" v-for="item in 4" :key="a">
											<view v-for="item in 3" :key="b"
												style="width: 100%; height: calc(100% / 3); position: relative; overflow: hidden;">
												<image style="width: 100%; height: 100%;position: absolute; 
												top: 0; left: 0; right: 0; bottom: 0; 
												margin:auto; z-index: 1;" :src="goods.goods.front_image" mode="aspectFit"></image>
											</view>
										</view>
									</view>
								</view>
							</view>

						</view>
					</view>
				</view>
			</view>
			<!-- 暂时缺货、订单已取消 -->
			<view
				style="width: 100%; height: 100%; position: absolute; top: 0; z-index: 2;background: #131319 !important;"
				v-if="(orderOrderStatusData.status == 3 || orderOrderStatusData.status == -3) && type != 1">
				<view style="padding-bottom: 32px">
					<view style="width: 220upx; margin:90upx auto 40upx;">
						<image style="width: 220upx; height: 220upx; border-radius: 50%;"
							src="../../static/icon_close.png" mode="aspectFill"></image>
					</view>
					<view style="font-size: 36upx; font-weight: 400; color: #FFFFFF; text-align: center;">
						暂时缺货、订单已取消
					</view>
					<view style="margin-top: 378upx; display: flex;align-items: center; justify-content: center;">
						<view style="width: 187upx; position: relative; border-radius: 10upx;"
							@click="previewImg(goods,0)">
							<view
								style="width: 128upx; height: 128upx;margin:auto; display: block; position: relative; overflow: hidden;">
								<view style="width: 50%; height: 50%; background: #FFFFFF; position: absolute; top: 0; 
								left: 0; right: 0; bottom: 0; margin: auto; z-index: 0;"></view>
								<image
									style="width: 50%; height: 50%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index:8;"
									:src="goods.works_image + '?x-oss-process=image/resize,lfit,w_300'"
									mode="aspectFit"></image>
								<image
									style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 10;"
									:src="goods.goods.front_image" mode="aspectFit"></image>
							</view>
						</view>
						<view style="margin-left: 19upx; margin-top: 5upx; ">
							<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF;">
								<text> 订单编号： </text>
								<text style="color: #888888;"> {{goods.id}} </text>
								<text @click="tosetClipboardData(goods.id)"
									style="margin-left: 5upx;font-size: 22upx;">复制</text>
							</view>
							<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF; margin-top: 15upx;">
								<text> 产品尺寸： </text>
								<text style="color: #888888;"> {{goods.goods.name || ''}} </text>
							</view>
							<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF;margin-top: 15upx;">
								<text> 下单时间： </text>
								<text style="color: #888888;"> {{goods.create_time}} </text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 设备故障状态 -->
			<view
				style="width: 100%; height: 100%; position: absolute; top: 0; z-index: 2;background: #131319 !important;"
				v-if="orderOrderStatusData.status == -2 && type != 1">
				<view class="start" style="padding-bottom: 100upx; padding-top: 200upx;">
					<image src="../../static/icon_guaqi.png" mode="aspectFill" class="start_img"></image>
					<view class="start_text">{{msg || ''}}</view>
					<view>
						<view class="start_text">联系客服</view>
						<view class="start_text" style="display: flex; justify-content: center; align-items: center;">
							<image src="../../static/phone.png" mode=""
								style="width: 32upx; height: 32upx; margin-right: 5upx;"></image>
							{{phone || '18938664545'}}
						</view>
					</view>
				</view>
				<image src="../../static/logo.jpg" mode="aspectFill"
					style="width: 664upx; height: 757upx; opacity: 0.03; position: absolute; left: 0; bottom: 0; z-index: -1;">
				</image>
			</view>
			<!-- 取货完成状态 -->
			<view v-if="orderOrderStatusData.status == 7 && type != 1">
				<view style="padding-bottom: 32px">
					<view style="width: 220upx; margin:90upx auto 40upx;">
						<image style="width: 220upx; height: 220upx; border-radius: 50%;"
							src="../../static/mine/Pick-up.png" mode="aspectFill"></image>
					</view>
					<view style="font-size: 36upx; font-weight: 400; color: #FFFFFF; text-align: center;">
						打印完成
					</view>
					<view style="height: 378upx; text-align: center;">
						<text style="font-size: 36upx; line-height: 378upx;font-weight: bold;">
							{{goods.order_queue.id || ''}}
						</text>
					</view>
					<view style="display: flex;align-items: center; justify-content: center;">
						<view style="width: 187upx; position: relative; border-radius: 10upx;"
							@click="previewImg(goods,0)">
							<view
								style="width: 128upx; height: 128upx;margin:auto; display: block; position: relative; overflow: hidden;">
								<view
									style="width: 50%; height: 50%; background: #FFFFFF; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 0;">
								</view>
								<image
									style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 10;"
									:src="goods.goods.front_image" mode="aspectFit"></image>
								<image
									style="width: 50%; height: 50%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index:8;"
									:src="goods.works_image + '?x-oss-process=image/resize,lfit,w_300'"
									mode="aspectFit"></image>
							</view>
						</view>
						<view style="margin-left: 19upx; margin-top: 5upx; ">
							<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF;">
								<text> 订单编号： </text>
								<text style="color: #888888;"> {{goods.id}} </text>
								<text @click="tosetClipboardData(goods.id)"
									style="margin-left: 5upx;font-size: 22upx;">复制</text>
							</view>
							<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF; margin-top: 15upx;">
								<text> 产品尺寸： </text>
								<text style="color: #888888;"> {{goods.goods.name || ''}} </text>
							</view>
							<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF;margin-top: 15upx;">
								<text> 下单时间： </text>
								<text style="color: #888888;"> {{goods.create_time}} </text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import homeservice from '@/service/homeservice.js'
	import myhead from '../index/head/head.vue'; // 页眉

	
	export default {
		components: {myhead},
		computed: {},
		data() {
			return {
				goods: {},
				queryPage: {
					s: 'Order.detail',
					id: null
				},
				machine_id: null, //设备id
				type: null, //1：配送版，2：单机版，3：自助版

				lineUpState: false, //排队状态----横向进入滑动动画
				leaveUpState: false, //排队状态----横向离开滑动动画

				printingStart: false, //打印状态----横向进来滑动动画 Printing start
				printingEnd: {}, ///打印状态----纵向离开动画 Printing end
				initstate: false, //打印状态----显示刷子
				PickUpStart: {}, //取货状态-----手机壳从上面动画出来
				PickUpTopBottom: null, //定时器----取货上下浮动
				statetime: null, //定时器----打印机动画
				orderOrderStatusTime: null, //定时器---查询订单状态
				OrderOrderRankingTime: null, //定时器---排队定时器
				leftx: 0, //x轴-----刷子打印
				topy: -20, //y-----刷子打印
				animMaind: {}, //动画----刷子上下动画
				animMaind_time: 577, //800动画时间----刷子上下动画时间
				isReady: false, //礼花开关
				BoxTwoAnimation: {}, //排队-打印-取货流程图架构
				oldRankinglist: [], //上次排队队列
				rankinglist: [], //排队队列
				teststate: false, //开启测试模式 false  true
				orderOrderStatusData: null, //订单状态
				ringaction: { //打印机音乐状态
					method: 'pause' //method: 'pause'method: 'play'
				},
				printer: false, //打印机状态

				data: {
					windowWidth: 0, // 屏幕宽度
					windowHeight: 0, // 屏幕高度
					pixelRate: 0, // 屏幕宽度比率
					editorWidth: 0, // 设计宽度
					editorHeight: 0, // 设计高度
					render_cove_width: null,
					render_cove_height: null,
					activebrushX: -500, //排队盒子动画坐标
					printingStartX: -500, //生产中盒子动画坐标
				},

				tomallstate: true, //防止返回触动页面销毁事件
				LoadState: false, //加载完成
				orderCurrentOrder: null,
				orderCurrentOrderTime: null
			};
		},
		onReady() {

		},
		methods: {
			tomall() {
				this.tomallstate = false
				wx.navigateBack({
					delta: 1
				})
			},
			init() {
				this.printer = true
				this.isReady = false
				this.leftx = this.data.render_cove_width
				// this.topy = -20
				setTimeout(function() {
					this.updata()
				}.bind(this), 2000)
			},
			updata() {
				setTimeout(function() {
					this.ringaction.method = 'play' //开启音乐
					console.log('5开启音乐')
				}.bind(this), this.animMaind_time)
				// 无限循环动画
				var animation = wx.createAnimation({
					duration: this.animMaind_time, // 动画执行时间
					timingFunction: 'linear', // 动画执行效果
				})
				var state = true // 控制上下滑动setTimeout setInterval
				this.statetime = setInterval(function() {
					if (state == true) {
						animation.translate(0, (this.data.render_cove_height)).step(); //向下移动
					} else {
						animation.translate(0, 0).step(); //向上移动
					}
					state = !state
					// 减慢打印时间
					if (this.leftx <= 10) {
						if (this.orderOrderStatusData.status == 10 || this.orderOrderStatusData.status == 2) {
							this.leftx -= 2
						} else {
							this.leftx -= 0.1
						}
					} else {
						this.leftx -= 1
					}
					this.setData({
						animMaind: animation.export(),
						leftx: this.leftx
					})
					// 打印完成----清除定时器
					if (this.leftx <= 0) {
						this.ringaction.method = 'pause' //暂停音乐
						console.log('5暂停音乐')
						clearInterval(this.statetime)
						this.statetime = null
						this.isReady = true;
						this.printer = false
						uni.showToast({
							title: '打印完成，即将出货',
							icon: 'none',
							duration: 2000
						});
						setTimeout(function() {
							this.boxinit({
								duration: 3000, // 动画执行时间
								axisX: 0, // x轴移动
								axisY: this.data.windowHeight, // y轴移动
								settimeout: 3500, // 定时器时间
							}) // 触发打印完成--手机壳下移消失
						}.bind(this), 2000)
					}
				}.bind(this), this.animMaind_time)
			},
			// 打印完成--手机壳下移消失
			boxinit(data) {
				var animation = wx.createAnimation({
					duration: data.duration, // 动画执行时间
					timingFunction: 'linear', // 动画执行效果
				})
				animation.translate(data.axisX, data.axisY).step();
				this.setData({
					printingEnd: animation.export(),
				})
				setTimeout(function() {
					this.Box_Two_Animation({
						duration: 2000, // 动画执行时间
						axisX: 0, // x轴移动
						axisY: -this.data.windowHeight, // y轴移动
						settimeout: 2500, // 定时器时间
						settimeoutState: true, //开启下一步
					})
				}.bind(this), data.settimeout)
			},
			// 取货页面----底部向上滑动动画
			Box_Two_Animation(data) {
				var animation = wx.createAnimation({
					duration: data.duration, // 动画执行时间
					timingFunction: 'linear', // 动画执行效果
				})
				animation.translate(data.axisX, data.axisY).step();
				this.setData({
					BoxTwoAnimation: animation.export(),
				})
				if (!data.settimeoutState) return;
				wx.setNavigationBarTitle({
					title: '取货区'
				})
				setTimeout(function() {
					let boxinitY = (this.data.windowHeight - ((this.data.windowHeight - this.data.editorHeight) /
						2)) - (this.data.editorHeight / 3 * 1)
					this.Two_Brush_Animation({
						duration: 5000, // 动画执行时间
						axisX: 0, // x轴移动
						axisY: boxinitY, // y轴移动
						settimeout: 5000, // 定时器时间
					})
				}.bind(this), data.settimeout)
			},
			// 取货手机壳动画
			Two_Brush_Animation(data) {
				let animation = wx.createAnimation({
					duration: data.duration, // 动画执行时间
					timingFunction: 'linear', // 动画执行效果
				})
				animation.translate(data.axisX, data.axisY).step();
				this.setData({
					PickUpStart: animation.export(),
				})
				// 上下浮动
				clearInterval(this.PickUpTopBottom)
				this.PickUpTopBottom = null
				setTimeout(function() {
					uni.showToast({
						title: '已出货，请在出货口取货吧',
						icon: 'none',
						duration: 2000
					});
					var state = true
					let animation = wx.createAnimation({
						duration: 2000, // 动画执行时间
						timingFunction: 'linear', // 动画执行效果
					})
					this.PickUpTopBottom = setInterval(function() {
						if (state == true) {
							animation.translate(data.axisX, (data.axisY + 40)).step();
						} else {
							animation.translate(data.axisX, data.axisY).step();
						}
						state = !state
						this.setData({
							PickUpStart: animation.export(),
						})
					}.bind(this), 2000)
				}.bind(this), data.settimeout)
			},
			loadData() {
				uni.showLoading({
					title: '正在加载中...'
				})
				homeservice.WorksList(this.queryPage).then(result => {
					this.goods = result
					/* if (this.$base.mobilePhoneCaseSize) {
						this.data = this.$base.mobilePhoneCaseSize
					} else { */
						result.goods.design_width = 277.5 / this.data.pixelRate
						result.goods.design_height = 210 / this.data.pixelRate
						this.data.editorWidth = result.goods.design_width * this.data.pixelRate // 设计宽度
						this.data.editorHeight = result.goods.design_height * this.data.pixelRate // 设计高度
						// this.data.render_cove_width = result.goods.render_cove_width * (result.goods.design_width / result.goods.render_width) * this.data.pixelRate + 30 // 设计高度
						// this.data.render_cove_height = result.goods.render_cove_height * (result.goods.design_height / result.goods.render_height) * this.data.pixelRate + 30 // 设计高度
						this.data.render_cove_width = result.goods.design_width * this.data.pixelRate // 设计高度
						this.data.render_cove_height = result.goods.design_height * this.data.pixelRate // 设计高度
						this.data.render_left = result.goods.render_left * (result.goods.design_width / result
							.goods.render_width) * this.data.pixelRate // 设计高度
						this.data.render_top = result.goods.render_top * (result.goods.design_height / result.goods
							.render_height) * this.data.pixelRate // 设计高度
						this.data.activebrushX = -((this.data.windowWidth - this.data.editorWidth) / 2 + this.data
							.editorWidth + 50)
						this.data.printingStartX = -((this.data.windowWidth - this.data.editorWidth) / 2 + this
							.data.editorWidth + 50)
						//this.$base.mobilePhoneCaseSize = this.data
					/* } */
					this.leftx = this.data.render_cove_width
					// status.value 订单状态 0：等待生产，1：生产中，2: 生产完成，3：取消生产，4：出料中（弃用），5: 等待取料（弃用）， 6：待入货（弃用），7：取货完成，8：已发货，9：订单完成 -->
					// type.value 1直营配送站 2 万能通用版 3色彩自助站
					if (this.teststate) {
						result.status.value = 1 //1：生产中
						result.type.value = 2 //2单机版
					}
					this.type = result.type.value
					// 单机版查询当前设备打印订单
					if (this.type == 2) {
						this.anb() //查询排队列表
						this.leaveto(3)

						// clearInterval(this.orderCurrentOrderTime)
						// this.orderCurrentOrderTime = setInterval(function(){
						// 	this.OrdercurrentOrder() //单机版查询设备打印订单
						// 	this.anbtwo() //记录排队人数
						// }.bind(this),10000)
						// setTimeout(function(){
						// 	this.OrdercurrentOrder() //单机版查询设备打印订单
						// 	// this.anbtwo() //记录排队人数
						// }.bind(this),10000)
					} else {
						this.OrderOrderStatusInit()
					}
					uni.hideLoading();
					uni.stopPullDownRefresh();
				}).catch(err => {
					uni.hideLoading();
					uni.showToast({
						title: err.msg || err.data,
						icon: 'none'
					});
				});
			},
			anb() {
				homeservice.WorksList({
					s: 'Order.orderStatus',
					order_id: this.queryPage.id
				}).then(result => {
					this.orderOrderStatusData = result
					this.orderOrderStatusData.status = 0
					// wx.setNavigationBarTitle({title: '排队区' })
					// this.anbone()
				}).catch(err => {
					uni.showToast({
						title: err.msg || err.data,
						icon: 'none'
					});
				});
			},
			anbone() {
				homeservice.WorksList({
					s: 'Order.orderRanking',
					order_id: this.queryPage.id,
					machine_id: this.machine_id
				}).then(result => {
					this.oldRankinglist = [] // 第一次进来记录排队人数
					for (var i = 0; i < result.ranking; i++) {
						this.oldRankinglist.push({
							w: 30,
							x: 0
						})
					}
					this.rankinglist = this.oldRankinglist
					this.Box_Two_Animation({
						duration: 0, // 动画执行时间
						axisX: this.data.windowWidth + this.data.windowWidth, // x轴移动
						axisY: 0, // y轴移动
						settimeout: 0, // 定时器时间
						settimeoutState: false, //开启下一步
					})
					this.LoadState = true
					setTimeout(function() {
						this.Box_Two_Animation({
							duration: 3000, // 动画执行时间
							axisX: this.data.windowWidth, // x轴移动
							axisY: 0, // y轴移动
							settimeout: 0, // 定时器时间
							settimeoutState: false, //开启下一步
						})
					}.bind(this), 1000)
					//排队状态----盒子横向进入滑动动画时间3s
					setTimeout(function() {
						this.lineUpState = true
						this.data.activebrushX = 0
					}.bind(this), 4500)
				}).catch(err => {
					uni.showToast({
						title: err.msg || err.data,
						icon: 'none'
					});
				});
			},
			// anbtwo(){
			// 	homeservice.WorksList({
			// 		s:'Order.orderRanking',
			// 		order_id:this.queryPage.id,
			// 		machine_id:this.machine_id
			// 	}).then(result => {
			// 		this.oldRankinglist = []// 第一次进来记录排队人数
			// 		for(var i =0;i<result.ranking;i++){
			// 			this.oldRankinglist.push({
			// 				w:30,x:0
			// 			})
			// 		}
			// 		this.rankinglist = this.oldRankinglist
			// 	}).catch(err => {
			// 		uni.showToast({title: err.msg || err.data,icon: 'none'});
			// 	});
			// },
			OrdercurrentOrder() {
				console.log('单机版查询设备打印订单')
				homeservice.WorksList({
					s: 'Order.currentOrder',
					machine_id: this.machine_id
				}).then(result => {
					this.orderCurrentOrder = result.order_id
					if (this.teststate) {
						this.orderCurrentOrder = this.queryPage.id // 测试
					}
					// if(this.orderCurrentOrder == this.queryPage.id){
					// 	console.log('清除定时器---')
					// 	clearInterval(this.orderCurrentOrderTime)
					// 	this.leaveto(0)
					// }
					console.log('清除定时器---')
					clearInterval(this.orderCurrentOrderTime)
				}).catch(err => {
					uni.hideLoading();
					uni.showToast({
						title: err.msg || err.data,
						icon: 'none'
					});
				});
			},
			OrderOrderStatusInit(e) {
				homeservice.WorksList({
					s: 'Order.orderStatus',
					order_id: this.queryPage.id
				}).then(result => {
					//result.status -1：订单不存在 0：待打印 1：打印中 10：打印完成 2：生产完成 3：取消生产
					if (this.teststate || e == 2) {
						result.status = -2 // 测试
					}
					this.orderOrderStatusData = result
					if (result.status == 0) { //0：待打印排队中
						wx.setNavigationBarTitle({
							title: '排队区'
						})
						this.OrderOrderRankingInit(4)
						if (this.teststate) {
							// setTimeout(function(){
							// 	this.OrderOrderRankingInit(1)
							// }.bind(this),5000)
							// setTimeout(function(){
							// 	this.OrderOrderRankingInit(-1)
							// }.bind(this),10000)
						}
						if (this.type != 2) {
							if (!this.teststate && e != 2) { // 排队定时器  测试需要关闭
								clearInterval(this.OrderOrderRankingTime)
								this.OrderOrderRankingTime = setInterval(function() {
									this.OrderOrderRankingInit()
								}.bind(this), 10000)
							}
						}
					} else if (result.status == 1) { // 1：打印中
						wx.setNavigationBarTitle({
							title: '打印区'
						})
						// 打开排队页面
						this.Box_Two_Animation({
							duration: 0, // 动画执行时间
							axisX: this.data.windowWidth, // x轴移动
							axisY: 0, // y轴移动
							settimeout: 0, // 定时器时间
							settimeoutState: false, //开启下一步
						})
						this.LoadState = true
						setTimeout(function() {
							this.Box_Two_Animation({
								duration: 3000, // 动画执行时间
								axisX: 0, // x轴移动
								axisY: 0, // y轴移动
								settimeout: 0, // 定时器时间
								settimeoutState: false, //开启下一步
							})
						}.bind(this), 1000)
						// 打印状态滑动进来
						setTimeout(function() {
							this.printingStart = true //打印状态----横向进来滑动动画 3s
							this.data.printingStartX = 0
						}.bind(this), 4500)
						setTimeout(function() {
							this.initstate = true //打印状态----显示刷子
							this.init()
						}.bind(this), 7500)
						if (!this.teststate) {
							// 定时器查询订单状态
							clearInterval(this.orderOrderStatusTime)
							this.orderOrderStatusTime = setInterval(function() {
								this.orderOrderStatusGet()
							}.bind(this), 10000)
						} else {
							// 定时器查询订单状态
							clearInterval(this.orderOrderStatusTime)
							this.orderOrderStatusTime = setInterval(function() {
								this.orderOrderStatusGet()
							}.bind(this), 30000)
						}
					} else if (result.status == 2 || result.status == 10) { //2：生产完成 10：打印完成
						this.LoadState = true
						wx.setNavigationBarTitle({
							title: '取货区'
						})
						this.Box_Two_Animation({
							duration: 2000, // 动画执行时间
							axisX: 0, // x轴移动
							axisY: -this.data.windowHeight, // y轴移动
							settimeout: 2500, // 定时器时间
							settimeoutState: true, //开启下一步
						})
					} else if (result.status == 3 || result.status == -3) {
						wx.setNavigationBarTitle({
							title: '取消生产'
						})
					} else if (result.status == -2) {
						wx.setNavigationBarTitle({
							title: '设备故障'
						})
					} else if (result.status == 7) {
						wx.setNavigationBarTitle({
							title: '取货完成'
						})
					}
				}).catch(err => {
					uni.showToast({
						title: err.msg || err.data,
						icon: 'none'
					});
				});
			},
			// -1：订单不存在 0：待打印 1：打印中 10：打印完成 2：生产完成 3：取消生产
			// 打印状态滑动进来
			orderOrderStatusGet() {
				homeservice.WorksList({
					s: 'Order.orderStatus',
					order_id: this.queryPage.id
				}).then(result => {
					if (this.teststate) {
						result.status = 2
					}
					this.orderOrderStatusData = result
					if (result.status == 10 || result.status == 2) {
						clearInterval(this.statetime)
						this.statetime = null
						clearInterval(this.orderOrderStatusTime)
						this.orderOrderStatusTime = null
						let animMaind_time = (5 / this.leftx) * 1000
						// 导出动画
						this.setData({
							animMaind_time: animMaind_time || 200,
						})
						this.updata()
					} else if (result.status == 3 || result.status == -3) {
						this.ringaction.method = 'pause' //暂停音乐
						console.log('5暂停音乐')
						wx.setNavigationBarTitle({
							title: '取消生产'
						})
						clearInterval(this.statetime)
						this.statetime = null
						clearInterval(this.orderOrderStatusTime)
						this.orderOrderStatusTime = null
					} else if (result.status == -2) {
						this.ringaction.method = 'pause' //暂停音乐
						console.log('5暂停音乐')
						wx.setNavigationBarTitle({
							title: '设备故障'
						})
						clearInterval(this.statetime)
						this.statetime = null
						clearInterval(this.orderOrderStatusTime)
						this.orderOrderStatusTime = null
					} else if (result.status == 7) {
						this.ringaction.method = 'pause' //暂停音乐
						console.log('5暂停音乐')
						wx.setNavigationBarTitle({
							title: '取货完成'
						})
						clearInterval(this.statetime)
						this.statetime = null
						clearInterval(this.orderOrderStatusTime)
						this.orderOrderStatusTime = null
					}
				}).catch(err => {
					console.log(err)
					uni.showToast({
						title: err.msg || err.data,
						icon: 'none'
					});
				});
			},
			// 查询排队
			// 如果订单不存单，或者订单已经打印完成，那么返回的排名是-1
			// 如果订单当前正在打印。返回的排名是0
			// 如果前面有一个订单就返回1，前面有两个订单就返回2
			OrderOrderRankingInit(state) {
				homeservice.WorksList({
					s: 'Order.orderRanking',
					order_id: this.queryPage.id,
					machine_id: this.machine_id
				}).then(result => {
					if (this.teststate) {
						result.ranking = state //例子
					}
					if (result.ranking >= 0) {
						if (this.oldRankinglist.length > 0) {
							if (this.rankinglist.length > result.ranking) {
								// 排队消失列表效果
								this.rankinglist[(this.rankinglist.length - 1)].x = 200
								setTimeout(function() {
									this.rankinglist[(this.rankinglist.length - 1)].w = 0
								}.bind(this), 1000)
								setTimeout(function() {
									this.rankinglist.pop()
									if (this.rankinglist.length == 0) {
										this.leaveto(0)
									}
								}.bind(this), 2500)
							}
						} else {
							this.oldRankinglist = [] // 第一次进来记录排队人数
							for (var i = 0; i < result.ranking; i++) {
								this.oldRankinglist.push({
									w: 30,
									x: 0
								})
							}
							this.rankinglist = this.oldRankinglist
							// 当排队人数等于0就开始打印
							if (this.rankinglist.length == 0) {
								this.leaveto(1)
							} else {
								// 快速切换--排队状态设计区底图
								this.Box_Two_Animation({
									duration: 0, // 动画执行时间
									axisX: this.data.windowWidth + this.data.windowWidth, // x轴移动
									axisY: 0, // y轴移动
									settimeout: 0, // 定时器时间
									settimeoutState: false, //开启下一步
								})
								this.LoadState = true
								setTimeout(function() {
									this.Box_Two_Animation({
										duration: 3000, // 动画执行时间
										axisX: this.data.windowWidth, // x轴移动
										axisY: 0, // y轴移动
										settimeout: 0, // 定时器时间
										settimeoutState: false, //开启下一步
									})
								}.bind(this), 1000)
								//排队状态----盒子横向进入滑动动画时间3s
								setTimeout(function() {
									this.lineUpState = true
									this.data.activebrushX = 0
								}.bind(this), 4500)
							}
						}
					} else {
						this.leaveto(1)
					}
				}).catch(err => {
					uni.showToast({
						title: err.msg || err.data,
						icon: 'none'
					});
				});
			},
			leaveto(e) { //e== 1无排队切换打印 0有排队切换打印
				clearInterval(this.OrderOrderRankingTime)
				this.OrderOrderRankingTime = null
				let time = 3500 //时间
				if (e == 1) { //无排队切换打印
					// 快速切换--设计区底图
					this.Box_Two_Animation({
						duration: 0, // 动画执行时间
						axisX: this.data.windowWidth, // x轴移动
						axisY: 0, // y轴移动
						settimeout: 0, // 定时器时间
						settimeoutState: false, //开启下一步
					})
					this.LoadState = true
					setTimeout(function() {
						this.Box_Two_Animation({
							duration: 3000, // 动画执行时间
							axisX: 0, // x轴移动
							axisY: 0, // y轴移动
							settimeout: 0, // 定时器时间
							settimeoutState: false, //开启下一步
						})
					}.bind(this), 1000)
					time = 4500 //无时间
					wx.setNavigationBarTitle({
						title: '打印区'
					})
				} else if (e == 0) { //有排队切换打印
					this.LoadState = true
					this.leaveUpState = true //排队状态----横向离开滑动动画 时间3s
					this.data.activebrushX = (this.data.windowWidth - this.data.editorWidth) / 2 + this.data.editorWidth +
						50 //排队状态----横向离开滑动动画 3s
					setTimeout(function() { // 排队页面滑出---打印页面进入
						this.Box_Two_Animation({
							duration: 3000, // 动画执行时间
							axisX: 0, // x轴移动
							axisY: 0, // y轴移动
							settimeout: 0, // 定时器时间
							settimeoutState: false, //开启下一步
						})
					}.bind(this), time)
					wx.setNavigationBarTitle({
						title: '打印区'
					})
				} else if (e == 3) {
					// 快速切换--设计区底图
					this.Box_Two_Animation({
						duration: 0, // 动画执行时间
						axisX: this.data.windowWidth, // x轴移动
						axisY: 0, // y轴移动
						settimeout: 0, // 定时器时间
						settimeoutState: false, //开启下一步
					})
					this.LoadState = true
					setTimeout(function() {
						this.Box_Two_Animation({
							duration: 3000, // 动画执行时间
							axisX: 0, // x轴移动
							axisY: 0, // y轴移动
							settimeout: 0, // 定时器时间
							settimeoutState: false, //开启下一步
						})
					}.bind(this), 1000)
					time = 500 //无时间
					wx.setNavigationBarTitle({
						title: '打印区'
					})
				}

				setTimeout(function() {
					this.printingStart = true //打印状态----横向进来滑动动画
					this.data.printingStartX = 0
				}.bind(this), (time + 3500))
				// 刷子开始打印手机壳
				setTimeout(function() {
					this.initstate = true
					this.init()
				}.bind(this), (time + 6500))
				// 开启定时器查询打印状态
				if (this.teststate) {
					clearInterval(this.orderOrderStatusTime)
					this.orderOrderStatusTime = setInterval(function() {
						this.orderOrderStatusGet()
					}.bind(this), 15000)
				} else {
					clearInterval(this.orderOrderStatusTime)
					this.orderOrderStatusTime = setInterval(function() {
						this.orderOrderStatusGet()
					}.bind(this), 10000)
				}
			},
			clearIntervalTime() { // 清除定时器
				clearInterval(this.statetime)
				this.statetime = null
				clearInterval(this.orderOrderStatusTime)
				this.orderOrderStatusTime = null
				clearInterval(this.OrderOrderRankingTime)
				this.OrderOrderRankingTime = null
			},
			setData(obj) {
				let that = this;
				let keys = [];
				let val, data;
				Object.keys(obj).forEach(function(key) {
					keys = key.split('.');
					val = obj[key];
					data = that.$data;
					keys.forEach(function(key2, index) {
						if (index + 1 == keys.length) {
							that.$set(data, key2, val);
						} else {
							if (!data[key2]) {
								that.$set(data, key2, {});
							}
						}
						data = data[key2];
					})
				});
			},
			tosetClipboardData(id) { // 复制成功
				uni.setClipboardData({
					data: id,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none',
				 		duration: 2000
						});
					}
				});
			},
			previewImg(goods, index) { //预览图片
				let img = goods.works_image
				uni.previewImage({
					current: index,
					urls: [img]
				});
			},
		},
		onLoad(options) {
			console.log(options)
			// orderId=163496137000007749&type=2&machine_id=100022
			this.clearIntervalTime()
			this.queryPage.id = options.orderId
			this.type = options.type
			this.machine_id = options.machine_id
			/* if(this.$base.mobilePhoneCaseSize){
				this.data = this.$base.mobilePhoneCaseSize
				this.leftx = this.data.render_cove_width
			}else{ */
			var that = this;
			wx.getSystemInfo({ //获取屏幕宽高
				success: function(res) {
					let pixelRate = res.windowWidth / 750;
					that.data.windowWidth = res.windowWidth // 屏幕宽度
					that.data.windowHeight = res.windowHeight // 屏幕高度
					that.data.pixelRate = pixelRate // 屏幕宽度比率
				}
			})
			/* } */
			this.loadData();
		},
		onshow() {
			this.data.activebrushX = '-500' //排队盒子动画坐标
			this.printingStart = false
			this.data.printingStartX = '-500' //生产中盒子动画坐标
		},
		onUnload() {
			this.clearIntervalTime()
		}
	};
</script>

<style lang="scss">
	page {
		background: #131319 !important;
		color: #fff;
	}

	// 3D动画
	.crate-wrapper {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.brush {
		position: relative;
		transition: all 3s;
		transform: translateX(-400px);
	}


	.twobrush {
		position: relative;
		transition: all 3s;
	}

	.item-text {
		transition: all 2s;
		transform: translateX(400px);
	}

	.printer {
		transform: translateX(0px);
	}

	// 错误提示信息
	.start {
		.start_img {
			width: 260upx;
			height: 260upx;
			display: block;
			margin: 0upx auto 102upx;
		}

		.start_title {
			font-size: 30upx;
			text-align: center;
			color: #FFFFFF;
		}

		.start_text {
			width: 70%;
			text-align: center;
			font-size: 28upx;
			font-weight: 400;
			color: #FFFFFF;
			margin: 22upx auto 0;
			line-height: 28upx;
		}
	}
</style>
