<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)="allExtract()">一键抽取</a>
        <!-- <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#" (click)="optrAllGroup(true)">启用读卡器</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)]="checkin.agent_id"
                          (ngModelChange)="requestDateArray()" [autoClearSearch]="true"
                          optionValueField="ly_agent_id" optionTextField="ly_agent_name"></ngx-select>
            </div>
          </div>
        </div>
      </fieldset>

      <fieldset *ngIf="checkin.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)]="checkin.exam_date"
                          (ngModelChange)="requestGroupArray()" [autoClearSearch]="true"
                          optionValueField="exam_date" optionTextField="exam_date"></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)]="checkin.start_time" maxlength="5"  id="startTime"/>
              </div>
              <div class="col-md-6">
                <input class="form-control" type="text" [(ngModel)]="checkin.end_time" maxlength="5" id="endTime" />
              </div>
            </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)]="checkin.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="d-flex align-items-center mb-3">
              <ngx-select [items]="timeArr" [(ngModel)]="checkin.time_range" style="width:100%"
                          optionValueField="time_value" optionTextField="time_name"></ngx-select>
            </div>
          </div>
        </div>
      </fieldset>

      <fieldset *ngIf="groupArray.length > 0 && checkin.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" *ngIf="currentStep === 'Extracting'">
  <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)]="checkin.cert_id" maxlength="18"
                   [readOnly]="this.checkin.requesting === true"
                   onfocus="this.select()" onmouseover="this.focus()" autocomplete="false" #certid
                   (keyup.enter)="changeCertId()"/>
          </div>
        </div>
      </div>
    </fieldset>

    <fieldset>
      <div class="row">
        <div class="col-lg-4 col-xs-4" *ngIf="currentStd && currentStd.std_image">
          <div class="text-center">
            <div class="">
              <img class="img-fluid rounded " style="width:256px;height:300px;"
                   [src]="currentStd.std_image"
                   alt=""/>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-xs-4" *ngIf="currentStd">
          <div class="card card-default">
            <div class="card-header">
              <div class="card-title">当前考生信息</div>
            </div>
            <div class="list-group">
              <div class="list-group-item">
                <div class="media">
                  <div class="align-self-start mr-2">
                         <span class="fa-stack">
                            <em class="fa fa-circle fa-stack-2x text-purple"></em>
                            <em class="fas fa-user fa-stack-1x fa-inverse text-white"></em>
                         </span>
                  </div>
                  <div class="media-body text-truncate">
                    <p class="mb-1"><span class="text-purple m-0">{{currentStd.cert_id}}</span>
                    </p>
                    <p class="m-0">
                      <small>{{currentStd.cert_type | frameDict:'StdCertType'}}</small>
                    </p>
                  </div>
                </div>
              </div>
              <div class="list-group-item">
                <div class="media">
                  <div class="align-self-start mr-2">
                         <span class="fa-stack">
                            <em class="fa fa-circle fa-stack-2x text-info"></em>
                            <em class="far fa-user fa-stack-1x fa-inverse text-white"></em>
                         </span>
                  </div>
                  <div class="media-body text-truncate">
                    <p class="mb-1"><span class="text-info m-0 text-1-6">{{currentStd.std_name}}</span>
                    </p>
                    <p class="m-0">
                      <small>{{currentStd.std_sex}}</small>
                    </p>
                  </div>
                </div>
              </div>
              <!--
              <div class="list-group-item">
                <div class="media">
                  <div class="align-self-start mr-2">
                         <span class="fa-stack">
                            <em class="fa fa-circle fa-stack-2x text-primary"></em>
                            <em class="fa fa-exclamation fa-stack-1x fa-inverse text-white"></em>
                         </span>
                  </div>
                  <div class="media-body text-truncate">
                    <p class="mb-1"><span class="text-primary m-0">{{currentStd.ticket_num}}</span>
                    </p>
                    <p class="m-0">准考证号</p>
                  </div>
                </div>
              </div>
              -->
              <div class="list-group-item">
                <div class="media">
                  <div class="align-self-start mr-2">
                         <span class="fa-stack">
                            <em class="fa fa-circle fa-stack-2x text-success"></em>
                            <em class="far fa-clock fa-stack-1x fa-inverse text-white"></em>
                         </span>
                  </div>
                  <div class="media-body text-truncate">
                    <p class="mb-1"><span class="text-success m-0" href="#">第<span
                      class="text-1-6 text-warning">{{currentStd.subjectArray[0].ly_room_index}}</span>考场</span>
                    </p>
                    <p class="m-0">
                      <span class="text-purple m-0">{{currentStd.subjectArray[0].ly_room_addr}}</span>
                    </p>
                  </div>
                  <div class="ml-auto">
                    <small class="text-muted ml-2"></small>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-lg-4 col-xs-4"
             *ngIf="roomArray && roomArray.length>0">
          <div class="list-group-item list-group-item-action"
               *ngFor="let room of roomArray">
            <div class="media">
              <div class="media-body text-truncate">
                <p class="mb-1">
                  <strong class="text-primary">
                    <span class="circle bg-success circle-lg text-left"></span>
                    <span>第{{room.room_seq}}考场：{{room.room_addr}}</span>
                  </strong>
                </p>
                <p class="mb-1 text-sm">本时段已安排：【<span class="text-warning text-1-3">{{room.ly_std_total}}</span>】</p>
              </div>
            </div>
          </div>

        </div>

      </div>
    </fieldset>
  </div>
</div>
