<!-- 订单列表页面 -->
<template>
	<view class="orders-page">
		<!-- 顶部栏 -->
		<!-- <view class="orders-header">
			<view class="header-title">
				<text class="title-text">我的订单</text>
			</view>
		</view> -->

		<!-- 订单状态标签页 -->
		<view class="order-tabs">
			<view :class="['order-tab', { active: activeTab === 'all' }]" @click="changeTab('all')">
				<text class="tab-text">全部</text>
			</view>
			<view :class="['order-tab', { active: activeTab === 'pending' }]" @click="changeTab('pending')">
				<text class="tab-text">待支付</text>
				<text v-if="tabBadges.pending > 0" class="tab-badge">{{ tabBadges.pending }}</text>
			</view>
			<view :class="['order-tab', { active: activeTab === 'shipping' }]" @click="changeTab('shipping')">
				<text class="tab-text">待发货</text>
				<text v-if="tabBadges.shipping > 0" class="tab-badge">{{ tabBadges.shipping }}</text>
			</view>
			<view :class="['order-tab', { active: activeTab === 'receiving' }]" @click="changeTab('receiving')">
				<text class="tab-text">待收货</text>
				<text v-if="tabBadges.receiving > 0" class="tab-badge">{{ tabBadges.receiving }}</text>
			</view>
			<view :class="['order-tab', { active: activeTab === 'review' }]" @click="changeTab('review')">
				<text class="tab-text">待评价</text>
				<text v-if="tabBadges.review > 0" class="tab-badge">{{ tabBadges.review }}</text>
			</view>
		</view>

		<!-- 订单列表 -->
		<scroll-view class="orders-list" scroll-y @scrolltolower="loadMore">
			<!-- 订单为空 -->
			<view v-if="orders.length === 0 && !isLoading" class="empty-orders">
				<text class="empty-icon">📦</text>
				<text class="empty-text">暂无订单</text>
				<text class="empty-subtext">去逛逛吧，有惊喜在等你</text>
				<button class="go-shopping-btn" @click="goShopping">去逛逛</button>
			</view>

			<!-- 订单项 -->
			<view v-for="order in orders" :key="order.id" class="order-item">
				<!-- 订单头部 -->
				<view class="order-header">
					<text class="order-no">订单号: {{ order.order_no }}</text>
					<text :class="['order-status', getStatusClass(order.status)]">
						{{ getStatusText(order.status) }}
					</text>
				</view>

				<!-- 订单商品 -->
				<view class="order-products" @click="viewOrderDetail(order)">
					<view v-for="(item, index) in order.items" :key="index" class="product-item">
						<image class="product-image" :src="item.product_image || '/static/default-product.png'" />
						<view class="product-info">
							<text class="product-name">{{ item.product_name }}</text>
							<text v-if="item.sku_specifications" class="product-spec">
								{{ getSpecText(item.sku_specifications) }}
							</text>
							<view class="product-price-row">
								<text class="product-price">¥{{ item.price }}</text>
								<text class="product-quantity">×{{ item.quantity }}</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 订单信息 -->
				<view class="order-info">
					<text class="order-time">{{ formatTime(order.created_at) }}</text>
					<view class="order-total">
						共{{ getTotalQuantity(order.items) }}件商品 合计:
						<text class="total-amount">¥{{ order.actual_amount }}</text>
					</view>
				</view>

				<!-- 订单操作 -->
				<view class="order-actions">
					<button v-if="order.status === 1" 
									class="action-btn pay" 
									@click="payOrder(order)">
						立即支付
					</button>
					<button v-if="order.status === 1" 
									class="action-btn cancel" 
									@click="cancelOrder(order)">
						取消订单
					</button>
					<button v-if="order.status === 2" 
									class="action-btn remind" 
									@click="remindShipment(order)">
						提醒发货
					</button>
					<button v-if="order.status === 3" 
									class="action-btn confirm" 
									@click="confirmReceipt(order)">
						确认收货
					</button>
					<button v-if="order.status === 4" 
									class="action-btn review" 
									@click="goToReview(order)">
						评价
					</button>
					<button v-if="order.status === 4 || order.status === 5" 
									class="action-btn delete" 
									@click="deleteOrder(order)">
						删除订单
					</button>
					<button v-if="order.status === 4" 
									class="action-btn rebuy" 
									@click="reBuy(order)">
						再次购买
					</button>
					<button class="action-btn service" @click="contactService(order)">
						联系客服
					</button>
				</view>
			</view>

			<!-- 加载更多 -->
			<view v-if="isLoading" class="loading-more">
				<text class="loading-text">加载中...</text>
			</view>
			<view v-if="!hasMore && orders.length > 0" class="no-more">
				<text class="no-more-text">没有更多订单了</text>
			</view>
		</scroll-view>

		<!-- 底部导航 -->
		<view class="bottom-navigation">
			<view class="nav-item" @click="goToHome">
				<text class="nav-icon">🏠</text>
				<text class="nav-text">首页</text>
			</view>
			<view class="nav-item" @click="goToCategory">
				<text class="nav-icon">📂</text>
				<text class="nav-text">分类</text>
			</view>
			<view class="nav-item active">
				<text class="nav-icon">📦</text>
				<text class="nav-text">订单</text>
			</view>
			<view class="nav-item" @click="goToProfile">
				<text class="nav-icon">👤</text>
				<text class="nav-text">我的</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="uts">
