<div class="content-heading  justify-content-between">
  <div style="font-weight: bold;">候考检录
    <span *ngIf="currentStep === 'Checking' && totalMap['std_total']>0">共【{{totalMap['std_total']}}】考生<span
        *ngIf="totalMap['checkin_total']">
        ，已检录【<span class="text-success">{{totalMap['checkin_total']}}</span>】,未检录【<span
          class="text-danger">{{totalMap['no_checkin_total']}}</span>】</span>
    </span>
  </div>
  <div class="float-right" *ngIf="currentStep === 'Checking'">
    <div class="row">
      <!-- <div class="mr-3"> <button type="button" class="btn btn-primary" (click)="getPrint()">选择打印机</button></div> -->
      <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)="optrAllGroup(true)">启用读卡器</a>
          <div class="dropdown-divider"></div> -->
           <a class="dropdown-item" href="#" (click)="allCheckIn()">一键检录</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>
              <!--
              <select class="form-control mt-1" [(ngModel)]="checkin.agent_id" (change)="requestDateArray()">
                <option [value]="v.ly_agent_id" *ngFor="let v of agentArray">{{v.ly_agent_name}}</option>
              </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>
              <!--
              <select class="form-control mt-1" [(ngModel)]="checkin.exam_date" (change)="requestGroupArray()">
                <option [value]="v.exam_date" *ngFor="let v of dateArray">{{v.exam_date}}</option>
              </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">请选择需要检录的分组 <br />
            <div class="form-check">
              <div class="checkbox c-checkbox">
                <label>
                  <input type="checkbox" [(ngModel)]="checkin.checked" (change)="checkAllGroup()" />
                  <span class="fa fa-check"></span>全选</label>
              </div>
            </div>
          </label>

          <div class="col-lg-9">
            <div class="row">
              <div class="col-lg-6" *ngFor="let s of groupArray">
                <div class="form-check">
                  <div class="checkbox c-checkbox">
                    <label>
                      <input type="checkbox" [(ngModel)]="s.checked" />
                      <span class="fa fa-check"></span>{{s.group_name}}</label>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </fieldset>

      <fieldset *ngIf="groupArray.length > 0">
        <div class="d-flex justify-content-center">
          <button class="btn btn-primary" type="button" (click)="startCheckin()">开始检录</button>
        </div>
      </fieldset>
    </div>

  </div>
</div>

<!-- 检录主窗口 -->
<div class="card card-default" *ngIf="currentStep === 'Checking'">
  <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_no}}</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="#"><h3>{{currentStd.real_checkin_seq}}号</h3></span>
                    </p>
                    <p class="m-0">检录序号
                    </p>
                  </div>
                  <div class="ml-auto">
                    <small class="text-muted ml-2"></small>
                  </div>
                </div>
              </div>
              -->
            </div>
            <div class="card-footer"><span class="text-sm">检录时间：{{currentStd.real_checkin_time}}</span></div>
          </div>
        </div>
        <!--
            <div class="col-lg-4 col-xs-4" *ngIf="stdArray && stdArray.length>0">
              <div class="card card-default">
                  <div class="card-title">已检录考生</div>
                </div>
                <scrollable class="list-group" height="300">
                  <div class="list-group-item list-group-item-action" (click)="goStdView(v)" *ngFor="let v of stdArray | orderBy : 'checkin_time' : true">
                    <div class="media">
                      <img class="align-self-start mx-2 circle thumb32" *ngIf="v.std_image" [src]="frameService.getParamValue('EnrolMaterialWebPath') + v.std_image" alt="Image">
                         <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>{{v.std_name}}</span>
                          </strong>
                        </p>
                        <p class="mb-1 text-sm">{{v.cert_id}}</p>
                      </div>
                      <div class="ml-auto">
                        <small class="text-muted ml-2">{{frameService.shortMinuteString(v.checkin_time)}}</small>
                      </div>
                    </div>
                  </div>

                </scrollable>
              </div>

            -->

        <div class="col-lg-4 col-xs-4"
          *ngIf="currentStd && currentStd.subjectArray && currentStd.subjectArray.length>0">
          <div class="card card-default">
            <div class="card-body">
              <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-home fa-stack-1x fa-inverse text-white"></em>
                      </span>
                    </div>
                    <div class="media-body text-truncate" *ngFor="let g of currentStd.GroupArray">
                      <p class="mb-1"><span class="text-purple m-0">第<span
                            class="text-1-6 text-warning">{{g.ly_room_index}}</span>考场：{{g.ly_room_addr}}</span>
                      </p>
                      <p class="m-0">
                        <small>{{g.group_name}}</small>
                      </p>
                    </div>
                  </div>
                </div>
              </div>

            </div>

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