<template>
	<view class="order-list-page">
		<!-- 状态筛选标签 -->
		<view class="status-tabs">
			<view 
				class="status-tab" 
				v-for="tab in statusTabs" 
				:key="tab.value"
				:class="{ active: currentStatus === tab.value }"
				@click="switchStatus(tab.value)"
			>
				{{ tab.label }}
			</view>
		</view>

		<!-- 订单列表 -->
		<scroll-view 
			scroll-y 
			class="order-scroll" 
			@scrolltolower="loadMore"
			:refresher-enabled="true"
			:refresher-triggered="refreshing"
			@refresherrefresh="refresh"
		>
			<view class="order-list">
				<view 
					class="order-item" 
					v-for="order in orderList" 
					:key="order.id || order.order_no"
					@click="goToDetail(order)"
				>
					<!-- 订单头部 -->
					<view class="order-header">
						<view class="order-info">
							<text class="order-no">订单号：{{ order.order_no || order.no }}</text>
							<text class="order-date">{{ formatDate(order.created_at || order.date) }}</text>
						</view>
						<view class="order-status-tag" :class="getStatusClass(order.status)">
							{{ getStatusText(order.status) }}
						</view>
					</view>

					<!-- 商品列表 -->
					<view class="order-goods">
						<view 
							class="goods-item" 
							v-for="(item, index) in order.items || [order]" 
							:key="index"
						>
							<view class="goods-image">
								<image 
									:src="item.product_image || item.main_image_url || item.image" 
									mode="aspectFill"
									@error="handleImageError"
								></image>
							</view>
							<view class="goods-info">
								<view class="goods-name">{{ item.product_name || item.name || order.product_name }}</view>
								<view class="goods-spec" v-if="item.sku_name || item.spec">
									{{ item.sku_name || item.spec }}
								</view>
								<view class="goods-price-row">
									<view class="goods-price">
										<text class="price-symbol">￥</text>
										<text class="price-value">{{ formatPrice(item.price || order.price) }}</text>
									</view>
									<view class="goods-quantity">x{{ item.quantity || order.quantity || 1 }}</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 订单底部 -->
					<view class="order-footer">
						<view class="order-total">
							<text class="total-label">共{{ getTotalQuantity(order) }}件商品 合计：</text>
							<text class="total-price">￥{{ formatPrice(order.final_price || order.total_price || order.amount) }}</text>
						</view>
						<view class="order-actions">
							<view 
								class="action-btn" 
								v-for="action in getOrderActions(order)" 
								:key="action.label"
								:class="action.class"
								@click.stop="handleAction(action, order)"
							>
								{{ action.label }}
							</view>
						</view>
					</view>
				</view>

				<!-- 空状态 -->
				<view v-if="!loading && orderList.length === 0" class="empty-state">
					<text class="empty-icon">📦</text>
					<text class="empty-text">暂无订单</text>
				</view>

				<!-- 加载更多 -->
				<view v-if="loading && orderList.length > 0" class="loading-more">
					<text class="loading-text">加载中...</text>
				</view>

				<!-- 没有更多 -->
				<view v-if="!hasMore && orderList.length > 0" class="no-more">
					<text class="no-more-text">没有更多订单了</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import request from '@/api/request.js';

