<template>
  <view class="order-list">
    <view v-if="orders.length === 0 && !loading" class="empty-tip">
      <text>暂无订单</text>
    </view>

    <view
      v-for="order in orders"
      :key="order.id"
      class="order-card"
      @click="goDetail(order.id)"
    >
      <view class="order-card__header">
        <text class="order-card__no">订单号：{{ order.orderNo }}</text>
        <text class="order-card__status" :class="`status--${order.status}`">{{ statusLabel(order.status) }}</text>
      </view>
      <view class="order-card__body">
        <text class="order-card__price">¥{{ order.totalPrice }}</text>
        <text class="order-card__time">{{ order.createdAt }}</text>
      </view>
    </view>

    <view v-if="loading" class="loading-tip">
      <text>加载中...</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
// @ts-ignore - uni-app 页面生命周期
import { onShow } from '@dcloudio/uni-app'
import type { Order, OrderStatus } from '../../types'
import { getOrderList } from '../../api/order'
import { useOrderStore } from '../../store/order'

const orderStore = useOrderStore()
const orders = ref<Order[]>([])
const loading = ref(false)

const STATUS_MAP: Record<string, string> = {
  pending: '待支付',
  paid: '已支付',
  shipped: '已发货',
  cancelled: '已取消',
}

function statusLabel(status: OrderStatus) {
  return STATUS_MAP[status] || status
}

function goDetail(id: number) {
  uni.navigateTo({ url: `/pages/order/detail?id=${id}` })
}

async function loadOrders() {
  loading.value = true
  try {
    const data = await getOrderList()
    orders.value = data
    orderStore.setOrders(data)
  } catch {
    uni.showToast({ title: '加载订单失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

// 页面首次加载
onMounted(() => {
  loadOrders()
})

// 页面每次显示时刷新（从详情页返回、后台修改后重新进入）
onShow(() => {
  loadOrders()
})
</script>

<style scoped>
.order-list {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 16rpx;
}
.order-card {
  background: #fff;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 16rpx;
}
.order-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}
.order-card__no {
  font-size: 26rpx;
  color: #666;
}
.order-card__status {
  font-size: 26rpx;
  font-weight: bold;
}
.status--pending { color: #faad14; }
.status--paid { color: #52c41a; }
.status--shipped { color: #1890ff; }
.status--cancelled { color: #999; }
.order-card__body {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.order-card__price {
  font-size: 32rpx;
  color: #e4393c;
  font-weight: bold;
}
.order-card__time {
  font-size: 24rpx;
  color: #999;
}
.empty-tip,
.loading-tip {
  text-align: center;
  padding: 120rpx 0;
  color: #999;
  font-size: 28rpx;
}
</style>
