<!-- 商家端 - 个人中心 -->
<template>
  <view class="merchant-profile">
    <!-- 店铺信息头部 -->
    <view class="profile-header">
      <image :src="shopInfo.shop_logo || '/static/default-shop.png'" class="shop-logo" @click="editShop" />
      <view class="shop-info">
        <text class="shop-name">{{ shopInfo.shop_name }}</text>
        <text class="shop-status">{{ getShopStatus() }}</text>
        <view class="shop-stats">
          <text class="stat-item">评分: {{ shopInfo.rating }}/5.0</text>
          <text class="stat-item">总销量: {{ shopInfo.total_sales }}</text>
        </view>
      </view>
      <view class="settings-icon" @click="goToSettings">⚙️</view>
    </view>

    <!-- 订单管理快捷入口 -->
    <view class="order-shortcuts">
      <view class="section-title">订单管理</view>
      <view class="order-tabs">
        <view class="order-tab" @click="goToOrders('all')">
          <text class="tab-icon">📋</text>
          <text class="tab-text">全部订单</text>
          <text v-if="orderCounts.total > 0" class="tab-badge">{{ orderCounts.total }}</text>
        </view>
        <view class="order-tab" @click="goToOrders('pending')">
          <text class="tab-icon">💰</text>
          <text class="tab-text">待发货</text>
          <text v-if="orderCounts.pending > 0" class="tab-badge alert">{{ orderCounts.pending }}</text>
        </view>
        <view class="order-tab" @click="goToOrders('shipped')">
          <text class="tab-icon">🚚</text>
          <text class="tab-text">已发货</text>
          <text v-if="orderCounts.shipped > 0" class="tab-badge">{{ orderCounts.shipped }}</text>
        </view>
        <view class="order-tab" @click="goToOrders('refund')">
          <text class="tab-icon">↩️</text>
          <text class="tab-text">退款</text>
          <text v-if="orderCounts.refund > 0" class="tab-badge alert">{{ orderCounts.refund }}</text>
        </view>
      </view>
    </view>

    <!-- 今日经营数据 -->
    <view class="today-stats">
      <view class="section-title">今日经营</view>
      <view class="stats-grid">
        <view class="stat-card">
          <text class="stat-value">¥{{ todayStats.revenue }}</text>
          <text class="stat-label">营业额</text>
        </view>
        <view class="stat-card">
          <text class="stat-value">{{ todayStats.orders }}</text>
          <text class="stat-label">订单数</text>
        </view>
        <view class="stat-card">
          <text class="stat-value">{{ todayStats.visitors }}</text>
          <text class="stat-label">访客数</text>
        </view>
        <view class="stat-card">
          <text class="stat-value">{{ todayStats.conversion }}%</text>
          <text class="stat-label">转化率</text>
        </view>
      </view>
    </view>

    <!-- 最近订单 -->
    <view class="recent-orders">
      <view class="section-header">
        <text class="section-title">最近订单</text>
        <text class="view-all" @click="goToOrders('all')">查看全部 ></text>
      </view>
      <view v-if="recentOrders.length > 0" class="order-list">
        <view v-for="order in recentOrders" :key="order.id" class="order-item" @click="viewOrderDetail(order.id)">
          <view class="order-header">
            <text class="order-no">订单号: {{ order.order_no }}</text>
            <text class="order-status" :class="'status-' + order.status">{{ getOrderStatusText(order.status) }}</text>
          </view>
          <view class="order-info">
            <text class="order-amount">¥{{ order.actual_amount }}</text>
            <text class="order-time">{{ formatTime(order.created_at) }}</text>
          </view>
        </view>
      </view>
      <view v-else class="no-data">
        <text class="no-data-text">暂无最近订单</text>
      </view>
    </view>

    <!-- 商品管理 -->
    <view class="product-management">
      <view class="section-title">商品管理</view>
      <view class="management-grid">
        <view class="management-item" @click="goToProducts">
          <text class="item-icon">📦</text>
          <text class="item-label">商品管理</text>
          <text class="item-count">{{ productStats.total }}</text>
        </view>
        <view class="management-item" @click="goToInventory">
          <text class="item-icon">📊</text>
          <text class="item-label">库存管理</text>
          <text class="item-count">{{ productStats.lowStock }}</text>
        </view>
        <view class="management-item" @click="goToPromotions">
          <text class="item-icon">🎉</text>
          <text class="item-label">促销活动</text>
          <text class="item-count">{{ promotionStats.active }}</text>
        </view>
        <view class="management-item" @click="goToReviews">
          <text class="item-icon">⭐</text>
          <text class="item-label">评价管理</text>
          <text class="item-count">{{ reviewStats.pending }}</text>
        </view>
      </view>
    </view>

    <!-- 经营分析 -->
    <view class="business-analysis">
      <view class="section-header">
        <text class="section-title">经营分析</text>
        <text class="view-more" @click="goToAnalytics">详细报表 ></text>
      </view>
      <view class="analysis-chart">
        <view class="chart-item">
          <text class="chart-label">本周销售趋势</text>
          <view class="chart-bar">
            <view v-for="(day, index) in weeklyData" :key="index" 
                  class="bar-item" 
                  :style="{ height: (day.amount / maxWeeklyAmount * 100) + '%' }">
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 功能菜单 -->
    <view class="function-menu">
      <view class="menu-group">
        <view class="menu-item" @click="goToFinance">
          <text class="menu-icon">💳</text>
          <text class="menu-label">财务管理</text>
          <text class="menu-arrow">></text>
        </view>
        <view class="menu-item" @click="goToCustomers">
          <text class="menu-icon">👥</text>
          <text class="menu-label">客户管理</text>
          <text class="menu-arrow">></text>
        </view>
        <view class="menu-item" @click="goToMarketing">
          <text class="menu-icon">📢</text>
          <text class="menu-label">营销工具</text>
          <text class="menu-arrow">></text>
        </view>
      </view>
      
      <view class="menu-group">
        <view class="menu-item" @click="goToHelp">
          <text class="menu-icon">❓</text>
          <text class="menu-label">帮助中心</text>
          <text class="menu-arrow">></text>
        </view>
        <view class="menu-item" @click="goToFeedback">
          <text class="menu-icon">💬</text>
          <text class="menu-label">意见反馈</text>
          <text class="menu-arrow">></text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="uts">
