<div class="panel panel-default">
  <!--标题-->
  <div class="panel-title">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item">考生备案注销</li>
        <li class="breadcrumb-item active" aria-current="page">专本衔接考生备案注销审批</li>
      </ol>
    </nav>
  </div>

  <div class="panel-body ml-sm" [hidden]="editShowType=='only'|| editShowType=='add' ">
    <div class="card card-default">
      <div class="card-body">
        <!--查询条件-->
        <div class="row mb-3 ml-1" [hidden]="editShowType=='only'">
          <div class="col-lg-12">
            <form (ngSubmit)="mainPager.goSearch()" class="form-inline">
              <table>
                <tr>
                    <td>
                        <div class="input-group mr-1 input-group-sm">
      
                            <label>注销批次：</label>
                            <flex-select [allowClear]="true" [url]="YEAR_CODE_URL" respDataPath="array" optionValueField="year_code"
                              optionTextField="year_code" [(ngModel)]="query.year_code" placeholder="请选择"
                              [ngModelOptions]="{standalone: true}" width="150" noResultsFound="无数据">
                            </flex-select>
            
                          </div>
                        </td>
                  <td>
              <div class="input-group mr-1 input-group-sm">
                <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;关键字：</label>
                <input name="keyword" [(ngModel)]="query.query" class="input-sm form-control" type="text" value="" style="width: 180px;"
                  maxlength="64" placeholder="请输入查询关键字">

              </div>
            </td>
            
            
           
              
            </tr>
            <tr>
                <td>
                    <div class="input-group mr-1 input-group-sm">
                      <label>主考学校：</label>
                      <flex-select [allowClear]="true" [url]="SCHOOL_URL" respDataPath="array" optionValueField="id" optionTextField="org_name"
                    [(ngModel)]="query.school_id" placeholder="请选择"  noResultsFound="无数据" width="150"
                    [ngModelOptions]="{standalone: true}">
                  </flex-select>
                    </div>
                  </td>
              <!--
                <td>
                    <div class="input-group mr-1 input-group-sm">
                      <label>备案类型：</label>
                      <select name="major_level" [(ngModel)]="query.std_type" frameDict [dictName]="'std_type'" style="width:130px;"
                        class="form-control">
                      </select>
                    </div>
                  </td>
                  -->
            <td>
              <div class="input-group mr-1 input-group-sm">
                <label>审核状态：</label>
                <select name="cancel_status" [(ngModel)]="query.cancel_status" frameDict [dictName]="'record_cancel_status'" style="width: 180px;"
                  class="form-control">
                </select>
              </div>
            </td>
            <!--
            <td>
              
              </td>
              -->
            <td>
              <button class="btn btn-primary btn-rounded btn-outline btn-sm  mr-1" >
                <i class="fa fa-search"></i> 查询</button>
              <button class="btn btn-primary btn-rounded btn-outline btn-sm  mr-1" (click)="resetMain()">
                <i class="fa fa-undo"></i> 重置</button>
              </td>
            </tr>
              </table>
            
            </form>
          </div>
        </div>

        <!-- 工具栏 -->
        <div class="row mb-2" [hidden]="editShowType=='only'">
          <div class="col-lg-12">
            <div class="pull-left" style="text-align: right;" >
              <button class="btn mr-1 btn-sm btn-primary" (click)="goUploadFile(uploadFileTemplateModal)"
              data-toggle="tooltip" data-placement="left" title="批量审批">
              批量审批
            </button>
             
                <button id="btnExport" class="btn btn-primary mr-1 btn-sm" data-toggle="tooltip" data-placement="left"
                title="撤回" (click)="callback()">
               撤回</button>


            </div>

          </div>
        </div>

        <!--表格-->
        <div class="row">
          <div class="col-lg-12 ml-0" [hidden]="editShowType=='only'">
            <table class="table table-sm table-striped table-hover table-bordered bg-white">
              <thead>
                <tr>
                  <th>
                    <div class="checkbox c-checkbox">
                      <label>
                        <input type="checkbox" (change)="mainPager.checkedMasterToggle($event)" />
                        <span class="fa fa-check"></span>
                      </label>
                    </div>
                  </th>

                  <th>序号</th>
                  <th align="center">注销批次</th>
                  <th align="center">备案类型</th>
                  <th>主考学校</th>
                  <th>申请单名称</th>
                  <th>提交时间</th>
                  <th>审批状态</th>
                  <th>审批意见</th>
                  <th align="center">证明材料</th>
                  <th style="width: 80px;" align="center">操作</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let item of mainPager.getRecords(); let i = index">
                  <td>
                    <div class="checkbox c-checkbox input-group-sm">
                      <label>
                        <input type="checkbox" [value]="item.id" [(checked)]="item.isChecked"
                          [(ngModel)]="item.isChecked" />
                        <span class="fa fa-check"></span>
                      </label>
                    </div>
                  </td>

                  <td>{{mainPager.pageStart+i}}</td>
                  <td align="center">{{item.year_code}}</td>
                 
                  <td align="center">{{item.std_type | frameDict : 'std_type'}}</td>
                  
                  <td><a href="#"
                    (click)="goDetailList(item)">{{item.org_code}}-{{item.org_name}}</a>
                  </td>
                  <td>{{item.main_name}}</td>
                  <td>{{item.first_apply_date}}</td>

                  <td>{{item.status | frameDict : 'record_cancel_status'}}</td>
                  <td>{{item.audit_option}}</td>
                  <td align="center">
                      <a href="#" (click)="goQueryUploadFile(queryFileTemplateModal,item)" title="证明材料">证明材料</a>
                    </td>
                  <td align="center">
                    <a href="#" *ngIf="item.status===2 "
                    (click)="goUploadFile(uploadFileTemplateModal,item)" title="审批">
                    <em class="fa-lg fas fa-edit mr-1"></em>
                    </a>
                  </td>
                </tr>
              </tbody>
            </table>
            <!-- TODO -->
            <frame-pager [url]="MAIN_QUERY_URL" [autoLoad]="false" hideSearch="true" hasCheck="true" #mainPager (preReqEvent)="search($event)">
            </frame-pager>
          </div>

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

  
<!--创建申请单模态窗口-->
<ng-template #createApplyModal>
    <div class="modal-content" style="width:400px;">
        <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)="hideImpWin()">×</button>
        </div>

        <!-- 1@3 -->
        <div class="modal-body">
            <div [ngTemplateOutlet]="createApplyTemplate"></div>
        </div>

        <div class="modal-footer">
            <button class="btn btn-info" (click)="createMain()">
                <i class="fa fa-info-circle"> </i> 创建申请单
            </button>
        </div>
    </div>