import { ref, onMounted, watch } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import type { OrderType } from '@/types/mall-types.uts'
// import supa from '@/components/supadb/aksupainstance.uts'

type OrderItemType = {
	id: string
	product_id: string
	product_name: string
	product_image: string
	sku_specifications: any
	price: number
	quantity: number
}

type FullOrderType = OrderType & {
	items: Array<OrderItemType>
}

type TabBadgesType = {
	pending: number
	shipping: number
	receiving: number
	review: number
}

const activeTab = ref<string>('all')
const orders = ref<Array<FullOrderType>>([])
const tabBadges = ref<TabBadgesType>({
	pending: 0,
	shipping: 0,
	receiving: 0,
	review: 0
})
const isLoading = ref<boolean>(false)
const currentPage = ref<number>(1)
const pageSize = ref<number>(10)
const hasMore = ref<boolean>(true)

// 监听标签页变化
watch(activeTab, () => {
	loadOrders()
})

// 生命周期
onMounted(() => {
	loadOrderCounts()
	loadOrders()
})

onShow(() => {
    // 每次显示页面时重新加载数据，确保状态同步
    loadOrderCounts()
    loadOrders()
})

// 加载订单数量统计
const loadOrderCounts = async () => {
	const userId = getCurrentUserId()
	if (!userId) return

	try {
        // 从本地存储获取订单
        const ordersStr = uni.getStorageSync('orders')
        let localOrders: any[] = []
        if (ordersStr) {
            localOrders = JSON.parse(ordersStr as string) as any[]
        }
        
        // 过滤当前用户的订单
        const userOrders = localOrders.filter((o: any) => o.user_id === userId)

		// 待支付
		const pendingCount = userOrders.filter((o: any) => o.status === 1).length
        tabBadges.value.pending = pendingCount

		// 待发货
		const shippingCount = userOrders.filter((o: any) => o.status === 2).length
        tabBadges.value.shipping = shippingCount

		// 待收货
		const receivingCount = userOrders.filter((o: any) => o.status === 3).length
        tabBadges.value.receiving = receivingCount

		// 待评价
		const reviewCount = userOrders.filter((o: any) => o.status === 4).length
        tabBadges.value.review = reviewCount

	} catch (err) {
		console.error('加载订单统计异常:', err)
	}
}

