<!-- 商家端首页 - UTS Android 兼容 -->
<template>
	<view class="merchant-container">
		<!-- 头部导航 -->
		<view class="header">
			<view class="header-content">
				<view class="shop-info">
					<image :src="shopInfo.shop_logo || '/static/default-shop.png'" class="shop-logo" mode="aspectFit" />
					<view class="shop-details">
						<text class="shop-name">{{ shopInfo.shop_name }}</text>
						<view class="shop-stats">
							<text class="stat-item">评分: {{ shopInfo.rating }}</text>
							<text class="stat-item">销量: {{ shopInfo.total_sales }}</text>
						</view>
					</view>
				</view>
				<view class="header-actions">
					<text class="action-btn" @click="goToMessages">消息</text>
					<text class="action-btn" @click="goToSettings">设置</text>
				</view>
			</view>
		</view>

		<!-- 数据概览 -->
		<view class="overview-section">
			<text class="section-title">今日数据</text>
			<view class="overview-grid">
				<view class="overview-item">
					<text class="overview-value">{{ todayStats.orders }}</text>
					<text class="overview-label">订单数</text>
				</view>
				<view class="overview-item">
					<text class="overview-value">¥{{ todayStats.sales }}</text>
					<text class="overview-label">销售额</text>
				</view>
				<view class="overview-item">
					<text class="overview-value">{{ todayStats.visitors }}</text>
					<text class="overview-label">访客数</text>
				</view>
				<view class="overview-item">
					<text class="overview-value">{{ todayStats.conversion }}</text>
					<text class="overview-label">转化率</text>
				</view>
			</view>
		</view>

		<!-- 待处理事项 -->
		<view class="pending-section">
			<text class="section-title">待处理</text>
			<view class="pending-list">
				<view class="pending-item" @click="goToOrders('pending')">
					<text class="pending-icon">📦</text>
					<text class="pending-text">待发货订单</text>
					<text class="pending-count">{{ pendingCounts.pending_shipment }}</text>
				</view>
				<view class="pending-item" @click="goToOrders('refund')">
					<text class="pending-icon">↩️</text>
					<text class="pending-text">退款处理</text>
					<text class="pending-count">{{ pendingCounts.refund_requests }}</text>
				</view>
				<view class="pending-item" @click="goToProducts('low_stock')">
					<text class="pending-icon">⚠️</text>
					<text class="pending-text">库存预警</text>
					<text class="pending-count">{{ pendingCounts.low_stock }}</text>
				</view>
				<view class="pending-item" @click="goToReviews">
					<text class="pending-icon">💬</text>
					<text class="pending-text">待回复评价</text>
					<text class="pending-count">{{ pendingCounts.pending_reviews }}</text>
				</view>
			</view>
		</view>

		<!-- 快捷功能 -->
		<view class="shortcuts-section">
			<text class="section-title">快捷功能</text>
			<view class="shortcuts-grid">
				<view class="shortcut-item" @click="goToProducts('add')">
					<text class="shortcut-icon">➕</text>
					<text class="shortcut-text">添加商品</text>
				</view>
				<view class="shortcut-item" @click="goToOrders('all')">
					<text class="shortcut-icon">📋</text>
					<text class="shortcut-text">订单管理</text>
				</view>
				<view class="shortcut-item" @click="goToProducts('manage')">
					<text class="shortcut-icon">📦</text>
					<text class="shortcut-text">商品管理</text>
				</view>
				<view class="shortcut-item" @click="goToPromotions">
					<text class="shortcut-icon">🎯</text>
					<text class="shortcut-text">营销活动</text>
				</view>
				<view class="shortcut-item" @click="goToStatistics">
					<text class="shortcut-icon">📊</text>
					<text class="shortcut-text">数据统计</text>
				</view>
				<view class="shortcut-item" @click="goToFinance">
					<text class="shortcut-icon">💰</text>
					<text class="shortcut-text">财务结算</text>
				</view>
			</view>
		</view>

		<!-- 最新订单 -->
		<view class="recent-orders-section">
			<view class="section-header">
				<text class="section-title">最新订单</text>
				<text class="section-more" @click="goToOrders('all')">查看全部</text>
			</view>
			<view class="orders-list">
				<view v-for="order in recentOrders" :key="order.id" class="order-item" @click="goToOrderDetail(order.id)">
					<view class="order-header">
						<text class="order-no">{{ order.order_no }}</text>
						<text class="order-status" :class="getOrderStatusClass(order.status)">{{ getOrderStatusText(order.status) }}</text>
					</view>
					<view class="order-products">
						<view v-for="item in order.items" :key="item.id" class="product-item">
							<image :src="item.product_image || '/static/default-product.png'" class="product-image" mode="aspectFit" />
							<view class="product-info">
								<text class="product-name">{{ item.product_name }}</text>
								<text class="product-spec">{{ item.sku_specifications || '' }}</text>
								<text class="product-price">¥{{ item.price }} × {{ item.quantity }}</text>
							</view>
						</view>
					</view>
					<view class="order-footer">
						<text class="order-amount">合计: ¥{{ order.actual_amount }}</text>
						<text class="order-time">{{ formatTime(order.created_at) }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="uts">
	import type { 
		MerchantType, 
		OrderType, 
		OrderItemType,
		ProductType 
	} from '@/types/mall-types.uts'
	
	type TodayStatsType = {
		orders: number
		sales: string
		visitors: number
		conversion: string
	}
	
	type PendingCountsType = {
		pending_shipment: number
		refund_requests: number
		low_stock: number
		pending_reviews: number
	}
	
	type RecentOrderType = {
		id: string
		order_no: string
		status: number
		actual_amount: number
		created_at: string
		items: Array<OrderItemType & { product_image: string }>
	}

	export default {
		data() {
			return {
				shopInfo: {
					id: '',
					user_id: '',
					shop_name: '我的店铺',
					shop_logo: '',
					shop_banner: '',
					shop_description: '',
					contact_name: '',
					contact_phone: '',
					shop_status: 1,
					rating: 5.0,
					total_sales: 0,
					created_at: ''
				} as MerchantType,
				
				todayStats: {
					orders: 0,
					sales: '0.00',
					visitors: 0,
					conversion: '0.00%'
				} as TodayStatsType,
				
				pendingCounts: {
					pending_shipment: 0,
					refund_requests: 0,
					low_stock: 0,
					pending_reviews: 0
				} as PendingCountsType,
				
				recentOrders: [] as Array<RecentOrderType>
			}
		},
		
		onLoad() {
			this.loadMerchantData()
			this.loadTodayStats()
			this.loadPendingCounts()
			this.loadRecentOrders()
		},
		
		methods: {
			// 加载商家信息
			loadMerchantData() {
				// TODO: 调用API获取商家信息
				console.log('Loading merchant data...')
			},
			
			// 加载今日统计
			loadTodayStats() {
				// TODO: 调用API获取今日统计数据
				this.todayStats = {
					orders: 25,
					sales: '8,350.00',
					visitors: 156,
					conversion: '16.03%'
				}
			},
			
			// 加载待处理数量
			loadPendingCounts() {
				// TODO: 调用API获取待处理数量
				this.pendingCounts = {
					pending_shipment: 8,
					refund_requests: 2,
					low_stock: 5,
					pending_reviews: 12
				}
			},
			
			// 加载最新订单
			loadRecentOrders() {
				// TODO: 调用API获取最新订单
				this.recentOrders = [
					{
						id: '1',
						order_no: 'M202501081234',
						status: 2,
						actual_amount: 299.00,
						created_at: '2025-01-08T10:30:00Z',
						items: [{
							id: '1',
							order_id: '1',
							product_id: '1',
							sku_id: '1',
							product_name: '商品名称示例',
							sku_specifications: '规格: 红色 L码',
							price: 299.00,
							quantity: 1,
							total_amount: 299.00,
							created_at: '2025-01-08T10:30:00Z',
							product_image: '/static/product1.jpg'
						}]
					}
				]
			},
			
			// 获取订单状态样式
			getOrderStatusClass(status: number): string {
				switch (status) {
					case 1: return 'status-pending'
					case 2: return 'status-paid'
					case 3: return 'status-shipped'
					case 4: return 'status-delivered'
					case 5: return 'status-completed'
					default: return 'status-default'
				}
			},
			
			// 获取订单状态文本
			getOrderStatusText(status: number): string {
				switch (status) {
					case 1: return '待付款'
					case 2: return '待发货'
					case 3: return '已发货'
					case 4: return '已收货'
					case 5: return '已完成'
					default: return '未知状态'
				}
			},
			
			// 格式化时间
			formatTime(timeStr: string): string {
				const date = new Date(timeStr)
				const now = new Date()
				const diff = now.getTime() - date.getTime()
				const minutes = Math.floor(diff / (1000 * 60))
				
				if (minutes < 60) {
					return `${minutes}分钟前`
				} else if (minutes < 1440) {
					return `${Math.floor(minutes / 60)}小时前`
				} else {
					return `${Math.floor(minutes / 1440)}天前`
				}
			},
			
			// 导航方法
			goToMessages() {
				uni.navigateTo({
					url: '/pages/mall/merchant/messages'
				})
			},
			
			goToSettings() {
				uni.navigateTo({
					url: '/pages/mall/merchant/settings'
				})
			},
			
			goToOrders(type: string) {
				uni.navigateTo({
					url: `/pages/mall/merchant/orders?type=${type}`
				})
			},
			
			goToProducts(type: string) {
				uni.navigateTo({
					url: `/pages/mall/merchant/products?type=${type}`
				})
			},
			
			goToPromotions() {
				uni.navigateTo({
					url: '/pages/mall/merchant/promotions'
				})
			},
			
			goToStatistics() {
				uni.navigateTo({
					url: '/pages/mall/merchant/statistics'
				})
			},
			
			goToFinance() {
				uni.navigateTo({
					url: '/pages/mall/merchant/finance'
				})
			},
			
			goToReviews() {
				uni.navigateTo({
					url: '/pages/mall/merchant/reviews'
				})
			},
			
			goToOrderDetail(orderId: string) {
				uni.navigateTo({
					url: `/pages/mall/merchant/order-detail?id=${orderId}`
				})
			}
		}
	}
</script>

<style>
	.merchant-container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	.header {
		background-color: #fff;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #e5e5e5;
	}
	
	.header-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.shop-info {
		display: flex;
		align-items: center;
	}
	
	.shop-logo {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		margin-right: 20rpx;
	}
	
	.shop-details {
		display: flex;
		flex-direction: column;
	}
	
	.shop-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.shop-stats {
		display: flex;
	}
	
	.stat-item {
		font-size: 24rpx;
		color: #666;
		margin-right: 20rpx;
	}
	
	.header-actions {
		display: flex;
	}
	
	.action-btn {
		font-size: 28rpx;
		color: #007AFF;
		margin-left: 30rpx;
	}
	
	.overview-section {
		background-color: #fff;
		margin: 20rpx;
		padding: 30rpx;
		border-radius: 16rpx;
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
	}
	
	.overview-grid {
		display: flex;
		justify-content: space-between;
	}
	
	.overview-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
	}
	
	.overview-value {
		font-size: 36rpx;
		font-weight: bold;
		color: #FF6B35;
		margin-bottom: 10rpx;
	}
	
	.overview-label {
		font-size: 24rpx;
		color: #666;
	}
	
	.pending-section {
		background-color: #fff;
		margin: 20rpx;
		padding: 30rpx;
		border-radius: 16rpx;
	}
	
	.pending-list {
		display: flex;
		flex-direction: column;
	}
	
	.pending-item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.pending-item:last-child {
		border-bottom: none;
	}
	
	.pending-icon {
		font-size: 32rpx;
		margin-right: 20rpx;
		width: 40rpx;
	}
	
	.pending-text {
		font-size: 28rpx;
		color: #333;
		flex: 1;
	}
	
	.pending-count {
		font-size: 28rpx;
		color: #FF6B35;
		font-weight: bold;
	}
	
	.shortcuts-section {
		background-color: #fff;
		margin: 20rpx;
		padding: 30rpx;
		border-radius: 16rpx;
	}
	
	.shortcuts-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.shortcut-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 30%;
		margin-bottom: 30rpx;
	}
	
	.shortcut-icon {
		font-size: 48rpx;
		margin-bottom: 15rpx;
	}
	
	.shortcut-text {
		font-size: 24rpx;
		color: #333;
		text-align: center;
	}
	
	.recent-orders-section {
		background-color: #fff;
		margin: 20rpx;
		padding: 30rpx;
		border-radius: 16rpx;
	}
	
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}
	
	.section-more {
		font-size: 24rpx;
		color: #007AFF;
	}
	
	.orders-list {
		display: flex;
		flex-direction: column;
	}
	
	.order-item {
		border: 1rpx solid #e5e5e5;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}
	
	.order-item:last-child {
		margin-bottom: 0;
	}
	
	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15rpx;
	}
	
	.order-no {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
	}
	
	.order-status {
		font-size: 24rpx;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
	}
	
	.status-pending {
		background-color: #FFF3CD;
		color: #856404;
	}
	
	.status-paid {
		background-color: #D4EDDA;
		color: #155724;
	}
	
	.status-shipped {
		background-color: #CCE5FF;
		color: #004085;
	}
	
	.status-delivered {
		background-color: #E2E3E5;
		color: #383D41;
	}
	
	.status-completed {
		background-color: #D1ECF1;
		color: #0C5460;
	}
	
	.order-products {
		margin-bottom: 15rpx;
	}
	
	.product-item {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}
	
	.product-item:last-child {
		margin-bottom: 0;
	}
	
	.product-image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 8rpx;
		margin-right: 15rpx;
	}
	
	.product-info {
		display: flex;
		flex-direction: column;
		flex: 1;
	}
	
	.product-name {
		font-size: 26rpx;
		color: #333;
		margin-bottom: 5rpx;
	}
	
	.product-spec {
		font-size: 22rpx;
		color: #999;
		margin-bottom: 5rpx;
	}
	
	.product-price {
		font-size: 24rpx;
		color: #666;
	}
	
	.order-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.order-amount {
		font-size: 28rpx;
		color: #FF6B35;
		font-weight: bold;
	}
	
	.order-time {
		font-size: 22rpx;
		color: #999;
	}
</style>
