<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 == 'joinSchool'">
    <div class="card card-default">
      <div class="card-body">
        <!--查询条件-->
        <div class="row mb-3 ml-1" [hidden]="editShowType=='only' || editShowType == 'joinSchool'">
          <div class="col-lg-12">
            <form 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="130" noResultsFound="无数据" (ngModelChange)="chooseMajor()">
                          </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>
            
            <td>
              <div class="input-group mr-1 input-group-sm">
                <label>衔接学校：</label>
                <flex-select [allowClear]="true" [url]="SCHOOL_LIST_URL" respDataPath="array" optionValueField="id"
                  optionTextField="full_name" [(ngModel)]="query.join_school_id" placeholder="请选择"
                  [ngModelOptions]="{standalone: true}" width="130" noResultsFound="无数据">
                </flex-select>
              </div>
            </td>
              </tr>
              <tr>
                <td>
              <div class="input-group mr-1 input-group-sm">
                <label>专业：</label>
                <flex-select [allowClear]="true" [(items)]="majorList" optionValueField="major_code"
                  optionTextField="full_name" [(ngModel)]="query.major_code" placeholder="请选择"
                  [ngModelOptions]="{standalone: true}" width="130" noResultsFound="无数据">
                </flex-select>
              </div>
            </td>
            <td>
              <div class="input-group mr-1 input-group-sm">
                <label>审核状态：</label>
                <select name="status" [(ngModel)]="query.status" frameDict [dictName]="'record_status'"  style="width: 180px"
                  class="form-control">
                </select>
              </div>
            </td>
            <td align="right">
              <button class="btn btn-primary btn-rounded btn-outline btn-sm  mr-1" (click)="query.is_xj='';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>
              <!--
                <button class="btn btn-primary btn-rounded btn-outline btn-sm  mr-1"
                (click)="goJoinSchoolDetail('joinSchool')">
                <i class="fa icon-compass"></i> 查看上报情况</button>
                -->
              </td>
              </tr>
              </table>
              </form>
          </div>
        </div>

        <!-- 工具栏 -->
        <div class="row mb-2" [hidden]="editShowType=='only' || editShowType == 'joinSchool'">
          <div class="col-lg-12">
            <div class="pull-left" style="text-align: right;">
              <button class="btn btn-primary mr-1 btn-sm" data-toggle="tooltip" data-placement="left"
                (click)="goEdit(editTemplateModal,'only','modal-lg',null)" title="添加">
                <i class="fa fa-plus"></i> 添加</button>
              <button class="btn mr-1 btn-sm bg-danger" (click)="delete()" data-toggle="tooltip" data-placement="left"
                title="删除">
                <i class="fa fa-trash"> 删除</i>
              </button>
              <button class="btn mr-1 btn-sm bg-danger" (click)="deleteAll()" data-toggle="tooltip" data-placement="left"
              title="删除批次等待审核的记录">
              <i class="fa fa-trash"> 一键删除</i>
            </button>

              <button id="btnExport" class="btn btn-primary mr-1 btn-sm" data-toggle="tooltip" data-placement="left"
                title="模板下载" (click)="download()">
                <i class="fa icon-cloud-download"></i>模板下载</button>
              <button id="btnExport" class="btn btn-primary mr-1 btn-sm" data-toggle="tooltip" data-placement="left"
                title="导入" (click)="upload()">
                <i class="fa fa-file-excel"></i>批量导入</button>

              <button class="btn mr-1 btn-sm btn-primary" (click)="query.is_xj='1';goUploadFile(submitTemplateModal)" data-toggle="tooltip" data-placement="left"
                title="提交审核">
                <i class="fa fa-check">提交审核</i>
              </button>


              <button class="btn mr-1 btn-sm btn-primary" (click)="goUploadFile(uploadFileTemplateModal)"
                data-toggle="tooltip" data-placement="left" title="提交审核">
                <i class="fa fa-upload">上传文件</i>
              </button>

              <button class="btn mr-1 btn-sm btn-primary" (click)="checkUploadFile()" data-toggle="tooltip"
                data-placement="left" title="查看上传文件">
                <i class="fa fa-download">查看上传文件</i>
              </button>
              <button id="btnExport" class="btn btn-primary mr-1 btn-sm" data-toggle="tooltip" data-placement="left"
                title="导出" (click)="query.is_xj='';exportJion()">
                <i class="fa icon-cloud-download"></i>导出</button>
                
              <button type="button" class="btn btn-warning btn-xs ml-2" (click)="downloadErrFile()" *ngIf="filePath">
                <span class="icon-close mr"></span> 下载错误数据
              </button>

            </div>

          </div>
        </div>

        <!--表格-->
        <div class="row">
          <div class="col-lg-12 ml-0" [hidden]="editShowType=='only' || editShowType == 'joinSchool'">
            <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 align="center">批次</th>
                  <th>主考学校</th>
                  <th>衔接学校</th>
                  <th align="center">准考证号</th>
                  <th>姓名</th>
                  <th>专业名称</th>
                  <th>审批状态</th>
                  <th>学籍-院校名称</th>
                  <th>学籍-专业名称</th>
                  <th>学籍-学习形式</th>
                  <th>学籍-预计毕业年份</th>
                  <!--
                  <th>学号</th>
                  <th>考生号</th>
                  <th>专科年级</th>
                  <th>专科专业</th>
                  -->

                  <th style="width: 80px;" 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>
                        <input type="checkbox" [value]="item.id" [(checked)]="item.isChecked"
                          [(ngModel)]="item.isChecked" />
                        <span class="fa fa-check"></span>
                      </label>
                    </div>
                  </td>

                  <td align="center">{{item.year_code}}</td>
                  <td>{{item.org_name}}</td>
                  <td>{{item.join_school_name === '()'  ? '' : item.join_school_name}}</td>
                  <td align="center">{{item.ticket_no}}</td>
                  <td>{{item.std_name}}</td>
                  <td>{{item.major_name}}</td>
                  <td>{{item.status | frameDict : 'record_status'}}</td>
                  <td>{{item.yxmc}}</td>
                  <td>{{item.zymc}}</td>
                  <td>{{item.xxxs}}</td>
                  <td>{{item.yjbynf}}</td>
                  <!--
                  <td>{{item.std_no}}</td>
                  <td>{{item.std_num}}</td>
                  <td>{{item.junior_grade}}</td>
                  <td>{{item.junior_major}}</td>
                  -->
                  <td align="center">

                    <a href="#" *ngIf="item.status===0  || item.status===1 || item.status===4 "
                      (click)="goEdit(editTemplateModal,'only','modal-lg',item)" title="编辑"><em
                        class="fa-lg fas fa-edit mr-1"></em></a>
                    <a href="#" *ngIf="item.status===0  || item.status===1 || item.status===4 " (click)="delete(item)"
                      title="删除"><em class="fa-lg fas fa-trash mr-1" style="color:#F56D6D"></em></a>
                  </td>
                </tr>
              </tbody>
            </table>
            <!-- TODO -->
            <frame-pager [url]="QUERY_URL" hideSearch="true" hasCheck="true" #framePager (preReqEvent)="search($event)">
            </frame-pager>
          </div>

          <!-- 编辑页面 -->
          <div class="col-lg-12" *ngIf="item && editShowType != null &&editShowType!='modal'">
            <ng-container *ngTemplateOutlet="editTemplateModal">
            </ng-container>
          </div>



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

  <!-- 衔接学校上报情况页面 -->
  <div class="col-lg-12" *ngIf="editShowType != null && editShowType == 'joinSchool'">
    <ng-container *ngTemplateOutlet="joinSchoolTemplateModal">
    </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>
  <form [formGroup]="formModel" *ngIf="item" class="form-validate form-horizontal" novalidate="">
    <input type="hidden" class="form-control" formControlName="id" [(ngModel)]="item.id"
      [formControl]="formModel.controls['id']" />
    <div class="row mb-1">

      <label class="col-lg-2 col-form-label text-lg-right">准考证号</label>
      <div class="col-lg-4">

        <input class="form-control" type="text" formControlName="ticket_no" [formControl]="formModel.get('ticket_no')"
          [(ngModel)]="item.ticket_no" (change)="findStdInfo(item.ticket_no)" />

        <span class="text-danger"
          *ngIf="formModel.get('ticket_no').hasError('required') && (formModel.get('ticket_no').dirty || formModel.get('ticket_no').touched)">请填写准考证号</span>
      </div>

      <label class="col-lg-2 col-form-label text-lg-right">考生姓名</label>
      <div class="col-lg-4">

        <input class="form-control" type="text" formControlName="std_name" [formControl]="formModel.get('std_name')"
          [(ngModel)]="item.std_name" readonly />

        <span class="text-danger"
          *ngIf="formModel.get('std_name').hasError('required') && (formModel.get('std_name').dirty || formModel.get('std_name').touched)">请填写考生姓名</span>
      </div>
    </div>
    <div class="row mb-1">

      <label class="col-lg-2 col-form-label text-lg-right">身份证号</label>
      <div class="col-lg-4">
        <input class="form-control" type="text" formControlName="cert_no" [formControl]="formModel.get('cert_no')"
          [(ngModel)]="item.cert_no" readonly />

        <span class="text-danger"
          *ngIf="formModel.get('cert_no').hasError('required') && (formModel.get('cert_no').dirty || formModel.get('cert_no').touched)">请填写身份证号</span>
      </div>

      <label class="col-lg-2 col-form-label text-lg-right">专业</label>
      <div class="col-lg-4">

        <flex-select [allowClear]="true" [(items)]="majorList" optionValueField="id" optionTextField="full_name"
          [(ngModel)]="item.major_record_id" placeholder="请选择" width="250" noResultsFound="无数据"
          formControlName="major_record_id" [formControl]="formModel.get('major_record_id')">
        </flex-select>
        <span class="text-danger"
          *ngIf="formModel.get('major_record_id').hasError('required') && (formModel.get('major_record_id').dirty || formModel.get('major_record_id').touched)">请选择专业</span>
      </div>
    </div>
    <!--
    <div class="row mb-1">

      <label class="col-lg-2 col-form-label text-lg-right">学号</label>
      <div class="col-lg-4">

        <input class="form-control" type="text" formControlName="std_no" [formControl]="formModel.get('std_no')"
          [(ngModel)]="item.std_no" />

      </div>

      <label class="col-lg-2 col-form-label text-lg-right">考生号</label>
      <div class="col-lg-4">

        <input class="form-control" type="text" formControlName="std_num" [formControl]="formModel.get('std_num')"
          [(ngModel)]="item.std_num" />

      </div>
    </div>
    <div class="row mb-1">

      <label class="col-lg-2 col-form-label text-lg-right">专科年级</label>
      <div class="col-lg-4">

        <input class="form-control" type="text" formControlName="junior_grade"
          [formControl]="formModel.get('junior_grade')" [(ngModel)]="item.junior_grade" />

      </div>

      <label class="col-lg-2 col-form-label text-lg-right">专科专业</label>
      <div class="col-lg-4">

        <input class="form-control" type="text" formControlName="junior_major"
          [formControl]="formModel.get('junior_major')" [(ngModel)]="item.junior_major" />

      </div>
    </div>
    -->

    <div class="row mb-1">

        <label class="col-lg-2 col-form-label text-lg-right">衔接学校</label>
        <div class="col-lg-4">

          <flex-select [allowClear]="true" [url]="SCHOOL_LIST_URL" respDataPath="array" optionValueField="id"
            optionTextField="full_name" [(ngModel)]="item.join_school_id" placeholder="请选择" width="250"
            noResultsFound="无数据" [formControl]="formModel.get('join_school_id')" formControlName="join_school_id">
          </flex-select>

        </div>
      </div>

  </form>
