<template>
	<view class="myOrder">
		<u-empty text="暂无订单" font-size="26" mode="order" v-if="list.length===0"></u-empty>
		<view v-if="list.length>0">
			<view v-for="(item,index) in list" :key="index" class="item" @click="goDetail(item.OrderId)">
				<view class="top">
					<view class="orderNo">
						{{item.OrderNo}}
					</view>
					<view class="orderStatus">
						<text v-if="item.OrderStatus===1">待付款</text>
						<text v-if="item.OrderStatus===5">已完成</text>
					</view>
				</view>
				<view class="itemInfoBox" v-for="(_item,_index) in item.DetailList" :key="_index">
					<image
						src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/coffee/cup4.png"
						mode="heightFix" style="width: auto;height: 130rpx;"></image>
					<view class="itemInfo">
						<view class="itemName">
							{{_item.GoodsName}}{{_item.Number}}杯
						</view>
						<view class="CreateDate">
							{{item.CreateDate}}
						</view>
					</view>
					<view class="price">
						<text class="icon">¥ </text> {{_item.Final_Price}}
					</view>
				</view>
			</view>
			<u-loadmore :status="status" :load-text="loadText" :font-size="24" bg-color="#f5f5f5" />
		</view>
	</view>
</template>

<script>
	import util from '@/plugin/utils.js'
	export default {
		data() {
			return {
				list: [],
				msg: {
					pageIndex: 1,
					pageSize: 10,
					OrderStatus: 0,
					OrderNo: "",
				},
				pageCount: 0,
				addr: "",
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				status: "loadmore",
			}
		},
		methods: {
			getData() {
				uni.showLoading({
					title: '加载中'
				});
				this.request2({
						url: '/api/AppletCoffee/GetMyCofeeOrderPageList',
						data: this.msg
					},
					res => {
						uni.hideLoading()
						this.pageCount = res.data.pageCount
						if (this.msg.pageIndex === 1) {
							this.list = res.data.pageData
						} else {
							this.list = this.list.concat(res.data.pageData)
						}
						if (this.pageCount == 1) {
							this.status = "nomore";
						}
					},
					err => {
						uni.hideLoading()
					}
				);
			},
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/coffee/orderDetail?id=' + id 
				})
			},
		},
		onReachBottom() {
			if (this.msg.pageIndex < this.pageCount) {
				util.debounce(async () => {
					this.msg.pageIndex++
					await this.getData()
				})
				this.status = "loading";
			} else {
				this.status = "nomore";
			}
		},
		onLoad(options) {
			this.addr = options.addr
			this.getData()
			uni.setNavigationBarTitle({
				title: "我的订单"
			})
		}
	}
</script>

<style lang="scss" scoped>
	.myOrder {
		min-height: 100vh;
		background-color: #F5F5F5;
		padding: 35rpx 0;
	}

	.item {
		width: 684rpx;
		background-color: #FFFFFF;
		border-radius: 4rpx;
		margin: 0 auto;
		padding: 0rpx 40rpx;
		margin-bottom: 35rpx;

		.top {
			height: 84rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #e8e8e8;

			.orderNo {
				font-size: 28rpx;
				font-weight: 500;
				color: #000000;
			}

			.orderStatus {
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
			}
		}

		.itemInfoBox {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			padding-bottom: 30rpx;
			padding-top: 30rpx;

			.itemInfo {
				flex-grow: 1;
				padding: 0 46rpx;

				.itemName {
					font-size: 28rpx;
					font-weight: bold;
					color: #000000;
					margin-top: 10rpx;
					margin-bottom: 15rpx;
				}

				.CreateDate {
					font-size: 24rpx;
					font-weight: 400;
					color: #666666;
				}
			}

			.price {
				font-size: 48rpx;
				font-weight: bold;
				color: #F65C10;

				.icon {
					font-size: 28rpx;
					font-weight: 400;
					margin-right: 4rpx;
				}
			}
		}

	}
</style>