import { ref, onMounted, computed } from 'vue'
import type { MerchantType, OrderType, ApiResponseType } from '@/types/mall-types'

// 响应式数据
const shopInfo = ref({
  id: '',
  shop_name: '我的店铺',
  shop_logo: '',
  rating: 4.8,
  total_sales: 1289,
  shop_status: 1
} as MerchantType)

const orderCounts = ref({
  total: 0,
  pending: 0,
  shipped: 0,
  refund: 0
})

const todayStats = ref({
  revenue: '2,368.50',
  orders: 45,
  visitors: 238,
  conversion: 18.9
})

const productStats = ref({
  total: 156,
  lowStock: 8
})

const promotionStats = ref({
  active: 3
})

const reviewStats = ref({
  pending: 12
})

const recentOrders = ref([] as Array<OrderType>)

const weeklyData = ref([
  { day: '周一', amount: 1200 },
  { day: '周二', amount: 1800 },
  { day: '周三', amount: 2400 },
  { day: '周四', amount: 1600 },
  { day: '周五', amount: 2800 },
  { day: '周六', amount: 3200 },
  { day: '周日', amount: 2600 }
])

// 计算属性
const maxWeeklyAmount = computed(() => {
  return Math.max(...weeklyData.value.map(item => item.amount))
})

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