// 加载订单列表
const loadOrders = async (loadMore: boolean = false) => {
	const userId = getCurrentUserId()
	if (!userId) {
		// uni.showToast({
		// 	title: '请先登录',
		// 	icon: 'none'
		// })
		// uni.navigateTo({
		// 	url: '/pages/user/login'
		// })
        // 模拟已登录，用于测试
        // return
	}

	if (isLoading.value || (!hasMore.value && loadMore)) {
		return
	}

	isLoading.value = true

	try {
		// 从本地存储获取订单
        const ordersStr = uni.getStorageSync('orders')
        let localOrders: any[] = []
        if (ordersStr) {
            localOrders = JSON.parse(ordersStr as string) as any[]
        }
        
        // 过滤当前用户的订单
        // const userOrders = localOrders.filter((o: any) => o.user_id === userId)
        // 暂时显示所有订单用于测试
        let userOrders = localOrders

		// 根据标签页过滤
		switch (activeTab.value) {
			case 'pending':
				userOrders = userOrders.filter((o: any) => o.status === 1)
				break
			case 'shipping':
				userOrders = userOrders.filter((o: any) => o.status === 2)
				break
			case 'receiving':
				userOrders = userOrders.filter((o: any) => o.status === 3)
				break
			case 'review':
				userOrders = userOrders.filter((o: any) => o.status === 4)
				break
		}
        
        // 按时间倒序
        userOrders.sort((a: any, b: any) => {
            return new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
        })

		// 分页 (模拟)
        const total = userOrders.length
        const start = (currentPage.value - 1) * pageSize.value
        const end = start + pageSize.value
        const pagedOrders = userOrders.slice(start, end)
		
		// 处理订单数据，补充商品图片等信息
		const processedOrders = await processOrderData(pagedOrders)

		if (loadMore) {
			for (let i = 0; i < processedOrders.length; i++) {
				orders.value.push(processedOrders[i])
			}
            // currentPage.value++ // 不需要加，因为外面传进来的是 loadMore=true，但这里是模拟分页，逻辑有点不一样
		} else {
			orders.value = processedOrders
			// currentPage.value = 1
		}

		hasMore.value = end < total
	} catch (err) {
		console.error('加载订单异常:', err)
	} finally {
		isLoading.value = false
	}
}

// 处理订单数据
const processOrderData = async (orders: any[]): Promise<FullOrderType[]> => {
	const processed: FullOrderType[] = []
	
	for (let i = 0; i < orders.length; i++) {
		const order = orders[i]
		const orderItems = order.items || [] // 这里的 items 已经在 checkout 存入时有了
		
		// 为每个商品项加载图片
		// const itemsWithImages = await Promise.all(
		// 	orderItems.map(async (item: any) => {
		// 		const productImage = await getProductImage(item.product_id)
		// 		return {
		// 			...item,
		// 			product_image: productImage
		// 		}
		// 	})
		// )
        // 本地存储的 items 应该已经有 image 字段了，如果没有，再尝试获取
        const itemsWithImages = orderItems.map((item: any) => {
             return {
                 ...item,
                 product_image: item.product_image || item.image || '/static/default-product.png',
                 product_name: item.product_name || item.name // 兼容不同字段名
             }
        })

		processed.push({
			...order,
			items: itemsWithImages
		})
	}

	return processed
}

// 获取商品图片
const getProductImage = async (productId: string): Promise<string> => {
	try {
        /*
		const { data, error } = await supa
			.from('products')
			.select('images')
			.eq('id', productId)
			.single()

		if (error !== null) {
			console.error('获取商品图片失败:', error)
			return '/static/default-product.png'
		}

		return data?.images?.[0] || '/static/default-product.png'
        */
       return '/static/default-product.png'
	} catch (err) {
		console.error('获取商品图片异常:', err)
		return '/static/default-product.png'
	}
}

// 获取当前用户ID
const getCurrentUserId = (): string | null => {
	const userStore = uni.getStorageSync('userInfo')
	return userStore?.id || null
}

// 获取状态文本
const getStatusText = (status: number): string => {
	const statusMap: Record<number, string> = {
		1: '待支付',
		2: '待发货',
		3: '待收货',
		4: '已完成',
		5: '已取消'
	}
	return statusMap[status] || '未知状态'
}

