<div class="content-heading  justify-content-between">
  <div>面试入场<span *ngIf="currentStep === 'Init'"> - 请输入考场密码</span>
  </div>
  <div class="float-right" *ngIf="currentStep !== 'Init'">
    <button class="btn btn-sm btn-primary text-1-4" type="button"
    [disabled]="this.checkin.requesting === true"
    (click)="downloadHandSimple()"  >
    签到表
</button>
<button class="btn btn-sm btn-primary text-1-4  ml-2" type="button"
    [disabled]="this.checkin.requesting === true"
    (click)="downloadHand()" >
    打分表
</button> 

    <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)="changePassword()"/>
          </div>
        </div>
        <div class="col-lg-1 align-items-center">
            <input type="button" class="btn btn-primary" style="width:100%;height:80%;" value="确定" (click)="changePassword()">
          </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">{{currentRoom.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]="timeArray" [(ngModel)]="checkin.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-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 judgeArray">
          <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>
           <!--   <p class="mb-1 text-sm">{{j.judge_name}}</p> -->,<!-- 武音去掉评委名字 -->
            </div>
            <!--
            <div class="ml-auto">
              <small class="text-muted ml-2">{{frameService.shortMinuteString(v.checkin_time)}}</small>
            </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="currentRoom.group.checkin_flag === 'Active'" class="text-success">开启</span>
            <span *ngIf="currentRoom.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="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-4">
      <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-4">
      <div class="card b">
        <div class="card-header">
          <h3>入场参数</h3>
        </div>
        <div class="card-body">
          <span>入场限制：{{currentRoom.group.room_limit_type | frameDict :'InterviewRoomLimitType'}}</span>
          <br/>
          <span></span>
        </div>
      </div>
    </div>

  </div>
</div>