</ng-template>


<!--*********************************创建申请单页面*********************************************-->
<ng-template #createApplyTemplate>
    <form class="form-inline">
        
        <div class="input-group mr-1 input-group-sm" style="width:360px;">
            <label>申请单名称：</label>
            <input name="main_name" [(ngModel)]="query.main_name" class="input-sm form-control"
             type="text" value="" maxlength="64" placeholder="请输入申请单名称" width="120">               
           
        </div>
    </form>
    
</ng-template>



  <div class="panel-body ml-sm" [hidden]="editShowType=='detail'|| editShowType=='add'">
    <div class="card card-default">
      <div class="card-body">
        <!--查询条件-->
        <div class="row mb-3 ml-1" [hidden]="editShowType=='detail'">
          <div class="col-lg-12">
            <form (ngSubmit)="framePager.goSearch()" class="form-inline">
              <table>
                <tr>
                    
                  <td>
              <div class="input-group mr-1 input-group-sm">
                <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;关键字：</label>
                <input name="keyword" [(ngModel)]="query.query" class="input-sm form-control" type="text" value="" style="width: 180px;"
                  maxlength="64" placeholder="请输入查询关键字">

              </div>
            </td>
            <td align="right">
                <button class="btn btn-primary btn-rounded btn-outline btn-sm  mr-1" >
                  <i class="fa fa-search"></i> 查询</button>
                <button class="btn btn-primary btn-rounded btn-outline btn-sm  mr-1" (click)="resetDetail()">
                  <i class="fa fa-undo"></i> 重置</button>
                  <button id="btnExport" class="btn btn-primary mr-1 btn-sm" data-toggle="tooltip" data-placement="left"
                  title="导出" (click)="exportNet()">
                  <i class="fa icon-cloud-download"></i>导出</button>

                  <button class="btn btn-primary btn-rounded btn-outline btn-sm  mr-1" (click)="goBack()">
                      <i class="fa fa-undo"></i> 返回</button>
                </td>
              
            </tr>
            
              </table>
            
            </form>
          </div>
        </div>

       

        <!--表格-->
        <div class="row">
          <div class="col-lg-12 ml-0" [hidden]="editShowType=='detail'">
            <table class="table table-sm table-striped table-hover table-bordered bg-white">
              <thead>
                <tr>
                  <th>
                    <div class="checkbox c-checkbox">
                      <label>
                        <input type="checkbox" (change)="framePager.checkedMasterToggle($event)" />
                        <span class="fa fa-check"></span>
                      </label>
                    </div>
                  </th>

                  <th>序号</th>
                  <th align="center">备案批次</th>
                  
                  <th align="center">准考证号</th>
                  <th>姓名</th>
                  <th align="center">备案类型</th>
                  <th>备案主考学校</th>
                  <th>专业名称</th>
                  <th>申请注销主考学校</th>
                  <th>审批状态</th>
                  
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let item of framePager.getRecords(); let i = index">
                  <td>
                    <div class="checkbox c-checkbox input-group-sm">
                      <label>
                        <input type="checkbox" [value]="item.id" [(checked)]="item.isChecked"
                          [(ngModel)]="item.isChecked" />
                        <span class="fa fa-check"></span>
                      </label>
                    </div>
                  </td>

                  <td>{{framePager.pageStart+i}}</td>
                  <td align="center">{{item.year_code}}</td>
                  <td align="center">{{item.ticket_no}}</td>
                  <td>{{item.std_name}}</td>
                  <td align="center">{{item.std_type | frameDict : 'std_type'}}</td>
                  <td>{{item.org_name}}</td>

                  <td>{{item.major_name}}</td>
                  <td>{{item.join_school_name}}</td>

                  <td>{{item.cancel_status | frameDict : 'record_cancel_status'}}</td>
                 
                </tr>
              </tbody>
            </table>
            <!-- TODO -->
            <frame-pager [url]="QUERY_URL" [autoLoad]="false" hideSearch="true" hasCheck="true" #framePager (preReqEvent)="searchDetail($event)">
            </frame-pager>
          </div>

         
        </div>
      </div>
    </div>
  </div>
  <!-- only编辑页面-->
  <div class="col-lg-12" *ngIf="item && editShowType != null &&editShowType =='add'">
    <ng-container *ngTemplateOutlet="editTemplateModal">
    </ng-container>
  </div>
  <!--关联课程界面  -->
  <div class="col-lg-12" *ngIf="courseShowType">
    <ng-container *ngTemplateOutlet="courseTemplateModal">
    </ng-container>
  </div>