export default {
	data() {
		return {
			currentStatus: 'all', // 当前选中的状态
			statusTabs: [
				{ label: '全部', value: 'all' },
				{ label: '待付款', value: 'pending' },
				{ label: '待发货', value: 'paid' },
				{ label: '待收货', value: 'shipped' },
				{ label: '已完成', value: 'completed' }
			],
			orderList: [],
			loading: false,
			refreshing: false,
			page: 1,
			pageSize: 10,
			hasMore: true
		};
	},
	onLoad(options) {
		// 如果从其他页面传入状态参数，切换到对应状态
		if (options.status) {
			this.currentStatus = options.status;
		}
		this.loadOrderList();
	},
	onShow() {
		// 页面显示时刷新列表（从订单详情返回时）
		this.refresh();
	},
	methods: {
		// 格式化价格（分转元）
		formatPrice(value) {
			if (!value && value !== 0) {
				return '0.00';
			}
			// 如果已经是元为单位，直接返回
			if (value < 1000) {
				return parseFloat(value).toFixed(2);
			}
			// 分转换为元
			value = value / 100;
			return value.toFixed(2);
		},

		// 格式化日期
		formatDate(dateStr) {
			if (!dateStr) return '';
			const date = new Date(dateStr);
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			return `${year}-${month}-${day}`;
		},

		// 获取状态文本
		getStatusText(status) {
			const statusMap = {
				'pending': '待付款',
				'paid': '待发货',
				'shipped': '待收货',
				'completed': '已完成',
				'cancelled': '已取消',
				'refunded': '已退款'
			};
			return statusMap[status] || status || '未知';
		},

		// 获取状态样式类
		getStatusClass(status) {
			const classMap = {
				'pending': 'pending',
				'paid': 'warning',
				'shipped': 'warning',
				'completed': 'success',
				'cancelled': 'cancelled',
				'refunded': 'cancelled'
			};
			return classMap[status] || '';
		},

		// 获取订单操作按钮
		getOrderActions(order) {
			const status = order.status;
			const actions = [];

			if (status === 'pending') {
				actions.push({ label: '取消订单', action: 'cancel', class: 'cancel-btn' });
				actions.push({ label: '立即付款', action: 'pay', class: 'primary-btn' });
			} else if (status === 'paid') {
				actions.push({ label: '查看详情', action: 'detail', class: 'default-btn' });
			} else if (status === 'shipped') {
				actions.push({ label: '查看物流', action: 'logistics', class: 'default-btn' });
				actions.push({ label: '确认收货', action: 'confirm', class: 'primary-btn' });
			} else if (status === 'completed') {
				actions.push({ label: '查看详情', action: 'detail', class: 'default-btn' });
				actions.push({ label: '再次购买', action: 'rebuy', class: 'primary-btn' });
			} else {
				actions.push({ label: '查看详情', action: 'detail', class: 'default-btn' });
			}

			return actions;
		},

		// 获取订单商品总数量
		getTotalQuantity(order) {
			if (order.items && Array.isArray(order.items)) {
				return order.items.reduce((sum, item) => sum + (parseInt(item.quantity) || 1), 0);
			}
			return parseInt(order.quantity) || 1;
		},

		// 切换状态
		switchStatus(status) {
			if (this.currentStatus === status) return;
			this.currentStatus = status;
			this.page = 1;
			this.hasMore = true;
			this.orderList = [];
			this.loadOrderList();
		},

		// 加载订单列表
		async loadOrderList() {
			if (this.loading || !this.hasMore) return;

			this.loading = true;
			try {
				const params = {
					page: this.page,
					page_size: this.pageSize
				};

				// 如果不是全部，添加状态筛选
				if (this.currentStatus !== 'all') {
					params.status = this.currentStatus;
				}

				const response = await request('xcx/orders', 'GET', params);
				
				// 处理返回数据
				let orders = [];
				if (Array.isArray(response)) {
					orders = response;
				} else if (response.list && Array.isArray(response.list)) {
					orders = response.list;
				} else if (response.data && Array.isArray(response.data)) {
					orders = response.data;
				}

				if (orders.length < this.pageSize) {
					this.hasMore = false;
				}

				if (this.page === 1) {
					this.orderList = orders;
				} else {
					this.orderList = [...this.orderList, ...orders];
				}

				this.page++;
			} catch (error) {
				console.error('加载订单列表失败:', error);
				// 如果是第一页且没有数据，显示空状态
				if (this.page === 1) {
					this.orderList = [];
				}
			} finally {
				this.loading = false;
				this.refreshing = false;
			}
		},

		// 刷新列表
		refresh() {
			this.refreshing = true;
			this.page = 1;
			this.hasMore = true;
			this.orderList = [];
			this.loadOrderList();
		},

		// 加载更多
		loadMore() {
			if (!this.loading && this.hasMore) {
				this.loadOrderList();
			}
		},

		// 处理订单操作
		handleAction(action, order) {
			switch (action.action) {
				case 'pay':
					this.payOrder(order);
					break;
				case 'cancel':
					this.cancelOrder(order);
					break;
				case 'confirm':
					this.confirmOrder(order);
					break;
				case 'logistics':
					this.viewLogistics(order);
					break;
				case 'rebuy':
					this.rebuyOrder(order);
					break;
				case 'detail':
				default:
					this.goToDetail(order);
					break;
			}
		},

		// 跳转到订单详情
		goToDetail(order) {
			const orderId = order.id || order.order_id;
			if (orderId) {
				uni.navigateTo({
					url: `/pages/order/detail?id=${orderId}`
				});
			}
		},

		// 支付订单
		async payOrder(order) {
			uni.showToast({
				title: '支付功能开发中',
				icon: 'none'
			});
			// TODO: 实现支付逻辑
		},

		// 取消订单
		async cancelOrder(order) {
			uni.showModal({
				title: '提示',
				content: '确定要取消这个订单吗？',
				success: async (res) => {
					if (res.confirm) {
						try {
							await request(`xcx/order/${order.id || order.order_id}/cancel`, 'POST');
							uni.showToast({
								title: '订单已取消',
								icon: 'success'
							});
							this.refresh();
						} catch (error) {
							console.error('取消订单失败:', error);
							uni.showToast({
								title: error.message || '取消订单失败',
								icon: 'none'
							});
						}
					}
				}
			});
		},

		// 确认收货
		async confirmOrder(order) {
			uni.showModal({
				title: '提示',
				content: '确定已收到商品吗？',
				success: async (res) => {
					if (res.confirm) {
						try {
							await request(`xcx/order/${order.id || order.order_id}/confirm`, 'POST');
							uni.showToast({
								title: '确认收货成功',
								icon: 'success'
							});
							this.refresh();
						} catch (error) {
							console.error('确认收货失败:', error);
							uni.showToast({
								title: error.message || '确认收货失败',
								icon: 'none'
							});
						}
					}
				}
			});
		},

		// 查看物流
		viewLogistics(order) {
			uni.showToast({
				title: '物流功能开发中',
				icon: 'none'
			});
			// TODO: 实现物流查看逻辑
		},

		// 再次购买
		rebuyOrder(order) {
			uni.showToast({
				title: '再次购买功能开发中',
				icon: 'none'
			});
			// TODO: 实现再次购买逻辑
		},

		// 图片加载错误处理
		handleImageError(e) {
			console.log('图片加载失败', e);
		}
	}
};
</script>

