<div class="panel panel-default">
  <!--标题-->
  <div class="panel-title">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <!-- TODO -->
        <li class="breadcrumb-item">考生管理</li>
        <li class="breadcrumb-item active" aria-current="page">考生信息变更管理</li>
      </ol>
    </nav>
  </div>
  <div class="panel-body ml-sm" [hidden]="this.editShowType=='only'">
    <div class="card card-default">
      <div class="card-body">
        <!--查询条件-->
        <div class="row mb-3 ml-1" [hidden]="this.editShowType=='only'">
          <div class="col-lg-12">
            <form class="form-inline">
            <table>
              <tr>
                <td>
              <div class="input-group mr-1 input-group-sm">
                <label>原考生姓名：</label>
                <input name="keyword" [(ngModel)]="query.std_name" class="input-sm form-control" type="text" value="" maxlength="64">

              </div>
            </td>
            <td>
              <div class="input-group mr-1 input-group-sm">
                <label>原证件号：</label>
                <input name="keyword" [(ngModel)]="query.cert_no" class="input-sm form-control" type="text" value="" maxlength="64">

              </div>
            </td>
            
           
                <td>
              <div class="input-group mr-1 input-group-sm">
                <label>准考证号：</label>
                <input name="keyword" [(ngModel)]="query.ticket_no" class="input-sm form-control" type="text" value="" maxlength="64">

              </div>
              </td>
              
              <td>
              <button class="btn btn-primary btn-rounded btn-outline btn-sm  mr-1" (click)="framePager.goSearch()">
                <i class="fa fa-search"></i> 查询</button>
              <button class="btn btn-primary btn-rounded btn-outline btn-sm  mr-1" (click)="reset()">
                <i class="fa fa-undo"></i> 重置</button>
              </td>
              </tr>
              
              </table>
              </form>
          </div>
        </div>


        <!-- 工具栏 -->
         <div class="row mb-2" [hidden]="this.editShowType=='only'">
          <div class="col-lg-12">
            <div class="pull-left">
            
                <button class="btn btn-primary btn-rounded btn-outline btn-sm  mr-1" (click)="downWord()">
                    <i class="fa icon-cloud-download"></i> 下载考生信息变更表</button>
            </div>
 
          </div>
        </div> 

        <!--表格-->
        <div class="row">
          <div class="col-lg-12 ml-0" [hidden]="this.editShowType=='only'">
            <table class="table table-sm table-striped table-hover table-bordered bg-white">
              <thead>
                <tr>
                  <th style="width:30px;">
                    <div class="checkbox c-checkbox">
                      <label class="nomargin">
                        <input type="checkbox" (change)="framePager.checkedMasterToggle($event)" />
                        <span class="fa fa-check"></span>
                      </label>
                    </div>
                  </th>
                  <th  style="width:110px;">原考生姓名</th>
                  <th  style="width:120px;">原证件号</th>
                  <th align="center" style="width:100px;">准考证号</th>
                  
                  <th  style="width:110px;">变更内容</th>
                  <th  style="width:90px;">状态</th>
                  <th align="center" style="width:150px;">申请时间</th>
                  <th  style="width:150px;">申请备注</th>

                  <th  style="width:110px;">初审意见</th> 
                  <th  style="width:120px;">终审意见</th>
          

                  <th style="width: 60px;" align="center">操作</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let item of framePager.getRecords(); let i = index">
                  <td>
                    <div class="checkbox c-checkbox input-group-sm">
                      <label nomargin>
                        <input type="checkbox" [value]="item.id" [(checked)]="item.isChecked" [(ngModel)]="item.isChecked" />
                        <span class="fa fa-check"></span>
                      </label>
                    </div>
                  </td>

                  <td>{{item.old_std_name}}</td>
                  <td>{{item.old_cert_no}}</td>
                  <td align="center">{{item.ticket_no}}</td>
                  <td>{{transModifyContent(item.modify_content)}}</td>
                  <td>{{item.status_text}}</td>
                  <td align="center">{{item.apply_time}}</td>
                  <td>{{item.modify_remark}}</td>

                  <td>{{item.verify_remark1}}</td>
                  <td>{{item.verify_remark2}}</td>

                  <td align="center">
                    <a href="#" (click)="goVerify(verifyTemplateModal,item)" title="审批">
                      <em class="fa-lg fas fa-edit mr-1" style="color:#F56D6D"></em>
                    </a>
                  </td>
                </tr>
              </tbody>
            </table>

            <frame-pager [url]="QUERY_URL" hideSearch="true" hasCheck="true" #framePager (preReqEvent)="this.search($event)"></frame-pager>
          </div>
 
        </div>
      </div>
    </div>
  </div>
 
