<!-- @Template: 人员选择控件 -->
<ion-modal-view class="gloomy-bg">
  <ion-header-bar>
    <button class="button button-icon no-animation" ng-if="paths.length" ng-click="back()">返回</button>
    <h1 class="title">选择用户</h1>
    <button class="button button-icon" ng-click="modal.hide()">取消</button>
  </ion-header-bar>

  <ion-content class="has-footer" delegate-handle="us-modal">
    <div class="list us-org-list" ng-if="!paths.length || !((departments | isEmpty) && (positions | isEmpty))">
      <!-- 首页 -->
      <div class="item item-enter" ng-if="!paths.length" ng-click="openDepartment()">
        按部门
        <i class="ion-ios-arrow-right"></i>
      </div>
      <div class="item item-enter" ng-if="!paths.length" ng-click="openPosition()">
        按岗位
        <i class="ion-ios-arrow-right"></i>
      </div>

      <!-- 子部门页面 -->
      <div class="item item-divider" ng-if="paths.length && !(departments | isEmpty)">部门</div>
      <div class="item item-enter" ng-if="paths.length" ng-repeat="dept in departments" ng-click="openDepartment(dept.deptid)">
        {{ dept.deptname }}
        <i class="ion-ios-arrow-right"></i>
      </div>

      <!-- 岗位列表 -->
      <div class="item item-divider" ng-if="paths.length && !(positions | isEmpty)">岗位</div>
      <div class="item item-enter" ng-if="paths.length" ng-repeat="pos in positions" ng-click="openPosition(pos.positionid)">
        {{ pos.posname }}
        <i class="ion-ios-arrow-right"></i>
      </div>
    </div>
    
    <ion-list>
      <div class="item item-checkbox item-indent" ng-if="isSelectAllShow()">
        <label class="checkbox">
          <input type="checkbox" ng-click="toggleSelectAll($event)">
        </label>
        <h2 class="coyness">全选</h2>
      </div>

      <div class="item item-divider" id="userselect_{{usid}}_{{letter}}" ng-repeat-start="(letter, uids) in groups">{{letter}}</div>

      <div class="item item-checkbox" ng-repeat-end ng-repeat="uid in uids track by $index">
        <label class="checkbox">
          <input type="checkbox" value="{{uid}}" ng-checked="isSelected(uid)" ng-click="toggleSelect(uid)">
        </label>
        {{uid|userInfo:'realname'}}
      </div>
      <div class="list-empty-tip" ng-if="(groups | isEmpty) && (departments | isEmpty) && (positions | isEmpty)">没有可选择的人员了</div> 
    </ion-list>

    <ion-infinite-scroll 
      on-infinite="loadMore()"
      ng-if="hasLoadMore()"
      distance="1%">
    </ion-infinite-scroll>

  </ion-content>
  
  <div class="bar bar-footer us-footer-bar">
    <div class="us-scroll-wrap">
      <ion-scroll delegate-handle="us-scroll" direction="x" scrollbar-x="false" >
        <div class="us-selected">
          <div class="us-selected-item" ng-repeat="uid in selected" ng-click="toggleSelect(uid)">
            <img width="30" height="30" avatar="{{ uid | userInfo:'avatar_middle' | fullUrl }}" >
          </div>
        </div>
      </ion-scroll>
    </div>
    <div class="us-footer-button-bar">
      <button type="button" class="button button-positive fr" ng-disabled="!selected.length" ng-click="save()">确定({{ getSelectedCount() }})</button>
    </div>
  </div>

  <div letter="userselect_{{usid}}" class="has-header has-footer"></div>
</ion-modal-view>