<style scoped lang="scss">
.order-list-page {
	min-height: 100vh;
	background-color: #f5f5f5;
	display: flex;
	flex-direction: column;
}

.status-tabs {
	background-color: #fff;
	display: flex;
	padding: 20rpx 24rpx;
	border-bottom: 2rpx solid #f0f0f0;
	position: sticky;
	top: 0;
	z-index: 10;
}

.status-tab {
	flex: 1;
	text-align: center;
	padding: 16rpx 0;
	font-size: 28rpx;
	color: #666;
	position: relative;
}

.status-tab.active {
	color: #9810fa;
	font-weight: 600;
}

.status-tab.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60rpx;
	height: 4rpx;
	background: linear-gradient(135deg, #9810fa 0%, #7a0bc7 100%);
	border-radius: 2rpx;
}

.order-scroll {
	flex: 1;
	height: calc(100vh - 100rpx);
}

.order-list {
	padding: 24rpx;
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

.order-item {
	background-color: #fff;
	border-radius: 24rpx;
	padding: 32rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.order-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24rpx;
	padding-bottom: 24rpx;
	border-bottom: 2rpx solid #f5f5f5;
}

.order-info {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.order-no {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}

.order-date {
	font-size: 24rpx;
	color: #999;
}

.order-status-tag {
	padding: 8rpx 20rpx;
	border-radius: 999rpx;
	font-size: 24rpx;
	font-weight: 500;
}

.order-status-tag.pending {
	background-color: #fff3e0;
	color: #f57c00;
}

.order-status-tag.warning {
	background-color: #e1bee7;
	color: #7b1fa2;
}

.order-status-tag.success {
	background-color: #c8e6c9;
	color: #388e3c;
}

.order-status-tag.cancelled {
	background-color: #ffcdd2;
	color: #c62828;
}

.order-goods {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
	margin-bottom: 24rpx;
}

.goods-item {
	display: flex;
	gap: 24rpx;
}

.goods-image {
	width: 160rpx;
	height: 160rpx;
	border-radius: 16rpx;
	overflow: hidden;
	background-color: #f5f5f5;
	flex-shrink: 0;
}

.goods-image image {
	width: 100%;
	height: 100%;
}

.goods-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.goods-name {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}

.goods-spec {
	margin-top: 8rpx;
	font-size: 24rpx;
	color: #999;
}

.goods-price-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 16rpx;
}

.goods-price {
	color: #e7000b;
	font-weight: bold;
}

.price-symbol {
	font-size: 24rpx;
}

.price-value {
	font-size: 32rpx;
}

.goods-quantity {
	font-size: 28rpx;
	color: #666;
}

.order-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 24rpx;
	border-top: 2rpx solid #f5f5f5;
}

.order-total {
	display: flex;
	align-items: baseline;
}

.total-label {
	font-size: 26rpx;
	color: #666;
}

.total-price {
	font-size: 32rpx;
	color: #e7000b;
	font-weight: bold;
	margin-left: 8rpx;
}

.order-actions {
	display: flex;
	gap: 16rpx;
}

.action-btn {
	padding: 12rpx 28rpx;
	border-radius: 999rpx;
	font-size: 24rpx;
}

.default-btn {
	border: 2rpx solid #ddd;
	color: #666;
	background-color: #fff;
}

.primary-btn {
	background: linear-gradient(135deg, #9810fa 0%, #7a0bc7 100%);
	color: #fff;
}

.cancel-btn {
	border: 2rpx solid #ddd;
	color: #999;
	background-color: #fff;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 120rpx 0;
}

.empty-icon {
	font-size: 120rpx;
	margin-bottom: 24rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}

.loading-more,
.no-more {
	text-align: center;
	padding: 40rpx 0;
}

.loading-text,
.no-more-text {
	font-size: 24rpx;
	color: #999;
}
</style>
