<!-- pages/dashboardModule/supervisorPerformance/supervisorPerformance.wxml -->
<view class="flex-col page">
  <!-- 标题 -->
  <text class="self-center text">{{ showRole }}业绩报表</text>

  <!-- 搜索表单 -->
  <view class="flex-col self-stretch mt-19">
    <view class="flex-col section">
      <!-- 主管名称 -->
      <view class="flex-col items-start">
        <text class="font text_2">{{ showRole }}名称</text>
        <view class="flex-col justify-start items-start text-wrapper mt-7">
          <input
            class="text_3 font text_4"
            placeholder="请输入{{ showRole }}名称"
            bindinput="onNameInput"
            value="{{nickName}}"
          />
        </view>
      </view>

      <!-- 手机号 -->
      <view class="flex-col items-start mt-24">
        <text class="font text_1">手机号</text>
        <view class="flex-col justify-start items-start text-wrapper_1 mt-8">
          <input
            class="text_3 font text_5"
            placeholder="请输入手机号"
            bindinput="onPhoneInput"
            value="{{phoneNumber}}"
            type="number"
            maxLength="11"
          />
        </view>
      </view>

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

  <!-- 业绩列表，未搜索前不显示 -->
  <block wx:if="{{showList}}">
    <view class="flex-col justify-start mt-28">
      <view class="flex-col">
        <view
          class="flex-col list-item mt-25"
          wx:for="{{performanceList}}"
          wx:for-item="item"
          wx:for-index="index"
          wx:key="item.id"
        >
          <!-- 基本信息 -->
          <view class="flex-row justify-between self-stretch group">
            <view class="flex-col items-start self-center">
              <text class="font_2">编号：{{index + 1}}</text>
              <text class="font text_8 mt-13">主管：{{item.nickName}}</text>
            </view>
            <view class="flex-col justify-start self-start text-wrapper_4" bind:tap="changeStaff" data-id="{{ item.userId }}">
              <text class="font_3 text_7">员工绩效排名>></text>
            </view>
          </view>

          <!-- 手机号 & 复制 -->
          <view class="flex-row self-start section_3">
            <text class="font_4">手机号：{{item.phoneNumber}}</text>
            <text
              class="font_3 text_9"
              bindtap="onCopyPhone"
              data-phone="{{item.phoneNumber}}"
            >复制</text>
          </view>

          <!-- 员工数 & 抽成比例 -->
          <view class="flex-row self-stretch group_2">
            <view class="flex-col justify-start text-wrapper_5">
              <text class="font_4 text_10">员工数：{{item.empCount}}</text>
            </view>
            <view class="flex-col justify-start text-wrapper_6 ml-10">
              <text class="font_4 text_11">比例：{{item.ratePercent}}%</text>
            </view>
          </view>

          <!-- 业绩网格 -->
          <view class="self-stretch group_3">
            <view class="flex-col items-start grid-item">
              <text class="font_5 text_12">下单量</text>
              <text class="font_6 mt-18">{{item.orderCount}}</text>
            </view>
            <view class="flex-col items-start grid-item_2">
              <text class="font_5 text_13">总订单</text>
              <text class="font_6 text_15 mt-18">￥{{item.totalAmount}}</text>
            </view>
            <view class="flex-col items-start grid-item_3">
              <text class="font_5 text_14">净成交</text>
              <text class="font_6 text_16 mt-17">￥{{item.netAmount}}</text>
            </view>
            <view class="flex-col items-start grid-item_4">
              <text class="font_5 text_17">待释放</text>
              <text class="font_6 text_18 mt-18">￥{{item.toRelease}}</text>
            </view>
            <view class="flex-col items-start grid-item_5">
              <text class="font_5">可结算</text>
              <text class="font_6 mt-18">{{item.toSettle}}</text>
            </view>
            <view class="flex-col items-start grid-item_6">
              <text class="font_5">已结算</text>
              <text class="font_6 text_19 mt-18">￥{{item.settled}}</text>
            </view>
            <view class="flex-col items-start grid-item_7">
              <text class="font_5 text_20">推广数</text>
              <text class="font_6 mt-17">{{item.promoCount}}</text>
            </view>
            <view class="flex-col items-start grid-item_8">
              <text class="font_5 text_21">退款</text>
              <text class="font_6 text_23 mt-18">￥{{item.refunded}}</text>
            </view>
            <view class="flex-col items-start grid-item_9">
              <text class="font_5 text_22">已回退</text>
              <text class="font_6 text_24 mt-18">￥0</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </block>
</view>