// 获取状态样式类
const getStatusClass = (status: number): string => {
	const classMap: Record<number, string> = {
		1: 'status-pending',
		2: 'status-shipping',
		3: 'status-receiving',
		4: 'status-completed',
		5: 'status-cancelled'
	}
	return classMap[status] || 'status-unknown'
}

// 获取规格文本
const getSpecText = (specs: any): string => {
	if (!specs) return ''
	if (typeof specs === 'object') {
		return Object.keys(specs)
			.map(key => `${key}: ${specs[key]}`)
			.join('; ')
	}
	return String(specs)
}

// 格式化时间
const formatTime = (timeStr: string): string => {
	const date = new Date(timeStr)
	const year = date.getFullYear()
	const month = (date.getMonth() + 1).toString().padStart(2, '0')
	const day = date.getDate().toString().padStart(2, '0')
	const hour = date.getHours().toString().padStart(2, '0')
	const minute = date.getMinutes().toString().padStart(2, '0')
	return `${year}-${month}-${day} ${hour}:${minute}`
}

// 计算商品总数
const getTotalQuantity = (items: OrderItemType[]): number => {
	return items.reduce((total, item) => total + item.quantity, 0)
}

// 标签页切换
const changeTab = (tab: string) => {
	activeTab.value = tab
}

// 加载更多
const loadMore = () => {
	if (hasMore.value && !isLoading.value) {
		loadOrders(true)
	}
}

// 查看订单详情
const viewOrderDetail = (order: FullOrderType) => {
	uni.navigateTo({
		url: `/pages/mall/consumer/order-detail?id=${order.id}`
	})
}

// 支付订单
const payOrder = (order: FullOrderType) => {
	uni.navigateTo({
		url: `/pages/mall/consumer/payment?orderId=${order.id}&amount=${order.actual_amount}`
	})
}

// 取消订单
const cancelOrder = async (order: FullOrderType) => {
	uni.showModal({
		title: '取消订单',
		content: '确定要取消这个订单吗？',
		success: async (res) => {
			if (res.confirm) {
				try {
                    /*
					const { error } = await supa
						.from('orders')
						.update({ status: 5 })
						.eq('id', order.id)

					if (error !== null) {
						console.error('取消订单失败:', error)
						uni.showToast({
							title: '取消失败',
							icon: 'none'
						})
						return
					}
                    */

                    // 更新本地存储
                    const ordersStr = uni.getStorageSync('orders')
                    if (ordersStr) {
                        const ordersArr = JSON.parse(ordersStr as string) as any[]
                        const index = ordersArr.findIndex((o: any) => o.id === order.id)
                        if (index !== -1) {
                            ordersArr[index].status = 5
                            uni.setStorageSync('orders', JSON.stringify(ordersArr))
                        }
                    }

					order.status = 5
					loadOrderCounts() // 重新加载统计
					
					uni.showToast({
						title: '订单已取消',
						icon: 'success'
					})
				} catch (err) {
					console.error('取消订单异常:', err)
				}
			}
		}
	})
}

// 提醒发货
const remindShipment = (order: FullOrderType) => {
	uni.showToast({
		title: '已提醒商家发货',
		icon: 'success'
	})
}

// 确认收货
const confirmReceipt = async (order: FullOrderType) => {
	uni.showModal({
		title: '确认收货',
		content: '确认已收到商品吗？',
		success: async (res) => {
			if (res.confirm) {
				try {
                    /*
					const { error } = await supa
						.from('orders')
						.update({ status: 4 })
						.eq('id', order.id)

					if (error !== null) {
						console.error('确认收货失败:', error)
						uni.showToast({
							title: '确认失败',
							icon: 'none'
						})
						return
					}
                    */

                    // 更新本地存储
                    const ordersStr = uni.getStorageSync('orders')
                    if (ordersStr) {
                        const ordersArr = JSON.parse(ordersStr as string) as any[]
                        const index = ordersArr.findIndex((o: any) => o.id === order.id)
                        if (index !== -1) {
                            ordersArr[index].status = 4
                            uni.setStorageSync('orders', JSON.stringify(ordersArr))
                        }
                    }

					order.status = 4
					loadOrderCounts() // 重新加载统计
					
					uni.showToast({
						title: '确认收货成功',
						icon: 'success'
					})
				} catch (err) {
					console.error('确认收货异常:', err)
				}
			}
		}
	})
}

