<view class="flex-col page">
  <!-- 页面标题 -->
  <text class="self-center text">{{ showRole }}绩效排名</text>
  
  <!-- 表单区域 -->
  <view class="flex-col self-stretch mt-27">
    <view class="flex-col section">
      
      <!-- 主管名称 -->
      <text class="self-start font text_2">{{ showRole }}名称</text>
      <view class="flex-col justify-start items-start self-start text-wrapper">
        <input class="text_3 font text_4" placeholder="请输入{{ showRole }}名称" bindinput="onNameInput"/>
      </view>
      
      <!-- 手机号 -->
      <text class="self-start font text_5">手机号</text>
      <view class="flex-col justify-start items-start self-start text-wrapper_1">
        <input class="text_3 font text_6" placeholder="请输入手机号" bindinput="onPhoneInput"
        maxLength="11" type="number"/>
      </view>
      
      <!-- 排序条件选择 -->
      <text class="self-start font text_7">排序条件</text>
      <view class="flex-row equal-division">
        <view class="flex-row justify-between section_2 section_1">
          <picker wx:if="{{ role === 'manager' }}" mode="selector" range="{{sortFieldsByManager}}" bindchange="onSortFieldChange">
            <view class="flex-row justify-between section_2">
              <text class="font text_1">{{selectedSortField}}</text>
              <image class="image" src="./images/bottom.png"/>
            </view>
          </picker>
          <picker mode="selector" wx:if="{{ role === 'supervisor' || role === 'staff'}}" range="{{sortFieldsBySupervisor}}" bindchange="onSortFieldChange">
            <view class="flex-row justify-between section_2">
              <text class="font text_1">{{selectedSortField}}</text>
              <image class="image" src="./images/bottom.png"/>
            </view>
          </picker>
        </view>
        
        <!-- 排序顺序 -->
        <view class="flex-row justify-between section_2 section_3 ml-16">
          <picker mode="selector" range="{{sortOrders}}" bindchange="onSortOrderChange">
            <view class="flex-row justify-between section_2">
              <text class="font text_16">{{selectedSortOrder}}</text>
              <image class="image" src="./images/bottom.png"/>
            </view>
          </picker>
        </view>
      </view>

      <!-- 搜索按钮 -->
      <view class="flex-col justify-start items-center self-stretch text-wrapper_2" bindtap="onSearch">
        <text class="font text_8" >搜索</text>
      </view>
    </view>
  </view>

  <!-- 查询结果展示 -->
  <view class="flex-col mt-26">
    <view class="flex-col list-item mt-19" wx:for="{{items}}" wx:for-item="item" wx:for-index="index" wx:key="index">
      <!-- 排名 -->
      <view class="flex-row">
        <view class="flex-col justify-start items-center text-wrapper_4">
          <text class="font_2 text_9">{{index + 1}}</text>
        </view>
        <!-- 主管信息 -->
        <view class="flex-row items-center self-start group ml-20">
          <text class="font_3">{{item.nickName}}</text>
          <text class="font_4 ml-7">{{item.phoneNumber}}</text>
        </view>
      </view>
      
      <!-- 绩效数据 -->
      <view class="flex-row mt-14">
        <view class="flex-col justify-start items-center text-wrapper_5" wx:if="{{k === '1'}}">
          <text class="font_5 text_11">员工：{{item.empCount}}</text>
        </view>
        <view class="flex-col justify-start items-center text-wrapper_6">
          <text class="font_5 text_12">推广：{{item.promoCount}}</text>
        </view>
        <view class="flex-col justify-start items-center text-wrapper_7 ml-8">
          <text class="font_5">下单：{{item.orderCount}}</text>
        </view>
      </view>
      
      <!-- 订单金额 -->
      <view class="flex-row mt-14">
        <view class="flex-col justify-start text-wrapper_8">
          <text class="font_5 text_13">总额：￥{{item.totalAmount}}</text>
        </view>
        <view class="flex-col justify-start text-wrapper_9 ml-16">
          <text class="font_5 text_14">净成交：￥{{item.netAmount}}</text>
        </view>
      </view>
    </view>
  </view>
</view>