</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)="hideModal()">×</button>
    </div>

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

    <div class="modal-footer">
      <button class="btn btn-info" (click)="save()">
        <i class="fa fa-info-circle"> </i> 保存
      </button>
      <button class="btn btn-default" (click)="hideModal()">
        <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)="hideModal()">×</button>
    </div>

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

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

<ng-template #submitTemplateModal>
  <div class="modal-content" style="width:1000px;">
    <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)="query.is_xj='';hideModal()">×</button>
    </div>

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

    <div class="modal-footer">
        <button id="btnExport" class="btn btn-primary mr-1 btn-sm" data-toggle="tooltip" data-placement="left"
        title="导出未通过学籍电子认证的考生" (click)="query.is_xj='1';exportJion()">
        <i class="fa icon-cloud-download"></i>导出未通过学籍电子认证的考生</button>
      <button class="btn btn-info" (click)="audit()">
        <i class="fa fa-info-circle"> </i> 提交
      </button>
      <button class="btn btn-default" (click)="query.is_xj='';hideModal()">
        <i class="icon-close"> </i> 关闭
      </button>
    </div>
  </div>
</ng-template>


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

    <div class="row">
      <div class="col-lg-12">
        <h4>说明：</h4>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <p>1、上传之前，请先选择上报备案的批次；</p>
        <p>2、如果有多个文件，请先将多个文件压缩为一个zip或者rar的压缩包,在上传。</p>
      </div>
    </div>

  </div>