// 去评价
const goToReview = (order: FullOrderType) => {
	uni.navigateTo({
		url: `/pages/mall/consumer/review?orderId=${order.id}`
	})
}

// 删除订单
const deleteOrder = async (order: FullOrderType) => {
	uni.showModal({
		title: '删除订单',
		content: '确定要删除这个订单吗？删除后将无法恢复',
		success: async (res) => {
			if (res.confirm) {
				try {
					/*
					const { error } = await supa
						.from('orders')
						.delete()
						.eq('id', order.id)

					if (error !== null) {
						console.error('删除订单失败:', error)
						uni.showToast({
							title: '删除失败',
							icon: 'none'
						})
						return
					}
					*/

					// 更新本地存储
					const ordersStr = uni.getStorageSync('orders')
					if (ordersStr) {
						const ordersArr = JSON.parse(ordersStr as string) as any[]
						const index = ordersArr.findIndex((o: any) => o.id === order.id)
						if (index !== -1) {
							ordersArr.splice(index, 1)
							uni.setStorageSync('orders', JSON.stringify(ordersArr))
						}
					}

					const index = orders.value.findIndex(o => o.id === order.id)
					if (index !== -1) {
						orders.value.splice(index, 1)
						orders.value = [...orders.value]
					}
					
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					})
				} catch (err) {
					console.error('删除订单异常:', err)
				}
			}
		}
	})
}

// 再次购买
const reBuy = async (order: FullOrderType) => {
	// 将订单商品加入购物车
	const userId = getCurrentUserId()
	if (!userId) return

	try {
        /*
		const addPromises = order.items.map(item =>
			supa
				.from('shopping_cart')
				.upsert({
					user_id: userId,
					product_id: item.product_id,
					sku_id: null, // 这里需要获取SKU ID
					quantity: item.quantity
				})
		)

		await Promise.all(addPromises)
        */
		
		uni.showToast({
			title: '已加入购物车',
			icon: 'success'
		})
	} catch (err) {
		console.error('再次购买异常:', err)
		uni.showToast({
			title: '操作失败',
			icon: 'none'
		})
	}
}

// 联系客服
const contactService = (order: FullOrderType) => {
	uni.navigateTo({
		url: `/pages/mall/service/chat?orderId=${order.id}`
	})
}

// 去逛逛
const goShopping = () => {
	uni.switchTab({
		url: '/pages/mall/consumer/index'
	})
}

// 导航方法
const goToHome = () => {
	uni.switchTab({
		url: '/pages/mall/consumer/index'
	})
}

const goToCategory = () => {
	uni.switchTab({
		url: '/pages/mall/consumer/category'
	})
}

const goToProfile = () => {
	uni.switchTab({
		url: '/pages/mall/consumer/profile'
	})
}
</script>

<style scoped>
.orders-page {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f5f5f5;
}

.orders-header {
	background-color: #ffffff;
	padding: 15px;
	border-bottom: 1px solid #e5e5e5;
}

.header-title {
	text-align: center;
}

.title-text {
	font-size: 18px;
	font-weight: bold;
	color: #333333;
}

.order-tabs {
	background-color: #ffffff;
	display: flex;
	overflow-x: auto;
	white-space: nowrap;
	border-bottom: 1px solid #e5e5e5;
}

.order-tab {
	flex: 1;
	min-width: 80px;
	padding: 15px 10px;
	text-align: center;
	position: relative;
}

.order-tab.active {
	color: #007aff;
	border-bottom: 2px solid #007aff;
}

.tab-text {
	font-size: 14px;
	color: #666666;
}

.order-tab.active .tab-text {
	color: #007aff;
	font-weight: bold;
}

