<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'
import { getOrderListPaged } from '@/common/server/order'

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 getOrderListPaged({ 
					page: this.page, 
					page_size: this.pageSize 
				});
				
				if (status !== 1) {
					this.$c.msg(msg);
					return;
				}
				
				// 兼容不同的字段名: data.data / data.list / data.items
				const list = data.data || data.list || data.items || [];
				const totalPages = data.last_page || data.total_pages || data.totalPages || 1;
				
				if (this.page === 1) {
					this.orderList = list;
				} else {
					this.orderList = [...this.orderList, ...list];
				}
				
				this.totalPages = totalPages;
				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: #FFFFFF;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		position: relative;
		overflow: hidden;
		
		.corner-tag {
			position: absolute;
			top: 0;
			right: 0;
			background-color: #67c23a;
			color: #fff;
			font-size: 20rpx;
			padding: 6rpx 16rpx;
			border-radius: 0 16rpx 0 16rpx;
		}
		
		.order-title {
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
			margin-bottom: 16rpx;
			padding-right: 160rpx;
		}
		
		.order-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			
			.order-time {
				color: #8A8A8A;
			}
			
			.order-price {
				color: #03D8F4;
				font-size: 32rpx;
				font-weight: 600;
			}
		}
	}
	
	.loading, .no-more, .empty {
		text-align: center;
		padding: 30rpx;
		color: #8A8A8A;
		font-size: 26rpx;
	}
}
</style>