<template>
	<page-container title="订单列表" :showBack="true">
		<scroll-view scroll-y="true" 
			:refresher-enabled="true" 
			:refresher-triggered="refreshing" 
			@refresherrefresh="onRefresh" 
			@scrolltolower="onLoadMore"
			class="order-list">
			<view class="order-item" v-for="(item, index) in orderList" :key="index" @click="goOrderDetail(item)">
				<view class="corner-tag">已发放到盒柜中</view>
				<view class="order-title">{{item.goods_title}}</view>
				<view class="order-info">
					<view class="order-time">{{item.pay_time}}</view>
					<view class="order-price">¥{{item.order_zhe_total}}</view>
				</view>
			</view>
			<view class="loading" v-if="loading">加载中...</view>
			<view class="no-more" v-if="!hasMore && orderList.length > 0">没有更多数据了</view>
			<view class="empty" v-if="!loading && orderList.length === 0">暂无订单数据</view>
		</scroll-view>
	</page-container>
</template>

<script>
import PageContainer from '@/components/page-container/page-container.vue'


export default {
	components: {
		PageContainer
	},
	data() {
		return {
			orderList: [],
			page: 1,
			pageSize: 20,
			totalPages: 1,
			loading: false,
			refreshing: false,
			hasMore: true
		}
	},
	onLoad() {
		this.load();
	},
	methods: {
		async load() {
			this.loading = true;
			try {
				const { status, data, msg } = await this.$request.post('order_list', { 
					page: this.page, 
					page_size: this.pageSize 
				});
				
				if (status !== 1) {
					this.$c.msg(msg);
					return;
				}
				
				if (this.page === 1) {
					this.orderList = data.list;
				} else {
					this.orderList = [...this.orderList, ...data.list];
				}
				
				this.totalPages = data.total_pages;
				this.hasMore = this.page < this.totalPages;
			} catch (error) {
				console.error('加载订单列表失败', error);
				this.$c.msg('加载失败，请重试');
			} finally {
				this.loading = false;
				this.refreshing = false;
			}
		},
		
		async onRefresh() {
			this.refreshing = true;
			this.page = 1;
			this.hasMore = true;
			await this.load();
		},
		
		async onLoadMore() {
			if (!this.hasMore || this.loading) return;
			
			this.page++;
			await this.load();
		},
		
		goOrderDetail(item) {
			this.$customRouter.navigateTo('/pages/other/order_info', { order_num: item.order_num });
		}
	}
}
</script>

<style lang="scss">
.order-list {
	height: calc(100vh - 160rpx);
	box-sizing: border-box;
	padding: 20rpx;
	
	.order-item {
		background-color: #f5f5f5;
		border-radius: 12rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		position: relative;
		overflow: hidden;
		
		.corner-tag {
			position: absolute;
			top: 0;
			right: 0;
			background-color: #67c23a;
			color: #fff;
			font-size: 20rpx;
			padding: 2rpx 8rpx;
			// transform: rotate(45deg) translate(20%, -50%);
			transform-origin: center;
			width: 160rpx;
			text-align: center;
			box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
		}
		
		.order-title {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 16rpx;
		}
		
		.order-info {
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			color: #666;
			
			.order-time {
				color: #909399;
			}
			
			.order-price {
				color: #f56c6c;
				font-weight: bold;
			}
		}
	}
	
	.loading, .no-more, .empty {
		text-align: center;
		padding: 30rpx;
		color: #999;
		font-size: 28rpx;
	}
}
</style>