.tab-badge {
	position: absolute;
	top: 8px;
	right: 5px;
	background-color: #ff4757;
	color: #ffffff;
	font-size: 10px;
	padding: 2px 5px;
	border-radius: 8px;
	min-width: 16px;
	text-align: center;
}

.orders-list {
	flex: 1;
}

.empty-orders {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 80px 20px;
	background-color: #ffffff;
}

.empty-icon {
	font-size: 80px;
	margin-bottom: 20px;
}

.empty-text {
	font-size: 16px;
	color: #666666;
	margin-bottom: 10px;
}

.empty-subtext {
	font-size: 14px;
	color: #999999;
	margin-bottom: 30px;
}

.go-shopping-btn {
	background-color: #007aff;
	color: #ffffff;
	padding: 10px 40px;
	border-radius: 25px;
	font-size: 14px;
	border: none;
}

.order-item {
	background-color: #ffffff;
	margin-bottom: 10px;
	padding: 15px;
}

.order-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 1px solid #f5f5f5;
}

.order-no {
	font-size: 14px;
	color: #333333;
}

.order-status {
	font-size: 14px;
	padding: 4px 10px;
	border-radius: 12px;
}

.status-pending {
	background-color: #ffa726;
	color: #ffffff;
}

.status-shipping {
	background-color: #2196f3;
	color: #ffffff;
}

.status-receiving {
	background-color: #9c27b0;
	color: #ffffff;
}

.status-completed {
	background-color: #4caf50;
	color: #ffffff;
}

.status-cancelled {
	background-color: #9e9e9e;
	color: #ffffff;
}

.order-products {
	margin-bottom: 15px;
}

.product-item {
	display: flex;
	margin-bottom: 10px;
}

.product-item:last-child {
	margin-bottom: 0;
}

.product-image {
	width: 60px;
	height: 60px;
	border-radius: 5px;
	margin-right: 10px;
}

.product-info {
	flex: 1;
}

.product-name {
	font-size: 13px;
	color: #333333;
	line-height: 1.4;
	margin-bottom: 5px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.product-spec {
	font-size: 12px;
	color: #999999;
	margin-bottom: 5px;
}

.product-price-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.product-price {
	font-size: 14px;
	color: #ff4757;
	font-weight: bold;
}

.product-quantity {
	font-size: 12px;
	color: #666666;
}

.order-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
	padding-top: 10px;
	border-top: 1px solid #f5f5f5;
}

.order-time {
	font-size: 12px;
	color: #999999;
}

.order-total {
	font-size: 14px;
	color: #333333;
}

.total-amount {
	font-size: 16px;
	color: #ff4757;
	font-weight: bold;
	margin-left: 5px;
}

.order-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	flex-wrap: wrap;
}

.action-btn {
	padding: 8px 15px;
	border-radius: 15px;
	font-size: 12px;
	border: 1px solid;
	background-color: #ffffff;
}

.action-btn.pay {
	border-color: #ff4757;
	color: #ff4757;
}

.action-btn.cancel {
	border-color: #666666;
	color: #666666;
}

.action-btn.remind {
	border-color: #2196f3;
	color: #2196f3;
}

.action-btn.confirm {
	border-color: #4caf50;
	color: #4caf50;
}

.action-btn.review {
	border-color: #ffa726;
	color: #ffa726;
}

.action-btn.delete {
	border-color: #9e9e9e;
	color: #9e9e9e;
}

.action-btn.rebuy {
	border-color: #007aff;
	color: #007aff;
}

.action-btn.service {
	border-color: #9c27b0;
	color: #9c27b0;
}

.loading-more,
.no-more {
	padding: 20px;
	text-align: center;
	background-color: #ffffff;
}

.loading-text,
.no-more-text {
	color: #999999;
	font-size: 14px;
}

.bottom-navigation {
	background-color: #ffffff;
	border-top: 1px solid #e5e5e5;
	display: flex;
	padding: 10px 0;
}

.nav-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.nav-item.active {
	color: #007aff;
}

.nav-icon {
	font-size: 20px;
	margin-bottom: 2px;
}

.nav-text {
	font-size: 10px;
}
</style>
