<template>
	<view class="colletion full-width">

		<myhead :worksid="works_id" :title="'排队列表'" :color="'#131319'" :titleShow="true" :backShow="true":background="'#fff'"></myhead>

		<view class="uni-tab-bar full-width">
			<view class="content full-width" scroll-y :style="{ marginTop : headheight + 'px'}">
				<view v-if="LoupanList.length == 0 && stateindex == true ">
					<view class="noData">
						<image src="../../static/icon_default_no.png" mode="aspectFill" class="noData_img"></image>
						<view class="noData_title">
							啊嘞，当前还没有打印任务呢<br>
							<view class="noData_text">去定制一个作品吧</view>
						</view>
						<view class="noData_but" @click="tomain()">去定制</view>
					</view>
				</view>
				<view v-else v-for="(designer, index) in LoupanList" :key="index" style=" width: 690upx; 
				margin: 20upx auto; border-radius: 10upx; " @click="self_help_payment(designer)"
					:style="{background: designer.status.value == 1 ? '#ffffff' :'#EEEEEE;'}">

					<view style="  display: flex; align-items: center;">
						<view v-if="designer.user_id != userId"
							style="margin:20upx 20upx;width: 140upx; height: 140upx; position: relative; overflow: hidden; opacity: 0.3;  ">
							<view style="width: 100%; height: 100%;border-radius: 20upx; background: #FFFFFF;">
							</view>
							<image style="width: 70upx; height: 70upx; position: absolute; top: 0; left: 0; right: 0; bottom: 0; 
							margin: auto; z-index:2;" :src="designer.works_image + '?x-oss-process=image/resize,lfit,w_300'"mode="aspectFit"></image>
						</view>

						<view v-if="designer.user_id == userId"
							style="margin:20upx 20upx;width: 140upx; height: 140upx; position: relative; overflow: hidden; ">
							<view style="width: 100%; height: 100%;border-radius: 20upx; background: #FFFFFF;"></view>
							<!-- :src="designer.front_image_old" mode="aspectFit"></image> -->
							<image style="width: 70upx; height: 70upx; position: absolute; top: 0; left: 0; right: 0; bottom: 0; 
							margin: auto; z-index:2;" :src="designer.works_image + '?x-oss-process=image/resize,lfit,w_300'"mode="aspectFit"></image>
						</view>

						<view style="width: calc(100% - 360upx);">
							<view style="width: 90%;font-size: 28upx;">
								<text style="font-size: 36upx;">{{designer.id || ''}}</text>
							</view>
							<view style="font-size: 24upx; color: #333333; margin-top: 30upx;">
								{{designer.goods_specs || ''}}
							</view>
						</view>
						
						<view v-if="designer.status.value == 1" style="width: 136upx; height: 60upx;background: #F29F3D;opacity: 0.86;border-radius: 30px; margin-top: 70upx;">
							<view style="text-align: center; font-size: 26upx; color: #FFFFFF; line-height: 60upx;"> 打印中
							</view>
						</view>
						<view v-else style="width: 136upx; height: 60upx;border-radius: 30upx;margin-top: 70upx;">
							<view style="text-align: center; font-size: 26upx; color: #67C4CA; line-height: 60upx;"> 排队中
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 提示 -->
			<view v-if="sighstate">
				<!-- background:rgba(0,0,0,0.6); -->
				<view
					style="position: fixed; z-index:999; width: 100%; height: 100%;  top: 0; background:rgba(0,0,0,0.6);; justify-content: center;"
					@click.stop="sighstate = false"></view>
				<view style="position: fixed; z-index: 1000; top: 52%; left: 50%; right: 0; margin: auto; transform: translate(-50%, -50%);
				width: 558upx; height: 600upx; background: #FFFFFF; border-radius: 10upx;
				display: flex; align-items: center; justify-content: center;">
					<view style="position: absolute;
					top: 0; right: 0;" @click="sighstate = false">
						<image src="../../static/icon_guanbi.png" mode=""
							style="width: 26upx; height: 26upx; padding: 12upx 22upx;"></image>
					</view>

					<view v-if=" designer.goods_name == '背包' " style="width: 558upx;">
						<view style="display: flex; align-items: center; justify-content: center;  
						 width: 100%; height: 360upx;  ">
							<image :src="designer.works_image + '?x-oss-process=image/resize,lfit,w_80'"mode="aspectFit" style="width:80upx;  margin-left: 100upx;"></image>
							<image :src="designer.back_image + '?x-oss-process=image/resize,lfit,w_300'"mode="aspectFit" style=" width: 300upx;margin-left: -200upx;"></image>
						</view>
						<view style="text-align: center; font-size: 36upx; margin-top: 58upx;">作品排队中</view>
						<view style="text-align: center; font-size: 36upx;">如需要打印可与客服确认</view>
					</view>

					<!-- goods_name=马卡龙 -->
					<view v-if=" designer.goods_name == '马卡龙' " style="width: 558upx;">
						<view style="display: flex; align-items: center; justify-content: center;
						 width: 500upx; height: 350upx; position: relative; margin: auto;">
							<view style="width: 100%; height: 100%; display: flex; border: 1px solid #09BB07;">
								<view style="width: calc(100% / 4); height: 100%;" 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="designer.front_image_old" mode="aspectFit"></image>
										<image style="width: 36%; height: 36%; position: absolute; 
										top: 0; left: 0; right: 0; bottom: 0;
										margin: auto; z-index:1;" :src="designer.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: 2;" :src="designer.front_image" mode="aspectFit"></image>
									</view>
								</view>
							</view>
						 </view>
						<view style="text-align: center; font-size: 36upx; margin-top: 58upx;">作品排队中</view>
						<view style="text-align: center; font-size: 36upx;">如需要打印可与客服确认</view>
					</view>

					<view v-if=" designer.goods_name == '单肩袋' " style="width: 558upx;">
						<view style="display: flex; align-items: center; justify-content: center;  
					   width: 100%; height: 360upx; ">
							<image :src="designer.works_image + '?x-oss-process=image/resize,lfit,w_140'"mode="aspectFit" style="width:140upx;  margin-left: 100upx;"></image>
							<image :src="designer.back_image + '?x-oss-process=image/resize,lfit,w_290'"mode="aspectFit" style=" width: 300upx;margin-left: -220upx;"></image>
						</view>
						<view style="text-align: center; font-size: 36upx; margin-top: 58upx;">作品排队中</view>
						<view style="text-align: center; font-size: 36upx;">如需要打印可与客服确认</view>
					</view>

					<view
						v-if=" designer.goods_name != '背包' && designer.goods_name != '马卡龙' && designer.goods_name != '单肩袋'  "
						style="width: 558upx;">
						<view style="display: flex; align-items: center; justify-content: center;  
						 width: 100%; height: 360upx; ">
							<image :src="designer.works_image + '?x-oss-process=image/resize,lfit,w_100'" mode="aspectFit" style="width:100upx;  margin-left: 100upx;"></image>
							<image :src="designer.back_image + '?x-oss-process=image/resize,lfit,w_290'"  mode="aspectFit" style=" width: 300upx;margin-left: -200upx;"></image>
						</view>
						<view style="text-align: center; font-size: 36upx; margin-top: 58upx;">作品排队中</view>
						<view style="text-align: center; font-size: 36upx;">如需要打印可与客服确认</view>
					</view>
				</view>

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

