<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; height: 185upx; 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: 380upx; height: 140upx; position: relative; overflow: hidden; opacity: 0.3;  ">
							<view style="width: 140upx; height: 140upx;border-radius: 20upx; background: #FFFFFF;"></view>
							<image style="width: 90upx; height: 90upx; 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: 380upx; height: 140upx; position: relative; overflow: hidden; ">
							<view style="width: 140upx; height: 140upx;border-radius: 20upx; background: #FFFFFF;"></view>
							<image style="width: 90upx; height: 90upx; 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: 100% ;  margin-top: -40upx;">
							<view v-if="designer.status.value == 1">
								<view style="text-align: left; font-size: 29upx; color: #F29F3D ; line-height: 80upx;font-weight: 600;">
									打印中
								</view>
							</view>
							<view v-else>
								<view style="text-align: left; font-size: 30upx; color: #333; line-height: 80upx;font-weight: 600; margin-top: 20upx;">
									排队中
								 </view>
							</view>
							<view style="font-size: 29upx; color: #333333; margin-top: 20upx; font-weight: 600;">
								{{ designer.customize_size_id == 0  ? designer.goods_name || '' : ''}}
								{{designer.goods_specs || ''}}
							</view>
						</view>
						<view style="width: 90%;font-size: 28upx; margin-top: 70upx; font-weight: 550; text-align: right; font-size: 36upx; color: #333; margin-right: 30upx;">
							{{designer.id || ''}}
						</view>
					</view>
				</view>
			</view>

			<!-- 提示 -->
			<view v-if="sighstate && designer != null">
				<view
					style="position: fixed; z-index:999; width: 100%; height: 100%; background:rgba(0,0,0,0.6); top: 0;"
					@click.stop="sighstate = false"></view>
				<view style="position: fixed; z-index: 1000; top: 0; left: 0; bottom: 0; right: 0; margin: auto;
				width: 558upx; height: 490upx; background: #FFFFFF; border-radius: 10upx;
				display: flex; align-items: center; justify-content: center;">
					<view style="position: absolute;
					top: 0; right: 0;" @click.stop="sighstate = false">
						<image src="../../static/icon_guanbi.png" mode=""
							style="width: 26upx; height: 26upx; padding: 12upx 22upx;"></image>
					</view>
					<view style="width: 558upx;position: absolute; top: 40upx ">
						<view style="display: flex; align-items: center; justify-content: center;
						 width: 100%; height: 200upx; margin: auto;">
							<image :src="designer.works_image + '?x-oss-process=image/resize,lfit,w_120'"  mode="aspectFit" style=" margin: auto; width: 120upx; max-height: 200upx; "></image>
						</view>
						<!-- 作品排队中 -->
						<view style="text-align: center; font-size: 34upx; margin-top: 50upx;">{{lineStatusText}}</view>
						<view style="text-align: center; font-size: 34upx;">如需要打印可与客服确认</view>
						<view v-if="designer.user_id == userId " @click="toOrderDetail(designer)" style="width: 135upx; height: 50upx;background: #F29F3D ;
						 border-radius: 40upx;
						 color: #FFFFFF; 
						 margin:10upx auto; 
						 text-align: center;
						 padding:auto;
						 padding-top: 20upx; 
						 margin-top: 15upx;">查看详情</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,
				},
				stateindex: false,
				key: 2, //1直营配送站 2 万能通用版 3色彩自助站
				sighstate: false,
				statetime: null,
				animMaind_time: 10000, //动画时间----刷子上下动画时间
				designer: null,
				userId: null, //用户信息
				headheight: 0, //头部高度
			};
		},
		methods: {

			//订单详情
			toOrderDetail(item) {
				this.sighstate = false;
				var url = this.$Env.getBaseURL();
				var envVersionName = "trial";
				if (url.indexOf("colorpark") != -1) {
					envVersionName = "release";
				}
				wx.navigateToMiniProgram({
					appId: this.$Env.getappId(),
					path: '/pages/mine/self_help_payment_details?orderId=' + item.order_id +
						'&type=null&machine_id=' + item.machine_id,
					extraData: {
						foo: 'bar'
					},
					envVersion: envVersionName,
					success(res) {
						//打开成功
					},
					fail(res) {
						//console.log("打开小程序失败")
					}
				});
			},

			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 (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
				}).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()
			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>