// 方法
function loadShopInfo() {
  // 模拟加载店铺信息
  shopInfo.value = {
    id: 'shop001',
    user_id: 'user001',
    shop_name: '时尚服饰专营店',
    shop_logo: '/static/shop-logo.png',
    shop_banner: '',
    shop_description: '专业的时尚服饰店铺',
    contact_name: '张老板',
    contact_phone: '13888888888',
    shop_status: 1,
    rating: 4.8,
    total_sales: 1289,
    created_at: '2024-01-01'
  }
}

function loadOrderCounts() {
  // 模拟加载订单统计
  orderCounts.value = {
    total: 156,
    pending: 8,
    shipped: 12,
    refund: 3
  }
}

function loadRecentOrders() {
  // 模拟加载最近订单
  recentOrders.value = [
    {
      id: 'order001',
      order_no: 'ORD20241201001',
      user_id: 'user001',
      merchant_id: 'shop001',
      status: 2,
      total_amount: 299.0,
      discount_amount: 0,
      delivery_fee: 10.0,
      actual_amount: 309.0,
      payment_method: 1,
      payment_status: 1,
      delivery_address: {},
      created_at: '2024-12-01 14:30:00'
    },
    {
      id: 'order002',
      order_no: 'ORD20241201002',
      user_id: 'user002',
      merchant_id: 'shop001',
      status: 1,
      total_amount: 599.0,
      discount_amount: 50.0,
      delivery_fee: 0,
      actual_amount: 549.0,
      payment_method: null,
      payment_status: 0,
      delivery_address: {},
      created_at: '2024-12-01 15:20:00'
    }
  ]
}

function getShopStatus(): string {
  const statusMap = {
    0: '待审核',
    1: '正常营业',
    2: '暂停营业',
    3: '已关闭'
  }
  return statusMap[shopInfo.value.shop_status] || '未知状态'
}

function getOrderStatusText(status: number): string {
  const statusMap = {
    1: '待付款',
    2: '待发货',
    3: '已发货',
    4: '已送达',
    5: '已完成',
    6: '已取消'
  }
  return statusMap[status] || '未知'
}

function formatTime(dateStr: string): string {
  const date = new Date(dateStr)
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  const hours = Math.floor(diff / (1000 * 60 * 60))
  
  if (hours < 1) {
    return '刚刚'
  } else if (hours < 24) {
    return `${hours}小时前`
  } else {
    return `${Math.floor(hours / 24)}天前`
  }
}

// 导航方法
function editShop() {
  uni.navigateTo({
    url: '/pages/mall/merchant/shop-edit'
  })
}

function goToSettings() {
  uni.navigateTo({
    url: '/pages/mall/merchant/settings'
  })
}

function goToOrders(type: string) {
  uni.navigateTo({
    url: `/pages/mall/merchant/orders?type=${type}`
  })
}

function viewOrderDetail(orderId: string) {
  uni.navigateTo({
    url: `/pages/mall/merchant/order-detail?id=${orderId}`
  })
}

function goToProducts() {
  uni.navigateTo({
    url: '/pages/mall/merchant/products'
  })
}

function goToInventory() {
  uni.navigateTo({
    url: '/pages/mall/merchant/inventory'
  })
}

function goToPromotions() {
  uni.navigateTo({
    url: '/pages/mall/merchant/promotions'
  })
}

function goToReviews() {
  uni.navigateTo({
    url: '/pages/mall/merchant/reviews'
  })
}

function goToAnalytics() {
  uni.navigateTo({
    url: '/pages/mall/merchant/analytics'
  })
}

function goToFinance() {
  uni.navigateTo({
    url: '/pages/mall/merchant/finance'
  })
}

function goToCustomers() {
  uni.navigateTo({
    url: '/pages/mall/merchant/customers'
  })
}

function goToMarketing() {
  uni.navigateTo({
    url: '/pages/mall/merchant/marketing'
  })
}

function goToHelp() {
  uni.navigateTo({
    url: '/pages/mall/common/help'
  })
}

