<!--pages/merchant-orders/merchant-orders.wxml-->
<view class="sj-page">
  <!-- 顶部商品类型滑动 -->
  <view class="leixing-area">
    <scroll-view class="leixing-scroll" scroll-x enhanced show-scrollbar="{{false}}">
      <view class="leixing-container">
        <block wx:for="{{shangpinleixing}}" wx:key="id">
          <view
            class="leixing-item {{xuanzhongLeixingId == item.id ? 'leixing-active' : ''}}"
            data-id="{{item.id}}"
            bindtap="selectLeixing"
          >
            <image class="leixing-img" src="{{item.full_tupian_url}}" mode="aspectFill"/>
            <text class="leixing-name">{{item.jieshao || '类型'}}</text>
          </view>
        </block>
      </view>
    </scroll-view>
  </view>

  <!-- 搜索行 -->
  <view class="filter-row">
    <view class="search-box">
      <image class="search-icon" src="/images/icon_search.svg" mode="aspectFit"/>
      <input class="search-input" placeholder="搜索订单ID/介绍/昵称/接单员ID" value="{{searchKeyword}}" bindinput="onSearchInput" bindconfirm="onSearchConfirm" confirm-type="search"/>
      <view class="search-clear" wx:if="{{searchKeyword}}" bindtap="clearSearch"><text>✕</text></view>
    </view>
  </view>

  <!-- 待结算数量提示条（保留原功能） -->
  <view class="sj-pending-tip" wx:if="{{pendingCount > 0}}">
    <text class="sj-pending-icon"></text>
    <text class="sj-pending-text">待结算订单</text>
    <view class="sj-pending-badge">{{pendingCount}}</view>
  </view>

  <!-- 主体：左右布局 -->
  <view class="main-container">
    <!-- 左侧状态栏（固定） -->
    <view class="left-status">
      <block wx:for="{{statusList}}" wx:key="key">
        <view class="status-item {{currentStatusKey == item.key ? 'status-active' : ''}}" data-key="{{item.key}}" bindtap="switchStatus">
          <text class="status-name">{{item.name}}</text>
          <!-- 结算中状态旁边显示红色数字（保留原功能） -->
          <view class="status-dot" wx:if="{{currentStatusKey == item.key}}"></view>
          <view wx:if="{{item.key === 'jiesuanzhong' && pendingCount > 0}}" class="sj-status-badge">{{pendingCount}}</view>
        </view>
      </block>
    </view>

    <!-- 右侧包裹：撑出右边距，里面是 scroll-view -->
    <view class="right-wrapper">
      <scroll-view
        class="right-list"
        scroll-y enhanced show-scrollbar="{{false}}"
        refresher-enabled="{{true}}"
        refresher-threshold="80"
        refresher-default-style="black"
        refresher-background="#f5f6fa"
        refresher-triggered="{{scrollViewRefreshing}}"
        bindrefresherrefresh="onPullDownRefresh"
        bindscrolltolower="onReachBottom"
        lower-threshold="50"
      >
        <view class="refresher-slot" slot="refresher">
          <text wx:if="{{scrollViewRefreshing}}" class="refreshing-text">⚡ 正在刷新...</text>
          <text wx:else class="pull-text">▼ 下拉刷新</text>
        </view>

        <!-- 内容容器 -->
        <view class="list-inner">
          <!-- 加载中 -->
          <view wx:if="{{isLoading && currentList.length === 0}}" class="loading-state">
            <view class="loading-spinner"></view>
            <text class="loading-tip">加载订单中...</text>
          </view>

          <!-- 空状态 -->
          <view wx:elif="{{!isLoading && currentList.length === 0}}" class="empty-state">
            <image class="empty-img" src="/images/empty-order.png" mode="aspectFit"/>
            <text class="empty-text">暂无订单</text>
            <text class="empty-subtext">快去派发订单吧</text>
          </view>

          <!-- 订单卡片列表 -->
          <block wx:for="{{currentList}}" wx:key="dingdan_id">
            <view class="order-card {{item.zhuangtai === 8 ? 'sj-card-jiesuan' : ''}}" data-item="{{item}}" bindtap="goToSjDingdanXiangqing">
              <!-- 创建时间 -->
              <view class="card-time" wx:if="{{item.create_time}}">{{item.create_time}}</view>
              <!-- 内容行 -->
              <view class="card-content-row">
                <image class="card-img" src="{{item.tupian}}" mode="aspectFill" binderror="onImageError"/>
                <view class="card-info">
                  <view class="card-title">{{item.jieshao || '暂无描述'}}</view>
                  <view class="card-id" wx:if="{{item.dingdan_id}}">ID: {{item.dingdan_id}}</view>
                  <view class="card-nicheng" wx:if="{{item.nicheng}}">昵称: {{item.nicheng}}</view>
                </view>
                <view class="card-right">
                  <view class="card-status {{item.zhuangtai === 8 ? 'sj-status-jiesuan' : ''}}" style="color: {{item.zhuangtaiColor}};">{{item.zhuangtaiZh}}</view>
                  <view class="card-price">
                    <text class="price-symbol">¥</text>
                    <text class="price-number">{{item.jine || '0.00'}}</text>
                  </view>
                </view>
              </view>
            </view>
          </block>

          <!-- 上拉加载更多提示 -->
          <view class="load-more" wx:if="{{hasMore && currentList.length > 0 && !isLoadingMore}}">
            <text class="load-more-text">上拉加载更多</text>
          </view>

          <!-- 加载中 -->
          <view class="loading-more-state" wx:if="{{isLoadingMore}}">
            <view class="mini-spinner"></view>
            <text>加载中...</text>
          </view>

          <!-- 🆕 手动加载更多按钮 -->
          <view class="manual-load-more" wx:if="{{hasMore && currentList.length > 0 && !isLoadingMore}}">
            <button class="load-more-btn" bindtap="onLoadMoreTap" loading="{{false}}">点击加载更多</button>
          </view>

          <!-- 没有更多 -->
          <view class="no-more" wx:if="{{!hasMore && currentList.length > 0}}">
            <text>—— 没有更多了 ——</text>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</view>
<global-notification id="global-notification" />
<tab-bar />