<div class="content-heading  justify-content-between">
  <div>面试拍照<span *ngIf="currentStep === 'Init'"> - 请输入考场密码</span>
  </div>
  <div class="float-right" *ngIf="currentStep !== 'Init'">
    <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>
    </div>
  </div>
</div>


<!-- 主窗口 -->
<div class="card card-default m-5" *ngIf="currentStep === 'Init'">
  <div class="card-body">
    <fieldset>
      <div class="form-group row">
        <div class="col-lg-11">
          <div class="d-flex align-items-center mb-3">
            <input class="form-control mt-1 cert_field" [(ngModel)]="room_key" maxlength="12"
              (keyup.enter)="getRoomStatus()" />
          </div>
        </div>
        <div class="col-lg-1 align-items-center">
          <input type="button" class="btn btn-primary" style="width:100%;height:80%;" value="确定"
            (click)="getRoomStatus()">
        </div>
      </div>
    </fieldset>
  </div>
</div>

<div class="card card-default m-5" *ngIf="currentStep === 'Confirm'">
  <div class="jumbotron">
    <div class="row">
      <div class="col-lg-3 text-danger">
        <div class="text-center">
          <img class="img-fluid" style="width: 180px;" src="assets/img/angular.svg" />
        </div>
      </div>
      <div class="home-text col-lg-9 ">
        <h1 class="home-text-big">{{currentRoom.room_addr}}</h1>
        <h1 class="home-text-big">{{currentRoom.group.group_name}}</h1>
        <h1 class="home-text-big">第{{currentRoom.room_seq}}考场</h1>
        <h1 class="home-text-big">{{currentRoom.exam_date}}</h1>
        <h1 class="home-text-big">{{currentRoom.exam_status}}</h1>
        <h1 class="home-text-big">
          <span *ngIf="currentRoom.group.pack_flag === 'Active'">标准人数：{{currentRoom.group.pack_std_num}}
            <br />最大人数：{{currentRoom.group.pack_std_max}}</span>
          <span *ngIf="currentRoom.group.pack_flag !== 'Active'">最大候考人数：{{currentRoom.group.room_wait_num}}
            <br />&nbsp;</span>
        </h1>
        <h1 class="home-text-big">
          <span *ngIf="currentRoom.group.pack_flag === 'Active'" >分组考试：开启</span>
          <span *ngIf="currentRoom.group.pack_flag !== 'Active'" >单一考试模式</span>
        </h1>
        <h1 class="home-text-big">
          <span>入场限制：{{currentRoom.group.room_limit_type | frameDict :'InterviewRoomLimitType'}}</span>
        </h1>
      </div>
      <div class="row">
        <!-- <ngx-select [items]="timeArray" [(ngModel)]="ly_time_id" style="width:150px;"
                    *ngIf="timeArray!==undefined && timeArray.length>0"
                    optionValueField="ly_time_id" optionTextField="time_name"></ngx-select> -->
        <a class="btn btn-success btn-primary ml-4" style="font-size: 40px;" href="#" *ngIf="currentRoom.exam_status === 'Examing'"
          (click)="inRoom()">考试中，开始拍照</a>
        <a class="btn  btn-info  ml-4" href="#" *ngIf="currentRoom.exam_status === 'Complete'">考场已关闭！</a>
      </div>
    </div>
  </div>
</div>

<div class="card card-default" *ngIf="currentStep === 'Examing'">
  <tabset class="bg-white p-0" justified="true">
    <tab>
      <div class="card-body" *ngIf="currentStd !== undefined">
        <fieldset  style="margin-top: -20px;">
          <div class="row">
            <div class="col-6" >
              <div class="text-center">
                <div class="" *ngIf="currentStd && currentStd.std_image">
                  <img class="img-fluid rounded " style="width:200px;height:260px;" [src]="FrameService.getParamValue('EnrolMaterialNativePath') + currentStd.std_image"
                    alt="" />
                </div>
              </div>
            </div>
            <div class="col-6">
              <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 text-1-6" style="font-size:20px;">{{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" style="font-size:20px;">{{currentStd.std_name}}</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-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 text-1-6" style="font-size:20px;">{{currentStd.exam_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" style="font-size:20px;">{{currentStd.std_sex}}</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-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-info m-1 text-1-6" style="font-size:20px;">第{{currentStd.real_exam_echo}}号考生</span>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </fieldset>
        <fieldset>
          <div class="row">
            <div class="col-6" >
              <div class="text-center">
                <div class="" *ngIf="currentPhotoUrl">
                  <img class="img-fluid rounded " style="width:200px;height:260px;" [src]="currentPhotoUrl" alt="" />
                </div>
              </div>
            </div>
            <div class="col-6">
              <a class="btn btn-info ml-4" href="#" (click)="takePhoto()" style="margin-bottom: 1rem;font-size: 40px;">拍照</a>
              <a class="btn btn-info ml-4" href="#" (click)="confirmUpload()" style="margin-bottom: 1rem;font-size: 40px;">上传</a>
            </div>
          </div>
        </fieldset>
      </div>
    </tab>
  </tabset>
</div>
