<div class="content-heading  justify-content-between">
  <div>视频播放<span *ngIf="currentStep === 'Init'"> - 请输入考场密码</span>
  </div>
  <div class="" *ngIf="currentStep == 'Examing'">
    <div><span >
                总计：{{roomTotal}}
      <span class="ml-2" *ngIf="totalRoom !== undefined">已播放：<span class="text-success">{{totalRoom.real_inroom_total}}</span></span>
                <span class="ml-2" *ngIf="totalRoom !== undefined"><span class="text-danger">已提交：{{totalRoom.real_complete_total}}</span></span>
            </span>
    </div>
  </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>
      </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)="changeRoomKey()" />
          </div>
        </div>
        <div class="col-lg-1 align-items-center">
          <input type="button" class="btn btn-primary" style="width:100%;height:80%;" value="确定" (click)="changeRoomKey()">
        </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-{{currentRoom.exam_status === 'Judge'?4:9}} ">
        <h1 class="home-text-big">{{currentRoom.room_addr}}</h1>
        <h1 class="home-text-big">{{initRoom.group.group_name}}<span class="ml-5">第<span class="text-info ml-1">{{currentRoom.room_seq}}</span>考场</span></h1>
        <h1 class="home-text-big">{{currentRoom.exam_date}}</h1>

        <div class="row">
          <ngx-select [items]="timeArr" [(ngModel)]="inroom.time_type" style="width:150px;" *ngIf="timeArr!==undefined && timeArr.length>0" optionValueField="dict_value"
                      optionTextField="dict_name"></ngx-select>
          <a class="btn btn-primary ml-4 btn-lg" href="#" *ngIf="currentRoom.exam_status === 'Init'" (click)="startRoom()">开启考场</a>
          <a class="btn btn-warning ml-4" href="#" *ngIf="currentRoom.exam_status === 'Judge'">等待评委登陆</a>
          <a class="btn btn-info ml-4" style="font-size:25px" href="#" *ngIf="currentRoom.exam_status === 'Examing'" (click)="inRoom()">考场已开，开始进场播放</a>
          <a class="btn btn-success ml-4" href="#" *ngIf="currentRoom.exam_status === 'Complete'">考场已关闭！</a>
        </div>
      </div>
      <div class="home-text col-lg-5 " *ngIf="currentRoom.exam_status === 'Judge'">
        <div class="list-group-item list-group-item-action" *ngFor="let j of judgeArr">
          <div class="media">
            <img class="align-self-start mx-2 circle thumb32" [src]="'./assets/img/user/01.jpg'" 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>第{{j.judge_seq}}评委：<span *ngIf="j.judge_status === 'Init'" class="text-warning">未登录</span>
                                        <span *ngIf="j.judge_status !== 'Init'" class="text-success">已登录</span></span>
                </strong>
              </p>
            </div>

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

  <div class="row">
    <div class="col-lg-4">
      <div class="card b">
        <div class="card-header">
          <h3>检录通道：<span *ngIf="initRoom.group.checkin_flag === 'Active'" class="text-success">开启</span>
            <span *ngIf="initRoom.group.checkin_flag !== 'Active'" class="text-primary">无需检录</span>
          </h3>
        </div>
        <div class="card-body">
          如开启了检录通道，考生必须先检录才能进行进场操作，如提示考生未检录，让考生到检录窗口完成检录业务！
        </div>
      </div>
    </div>

    <div class="col-lg-4">
      <div class="card b">
        <div class="card-header">
          <h3><span *ngIf="initRoom.group.pack_flag === 'Active'" class="text-success">分组考试：开启</span>
            <span *ngIf="initRoom.group.pack_flag !== 'Active'" class="text-primary">单一考试模式</span>
          </h3>
        </div>
        <div class="card-body">
                    <span *ngIf="initRoom.group.pack_flag === 'Active'">标准人数：{{initRoom.group.pack_std_num}}
                      <br />最大人数：{{initRoom.group.pack_std_max}}</span>
          <span *ngIf="initRoom.group.pack_flag !== 'Active'">最大候考人数：{{initRoom.group.room_wait_num}}
            <br />&nbsp;</span>
        </div>
      </div>
    </div>

    <div class="col-lg-4">
      <div class="card b">
        <div class="card-header">
          <h3>评委参数</h3>
        </div>
        <div class="card-body">
          <span>评委数量：{{initRoom.group.room_judge_num}}</span>
          <br />
          <span>缓存数量：{{initRoom.group.judge_cache_num}}</span>
        </div>
      </div>
    </div>

  </div>

  <div class="row">
    <div class="col-lg-4">
      <div class="card b">
        <div class="card-header">
          <h3>入场参数</h3>
        </div>
        <div class="card-body">
          <span>入场限制：{{initRoom.group.time_limit_type | frameDict :'InterviewRoomLimitType'}}</span>
          <br />
          <span></span>
        </div>
      </div>
    </div>

  </div>
</div>


<!-- 考生入场-主窗口-->
  <div class="card card-default" style="align-items: center;" *ngIf="currentStep === 'Examing'">
    <div class="card-body"> <span class="ml-2">当前考生序号：<span class="text-success">{{real_exam_seq}}</span></span><span class="ml-2"
                                                                                                                            (click)="requestScore()">评委评分进度：<span
      class="text-success">{{recCount}}/{{initRoom.group.room_judge_num*subCount}}</span></span></div>
    <div *ngIf="currentStd && currentStd.length > 1"  class="card-body">
					<span *ngFor="let v of currentStd; let i = index">
						<button  [ngClass]="{'btn btn-success': i == gCurrIdx,'btn btn-secondary':  i!== gCurrIdx}" (click)="playSubjectVideo(v,this, i)">
							<li class="glyphicon fa  fa-play "></li> &nbsp;{{v.subject_name}}
						</button>&nbsp;
					</span>
    </div>
    <div class="card-body" id="aliPlayer" style="background-color: #0b3a58;height: 500px;width: 400px"></div>
    <div class="card-body">
      <div class="justify-content-between">
        <div>

          <button class="btn btn-primary" (click)="rotate()">
            <li class="glyphicon fa fa-forward "></li> &nbsp;旋转
          </button>
          <button class="btn btn-primary ml-2" (click)="pauseVideo()" *ngIf="pause==false">
            <li class="glyphicon fa  fa-pause "></li> &nbsp;视频暂停
          </button>
          <button class="btn btn-primary ml-2" (click)="playVideo()" *ngIf="pause==true">
            <li class="glyphicon fa   fa-play "></li> &nbsp;继续播放
          </button>
          <button class="btn btn-success ml-2" (click)="lastGroupVideo()" *ngIf="canPlayLastVideo=='Active'&&real_exam_seq > 0" frameRole
                  resId="505051">
            <li class="glyphicon fa  fa-backward "></li> &nbsp;上一个考生
          </button>
          <button class="btn btn-success ml-2" (click)="nextGroupVideo()">
            <li class="glyphicon fa fa-forward "></li> &nbsp;下一个考生
          </button>
          <button class="btn btn-warning ml-2" *ngIf="FrameService.getParamValue('SecondCameraFlag') == 'Active'" (click)="openSecondCamera()">
            <li class="glyphicon fa fa-forward "></li> &nbsp;第二机位
          </button>
        </div>
      </div>
    </div>
</div>