<div class="card card-default" *ngIf="currentStep === 'Examing'">

  <input type="button" class="btn btn-primary" value="身份识别" (click)="setCertIdFunc()">
  <br>
  <tabset class="bg-white p-0" justified="true">
    <tab>
      <ng-template tabHeading>
      <span class="table-sort"><em
        class="far fa-address-card fa-fw"></em> 进场主窗口</span>
      </ng-template>


      <div class="card-body">
        <fieldset>
          <tabset class="bg-white p-0" justified="true" [hidden]="!ishttps">

            <tab>
              <ng-template tabHeading>
                <span class="table-sort"><em class="far fa-address-card fa-fw"></em> 输入</span>
              </ng-template>
              <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)]="checkin.cert_id" maxlength="18"
                           [readOnly]="checkin.requesting === true"
                           onfocus="this.select()" onmouseover="this.focus()" autocomplete="false" #certid id="certid"
                           (keyup.enter)="changeCertId()"/>
                  </div>
                </div>
                <div class="col-lg-1 align-items-center">
                  <input type="button" class="btn btn-primary" style="width:100%;height:80%;" value="进场" (click)="changeCertId()">
                </div>
              </div>
            </tab>
            <tab  >
              <ng-template tabHeading>
                <span class="table-sort"><em class="far fa-address-card fa-fw"></em> 扫码</span>
              </ng-template>
              <div class="form-group row">
                <div class="col-lg-2"></div>
                <div class="col-lg-8">
                  <div id="LiveStream">
                  </div>

                </div>
                <div class="col-lg-2"></div>
              </div>
            </tab>
          </tabset>
          <div class="form-group row" [hidden]="ishttps">
            <div class="col-lg-11">
              <div class="d-flex align-items-center mb-3">
                <input class="form-control mt-1 cert_field" [(ngModel)]="checkin.cert_id" maxlength="18"
                       [readOnly]="checkin.requesting === true"
                       onfocus="this.select()" onmouseover="this.focus()" autocomplete="false" #certid id="certid"
                       (keyup.enter)="changeCertId()"/>
              </div>
            </div>
            <div class="col-lg-1 align-items-center">
              <input type="button" class="btn btn-primary" style="width:100%;height:80%;" value="候考" (click)="changeCertId()">
            </div>
          </div>
        </fieldset>



        <fieldset *ngIf="currentStd !== undefined" style="margin-top: -20px;">
          <div class="row">
            <div class="col-lg-4 col-xs-4" *ngIf="currentStd.std_image">
              <div class="text-center">
                <div class="">
                  <img class="img-fluid rounded " style="width:200px;height:260px;"
                       [src]="currentStd.std_image"
                       alt=""/>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-xs-4">
              <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">{{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>
                      </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">{{currentStd.ticket_no}}</span>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="card-footer"><span class="text-sm">身份确认时间：{{currentStd.real_info_time}}</span></div>
              </div>
            </div>
            <div class="col-lg-4 col-xs-4" *ngIf="currentStd.TracksArray!==undefined">
              <div class="card card-default">
                <div class="card-title">曲目信息</div>
                <div class="card-body">
                  <div class="list-group">
                    <div class="list-group-item" *ngFor="let t of currentStd.TracksArray">
                      <div class="media">
                        <div class="align-self-start mr-2 ">
                         <span class="fa-stack">
                            <em class="fa fa-circle fa-stack-2x"
                                [ngClass]="{'text-success':t.tracks_status === 'Active','text-muted':t.tracks_status !== 'Active'}"></em>
                            <em class="fas fa-music fa-stack-1x fa-inverse text-white"></em>
                         </span>
                        </div>
                        <div class="media-body text-truncate">
                          <p class="mb-1">
                            <span class="m-0">
                              <s *ngIf="t.tracks_status!=='Active'"  class="text-muted">{{t.tracks_name}}<span *ngIf="t.tracks_author">（{{t.tracks_author}}）</span></s>
                              <span *ngIf="t.tracks_status==='Active'" class="text-success">{{t.tracks_name}}<span *ngIf="t.tracks_author">（{{t.tracks_author}}）</span></span>
                          </span>
                          </p>
                          <p class="m-0">
                            <small>{{t.variety_name}}<span class="text-success" *ngIf="t.tracks_status === 'Active'">(抽中曲目)</span><span
                              class="text-muted" *ngIf="t.tracks_status !== 'Active'">(未抽中曲目)</span></small>
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>

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

          </div>
        </fieldset>

        <fieldset style="margin-top: -20px;">
          <div class="card">
            <div class="content-heading justify-content-between">
              <div>候考考生列表<span class="ml-5" *ngIf="totalRoom !== undefined">
                本时段考生数：{{totalRoom.ly_std_total + totalRoom.other_std_total}}
                <span class="ml-2">检录：<span class="text-primary">{{totalRoom.checkin_total}}</span></span>
                <span class="ml-2">进场：<span class="text-success">{{totalRoom.real_inroom_total}}</span></span>
              <!-- <span class="ml-2">未评分：
                <span class="text-danger">{{totalRoom.no_score_total}}</span>
              </span> -->
              <!-- <span class="ml-2">未提交：<span
                class="text-warning">{{totalRoom.real_inroom_total - totalRoom.real_complete_total}}</span></span>-->
                <span class="ml-2"><span class="text-danger">已提交：{{totalRoom.real_complete_total}}</span></span>
            </span>
            </div>
              <div>
                <button class="btn btn-lg btn-success text-1-4 ml-2" type="button"
                        [disabled]="this.checkin.requesting === true"
                        (click)="stdInRoom(infoStdArray[0].std_id)"
                        *ngIf="infoStdArray !== undefined && infoStdArray.length > 0 && currentRoom.group.pack_flag==='InActive'">
                  考生【{{infoStdArray[0].std_name}}】 进场
                </button>
                <button class="btn btn-lg text-1-4  ml-2" type="button"
                        [ngClass]="{'btn-success':currentRoom.group.pack_std_num ===infoStdArray.length,'btn-warning':currentRoom.group.pack_std_num !== infoStdArray.length}"
                        (click)="stdInRoom()" [disabled]="this.checkin.requesting === true"
                        *ngIf="infoStdArray !== undefined && infoStdArray.length > 0 && currentRoom.group.pack_flag==='Active'">
                  【{{infoStdArray.length}}】考生批量进场
                </button>
              </div>
            </div>
            <table class="table table-striped table-hover table-bordered"
                   *ngIf="infoStdArray !== undefined && infoStdArray.length > 0">
              <thead>
              <tr>
                <th>#</th>
                <th>#</th>
                <th>确认时间</th>
                <th>证件号码</th>
                <th>考生姓名</th>
                <th>性别</th>
                <th>准考证号</th>
               <th class="wd-sd"></th>
              </tr>
              </thead>
              <tbody>
              <tr *ngFor="let v of infoStdArray;let i=index"
                  [ngClass]="{'text-success':currentRoom.group.pack_flag==='InActive' && i===0}">
                <td class="align-middle">{{i + 1}}</td>
                <td class="align-middle"><img class="align-self-start mx-2 circle thumb32 table-sort"
                                              *ngIf="v.std_image" (click)="goStd(v)"
                                              [src]="v.std_image" alt="Image" ngxViewer></td>
                <td class="align-middle">{{v.real_info_time}}</td>
                <td class="align-middle">{{v.cert_id}}</td>
                <td class="align-middle">{{v.std_name}}</td>
                <td class="align-middle">{{v.std_sex}}</td>
                <td class="align-middle">{{v.ticket_no}}</td>
               <td class="align-middle">
                  <button class="btn btn-danger" type="button" (click)="removeInfoStd(v)"
                          [disabled]="this.checkin.requesting === true">
                    取消【{{v.std_name}}】排队
                  </button>
                </td>

              </tr>
              </tbody>
            </table>
          </div>

        </fieldset>

      </div>

    </tab>
    <tab>
      <ng-template tabHeading>
      <span class="table-sort" (click)="ajaxRoom.reload({ly_room_id: currentRoom.ly_room_id})"><em
        class="fas fa-user fa-fw" (click)="ajaxRoom.reload({ly_room_id: currentRoom.ly_room_id})"></em> 已进场考生</span>
      </ng-template>
      <div class="card card-default">

        <div class="card-body">

          <table class="table table-striped table-hover table-bordered">
            <thead>
            <tr>
            <!--武音统考去掉   <th>序号</th>  -->
              <th>显示号</th>
              <th>#</th>
              <th>确认时间</th>
              <th>入场时间</th>
              <th>证件号码</th>
              <th>考生姓名</th>
              <th>性别</th>
              <th>准考证号</th>
              <th>评分时间</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let v of ajaxRoom.getArray();let i=index"
                [ngClass]="{'text-success':v.real_complete_time !== undefined, 'text-primary':v.real_complete_time === undefined}">
       <!--武音统考去掉       <td class="align-middle">{{v.real_exam_seq}}</td>  -->
              <td class="align-middle">{{v.real_exam_echo}}</td>
              <td class="align-middle"><img class="align-self-start mx-2 circle thumb32 " *ngIf="v.std_image"
                                            [src]="v.std_image" alt="Image" ngxViewer></td>
              <td class="align-middle">{{v.real_info_time}}</td>
              <td class="align-middle">{{v.real_inroom_time}}</td>
              <td class="align-middle">{{v.cert_id}}</td>
              <td class="align-middle">{{v.std_name}}</td>
              <td class="align-middle">{{v.std_sex}}</td>
              <td class="align-middle">{{v.ticket_no}}</td>
              <td class="align-middle">{{v.real_complete_time}}</td>
            </tr>
            </tbody>
          </table>
          <frame-ajax #ajaxRoom [url]="'exam/interview/room/std/inroom/list.htm'" [ajaxDataType]="'array'"
                      [autoRequest]="false"></frame-ajax>
        </div>
      </div>
    </tab>

    <tab *ngIf="initMap&&initMap.Video !== undefined">
      <ng-template tabHeading>
        <span class="table-sort" (click)="videoRoom.reload({ly_room_id: currentRoom.ly_room_id})"><em
          class="fas fa-camera-retro fa-fw" (click)="videoRoom.reload({ly_room_id: currentRoom.ly_room_id})"></em> 远程面试</span>
      </ng-template>
      <div class="card card-default">
        <!-- 全局一个考场模式 -->
        <div class="card-body" *ngIf="initMap.Video.exam_type==='InterviewWithSchool'">

        </div>
        <div class="card-body">
          <div class="col-xl-12">
            <div class="row row-flush">
              <div class="col-lg-3 col-6 py-2 br d-flex align-items-center justify-content-center">
                <div>
                  <div class="h1 m-0 text-bold">{{currentRoom.group.group_name}}</div>
                  <div class="text-uppercase"></div>
                </div>
              </div>
              <div class="col-lg-3 d-none d-md-block py-2 text-center br">
                <div class="text-lg">100</div>
                <div class="text-muted text-md">
                  <em class="fa fa-users"></em>
                </div>
                <div class="">
                  <span class="text-muted">确认总人数</span>
                </div>
              </div>
              <div class="col-lg-3 d-none d-md-block py-2 text-center br">
                <div class="text-success text-lg">20</div>
                <div class="text-muted text-md">
                  <em class="fa fa-users"></em>
                </div>
                <div class="">
                  <span class="text-muted">已考人数</span>
                </div>
              </div>
              <!--
              <div class="col-lg-3 d-none d-md-block py-2 text-center br">
                <div class="text-lg">80</div>
                <div class="text-muted text-md">
                  <em class="fa fa-users"></em>
                </div>
                <div class="">
                  <span class="text-muted">未考人数</span>
                </div>
              </div>
              -->
              <div class="col-lg-3 py-2 text-center d-none d-lg-block" *ngIf="qrcode !== undefined">
                <img class="thumb128 " *ngIf="qrcode"
                      [src]="qrcode"
                      alt="Image" ngxViewer>
              </div>
              <div class="col-lg-3 py-2 text-center d-none d-lg-block" (click)="createVideoRoom()" *ngIf="qrcode=== undefined &&  currentRoom.video_room_id === undefined">
                <div class="text-lg">点击</div>
                <div class="text-primary text-md">
                  <em class="fas fa-camera-retro"></em>
                </div>
                <div class="text-info">
                  <span class="text-muted">开始视频</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="card card-default">
        <div class="card-title">已确认未考试考生</div>
        <div class="card-body">
          <table class="table table-striped table-hover table-bordered">
            <thead>
            <tr>
              <th>#</th>
              <th>照片信息</th>
              <th>证件号码</th>
              <th>考生姓名</th>
              <th>性别</th>
              <th>准考证号</th>
              <th>预约时间</th>
              <th>确认时间</th>
              <th></th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let v of videoRoom.getArray();let i=index">
              <td class="align-middle">{{i + 1}}</td>
              <td class="align-middle"><img class="align-self-start mx-2 circle thumb32 " *ngIf="v.std_image"
                                            [src]="FrameService.getParamValue('EnrolMaterialNativePath')+v.std_image"
                                            alt="Image" ngxViewer></td>
              <td class="align-middle">{{v.cert_id}}</td>
              <td class="align-middle">{{v.std_name}}</td>
              <td class="align-middle">{{v.std_sex}}</td>
              <td class="align-middle">{{v.ticket_no}}</td>
              <td class="align-middle">{{FuncService.dateToBetweenMinutes(v.exam_start_time, v.exam_end_time)}}</td>
              <td class="align-middle">{{v.real_checkin_time}}</td>
              <th>
                <button class="btn btn-primary" type="button" (click)="noticeInRoom(v)">通知进场
                </button></th>
            </tr>
            </tbody>
          </table>
          <frame-ajax #videoRoom [url]="'exam/interview/room/video/checkin/list.htm'" [ajaxDataType]="'array'"
                      [autoRequest]="false"></frame-ajax>
        </div>
      </div>
    </tab>


    <tab>
      <ng-template tabHeading>
      <span class="table-sort"><em
        class="fas fa-user fa-fw"></em> 抽取曲目查询</span>
      </ng-template>
      <div class="card card-default">
        <div class="row" style="padding-top: 20px;">
          <div class="col-lg-3 " ></div>
          <div class="col-lg-3">
            <input class="form-control " type="text" [(ngModel)]="cert_id" placeholder="输入考生身份证号进行搜索"
                   onmouseover="this.focus()" autocomplete="false" (keyup.enter)="searchTracks()"/>
          </div>
          <div class="col-lg-3">
            <button class="btn btn-primary btn-lg" (click)="searchTracks()">查询</button>
          </div>
          <div class="col-lg-3"></div>
        </div>
        <div class="card-body">

          <table class="table table-striped table-hover table-bordered" *ngIf="tracksArr !== undefined && tracksArr.length > 0 ">
            <thead>
            <tr>
              <th>曲目代码</th>
              <th>曲目名称</th>
              <th>曲目作者</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let track of tracksArr">
              <td class="align-middle">{{track.tracks_code}}</td>
              <td class="align-middle">{{track.tracks_name}}</td>
              <td class="align-middle">{{track.tracks_author}}</td>
            </tr>
            </tbody>
          </table>

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

  </tabset>
</div>
