<view class="orders-page">

    <!-- Status Tabs -->
    <view class="status-tabs-wrap">
        <scroll-view class="status-tabs" scroll-x enable-flex show-scrollbar="{{false}}">
            <view wx:for="{{statusTabs}}" wx:key="key"
                  class="status-tab {{activeStatus === item.key ? 'active' : ''}}"
                  bindtap="switchStatus" data-key="{{item.key}}">
                <text>{{item.label}}</text>
            </view>
        </scroll-view>
    </view>

    <scroll-view scroll-y class="page-scroll" show-scrollbar="{{false}}" enhanced="{{true}}" bindscrolltolower="onReachBottom">

    <view class="orders-list" wx:if="{{orders.length > 0}}">
        <view class="order-card" wx:for="{{orders}}" wx:key="id">
            <view class="order-header">
                <text class="order-time">{{item.createdAtStr}}</text>
                <t-tag size="small" variant="light" theme="{{item.statusInfo.theme}}">
                    {{item.statusInfo.text}}
                </t-tag>
            </view>

            <view class="order-body">
                <view class="order-img-wrap">
                    <image wx:if="{{item.item && item.item.image}}" src="{{item.item.image.url}}" mode="aspectFill" class="order-img" />
                    <view wx:else class="order-img-placeholder">
                        <t-icon name="gift" size="48rpx" color="#C5E1A5" />
                    </view>
                </view>
                <view class="order-info">
                    <text class="order-item-name">{{item.itemName}}</text>
                    <text class="order-type-tag">{{item.itemType === 'PHYSICAL' ? '实物' : (item.itemType === 'VIRTUAL' ? '虚拟' : '优惠券')}}</text>
                    <view class="order-cost-row">
                        <text class="order-cost-sun">☀️</text>
                        <text class="order-cost-val">-{{item.costSunlight}}</text>
                        <text class="order-qty" wx:if="{{item.quantity > 1}}">x{{item.quantity}}</text>
                    </view>
                </view>
            </view>

            <!-- Shipping Info (if physical and shipped) -->
            <view class="order-shipping" wx:if="{{item.trackingNo}}">
                <t-icon name="deliver" size="28rpx" color="#558B2F" />
                <text class="tracking-text">快递单号: {{item.trackingNo}}</text>
            </view>
        </view>
    </view>

    <!-- Loading / Empty -->
    <view class="state-footer" wx:if="{{isLoading}}">
        <t-loading theme="circular" size="40rpx" text="加载中..." inherit-color />
    </view>
    <view class="empty-state" wx:elif="{{!isLoading && orders.length === 0}}">
        <text class="empty-icon">📦</text>
        <text class="empty-title">暂无兑换记录</text>
        <text class="empty-desc">去兑换中心挑选心仪好礼吧</text>
    </view>
    <view class="state-footer" wx:elif="{{!hasMore && orders.length > 0}}">
        <text class="no-more">— 已经到底啦 —</text>
    </view>

    <view style="height: 60rpx;"></view>

    </scroll-view>
</view>

