<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>
      </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 ">
          <ul class="list-group">
            <li class="list-group-item home-text-big"><h4>{{currentRoom.room_addr}}</h4></li>
            <li class="list-group-item home-text-big"><h4>{{currentRoom.group.group_name}}</h4></li>
            <li class="list-group-item home-text-big"><h4>第{{currentRoom.room_seq}}考场</h4></li>
            <li class="list-group-item home-text-big"><h4>{{currentRoom.exam_date}}</h4></li>
            <li class="list-group-item home-text-big"><h4>{{currentRoom.exam_status | frameDict: 'ExamRoomStatus'}}</h4></li>
          </ul>
        </div>
      </div>

        <div class="row mt-3">

            <div class="col-lg-6">
              <div class="card b">
                <div class="card-header">
                  <h3><span *ngIf="currentRoom.group.pack_flag === 'Active'" class="text-success">分组考试：开启</span>
                    <span *ngIf="currentRoom.group.pack_flag !== 'Active'" class="text-primary">单一考试模式</span></h3>
                </div>
                <div class="card-body">
                  <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>
                </div>
              </div>
            </div>
        
            <div class="col-lg-6">
              <div class="card b">
                <div class="card-header">
                  <h3>评委参数</h3>
                </div>
                <div class="card-body">
                  <span>评委数量：{{currentRoom.group.room_judge_num}}</span>
                  <br/>
                  <span>缓存数量：{{currentRoom.group.judge_cache_num}}</span>
                </div>
              </div>
            </div>
        
        </div>


        <div class="row">
          <div class="col-lg-3"></div>
          <div class="col-lg-6">
            <a class="btn btn-success btn-primary ml-4" style="font-size: 30px;" href="#" *ngIf="currentRoom.exam_status === 'Examing'"
              (click)="preparePhoto()">考试中，开始拍照</a>
            <a class="btn  btn-info  ml-4" href="#" *ngIf="currentRoom.exam_status === 'Complete'">考场已关闭！</a>
          </div>
          <div class="col-lg-3"></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('EnrolMaterialPath') + currentStd.std_image"  />
                </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" *ngIf="currentStd.ticket_no">
                    <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.ticket_no}}</span>
                        </p>
                      </div>
                    </div>
                  </div>

                  <div class="list-group-item" *ngIf="currentStd.std_sex">
                    <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 text-danger" 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-3" href="#" (click)="takePhoto()" style="margin-bottom: 1rem;font-size: 30px;">拍照</a>
              <a class="btn btn-info ml-3" href="#" (click)="uploadPhoto()" style="margin-bottom: 1rem;font-size: 30px;">上传</a>
              <a class="btn btn-info ml-3" href="#" (click)="getPreStd()" style="margin-bottom: 1rem;font-size: 30px;" *ngIf="currentStd?.real_exam_seq>1">上一个</a>
            </div>
          </div>
        </fieldset>

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