<div class="panel panel-default">
  <div>
    <!--标题-->
    <div class="panel-title">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item active" aria-current="page">报考人数统计</li>
        </ol>
      </nav>
    </div>
  </div>

  <div class="panel-body ml-sm " [hidden]="editShowType=='only' || editShowType=='special'|| editShowType=='net'">
    <!--查询条件-->
    <div class="row mb-3 ml-1" [hidden]="editShowType=='only' || editShowType=='special'|| editShowType=='net'">
      <div class="col-lg-12">
        <form (ngSubmit)="framePager.goSearch()" class="form-inline">
          <!-- 支持排序 -->
          <div class="input-group mr-1 input-group-sm">
            <label>关键字：</label>
            <input name="query" [(ngModel)]="query.query" class="input-sm form-control" type="text" value=""
              maxlength="64" placeholder="请输入查询关键字">
          </div>
          <button class="btn btn-primary btn-rounded btn-outline btn-sm  mr-1">
            <i class="fa fa-search"></i> 查询</button>
          <button id="btnExport" class="btn btn-primary mr-1 btn-sm" data-toggle="tooltip" data-placement="left" title="导出" (click)="export()">
            <i class="fa icon-cloud-download"></i> 导出</button>
        </form>
      </div>
    </div>


    <!-- 工具栏 -->
    <div class="row mb-2" [hidden]="editShowType=='only' || editShowType=='other' || editShowType=='special'|| editShowType=='net'">
      <div class="col-lg-12">
        <div class="pull-left">
          <button class="btn btn-primary mr-1 btn-sm" data-toggle="tooltip" data-placement="left"
            (click)="showEdit('only')" title="报考总数统计">
            <i class="fa icon-layers"></i> 报考总数统计</button>
            <button class="btn btn-primary mr-1 btn-sm" data-toggle="tooltip" data-placement="left"
            (click)="showNetCourse('net')" title="非网评课程报考统计">
            <i class="fa icon-anchor"></i> 非网评课程报考统计</button>

          <button class="btn btn-primary mr-1 btn-sm" data-toggle="tooltip" data-placement="left"
            (click)="showSpecialCourse('special')" title="特殊课程报考统计">
            <i class="fa icon-anchor"></i> 特殊课程报考统计</button>
           
        </div>

      </div>
    </div>


    <!--表格-->
    <div class="row" [hidden]="editShowType=='only' || editShowType=='special'|| editShowType=='net'">
      <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 align="right">报考人数</th>
              <th align="right">现场报考人数</th>
              <th align="right">网上报考人数</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of framePager.getRecords(); let i = index">
              <td>{{framePager.pageStart+i}}</td>
              <td align="center">{{item.course_code}}</td>
              <td>{{item.course_name}}</td>
              <td align="right">{{item.sums}}</td>
              <td align="right">{{item.collsum}}</td>
              <td align="right">{{item.persum}}</td>
            </tr>
          </tbody>
        </table>
        <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>

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

  <div class="col-lg-12" *ngIf="editShowType != null &&editShowType =='net'">
    <ng-container *ngTemplateOutlet="editNetTemplateModal">
    </ng-container>
  </div>

</div>


<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> <span>报考总数统计</span>
      </div>

      <button type="button" class="close" (click)="hideModal()">×</button>
    </div>

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

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

<ng-template #editFormTemplate>
  <div class="row mt-3">
    <div class="col-sm-12 ml-0">
      <table class="table table-sm table-striped table-hover table-bordered bg-white">
        <thead>
          <tr align="center">
            <th>报考科次</th>
            <th>现场报考科次</th>
            <th>网上报考科次</th>
          </tr>
        </thead>
        <tbody>
          <tr align="right">
            <td>{{stdEnrol?.num}}</td>
            <td>{{stdEnrol?.college_num}}</td>
            <td>{{stdEnrol?.personal_num}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="row mt-3">
    <div class="col-sm-12 ml-0">
      <table class="table table-sm table-striped table-hover table-bordered bg-white">
        <thead>
          <tr align="center">
            <th>报考人数</th>
            <th>现场报考人数</th>
            <th>网上报考人数</th>
          </tr>
        </thead>
        <tbody>
          <tr align="right">
            <td>{{stdEnrol?.person_num}}</td>
            <td>{{stdEnrol?.college_p_num}}</td>
            <td>{{stdEnrol?.person_p_num}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>


</ng-template>



<ng-template #editSpecialTemplateModal>
  <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 [ngTemplateOutlet]="editSpecialFormTemplate"></div>

    </div>
    <div class="modal-footer">
        <button class="btn btn-default" (click)="exportSpecialCourse()">
            <i class="fa icon-cloud-download"> </i> 导出
          </button>
      <button class="btn btn-default" (click)="hideModal()">
        <i class="icon-close"> </i> 关闭
      </button>
    </div>
  </div>
</ng-template>


<ng-template #editSpecialFormTemplate>
  <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 align="center">考试场次</th>
          <th align="center">报考人数</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of stdEnrolList; let i = index">
          <td>{{i+1}}</td>
          <td align="center">{{item.course_code}}</td>
          <td>{{item.course_name}}</td>
          <td align="center">{{item.batch}}</td>
          <td align="right">{{item.num}}</td>
        </tr>
      </tbody>

    </table>
  </div>
</ng-template>


<ng-template #editNetTemplateModal>
  <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 [ngTemplateOutlet]="editNetFormTemplate"></div>

    </div>
    <div class="modal-footer">
        <button class="btn btn-default" (click)="exportNetCourse()">
            <i class="fa icon-cloud-download"> </i> 导出
          </button>
      <button class="btn btn-default" (click)="hideModal()">
        <i class="icon-close"> </i> 关闭
      </button>
    </div>
  </div>
</ng-template>


<ng-template #editNetFormTemplate>
  <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 align="center">考试场次</th>
          <th align="center">报考人数</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of stdNetEnrolList; let i = index">
          <td>{{i+1}}</td>
          <td align="center">{{item.course_code}}</td>
          <td>{{item.course_name}}</td>
          <td align="center">{{item.batch}}</td>
          <td align="right">{{item.num}}</td>
        </tr>
      </tbody>

    </table>
  </div>
</ng-template>