<script>
	import userService from '@/service/UserService';
	import homeservice from '@/service/homeservice.js'
	import Enums from '@/util/Enums';
	import myhead from './head/head.vue'; // 页眉
	export default {
		components: {
			myhead
		},
		computed: {

		},
		data() {
			return {
				LoupanList: [],
				dataLoadState: {
					pullDownRefresh: false,
					reachBottom: false
				},
				queryPage: {
					s: 'Machine.wait', //获取设备打印等待列表
					machine_id: null,
					page: 1,
					per_page: 15,
					// total: 0
				},
				stateindex: false,
				key: 2, //1直营配送站 2 万能通用版 3色彩自助站
				sighstate: false,
				statetime: null,
				animMaind_time: 10000, //动画时间----刷子上下动画时间
				designer: null,
				userId: null, //用户信息
				headheight: 0, //头部高度
			};
		},
		methods: {
			self_help_payment(designer) {
				if (designer.user_id != this.userId) {
					return;
				}
				homeservice.WorksList({
					machine_id: this.queryPage.machine_id,
					s: 'machine.newDetail',
				}).then(res => {
					if (designer.status.value == 1) {
						if (designer.goods_name == "马卡龙") {
							this.clearIntervalTime()
							uni.navigateTo({
								url: '../mine/self_help_payment_details?orderId=' + designer.order_id +
									'&type=' + this.key + '&machine_id=' + this.queryPage.machine_id
							})
						} else {
							uni.navigateTo({
								url: '../mine/self_help_payment_details_new?orderId=' + designer
									.order_id +
									'&type= 2' + '&machine_id=' + this.queryPage.machine_id
							})
						}
					} else {
						if (this.sighstate == true) return;
						this.designer = designer
						this.sighstate = true

					}
				}).catch(err => {
					uni.showToast({
						title: '设备休息中',
						icon: 'none',
						duration: 2000
					});
				});
			},

			tomain() {
				uni.navigateBack();
			},

			previewImg(designer, index) {
				let img = designer.works_image
				uni.previewImage({
					current: index,
					urls: [img]
				});
			},

			loadGoodsList(direction) {
				if (this.dataLoadState.pullDownRefresh || this.dataLoadState.reachBottom) return;
				this.dataLoadState.pullDownRefresh = direction === Enums.DATA_DIRECTION.UP;
				this.dataLoadState.reachBottom = direction === Enums.DATA_DIRECTION.DOWN;
				if (this.dataLoadState.reachBottom) {
					if (Math.ceil(this.queryPage.total / this.queryPage.per_page) < this.queryPage.page) {
						return setTimeout(() => {
							uni.showToast({
								title: '啊嘞,没有更多数据了！',
								icon: 'none'
							});
						}, 500);
					}
				}
				homeservice.queryList(this.queryPage).then(result => {
					result.forEach((item, index) => {
						let obj = index + 1
						item.lineup = obj < 10 ? "0" + obj : obj
					})
					this.LoupanList = result
					// 分页对象处理
					this.queryPage.total = result.total;
					this.queryPage.per_page = result.per_page;
					// 停止当前页面下拉刷新
					if (this.dataLoadState.pullDownRefresh) uni.stopPullDownRefresh();
					// 数据加载状态处理 false
					this.dataLoadState.pullDownRefresh = false;
					this.dataLoadState.reachBottom = false;
					
					this.stateindex = true
					// uni.hideLoading();
				}).catch(err => {
					// 停止当前页面下拉刷新
					if (this.dataLoadState.pullDownRefresh) uni.stopPullDownRefresh();
					// 数据加载状态处理 false
					this.dataLoadState.pullDownRefresh = false;
					this.dataLoadState.reachBottom = false;
					this.stateindex = true
				});
			},

			//做滚动加载使用
			loadMore() {

			},

			clearIntervalTime() {
				clearInterval(this.statetime)
				this.statetime = null
			}
		},

		//下拉加载
		onPullDownRefresh() {
			this.dataLoadState.pullDownRefresh = false;
			this.dataLoadState.reachBottom = false;
			this.queryPage.page = 1;
			this.queryPage.total = 0;
			this.LoupanList = []
			this.stateindex = false;
			this.loadGoodsList(Enums.DATA_DIRECTION.UP);
		},

		//上拉加载
		onReachBottom() {
			setTimeout(() => {
				uni.showToast({
					title: '啊嘞,没有更多数据了！',
					icon: 'none'
				});
			}, 500);
		},

		onLoad(options) {
			this.queryPage.machine_id = options.machine_id;
			this.key = options.key || 2;
			this.LoupanList = []
			this.queryPage.page = 1;
			this.queryPage.total = 0;
			var appUser = userService.getCacheUserInfo();
			if (appUser != null) {
				this.userId = appUser.id
			}
			this.loadGoodsList(Enums.DATA_DIRECTION.UP);
			this.statetime = setInterval(function() {
				this.dataLoadState.pullDownRefresh = false;
				this.dataLoadState.reachBottom = false;
				this.queryPage.page = 1;
				this.queryPage.total = 0;
				this.loadGoodsList(Enums.DATA_DIRECTION.UP);
			}.bind(this), this.animMaind_time)
		},

		onShow() {
			
		},

		created() {
			//设备信息
			let app = uni.getSystemInfoSync();
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.headheight = app.statusBarHeight + menuButtonInfo.height + (menuButtonInfo.top - app.statusBarHeight) * 2;
		},

		//卸载程序
		onUnload() {
			this.clearIntervalTime()
			let pages = getCurrentPages();
			if (pages[pages.length - 2].route == "pages/mine/order") {
				uni.reLaunch({
					url: '../index/machineDetail?machine_id=' + this.queryPage.machine_id
				})
			} else if (pages[pages.length - 2].route == "pages/mine/orderNew") {
				uni.reLaunch({
					url: '../index/machineDetail?machine_id=' + this.queryPage.machine_id
				})
			} else if (pages[pages.length - 2].route == "pages/index/index") {
				uni.reLaunch({
					url: '../index/machineDetail?machine_id=' + this.queryPage.machine_id
				})
			}

		}
	};
</script>

<style lang="scss">
	@import "../index/css/css.css";

	page {
		background: #F5F5F5 !important;
	}

	.colletion {
		.cart-ticket-null {
			padding-top: 50upx;
		}
	}
</style>
