<template>
	<!-- 废弃 -->
	<view>
		<view class="top-head pb20">
			<view class="top-tabbar">
				<view class="tab-item" :class="{ active: type == 0 }" @click="changeType(0)">可申请订单</view>
				<view class="tab-item" :class="{ active: type == 1 }" @click="changeType(1)">已申请订单</view>
			</view>
			<view class="d-b-c search-data f26">
				<view class="flex-1 gray9">日期区间</view>
				<view class="picker-item-data">{{ '2000-22-12' }}</view>
				<view style="margin: 0 60rpx;">至</view>
				<view class="picker-item-data">{{ '2000-22 -12' }}</view>
				<view class="search-radio"><text class="icon iconfont icon-sousuo"></text></view>
			</view>
		</view>
		<!--列表-->
		<scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'" lower-threshold="50" @scrolltolower="scrolltolowerFunc">
			<view class="">
				<template v-if="type == 0">
					<view class="d-c-c p30	">
						<u-icon name="info-circle-fill" color="#FB3024" size="30rpx"></u-icon>
						<text class="f24 gray9 ml10">注:当日下单,00:00-次日06:00前可调换！</text>
					</view>
					<view v-for="(item, index) in 5" :key="index" class="listdata-item">
						<view class="border-b">
							<view class="d-b-c mb16">
								<text class="type-btn">注册</text>
								<view class="f24 gray9 flex-1">订单编号:21321321321321</view>
								<view class="status-btn">待发货</view>
							</view>
							<view class="d-b-c">
								<!-- 单个商品 -->
								<template v-if="index == 0">
									<view class="d-s-c flex-1">
										<image class="product-img" src="/static/default.png" mode=""></image>
										<view class="text-ellipsis f28 gray3" style="width: 220rpx;">海之圣超轻水杯...</view>
									</view>
								</template>
								<!-- 多个商品 -->
								<template v-if="index != 0">
									<view class="d-c-c product-list ww100">
										<image class="product-img" src="/static/default.png" mode="" v-for="(pitem, pindex) in 8" :key="pindex"></image>
									</view>
								</template>
								<view class="d-c d-c-e">
									<view class="price-color f24">
										{{currencyIcon()}}
										<text class="f32 fb">3936.00</text>
									</view>
									<view class="gray6">x1</view>
								</view>
							</view>
							<view class="f24 gray9 mb20">下单时间:{{ '2022/02/24 12:29:12' }}</view>
						</view>
						<view class="d-e-c pt20"><view class="order-btn" @click="gotoPage('/pages/self-service/exchange/apply')">调换货物</view></view>
					</view>
				</template>
				<template v-if="type == 1">
					<view class="order-item">
						<view class="orer-item-top">
							<view class="f24 gray9">订单编号: WB1680920831652406</view>
							<!-- <view class="green">审核通过</view> -->
							<view class="red">审核不通过</view>
						</view>
						<view>
							<view class="f24 gray6 line-h-15 mb10">
								<text>申请时间：</text>
								<text>2022-12-12 00:00</text>
							</view>
							<view class="f24 gray6 line-h-15 mb10">
								<text>换货明细：</text>
								<text>123456</text>
							</view>
							<view class="f24 gray6 line-h-15 mb10">
								<text>申请原因：</text>
								<text>123456</text>
							</view>
							<view class="f24 gray6 line-h-15 mb10">
								<text>备注：</text>
								<text></text>
							</view>
						</view>
					</view>
				</template>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			type: 0,
			/*手机高度*/
			phoneHeight: 0,
			/*可滚动视图区域高度*/
			scrollviewHigh: 0,
			/*最后一页码数*/
			last_page: 0,
			/*当前页面*/
			page: 1,
			/*每页条数*/
			list_rows: 10,
			/*有没有等多*/
			no_more: false,
			/*是否正在加载*/
			loading: true,
			/*数据*/
			listData: []
		};
	},
	computed: {
		/*加载中状态*/
		loadingType() {
			if (this.loading) {
				return 1;
			} else {
				if (this.listData.length != 0 && this.no_more) {
					return 2;
				} else {
					return 0;
				}
			}
		}
	},
	onShow() {
		/*获取订单列表*/
		this.page = 1;
		this.listData = [];
		this.getData();
	},
	mounted() {
		this.init();
	},
	methods: {
		changeType(e) {
			let self = this;
			if (self.loading) {
				return;
			}
			self.page = 1;
			self.loading = true;
			self.type = e;
			self.getData();
		},
		getData() {
			let self = this;
			self.loading = false;
		},
		/*可滚动视图区域到底触发*/
		scrolltolowerFunc() {
			let self = this;
			if (self.no_more) {
				return;
			}
			self.page++;
			if (self.page <= self.last_page) {
				self.getData();
			} else {
				self.no_more = true;
			}
		},
		/*初始化*/
		init() {
			let self = this;
			uni.getSystemInfo({
				success(res) {
					self.phoneHeight = res.windowHeight;
					// 计算组件的高度
					let view = uni.createSelectorQuery().select('.top-head');
					view.boundingClientRect(data => {
						let h = self.phoneHeight - data.height;
						self.scrollviewHigh = h;
					}).exec();
				}
			});
		}
	}
};
</script>

<style lang="scss">
.top-tabbar {
	border-bottom: 1rpx solid #eee;
	.tab-item {
		color: #666;
	}
	.tab-item.active {
		font-weight: 400;
		color: #333;
	}
}
.order-item {
	width: 750rpx;
	background: #ffffff;
	padding: 0 18rpx 50rpx 25rpx;
	box-sizing: border-box;
	margin-bottom: 20rpx;
}
.orer-item-top {
	height: 80rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.listdata-item {
	// height: 370rpx;
	padding: 27rpx 23rpx 22rpx 25rpx;
	background: #ffffff;
	margin-bottom: 22rpx;
}
.type-btn {
	line-height: 30rpx;
	height: 30rpx;
	background: #3d3d3d;
	border-radius: 15rpx;
	padding: 0 23rpx;
	font-size: 20rpx;
	color: #ffffff;
	margin-right: 6rpx;
}
.status-btn {
	font-size: 24rpx;
	color: #333333;
	margin-left: 20rpx;
}
.product-img {
	width: 124rpx;
	height: 124rpx;
	margin-right: 20rpx;
	flex-shrink: 0;
	display: block;
	border: 15rpx;
	margin-bottom: 24rpx;
}
.product-list {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: nowrap;
	overflow-x: auto;
	margin-right: 20rpx;
}
.order-border-btn {
	box-sizing: border-box;
	padding: 0 26rpx;
	min-width: 146rpx;
	height: 52rpx;
	line-height: 52rpx;
	text-align: center;
	border-radius: 26rpx;
	font-size: 24rpx;
	color: #999;
	border: 1rpx solid #eee;
	margin-left: 18rpx;
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.order-btn {
	box-sizing: border-box;
	padding: 0 26rpx;
	min-width: 146rpx;
	height: 52rpx;
	line-height: 52rpx;
	text-align: center;
	border-radius: 26rpx;
	font-size: 24rpx;
	color: #fff;
	border: 1rpx solid #eee;
	margin-left: 18rpx;
	background: #fb3024;
	border: 1rpx solid #fb3024;
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
