<div class="content-heading  justify-content-between">
    <div>面试考场抽取 <a href="#" *ngIf="groupName" style="cursor:pointer">【{{groupName}}】</a>
    </div>
    <div class="float-right" *ngIf="currentStep === 'Extracting'">
      <div class="row">
        <!-- 打印功能 -->
        <div>
          <ngx-select [items]="printOption" [(ngModel)]="printDevice" class="wd-wide" 
            optionValueField="name" optionTextField="name"></ngx-select>
        </div>
        <div class="mr-3  form-check" style="padding-top: 0.5rem;">
            <div class="checkbox c-checkbox">
            <label>
                <input type="checkbox" [(ngModel)]="autoPrint"/>
                <span class="fa fa-check"></span>自动打印</label>
            </div>
        </div>
        <div class="mr-3"> <button type="button" class="btn btn-primary" (click)="goPrint()">打印</button></div>
        <!-- 打印功能 -->
  
      <div class="btn-group mb-1 mr-1 ml-3" dropdown>
        <button class="btn dropdown-toggle btn-secondary btn-lg" type="button" dropdownToggle>辅助功能
          <span class="caret"></span>
        </button>
        <div *dropdownMenu class="dropdown-menu modal-lg" role="menu">
          <a class="dropdown-item" href="#" (click)="goInit()">选择分组</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#" (click)="allInroom()">批量入场</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#" (click)="allCheckin()" *ngIf="FrameService.FrameOptr.login_name === 'admin'">批量排队</a>
        </div>
      </div>
  
      </div>
    </div>
  
</div>

<!-- 选择日期和分组 -->
<div class="card card-default" *ngIf="currentStep === 'Init'">
    <div class="card-body">
      <div class="form-horizontal" method="get">
        <fieldset>
          <div class="form-group row">
            <label class="col-lg-3 col-form-label text-right">请选择考点信息</label>
            <div class="col-lg-9">
              <div class="">
                <ngx-select [items]="agentArray" [(ngModel)]="extract.agent_id"
                            (ngModelChange)="requestDateArray()" [autoClearSearch]="true"
                            optionValueField="ly_agent_id" optionTextField="ly_agent_name"></ngx-select>
              </div>
            </div>
          </div>
        </fieldset>
  
        <fieldset *ngIf="extract.agent_id !== undefined">
          <div class="form-group row">
            <label class="col-lg-3 col-form-label text-right">请选择考试日期</label>
            <div class="col-lg-9">
              <div>
                <ngx-select [items]="dateArray" [(ngModel)]="extract.exam_date"
                            (ngModelChange)="requestGroupArray()" [autoClearSearch]="true"
                            optionValueField="exam_date" optionTextField="exam_date"></ngx-select>
              </div>
            </div>
          </div>
        </fieldset>
        
  
        <fieldset *ngIf="groupArray.length > 0 ">
          <div class="form-group row">
            <label class="col-lg-3 col-form-label text-right">请选择面试分组</label>
            <div class="col-lg-9">
              <div class="d-flex align-items-center mb-3">
                <ngx-select [items]="groupArray" [(ngModel)]="extract.ly_group_id" style="width:100%"
                            optionValueField="ly_group_id" optionTextField="group_name" (ngModelChange)="requestGroupTime()"></ngx-select>
              </div>
            </div>
          </div>
        </fieldset>

        <!-- 以前实现的方式
        <fieldset>
          <div class="form-group row mb">
            <label class="col-lg-3 col-form-label text-right">开考时段范围</label>
            <div class="col-lg-9">
              <div class="row">
                <div class="col-md-6">
                  <input class="form-control" type="text" [(ngModel)]="extract.start_time" maxlength="5"  id="startTime"/>
                </div>
                <div class="col-md-6">
                  <input class="form-control" type="text" [(ngModel)]="extract.end_time" maxlength="5" id="endTime" />
                </div>
              </div>
            </div>
          </div>
        </fieldset> -->

        <fieldset>
          <div class="form-group row mb">
            <label class="col-lg-3 col-form-label text-right">开考时段范围</label>
            <div class="col-lg-9">
              <div class="d-flex align-items-center mb-3">
                <ngx-select [items]="timeArr" [(ngModel)]="extract.time_range" style="width:100%"
                            optionValueField="time_value" optionTextField="time_name"></ngx-select>
              </div>
            </div>
          </div>
        </fieldset>

  
        <fieldset *ngIf="groupArray.length > 0 && extract.time_range">
          <div class="d-flex justify-content-center">
            <button class="btn btn-primary" type="button" (click)="startExtract()">开始抽取考场</button>
          </div>
        </fieldset>
      </div>
  
    </div>
</div>

<div class="card card-default mt-2" *ngIf="currentStep === 'Extracting'">
    <tabset class="bg-white p-0" justified="true">
        <tab>
            <ng-template tabHeading>
                <span class="table-sort">
                    <em class="fas fa-user fa-fw" ></em> 抽取考场
                </span>
            </ng-template>
            <div class="card card-default">
              <div class="card-body">
                <fieldset>
                    <div class="form-group row">
                      <div class="col-lg-12">
                        <div class="d-flex align-items-center mb-3">
                          <input class="form-control mt-1 cert_field" [(ngModel)]="extract.cert_id" maxlength="18"
                                 [readOnly]="this.extract.requesting === true"
                                 onfocus="this.select()" onmouseover="this.focus()" autocomplete="false" #certid
                                 (keyup.enter)="changeCertId()"/>
                        </div>
                      </div>
                    </div>
                  </fieldset>

                  <fieldset>
                    <div class="row" *ngIf="roomArray && roomArray.length>0">
                        <div class="col-lg-4 col-xs-4 mt-2" *ngFor="let room of roomArray">
                            <div class="list-group-item list-group-item-action">
                                <div class="media">
                                    <div class="media-body text-truncate">
                                        <p class="mb-1">
                                            <strong class="text-primary">
                                                <label>
                                                <span class="checkbox c-checkbox">
                                                    <input type="checkbox" [(ngModel)]="room.choose_flag"/>
                                                    <span class="fa fa-check"></span>
                                                </span></label>
                                                <span>第{{room.room_seq}}考场：{{room.group_name}} {{room.room_addr}}</span>
                                            </strong>
                                         </p>
                                        <p class="mb-1" style="font-size: 18px;">本时段已安排：【<span class="text-warning text-1-3">{{room.real_queue_total}}</span>】
                                            <span class="ml-3"><button type="button" class="btn btn-primary btn-sm" (click)="startInRoom(room.ly_room_id, room.real_queue_total)">进场</button></span>
                                            <span class="ml-3"><button type="button" class="btn btn-info btn-sm" (click)="showModal(room)">详情</button></span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>

              </div>
            </div>
        </tab>

          <tab>
            <ng-template tabHeading>
                <span class="table-sort">
                    <em class="fas fa-user fa-fw"></em> 已扫描考生
                </span>
            </ng-template>
            <div class="card card-default">
              <div class="card-body">
                <table class="table table-striped table-hover table-bordered" >
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>考生姓名</th>
                            <th>证件号码</th>
                            <th>抽取到的考场</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let s of allStdArr; let i = index;">
                            <td>{{i+1}}</td>
                            <td>{{s.std_name}}</td>
                            <td>{{s.cert_id}}</td>
                            <td>{{s.subjectArray[0].group_name}}-{{s.subjectArray[0].ly_room_addr}} 第【{{s.subjectArray[0].ly_room_index}}】考场</td>
                        </tr>
                    </tbody>
                </table>
              </div>
            </div>
          </tab>

    </tabset>
   
</div>


