<template>
	<view class="colletion full-width">
		<!-- 自定义头部 -->
		<view class="uni-tab-bar full-width">
			<view class="content full-width" scroll-y>
				<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" style="color: #000000;">
							{{$i18n.messages[$i18n.locale]['啊嘞当前还没有订单任务']}}<br>
							<view class="noData_text">{{$i18n.messages[$i18n.locale]['去定制一个作品吧']}}</view>
						</view>
						<view class="noData_but" @click="tomain()">{{$i18n.messages[$i18n.locale]['去定制']}}</view>
					</view>
				</view>
				<view v-else v-for="(designer, index) in LoupanList" :key="index"
					style="background: #fff  !important;margin: 15upx 15upx; border-radius: 30upx;"
					@click="orderDetail(designer)">
					<view style="color: #fff; display: flex; align-items: center;width: 690upx; position: relative; ">
						<view class="border-image-pesudo">
							<view class="border-image-pesudo-in">
								<image
									style="width: 110upx; height: 102upx; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index:8;"
									:src="designer.works_image + '?x-oss-process=image/resize,lfit,w_300'"
									mode="aspectFit">
								</image>
							</view>
						</view>

						<view style="width: 20upx;font-size: 36upx; color: #F29F3D ; position: absolute; right: 20upx;top:60upx; ">
							></view>
						<view style="width: calc(100% - 400upx);">
							<view style="width: 100%;font-size: 28upx;">
								<text
									style="font-size: 26upx; color:#333333; font-weight: 550;">	   {{ $i18n.messages[$i18n.locale][designer.goods_specs]   || ''}}</text>
							</view>
							<view style="font-size: 25upx; color: #333333 ; margin-top: 10upx;">
								{{$i18n.messages[$i18n.locale][designer.status.text]}}
							</view>
							<view style="width: 90%;font-size: 28upx;">
								<text style="font-size: 27upx; color:#333333; ">{{designer.id|| ''}}</text>
							</view>
						</view>
						<view style=" margin-left: auto; padding-top:95upx;">
							<view
								style="text-align: center;color: #000000; line-height: 80upx; font-weight: 550;font-size: 9upx; ">
								{{designer.pay_type.text == 'PayPal' ? 'Pay with PayPal' :'Pay offine' }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<!-- Pay offine或者Pay with PayPal -->

<script>
	import userService from '@/service/UserService';
	import homeservice from '@/service/homeservice.js'
	import myhead from '../mall/head/head.vue';
	import Enums from '@/util/Enums';
	export default {
		components: {
			myhead,
		},
		computed: {},
		data() {
			return {
				LoupanList: [],
				dataLoadState: {
					pullDownRefresh: false,
					reachBottom: false
				},
				queryPage: {
					machine_id: null,
				},
				stateindex: false,
				key: 2, //1直营配送站 2 万能通用版 3色彩自助站
				sighstate: false,
				statetime: null,
				animMaind_time: 10000, //动画时间----刷子上下动画时间
				designer: null,
				userId: null, //用户信息
				myheadtext: "",
			};
		},

		methods: {

			//调转首页
			tomain() {
				const machine_id = uni.getStorageSync('machine_id');
				if (machine_id) {
					uni.reLaunch({
						url: '../index/detailsphone?machine_id=' + machine_id
					})
				}
			},

			//订单明细
			orderDetail(item) {
				let itemStr = JSON.stringify(item);
				uni.navigateTo({
					url: '../mine/orderDetail?id=' + item.id
				})
			},

			//加载数据
			loadGoodsList(direction) {
				uni.showLoading({
					title: this.$i18n.messages[this.$i18n.locale]['正在加载中']
				});
				homeservice.getOrderList(null).then(result => {
					this.stateindex = true
					this.LoupanList = result.data
					if (this.dataLoadState.pullDownRefresh) uni.stopPullDownRefresh();
					// 数据加载状态处理 false
					this.dataLoadState.pullDownRefresh = false;
					this.dataLoadState.reachBottom = false;
					uni.hideLoading();
				}).catch(err => {
					// 停止当前页面下拉刷新
					if (this.dataLoadState.pullDownRefresh) uni.stopPullDownRefresh();
					// 数据加载状态处理 false
					this.dataLoadState.pullDownRefresh = false;
					this.dataLoadState.reachBottom = false;
					uni.hideLoading();
				});
			},

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

			},

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

		},
		onLoad(options) {
			var that = this
			if (options.machine_id && options.machine_id != 'null') {
				this.queryPage.machine_id = options.machine_id;
				this.LoupanList = []
				this.queryPage.page = 1;
				this.queryPage.total = 0;
				this.loadGoodsList(Enums.DATA_DIRECTION.UP);
			} else {
				this.stateindex = true
			}
		},


		//这个能修改 上面那个不一定能修改成功
		onReady() {
			//修理厂名称
			uni.setNavigationBarTitle({
				title: this.$i18n.messages[this.$i18n.locale]['订单列表']
			})
		},

		onShow() {

		},

	};
</script>

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

	page {
		background: #F5F5F5 !important;
	}

	.border-image-pesudo {
		width: 110upx;
		height: 110upx;
		background: #FFFFFF;
		padding: 15upx;
		border: 5upx solid;
		border-image: linear-gradient(0deg, #F29F3D, #F29F3D) 2 2;
		border-radius: 20upx;
		position: relative;
		overflow: hidden;
		margin: 30upx 20upx 30upx 30upx;
		clip-path: inset(0 round 7upx);

		.border-image-pesudo-in {
			width: 100%;
			height: 100%;
		}
	}
</style>