<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'">
    <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)="framePager.goSearch()" class="form-inline">
              <div class="input-group mr-1 input-group-sm">
                <label>关键字：</label>
                <input name="keyword" [(ngModel)]="query.query" class="input-sm form-control" type="text" maxlength="64" placeholder="请输入查询关键字">
              </div>
              <div class="input-group mr-1 input-group-sm">
                <label>考试日期：</label>
                <select name="exam_time_id" [(ngModel)]="query.exam_time_id" class="form-control">
                  <option value="">请选择</option>
                  <option *ngFor="let item of examtimeList" [value]="item.id">{{item.exam_year_month}}</option>
                </select>
              </div>

              <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>
            </form>
          </div>
        </div>

        <!-- 工具栏 -->
        <div class="row mb-2" [hidden]="editShowType=='only'">
          <div class="col-lg-12">
            <div class="pull-left">
              <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 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) = "goUpload(exportTemplateModal)">
                <i class="fa fa-file-excel"></i>批量导入</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 class="nomargin">
                        <input type="checkbox" (change)="framePager.checkedMasterToggle($event)" />
                        <span class="fa fa-check"></span>
                      </label>
                    </div>
                  </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 class="nomargin">
                        <input type="checkbox" [value]="item.id" [(checked)]="item.isChecked" [(ngModel)]="item.isChecked" />
                        <span class="fa fa-check"></span>
                      </label>
                    </div>
                  </td>
                  <td>{{item.year_month}}</td>
                  <td>{{item.std_name}}</td>
                  <td>{{item.cert_no}}</td>
                  <td>{{item.ticket_no}}</td>
                  <td>{{item.std_sex | frameDict:'StdSexType'}}</td>
                  <td>{{item.full_course_name}}</td>
                  <td>{{item.plan_date}}</td>
                  <td align="center">
                    <a href="#" (click)="delete(item)" title="删除"><em class="fa-lg fas fa-trash mr-1" style="color:#F56D6D"></em></a>
                  </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>
    </div>
  </div>
  <!-- only编辑页面 -->
  <div class="col-lg-12" *ngIf="item && editShowType != null &&editShowType =='only'">
    <ng-container *ngTemplateOutlet="editTemplateModal">
    </ng-container>
  </div>

</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" />

    <div class="row mb-1">
      <label class="col-lg-2 col-form-label text-lg-right required">选择课程</label>
      <div class="col-lg-4">
        <select class="custom-select" formControlName="course_id" [formControl]="formModel.controls['course_id']"
          [(ngModel)]="item.course_id" (change) = "getCourseName(item.course_id)" >
          <option value="">请选择</option>
          <option *ngFor="let item of courseList" [value]="item.id">{{item.code_course_name}}</option>
        </select>
        <span class="text-danger" *ngIf="formModel.get('course_id').hasError('required') && (formModel.get('course_id').dirty || formModel.get('course_id').touched)">请选择课程</span>
      </div>
    <label class="col-lg-2 col-form-label text-lg-right">课程名称</label>
    <div class="col-lg-4">
      <input class="form-control" readonly type="text" formControlName="course_name" [formControl]="formModel.get('course_name')"
        [(ngModel)]="item.course_name" />
      <span class="text-danger" *ngIf="formModel.get('course_name').hasError('required') && (formModel.get('course_name').dirty || formModel.get('course_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">
        <select class="custom-select" formControlName="exam_time_id" [formControl]="formModel.controls['exam_time_id']"
          [(ngModel)]="item.exam_time_id">
          <option value="">请选择</option>
          <option *ngFor="let item of examtimeList" [value]="item.id">{{item.exam_year_month}}</option>
        </select>
        <span class="text-danger" *ngIf="formModel.get('exam_time_id').hasError('required') && (formModel.get('exam_time_id').dirty || formModel.get('exam_time_id').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="plan_date" [formControl]="formModel.get('plan_date')"
          [(ngModel)]="item.plan_date" />
        <span class="text-danger" *ngIf="formModel.get('plan_date').hasError('required') && (formModel.get('plan_date').dirty || formModel.get('plan_date').touched)">请输入考试时间</span>
      </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> <span *ngIf="item?.id">编辑</span> <span *ngIf="!item?.id">新增</span> 计划
      </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 #exportTemplateModal>
  <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>

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

    <div class="modal-footer">
      <button class="btn btn-info" (click)="upload()">
        <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 #exportFormTemplate>
  <div class="row mb-2">
    <label class="col-lg-2 col-form-label text-lg-right">考试日期</label>
    <div class="col-lg-6">
      <select class="custom-select" [(ngModel)] = "exam_time_id">
        <option value="">请选择</option>
        <option *ngFor="let item of examtimeList" [value]="item.id">{{item.exam_year_month}}</option>
      </select>
    </div>
    <div class="col-lg-2">
      <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 class="row mb-2">
    <div class="col-lg-8">
      <frame-uploader #uploader [silenceUpload]="true" [multiple]="false" [autoUpload]="true" [uploadUrl]="UPLOAD_URL"></frame-uploader>
    </div>
  </div>
</ng-template>