</div>

<ng-template #verifyFormTemplate>
  <table *ngIf="item" class="table table-sm table-hover table-bordered bg-white">
    <tr>
      <td>
          <div class="card card-default">
              <div class="card-header">
                  考生信息变更对比
              </div>
              <div class="card-body">
                <table  *ngIf="item.face_file_path || item.cert_file_path" style="margin: auto;width: 100%;">
                  <tr>
                    <td>
                        <table>
                            <tr>
                              <td align="center">原考生照片</td>
                            </tr>
                            <tr>
                              <td>
                                <img [src]="item.old_face_file_path_full" style="width: 160px;height: 190px;">
                                
                              </td>
                            </tr>
                          </table>
                    </td>
                    <td>
                        <table>
                            <tr>
                              <td align="center">变更后考生照片</td>
                            </tr>
                            <tr>
                              <td>
                                <img *ngIf="item.face_file_path_full && item.face_file_path_full!='undefined'" [src]="item.face_file_path_full" style="width: 160px;height: 190px;"> 
                                <img *ngIf="!item.face_file_path_full || item.face_file_path_full=='undefined'" [src]="" style="width: 160px;height: 190px;"> 

                              </td>
                            </tr>
                        </table>
                    </td>
                    <td *ngIf="item.cert_file_path">
                        <table>
                            <tr>
                              <td align="center">证件照片</td>
                            </tr>
                            <tr>
                              <td>
                                <img [src]="item.cert_file_path_full" style="width: 160px;height: 190px;"> 
                              </td>
                            </tr>
                        </table>
                    </td>
                  </tr>
                </table>
                <br>

                <table style="margin: auto;" class="table table-sm table-striped table-hover table-bordered bg-white">
                    <tr>
                        <td>
                          申请变更内容：
                        </td>
                        <td colspan="3">
                            {{transModifyContent(item.modify_content)}}
                        </td>
                      </tr>
                    <tr *ngIf="item.std_name">
                      <td style="min-width: 100px;">原考生姓名：</td>
                      <td style="min-width: 200px;">{{item.old_std_name}}</td>
                      <td style="min-width: 100px;">变更后考生姓名：</td>
                      <td style="min-width: 200px;">{{item.std_name}}</td>
                    </tr>
              
                    <tr *ngIf="item.cert_no">
                      <td style="min-width: 100px;">原证件号：</td>
                      <td style="min-width: 200px;">{{item.old_cert_no}}</td>
                      <td style="min-width: 100px;">变更后证件号：</td>
                      <td style="min-width: 200px;">{{item.cert_no}}</td>
                    </tr>
                    <tr>
                        <td>考生申请备注：</td>
                        <td colspan="3">
                          {{item.modify_remark}}
                        </td>
                      </tr>
                  </table>
                  <!-- <div style="float:left;width: 1px;height: 25px; background: #000;"></div>  -->
              </div>
          </div>
      </td>
    </tr>
    <tr>
      <td>
          <div class="card card-default">
              <div class="card-body">
                <table>
                    <tr>
                        <td>初审意见：</td>
                        <td>
                          {{item.verify_remark1}}
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td>评审类型：</td>
                        <td>
                            <label class="radio-inline c-radio">
                                <input type="radio" name="status" value="1" [(ngModel)]="item.status" />
                                <span class="fa fa-circle"></span>通过并归档
                            </label>
                            <label class="radio-inline c-radio">
                                <input type="radio" name="status" value="0" [(ngModel)]="item.status" />
                                <span class="fa fa-circle"></span>退回初审
                            </label>
                        </td>
                    </tr>
                  <tr>
                    <td>终审意见：</td>
                    <td>
                        {{item.verify_remark2}}
                        &nbsp;
                    </td>
                  </tr>
                </table>
              </div>
          </div>
      </td>
        
    </tr>
    </table>

    

    
</ng-template>

<ng-template #verifyTemplateModal>
  <div class="modal-content">
    <div class="modal-header info-success-qm">
      <div class="pull-left">
        <em class="fa-lg fas fa-edit "></em> 审批页面
      </div>
      <button type="button" class="close" (click)="this.hideModal()">×</button>
    </div>

    <div class="modal-body">
      <div [ngTemplateOutlet]="verifyFormTemplate"></div>
    </div>

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