</div>

<div class="mt-5">
  <frame-uploader #uploader [silenceUpload]="true" [autoUpload]="true" [uploadUrl]="UPLOAD_URL"></frame-uploader>
</div>

<div class="mt-5">
  <frame-uploader #uploaderFile [silenceUpload]="true" [autoUpload]="true" [uploadUrl]="UPLOAD_FILE_URL">
  </frame-uploader>
</div>

<ng-template #editFormTemplate>
  
  <div class="row mb-3 ml-1">
    <div class="col-lg-12  form-inlin">
        <!-- 支持排序 -->
        <table>
          <tr>
            <td>
        <div class="input-group mr-1 input-group-sm">
          <label>&nbsp;&nbsp;&nbsp;&nbsp;关键字：</label>
          <input [(ngModel)]="querystd.query" class="input-sm form-control" type="text" value=""
            maxlength="64" placeholder="请输入查询关键字" style="width:180px;">
        </div>
      </td>
     
        <td>
        <button class="btn btn-primary btn-rounded btn-outline btn-sm  mr-1" (click)="findStdRefList()">
          <i class="fa fa-search"></i> 查询</button>
          <button class="btn btn-primary mr-1 btn-sm" (click)="resetStd()">
            <i class="fa fa-search"></i>重置</button>
            

          </td>
          </tr>
          </table>
         
    </div>
  </div>

  <div class="row" >
    <div class="col-sm-12 ml-0">
      <table class="table table-sm table-striped table-hover table-bordered bg-white">
        <thead>
          <tr>
            <th>序号</th>
            <th align="center">备案批次</th>
            <th>主考学校</th>
            <th>衔接学校</th>
            <th align="center">准考证号</th>
            <th>考生姓名</th>
            <th>衔接专业</th>
            <th align="center">备案类型</th>
            <th>审核状态</th>
            <th>
                选择
            </th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of stdRefList; let i = index">
            <td>{{i+1}} </td>
            <td align="center">{{item.year_code}}</td>
            <td>{{item.org_name}}</td>
            <td>{{item.join_school_name}}</td>
            <td align="center">{{item.ticket_no}}</td>
            <td>{{item.std_name}}</td>
            <td>{{item.join_major_name}}</td>
            <td align="center">{{item.std_type | frameDict : 'std_type'}}</td>
            <td>{{item.status | frameDict : 'record_cancel_status'}}</td>
            <td>
                <div class="checkbox c-checkbox input-group-sm">
                    <label class="radio-inline c-radio" style="margin: 0px !important">
                        <input type="radio" name="radio" [value]="item.id" (click)="stdRefRadioCheckFun(item)"/>
                        <span class="fa fa-circle" style="margin: 0px !important"></span>
                      </label>
                </div>
            </td>
          </tr>
        </tbody>
      </table>
     
    </div>
    

  </div>

