<div class="content-heading  justify-content-between">
    <div *ngIf="std">{{std.std_name}} （{{std.cert_id}}）</div>
    <div class="float-right">
  
      <div class="row">
        <div>
          <input class="form-control " type="text" [(ngModel)]="searchText" placeholder="输入关键字进行搜索"
                 onfocus="this.select()" onmouseover="this.focus()" autocomplete="false"
                 (keyup.enter)="searchStd()"/>
        </div>
        <div>
            <button class="btn btn-secondary ml-3 text-primary mr-2" type="button" (click)="goStd()">返回</button>
        </div>
        <div class="btn-group mr-4 ml-3" dropdown *ngIf="std !== undefined"> </div>
      </div>
    </div>
  </div>


<tabset class="bg-white p-0" justified="true" *ngIf="std !== undefined">

    <!--考生安排-->
    <tab>
        <ng-template tabHeading>
            <em class="fas fa-ticket-alt fa-fw"></em> <span class="table-sort"  (click)="examAjax.reload({std_id:std.std_id})"> 考试安排</span>
        </ng-template>
        <div class="card border">
            <div class="card-body">
                <table class="table  table-hover table-bordered ">
                    <thead>
                        <tr>
                          <th style="width: 60px;" class="text-center"></th>
                          <th>#</th>
                          <th>分组名称</th>
                          <th>考试科目</th>
                          <th>考试日期</th>
                          <th>考试时间</th>
                          <th>所在考场地址</th>
                          <th>进场序号</th>
                        </tr>
                    </thead>
                    <tbody>
                        <ng-container>
                            <tr *ngFor="let g of examAjax.getArray(); let i = index">
                                <td>{{i+1}}</td>
                                <td><img class="align-self-start mx-2 circle thumb32 table-sort" *ngIf="g.std_image" 
                                    [src]="FrameService.getParamValue('EnrolMaterialPath')+g.std_image"  ngxViewer></td>
                                <td>{{g.group_name}}</td>
                                <td>{{g.subject_name}}<span *ngIf="g.variety_name">({{g.variety_name}})</span></td>
                                <td>{{FuncService.dateToShortString(g.ly_exam_date)}}</td>
                                <td>{{FuncService.dateToMinuteString(g.exam_start_time)}}
                                    - {{FuncService.dateToMinuteString(g.exam_end_time)}}</td>
                                <td>{{g.room_addr}}</td>
                                <td>{{g.real_exam_echo}}</td>
                                <td><span class="table-button" tooltip="调整考试安排" (click)="modifyInterview(g)">
                                    <em  class="fa-lg fas fa-edit"></em></span>
                                </td>
                            </tr>
                        </ng-container>
                    </tbody>    
                </table>
            </div>
        </div>
        <frame-ajax [url]="'./std/reg/exam/list.htm'" [ajaxDataType]="'array'" [autoRequest]="true"  [requestData]="{std_id: std_id}" #examAjax></frame-ajax>
    </tab>

    <!--考试材料--> 
    <tab>
        <ng-template tabHeading>
            <em class="fa icon-camrecorder fa-fw" (click)="requestStdMaterial()"></em> 
            <span class="table-sort"  (click)="requestStdMaterial()"> 考试材料</span>
        </ng-template>
        <fieldset>
        <div class="card border">
            <div class="card-header">考生视频</div>
            <div class="card-body">
                <table class="table  table-hover table-bordered ">
                    <thead>
                        <tr align="center">
                          <th style="width: 60px;" class="text-center"></th>
                          <th>批次</th>
                          <th>考试科目</th>
                          <th>主机位视频</th>
                          <th>副机位视频</th>
                          <th>考试日期</th>
                          <th>考场地址</th>
                          <th>进场序号</th>
                        </tr>
                    </thead>
                    <tbody>
                        <ng-container>
                            <tr *ngFor="let g of materialArr; let i = index" align="center">
                                <td>{{i+1}}</td>
                                <td>{{g.batch_name}}</td>
                                <td>{{g.subject_name}}</td>
                                <td><span class="table-button" title="考试视频" (click)="startVideo(videoTplModal, g.video_file_url)"><em  class="fas fa-camera text-primary"></em></span></td>
                                <td><span class="table-button" title="监控视频" (click)="startVideo(videoTplModal, g.video_file_related)"><em  class="fas fa-film text-primary"></em></span></td>
                                <td>{{FuncService.dateToShortString(g.ly_exam_date)}}</td>
                                <td>{{g.room_addr}}</td>
                                <td>{{g.real_exam_echo}}</td>
                            </tr>
                        </ng-container>
                    </tbody>    
                </table>
            </div>
        </div>
    </fieldset>

    <fieldset *ngIf="picArr && picArr.length>0">
        <div class="card border">
            <div class="card-header">考生作品</div>
            <div class="card-body">
                <table class="table  table-hover table-bordered ">
                    <thead>
                        <tr align="center">
                          <th>#</th>
                          <th>批次</th>
                          <th>考试科目</th>
                          <th>作品1</th>
                          <th>作品2</th>
                          <th>作品3</th>
                          <th>作品4</th>
                          <th>作品5</th>
                        </tr>
                    </thead>
                    <tbody>
                        <ng-container>
                            <tr *ngFor="let g of picArr; let i = index" align="center">
                                    <td>{{i+1}}</td>
                                    <td>{{g.batch_name}}</td>
                                    <td>{{g.subject_name}}</td>
                                    <td>
                                        <span *ngIf="g.picArr.length>0"><img class="align-self-start mx-2 circle thumb32 table-sort" [src]="g.picArr[0].pic_url" ngxViewer /></span>
                                    </td>
                                    <td>
                                        <span *ngIf="g.picArr.length>1"><img class="align-self-start mx-2 circle thumb32 table-sort" [src]="g.picArr[1].pic_url" ngxViewer /></span>
                                    </td>
                                    <td>
                                        <span *ngIf="g.picArr.length>2"><img class="align-self-start mx-2 circle thumb32 table-sort" [src]="g.picArr[2].pic_url" ngxViewer /></span>
                                    </td>
                                    <td>
                                        <span *ngIf="g.picArr.length>3"><img class="align-self-start mx-2 circle thumb32 table-sort" [src]="g.picArr[3].pic_url" ngxViewer /></span>
                                    </td>
                                    <td>
                                        <span *ngIf="g.picArr.length>4"><img class="align-self-start mx-2 circle thumb32 table-sort" [src]="g.picArr[4].pic_url" ngxViewer /></span>
                                    </td>
                            </tr>
                        </ng-container>
                    </tbody>    
                </table>
            </div>
        </div>
    </fieldset>

    </tab>

    <!--考试成绩-->
    <tab>
        <ng-template tabHeading>
            <em class="fas fa-bookmark fa-fw" (click)="scoreAjax.reload({std_id:std.std_id})"></em><span class="table-sort"  (click)="scoreAjax.reload({std_id:std.std_id})"> 考试成绩</span>
        </ng-template>
        <div class="card border">
            <div class="card-body">
                <span *ngIf="scoreAjax.getArray().length == 0" class="text-danger">评委未打分！</span>
                <table class="table  table-hover table-bordered " *ngIf="scoreAjax.getArray().length > 0">
                    <thead>
                        <tr>
                          <th>#</th>
                          <th>批次名称</th>
                          <th>考试科目</th>
                          <th>科目成绩</th>
                          <th *ngFor="let s of scoreAjax.getArray()[0].judge_num | numberArray"> 第{{s}}评委</th>
                        </tr>
                    </thead>
                    <tbody>
                        <ng-container>
                            <tr *ngFor="let g of scoreAjax.getArray(); let i = index">
                                <td>{{i+1}}</td>
                                <td>{{g.batch_name}}</td>
                                <td>{{g.subject_name}}<span *ngIf="g.variety_name">({{g.variety_name}})</span></td>
                                <td>{{g.subject_score}}</td>
                                <td *ngFor="let s of scoreAjax.getArray()[0].judge_num | numberArray">
                                    <span [tooltip]="g['jn' + (s > 9 ? '' : '0') + s]">{{g['js' + (s > 9 ? '' : '0') + s]}}</span>
                                </td>
                            </tr>
                        </ng-container>
                    </tbody>    
                </table>
            </div>
        </div>
        <frame-ajax [url]="'./std/reg/material/subject/score.htm'" [ajaxDataType]="'array'" [autoRequest]="true"  [requestData]="{std_id: std_id}" #scoreAjax></frame-ajax>
    </tab>

    <!--考试日志-->
    <tab>
        <ng-template tabHeading>
            <em class="fas fa-sticky-note fa-fw" (click)="logAjax.reload({std_id:std.std_id})"></em> <span class="table-sort"  (click)="logAjax.reload({std_id:std.std_id})"> 考试日志</span>
        </ng-template>
        <div class="card border">
            <div class="card-body">
                <table class="table table-hover table-bordered">
                    <thead>
                        <tr>
                          <th>#</th>
                          <th>批次</th>
                          <th>日志类型</th>
                          <th>日志内容</th>
                          <th>操作人</th>
                          <th>操作时间</th>
                          <th>所属分组</th>
                        </tr>
                    </thead>
                    <tbody>
                        <ng-container>
                            <tr *ngFor="let g of logAjax.getArray(); let i = index">
                                <td>{{i+1}}</td>
                                <td>{{g.batch_name}}</td>
                                <td>{{g.log_type | frameDict: 'ExamStdLogType'}}</td>
                                <td>{{g.log_value}}</td>
                                <td>{{g.optr_name}}</td>
                                <td>{{g.log_time}}</td>
                                <td>{{g.group_name}}</td>
                            </tr>
                        </ng-container>
                    </tbody>    
                </table>
            </div>
        </div>
        <frame-ajax [url]="'./std/reg/material/exam/log.htm'" [ajaxDataType]="'array'" [autoRequest]="true"  [requestData]="{std_id: std.std_id}" #logAjax></frame-ajax>
    </tab>
</tabset>


<!---播放界面-->
<ng-template #videoTplModal>
	<div class="modal-content">
		<div class="modal-header info-success-qm">
			<div class="pull-left">
				<em class="fa-lg fas fa-edit "></em> <span >考生视频</span> 
			</div>
			<button type="button" class="close" (click)="hideModal()">×</button>
		</div>

		<div class="modal-body">
            <div id="aliPlayer"></div><br>
            <button class="btn btn-primary" (click)="pauseVideo()"> <li class="glyphicon fa  fa-pause "></li> 视频暂停
            </button>
            <button class="btn btn-primary ml-3" (click)="playVideo()"><li class="glyphicon fa  fa-play "></li> 继续播放
            </button>
		</div>

		<div class="modal-footer">
		    <button class="btn btn-default" (click)="hideModal()"> <i class="icon-close"> </i> 取消 </button>
		</div>
	</div>
</ng-template>