<view class="page page-with-tabbar">
  <!-- 状态选项卡 -->
  <view class="order-tabs">
    <view class="tab-items">
      <view class="tab-item {{activeTab === 'all' ? 'active' : ''}}" bindtap="switchTab" data-tab="all">全部</view>
      <view class="tab-item {{activeTab === 'pending_pay' ? 'active' : ''}}" bindtap="switchTab" data-tab="pending_pay">待付款</view>
      <view class="tab-item {{activeTab === 'pending_ship' ? 'active' : ''}}" bindtap="switchTab" data-tab="pending_ship">待发货</view>
      <view class="tab-item {{activeTab === 'shipped' ? 'active' : ''}}" bindtap="switchTab" data-tab="shipped">待收货</view>
      <view class="tab-item {{activeTab === 'received' ? 'active' : ''}}" bindtap="switchTab" data-tab="received">待评价</view>
    </view>
  </view>

  <!-- 订单列表 -->
  <scroll-view scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}" style="height:calc(100vh - 180rpx)" bindscrolltolower="onLoadMore">
    <view class="order-card card" wx:for="{{orders}}" wx:key="order_no" bindtap="goDetail" data-orderno="{{item.order_no}}">
      <view class="card-body">
        <view class="order-header flex-between">
          <text class="order-no">订单号: {{item.order_no}}</text>
          <text class="order-status {{item.statusInfo.tag}}">{{item.statusInfo.label}}</text>
        </view>
        <view class="order-items">
          <view class="order-preview-item" wx:for="{{item.items}}" wx:key="id" wx:for-item="oi">
            <image class="order-item-thumb" src="{{oi.image}}" mode="aspectFill" />
            <view class="order-item-detail flex-1">
              <view class="oi-name text-ellipsis">{{oi.product_name}}</view>
              <view class="flex-between mt-8">
                <text class="oi-price">¥{{oi.price}} x {{oi.quantity}}</text>
                <text class="oi-subtotal">¥{{oi.subtotal}}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="order-footer flex-between">
          <text class="order-time">{{item.created_at}}</text>
          <text class="order-amount">实付: <text class="price">¥{{item.pay_amount}}</text></text>
        </view>
        <view class="order-actions flex-row" style="justify-content:flex-end;gap:16rpx;margin-top:16rpx" wx:if="{{item.status === 'pending_pay' || item.status === 'shipped' || item.status === 'received'}}">
          <button wx:if="{{item.status === 'pending_pay'}}" class="btn-primary btn-small" catchtap="onPay" data-orderno="{{item.order_no}}">立即付款</button>
          <button wx:if="{{item.status === 'pending_pay'}}" class="btn-plain btn-small" catchtap="onCancel" data-orderno="{{item.order_no}}">取消订单</button>
          <button wx:if="{{item.status === 'shipped'}}" class="btn-primary btn-small" catchtap="onConfirm" data-orderno="{{item.order_no}}">确认收货</button>
          <button wx:if="{{item.status === 'received'}}" class="btn-plain btn-small" catchtap="onReview" data-orderno="{{item.order_no}}">去评价</button>
        </view>
      </view>
    </view>

    <!-- 加载状态/空状态 -->
    <load-more
      wx:if="{{orders.length > 0}}"
      status="{{loadStatus}}"
      bind:retry="onLoadMore"
    />
    <empty-state
      wx:elif="{{!loading && loadStatus !== 'loading'}}"
      icon="📋"
      text="暂无订单"
      showBtn="{{true}}"
      btnText="去逛逛"
      bind:action="goHome"
    />
  </scroll-view>
</view>
