<div class="content-heading  justify-content-between">
    <div style="font-weight: bold;">候考检录
      <span *ngIf="step === 'Checking' && total?.std_total>0">共【{{total?.std_total}}】考生
        <span  *ngIf="total.checkin_total">  ，已检录【<span class="text-success">{{total?.checkin_total}}</span>】,未检录【
        <span  class="text-danger" style="cursor: pointer" (click)="export()">{{total?.no_checkin_total}}</span>】</span>
      </span>
    </div>
    <div class="float-right" *ngIf="step === 'Checking'">
      <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>
          </div>
        </div>

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

<!--选择批次日期分组-->
<div class="card card-default" *ngIf="step === '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]="schoolArr" [(ngModel)]="checkin.school_id" (ngModelChange)="listBatch(checkin.school_id)"
                    [autoClearSearch]="true" optionValueField="school_id" optionTextField="school_name"></ngx-select>
                </div>
              </div>
            </div>
          </fieldset>


        <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]="batchArr" [(ngModel)]="checkin.batch_id" (ngModelChange)="listExamDate(checkin.batch_id)"
                  [autoClearSearch]="true" optionValueField="batch_id" optionTextField="batch_name"></ngx-select>
              </div>
            </div>
          </div>
        </fieldset>

        <fieldset *ngIf="checkin.batch_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]="dateArr" [(ngModel)]="checkin.exam_date" (ngModelChange)="listGroup(checkin.batch_id,checkin.exam_date)"
                  [autoClearSearch]="true" optionValueField="exam_date" optionTextField="exam_date"></ngx-select>
              </div>
            </div>
          </div>
        </fieldset>

        <fieldset *ngIf="checkin.exam_date !== undefined && timeArr.length > 1 ">
          <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]="timeArr" [(ngModel)]="checkin.time_type"
                  [autoClearSearch]="true" optionValueField="dict_value" optionTextField="dict_text"></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="groupArr && groupArr.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 groupArr">
                  <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="groupArr && groupArr.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="step === '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]="FrameService.getParamValue('EnrolMaterialPath')+currentStd.std_image" alt="" ngxViewer/>
              </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>
                    </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>
              <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="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> -->
                      <ul class="list-group list-group-flush">
                        <!-- 第 {{g.ly_room_index}}考场： -->
                        <li class="list-group-item" *ngFor="let g of currentStd.GroupArray">{{g.ly_room_addr}}({{g.group_name}})
                        </li>
                        <li  class="list-group-item">入场序号：{{currentStd.subjectArray[0].real_exam_seq}}</li>
                      </ul>
                    </div>
                  </div>
                  <div class="list-group-item"  *ngIf="showEntryInfo()">
                    <div class="media">
                      <div class="align-self-start mr-2">
                      <span class="fa-stack">
                        <em class="fa fa-circle fa-stack-2x text-danger"></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" style="zoom: 2">入座号：<span style="zoom: 3">{{currentStd.real_checkin_random}}</span></span>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>

              </div>

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