function goToFeedback() {
  uni.navigateTo({
    url: '/pages/mall/common/feedback'
  })
}
</script>

<style scoped>
.merchant-profile {
  padding: 0 0 120rpx 0;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.profile-header {
  display: flex;
  align-items: center;
  padding: 40rpx 30rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
}

.shop-logo {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  margin-right: 30rpx;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
}

.shop-info {
  flex: 1;
}

.shop-name {
  font-size: 36rpx;
  font-weight: bold;
  color: white;
  margin-bottom: 10rpx;
}

.shop-status {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 15rpx;
}

.shop-stats {
  display: flex;
  gap: 30rpx;
}

.stat-item {
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.9);
}

.settings-icon {
  font-size: 36rpx;
  color: white;
  padding: 10rpx;
}

.order-shortcuts, .today-stats, .recent-orders, .product-management, .business-analysis, .function-menu {
  margin: 20rpx 30rpx;
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.view-all, .view-more {
  font-size: 24rpx;
  color: #667eea;
}

.order-tabs {
  display: flex;
  justify-content: space-between;
}

.order-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}

.tab-icon {
  font-size: 48rpx;
  margin-bottom: 10rpx;
}

.tab-text {
  font-size: 24rpx;
  color: #666;
}

.tab-badge {
  position: absolute;
  top: -10rpx;
  right: 20rpx;
  background: #ff6b6b;
  color: white;
  font-size: 20rpx;
  padding: 4rpx 8rpx;
  border-radius: 10rpx;
  min-width: 30rpx;
  text-align: center;
}

.tab-badge.alert {
  background: #ff4757;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.stats-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20rpx;
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 150rpx;
  padding: 20rpx;
  background: #f8f9ff;
  border-radius: 15rpx;
}

.stat-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #667eea;
  margin-bottom: 5rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
}

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

.order-item {
  padding: 25rpx;
  background: #f8f9ff;
  border-radius: 15rpx;
  border-left: 6rpx solid #667eea;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

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

.order-status {
  font-size: 22rpx;
  padding: 6rpx 12rpx;
  border-radius: 20rpx;
  background: #e3f2fd;
  color: #1976d2;
}

.status-1 {
  background: #fff3e0;
  color: #f57c00;
}

.status-2 {
  background: #e8f5e8;
  color: #388e3c;
}

.status-3 {
  background: #e3f2fd;
  color: #1976d2;
}

.order-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-amount {
  font-size: 28rpx;
  font-weight: bold;
  color: #ff6b6b;
}

.order-time {
  font-size: 22rpx;
  color: #999;
}

.management-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20rpx;
}

.management-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 140rpx;
  padding: 25rpx 15rpx;
  background: #f8f9ff;
  border-radius: 15rpx;
  position: relative;
}

.item-icon {
  font-size: 48rpx;
  margin-bottom: 10rpx;
}

.item-label {
  font-size: 24rpx;
  color: #333;
  margin-bottom: 5rpx;
}

.item-count {
  font-size: 20rpx;
  color: #667eea;
  font-weight: bold;
}

.analysis-chart {
  padding: 20rpx 0;
}

.chart-item {
  text-align: center;
}

.chart-label {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 20rpx;
}

.chart-bar {
  display: flex;
  justify-content: space-between;
  align-items: end;
  height: 200rpx;
  gap: 10rpx;
}

.bar-item {
  flex: 1;
  background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
  border-radius: 8rpx 8rpx 0 0;
  min-height: 20rpx;
}

.menu-group {
  margin-bottom: 30rpx;
}

.menu-group:last-child {
  margin-bottom: 0;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 25rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-icon {
  font-size: 36rpx;
  width: 60rpx;
  margin-right: 25rpx;
}

.menu-label {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.menu-arrow {
  font-size: 24rpx;
  color: #ccc;
}

.no-data {
  text-align: center;
  padding: 60rpx 0;
}

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