</ng-template>

<ng-template #editTemplateModal>
  <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)="hideEditWin()">×</button>
    </div>

    <!-- 1@3 -->
    <div class="modal-body">
      <div [ngTemplateOutlet]="editFormTemplate"></div>
    </div>

    <div class="modal-footer">
      <button class="btn btn-info" (click)="addStdRecordCancel()">
        <i class="fa fa-info-circle"> </i> 保存
      </button>
      <button class="btn btn-default" (click)="hideEditWin()">
        <i class="icon-close"> </i> 取消
      </button>
    </div>
  </div>
</ng-template>


<ng-template #uploadFileTemplateModal>
  <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)="bsModalWin2.hide()">×</button>
    </div>

    <!-- 1@3 -->
    <div class="modal-body">
      <div [ngTemplateOutlet]="uploadFileTemplate"></div>
    </div>

    <div class="modal-footer">
      <button class="btn btn-info" (click)="audit()">
        <i class="fa fa-info-circle"> </i> 审批
      </button>
      <button class="btn btn-default" (click)="bsModalWin2.hide()">
        <i class="icon-close"> </i> 取消
      </button>
    </div>
  </div>
</ng-template>




<ng-template #uploadFileTemplate>
  <div class="container">

      <div class="row mb-1" >
          <!-- 审核状态 -->
          <label class="col-lg-2  text-lg-right">审批类型：</label>
          <div class="col-lg-8">

              <label class="radio-inline c-radio" style="margin: 0px !important">
                  <input type="radio" name="radioSelect" value="3" [(ngModel)]="radioSelect" 
                      (click)="this.audit_option='审批通过'"/>&nbsp;审批通过&nbsp;
                  <span class="fa fa-circle" style="margin: 0px !important"></span>
          </label>&nbsp;&nbsp;&nbsp;&nbsp;
          <label class="radio-inline c-radio" style="margin: 0px !important">
                  <input type="radio" name="radioSelect" value="1" [(ngModel)]="radioSelect" 
                      (click)="this.audit_option='审批驳回'"/>&nbsp;审批驳回&nbsp;
                  <span class="fa fa-circle" style="margin: 0px !important"></span>
          </label>
          </div>
      </div>
      <div class="row mb-1">
          <!-- 审核意见 -->
          <label class="col-lg-2  text-lg-right">审批意见：</label>
          <div class="col-lg-8">
              <textarea class="form-control" [(ngModel)]="audit_option"  rows="3" maxlength="128"></textarea>
          </div>
      </div>

  </div>
</ng-template>


<!-- 查看证明材料界面 -->
<ng-template #queryFileTemplateModal>
  <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)="bsModalWin.hide()">×</button>
    </div>

    <!-- 1@3 -->
    <div class="modal-body">
      <div [ngTemplateOutlet]="queryFileTemplate"></div>
    </div>

    <div class="modal-footer">
       
      <button class="btn btn-default" (click)="bsModalWin.hide()">
        <i class="icon-close"> </i> 关闭
      </button>
    </div>
  </div>
</ng-template>

<ng-template #queryFileTemplate>
  <div class="container">

    <div class="row" >
      <div class="col-sm-12 ml-0">
        <table class="table table-sm table-striped table-hover table-bordered bg-white">
          <thead>
            <tr>
              <th>序号</th>
              
              <th align="center">主考学校</th>
              <th  align="center">上传时间</th>
              <th align="center">
                  操作
              </th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of fileList; let i = index">
              <td>{{i+1}} </td>
              
              <td align="center">{{item.org_name}}</td>
              <td align="center">{{item.create_time}}</td>
              <td align="center">
                
                    <a href="#" (click)="checkUploadFile(item)" title="{{item.file_url}}">下载证明材料</a>
              </td>
              
            </tr>
          </tbody>
        </table>
       
      </div>
      
  
    </div>

  </div>
</ng-template>