<view class="sub-page sj-page">

  <view class="status-bar" style="height:{{statusBar}}px"></view>

  <view class="sub-nav flexb">

    <text class="back" bindtap="goBack">‹</text>

    <text class="sub-nav-title">客服列表</text>

    <text class="back placeholder"></text>

  </view>

  <view class="filter-row sj-mx20">
    <view class="search-box">
      <image class="search-icon" src="/images/icon_search.svg" mode="aspectFit"/>
      <input class="search-input" placeholder="搜索用户ID或备注" value="{{searchKeyword}}" bindinput="onSearchInput" confirm-type="search"/>
      <view class="search-clear" wx:if="{{searchKeyword}}" bindtap="clearSearch"><text>✕</text></view>
    </view>
  </view>

  <scroll-view scroll-y class="sub-scroll" enhanced show-scrollbar="{{false}}">

    <view wx:for="{{displayList}}" wx:key="id" class="kefu-card sj-mx20 {{item.isDisabled ? 'disabled-card' : ''}}">

      <view class="kefu-head flex">

        <image class="kefu-av" src="{{item.avatar}}" mode="aspectFill"/>

        <view class="kefu-info">

          <view class="flex">

            <text class="kefu-name">{{item.nickname}}</text>

            <text class="badge badge-role">{{item.role_name || '客服'}}</text>

            <text wx:if="{{item.isChief}}" class="badge badge-chief">总管</text>

            <text wx:if="{{item.isSelf}}" class="badge badge-self">本人</text>

            <text wx:if="{{item.isFinance}}" class="badge badge-finance">财务</text>

            <text wx:if="{{item.isDisabled}}" class="badge badge-off">已封禁</text>

          </view>

          <view class="uid-row flex">
            <text class="kefu-uid">ID: {{item.uid}}</text>
            <text class="copy-link" bindtap="copyUid" data-uid="{{item.uid}}">复制</text>
          </view>
          <view wx:if="{{item.merchant_remark}}" class="remark-row">备注：{{item.merchant_remark}}</view>

        </view>

      </view>

      <view class="quota-row">

        <text class="quota-label">剩余额度</text>

        <text class="quota-val">¥{{item.quotaAvailable}}</text>

      </view>

      <view class="kefu-stats flexa">

        <view class="stat-box flexmc">

          <text class="stat-n">{{item.todayDispatchCount}}</text>

          <text class="stat-l">今日派单</text>

        </view>

        <view class="stat-box flexmc">

          <text class="stat-n">{{item.dispatchCount}}</text>

          <text class="stat-l">累计派单</text>

        </view>

        <view class="stat-box flexmc">

          <text class="stat-n">{{item.settleCount}}</text>

          <text class="stat-l">结单数</text>

        </view>

        <view class="stat-box flexmc">

          <text class="stat-n">{{item.refundCount}}</text>

          <text class="stat-l">退款数</text>

        </view>

      </view>

      <view class="kefu-stats amount-stats flexa">

        <view class="stat-box flexmc">

          <text class="stat-n stat-amt">¥{{item.todayDispatchAmount}}</text>

          <text class="stat-l">今日派单额</text>

        </view>

        <view class="stat-box flexmc">

          <text class="stat-n stat-amt">¥{{item.dispatchAmount}}</text>

          <text class="stat-l">派单金额</text>

        </view>

        <view class="stat-box flexmc">

          <text class="stat-n stat-amt">¥{{item.settleAmount}}</text>

          <text class="stat-l">结算金额</text>

        </view>

        <view class="stat-box flexmc">

          <text class="stat-n stat-amt">¥{{item.refundAmount}}</text>

          <text class="stat-l">退款金额</text>

        </view>

      </view>

      <view class="kefu-actions flexa">
        <text class="act" bindtap="onEditRemark" data-id="{{item.id}}" data-remark="{{item.merchant_remark}}">备注</text>
        <text class="act" bindtap="goStaffOrders" data-id="{{item.id}}" data-label="{{item.nickname}}">查看订单</text>
      </view>

      <view wx:if="{{!item.isSelf}}" class="kefu-actions flexa kefu-actions--sub">

        <text class="act" bindtap="onAllocate" data-id="{{item.id}}">划额度</text>

        <text class="act" bindtap="onRevoke" data-id="{{item.id}}" data-available="{{item.quotaRevokable}}">收回额度</text>

        <text class="act" bindtap="onAssignRole" data-id="{{item.id}}">换角色</text>

        <text class="act" bindtap="onToggleDisable" data-id="{{item.id}}" data-disabled="{{item.isDisabled}}">{{item.isDisabled ? '解封' : '封禁'}}</text>

        <text wx:if="{{isOwner}}" class="act act-del" bindtap="onRemove" data-id="{{item.id}}">移除</text>

      </view>

      <view wx:else class="self-tip sj-mx20">本人账号不可在此操作，如需调整请联系商家老板</view>

    </view>

    <view wx:if="{{!displayList.length}}" class="load-tip">暂无客服成员</view>

    <view class="load-tip link-tip" bindtap="goAudit">操作日志 ›</view>

    <view class="load-tip link-tip" bindtap="goRank">客服排行 ›</view>

  </scroll-view>

</view>