</ng-template>


<ng-template #submitTemplate>

    <div class="row">
      <div class="col-lg-12">
        <p>未通过学籍电子认证的考生列表（认证时间在90天以内。请提醒考生在广西自考网上系统完成学籍电子认证）</p>
      </div> 
    </div>

     <!--表格-->
     <div class="row">
      <div class="col-lg-12 ml-0">
        <table class="table table-sm table-striped table-hover table-bordered bg-white">
          <thead>
            <tr>
              

              <th align="center">批次</th>
              <th>主考学校</th>
              <th>衔接学校</th>
              <th align="center">准考证号</th>
              <th>姓名</th>
              <th>专业名称</th>
              <th>审批状态</th>
              <th>学籍-院校名称</th>
              <th>学籍-专业名称</th>
              <th>学籍-学习形式</th>
              <th>学籍-预计毕业年份</th>
             

              
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of mainPager.getRecords(); let i = index">
             

              <td align="center">{{item.year_code}}</td>
              <td>{{item.org_name}}</td>
              <td>{{item.join_school_name === '()'  ? '' : item.join_school_name}}</td>
              <td align="center">{{item.ticket_no}}</td>
              <td>{{item.std_name}}</td>
              <td>{{item.major_name}}</td>
              <td>{{item.status | frameDict : 'record_status'}}</td>
              <td>{{item.yxmc}}</td>
              <td>{{item.zymc}}</td>
              <td>{{item.xxxs}}</td>
              <td>{{item.yjbynf}}</td>
            
              
            </tr>
          </tbody>
        </table>
        <!-- TODO -->
        <frame-pager [url]="QUERY_URL" hideSearch="true" hasCheck="true" #mainPager (preReqEvent)="search($event)">
        </frame-pager>
      </div>
    </div>
</ng-template>


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

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

  </div>
</ng-template>

<ng-template #joinSchoolFormTemplate>
  <div class="row">
    <div class="col-lg-12 ml-0">
      <table class="table table-sm table-striped table-hover table-bordered bg-white">
        <thead align="center">
          <th>序号</th>
          <th>衔接学校</th>
          <th>上报状态</th>
          <th>操作</th>
        </thead>
        <tr *ngFor="let item of joinSchool; let i = index" align="center">
          <td>{{i+1}}</td>
          <td>{{item.org_name}}</td>
          <td>
            <ng-container *ngIf="item.status == 1; else elseTemplate">
              已上报
            </ng-container>
            <ng-template #elseTemplate>
              未上报
            </ng-template>
          </td>
          <td>
            <div *ngIf="item.status==1" (click)="back(item.join_school_id)"><a href="#">退回</a></div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</ng-template>