<template>
	<view class="order-content">
		<view class="total">
			总计：12000.00kg，222.00元
		</view>
		<scroll-view scroll-y class="list" @scrolltolower="onreachBottom">
			<view class="list-item" @click="intoDetail()">
				<view class="cont title flex align_center justify_between">
					<text>2020-12-30 15:29:16</text>
					<view class="flex align_center">
						<text>查看详情</text>
						<u-icon class="arrow-right" name="arrow-right" color="#999999" size="32"></u-icon>
					</view>
				</view>
				<view class="cont">
					<view class="cont-top flex align_center justify_between">
						<text>百果园(贞观路店)</text>
						<text>￥260.00</text>
					</view>
					<view class="cont-bot flex align_center justify_between">
						<view class="flex align_center">
							<view class="t-icon phone t-icon-icon_phone"></view>
							<text>18092252287</text>
						</view>
						<text>线下支付</text>
					</view>
				</view>
			</view>
			<u-empty style="padding-top: 10vh;height: auto;" src="/static/img/def_result.png" :text="noDataText" img-width="252" img-height="176" v-if="list.length==0 && status!='loading'"
			 mode="list"></u-empty>
			<view v-if="index==current" style="padding: 20upx;">
				<u-loadmore v-if="total>pageSize || status=='loading'" :status="status" />
			</view>
		</scroll-view>
		<view class="list">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
			// this.pageInit()
			// 开启分享
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		methods: {
			// 进入详情
			intoDetail() {
				uni.navigateTo({
					url: '/pages/order/hisOrderDetail'
				})
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				this.action = 'onreachBottom'
				if (this.list.length < this.total) {
					this.pageNo += 1
					this.getRow()
				} else {
					if(this.list.length) {
						uni.showToast({
							title: '已经到底了',
							icon: 'none'
						});
					}
					this.status = "nomore"
				}
			},
			// 查询列表
			getRow(pageNo) {
				this.status = "loadmore"
				if (pageNo) {
					this.pageNo = pageNo
				}
				let params = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					orderStateList: this.tabList[this.current].queryLabel, // tab分类
				}
				this.noDataText = '暂无数据'
				this.status = "loading"
				getOrderList(params).then(res => {
					if (res.status == 200) {
						if (this.pageNo > 1) {
							this.list = this.list.concat(res.data.list || [])
						} else {
							this.list = res.data.list || []
						}
						const date1 = moment().toArray()  //  当前时间 数组形式
						this.list.map(item=>{ 
							const date2 = moment(item.orderTime).toDate()  //  下单时间  日期格式
							const date3 = moment(date2).toArray()  //  下单时间  数组形式
							const tt = 1800 - moment(date1).diff(moment(date3), 'seconds')//   距离30分钟支付   当前剩余秒数 = 1800秒 - 计算相差的秒数（当前时间-支付时间）
							item.leftTimeT = tt > 0 ? tt : 0
						})
						this.total = res.data.count || 0
					} else {
						this.list = []
						this.total = 0
						this.noDataText = res.message
					}
					this.status = "loadmore"
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		width: 100%;
	}
	.order-content{
		width: 100%;
		height: 100%;
		background-color: #F5F5F5;
		display: flex;
		flex-direction: column;
		.total{
			width: 100%;
			height: 80rpx;
			background: rgba(255, 209, 0, 0.4);
			opacity: 1;
			padding-left: 32rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			color: #191919;
		}
		
		.list{
			flex: 1;
			width: 100%;
			overflow: auto;
			padding: 0 26rpx;
			box-sizing: border-box;
			.list-item{
				width: 100%;
				border-radius: 24rpx;
				margin-top: 20rpx;
				background-color: #fff;
				.cont{
					padding: 24rpx 32rpx;
				}
				.title{
					text{
						color: #666E75;
						font-size: 28rpx;
					}
					view{
						color: #999999;
						font-size: 32rpx;
						.arrow-right{
							margin-left: 10rpx;
						}
					}
				}
				.cont-top{
					text:first-child{
						font-size: 36rpx;
						color: #222222;
						font-weight: 600;
					}
					text:last-child{
						font-size: 32rpx;
						color: #222222;
					}
				}
				.cont-bot{
					font-size: 28rpx;
					color: #4C4C4C;
					margin-top: 20rpx;
					.phone{
						width: 28rpx;
						height: 28rpx;
						margin-right: 10rpx;
					}
					text:last-child{
						font-size: 24rpx;
						color: #666E75;
					}
				}
			}
		}
	}
</style>
