<script lang="ts" setup>
import { useMerchantStore } from '@/store/merchant'
import { OrderStatus, ORDER_STATUS_CONFIG } from '@/typings/merchant'

definePage({
  style: {
    navigationBarTitleText: '订单管理',
  },
})

const merchantStore = useMerchantStore()

// Tab 状态
const tabs = [
  { value: 'all', label: '全部' },
  { value: OrderStatus.PENDING, label: '待确认' },
  { value: OrderStatus.SHIPPING, label: '待发货' },
  { value: OrderStatus.SHIPPED, label: '已发货' },
  { value: OrderStatus.COMPLETED, label: '已完成' },
]
const currentTab = ref<OrderStatus | 'all'>('all')

// 搜索
const keyword = ref('')

// 加载订单
async function loadOrders() {
  await merchantStore.fetchOrders({
    status: currentTab.value,
    keyword: keyword.value,
  })
}

// 切换 Tab
function handleTabChange(value: OrderStatus | 'all') {
  currentTab.value = value
  loadOrders()
}

// 搜索
function handleSearch() {
  loadOrders()
}

// 查看详情
function handleDetail(id: string) {
  uni.navigateTo({ url: `/pagesMerchant/order/detail?id=${id}` })
}

// 快捷确认订单
async function handleConfirm(id: string) {
  uni.showModal({
    title: '确认订单',
    content: '确认接受此订单？',
    success: async (res) => {
      if (res.confirm) {
        await merchantStore.confirmOrder(id)
        uni.showToast({ title: '确认成功', icon: 'success' })
      }
    },
  })
}

// 下拉刷新
async function onRefresh() {
  await loadOrders()
}

// 页面加载
onMounted(() => {
  loadOrders()
})
</script>

<template>
  <view class="order-list-page">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <wd-search
        v-model="keyword"
        placeholder="搜索订单号/客户名称"
        @search="handleSearch"
        @clear="handleSearch"
      />
    </view>
    
    <!-- Tab 切换 -->
    <view class="tabs">
      <view
        v-for="tab in tabs"
        :key="tab.value"
        class="tab-item"
        :class="{ active: currentTab === tab.value }"
        @click="handleTabChange(tab.value)"
      >
        {{ tab.label }}
      </view>
    </view>
    
    <!-- 订单列表 -->
    <scroll-view 
      class="order-list" 
      scroll-y 
      refresher-enabled
      :refresher-triggered="merchantStore.loading"
      @refresherrefresh="onRefresh"
    >
      <view v-if="merchantStore.orders.length === 0" class="empty">
        <text class="i-carbon-document"></text>
        <text>暂无订单</text>
      </view>
      
      <view
        v-for="order in merchantStore.orders"
        :key="order.id"
        class="order-card"
        @click="handleDetail(order.id)"
      >
        <view class="order-header">
          <text class="order-no">{{ order.orderNo }}</text>
          <text class="order-status" :style="{ color: ORDER_STATUS_CONFIG[order.status].color }">
            {{ ORDER_STATUS_CONFIG[order.status].label }}
          </text>
        </view>
        
        <view class="order-goods">
          <view v-for="goods in order.goods" :key="goods.id" class="goods-item">
            <image :src="goods.image" class="goods-image" mode="aspectFill" />
            <view class="goods-info">
              <text class="goods-name">{{ goods.name }}</text>
              <text class="goods-sku">{{ goods.skuName }}</text>
              <view class="goods-price">
                <text class="price">¥{{ goods.price.toFixed(2) }}</text>
                <text class="quantity">x{{ goods.quantity }}</text>
              </view>
            </view>
          </view>
        </view>
        
        <view class="order-footer">
          <view class="customer">
            <text class="i-carbon-user"></text>
            <text>{{ order.customerName }}</text>
          </view>
          <view class="amount">
            共{{ order.goods.length }}件 实付 <text class="total">¥{{ order.payAmount.toFixed(2) }}</text>
          </view>
        </view>
        
        <!-- 操作按钮 -->
        <view class="order-actions" v-if="order.status === OrderStatus.PENDING || order.status === OrderStatus.SHIPPING">
          <view 
            v-if="order.status === OrderStatus.PENDING"
            class="action-btn primary"
            @click.stop="handleConfirm(order.id)"
          >
            确认订单
          </view>
          <view 
            v-if="order.status === OrderStatus.SHIPPING"
            class="action-btn primary"
            @click.stop="handleDetail(order.id)"
          >
            去发货
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

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

.search-bar {
  padding: 20rpx;
  background: #fff;
}

.tabs {
  display: flex;
  background: #fff;
  padding: 0 10rpx;
  border-bottom: 1rpx solid #f0f0f0;
  
  .tab-item {
    flex: 1;
    text-align: center;
    padding: 24rpx 0;
    font-size: 26rpx;
    color: #666;
    position: relative;
    
    &.active {
      color: #ff8f0d;
      font-weight: 600;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        height: 4rpx;
        background: #ff8f0d;
        border-radius: 2rpx;
      }
    }
  }
}

.order-list {
  flex: 1;
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  color: #999;
  
  text:first-child {
    font-size: 80rpx;
    margin-bottom: 20rpx;
  }
}

.order-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin: 20rpx;
  .order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    .order-no {
      font-size: 26rpx;
      color: #333;
      font-weight: 500;
    }
    
    .order-status {
      font-size: 24rpx;
      font-weight: 500;
    }
  }
  
  .order-goods {
    border-top: 1rpx solid #f5f5f5;
    border-bottom: 1rpx solid #f5f5f5;
    padding: 20rpx 0;
    
    .goods-item {
      display: flex;
      gap: 16rpx;
      
      & + .goods-item {
        margin-top: 16rpx;
      }
      
      .goods-image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 8rpx;
        background: #f5f5f5;
      }
      
      .goods-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        
        .goods-name {
          font-size: 26rpx;
          color: #333;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        
        .goods-sku {
          font-size: 22rpx;
          color: #999;
        }
        
        .goods-price {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .price {
            font-size: 28rpx;
            color: #ff8f0d;
            font-weight: 600;
          }
          
          .quantity {
            font-size: 24rpx;
            color: #999;
          }
        }
      }
    }
  }
  
  .order-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16rpx;
    
    .customer {
      display: flex;
      align-items: center;
      gap: 8rpx;
      font-size: 24rpx;
      color: #666;
    }
    
    .amount {
      font-size: 24rpx;
      color: #666;
      
      .total {
        font-size: 30rpx;
        color: #ff8f0d;
        font-weight: 600;
      }
    }
  }
  
  .order-actions {
    display: flex;
    justify-content: flex-end;
    gap: 16rpx;
    margin-top: 20rpx;
    padding-top: 20rpx;
    border-top: 1rpx solid #f5f5f5;
    
    .action-btn {
      padding: 12rpx 32rpx;
      border-radius: 32rpx;
      font-size: 24rpx;
      border: 1rpx solid #ddd;
      color: #666;
      
      &.primary {
        background: #ff8f0d;
        border-color: #ff8f0d;
        color: #fff;
      }
    }
  }
}
</style>

