<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 (ngSubmit)="framePager.goSearch()" class="form-inline">

              <div class="input-group mr-1 input-group-sm">
                <label>年度：</label>
                <input name="year" [(ngModel)]="query.year" style="width: 100px" class="input-sm form-control" type="text" value="" maxlength="64">
              </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]="this.editShowType=='only'">
          <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)="this.goEdit(editTemplateModal,'modal','modal-md',null)"
                title="添加">
                <i class="fa fa-plus">添加</i> 
              </button>
   
              <button class="btn mr-1 btn-sm bg-danger" (click)="this.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" (click)="updateStatus(1)" title="开启">
                   开启</button>
                <button id="btnExport" class="btn btn-primary mr-1 btn-sm" data-toggle="tooltip" data-placement="left"(click)="updateStatus(0)" title="停用">
                  停用</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>
                    <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 align="center">年度</th>
                  <th align="center">批次</th>
                  <th align="center">开始时间</th>
                  <th align="center">结束时间</th>
                  <th>类型</th>
                  <th align="center">状态</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 nomargin>
                        <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}}</td>
                  <td align="center">{{item.time==1?'上半年':item.time==2?'下半年':''}}</td>
                  <td align="center">{{item.start_time}}</td>
                  <td align="center">{{item.end_time}}</td>
                  <td>{{item.type==1?'免考':item.type==2?'前置学历':item.type==3?'免考审定结果公布':item.type==4?'现场审核':''}}</td>
                  <td align="center">{{item.status==1?'启用':item.status==0?'禁用':''}}</td>

                  <td align="center">
               
                    <a href="#" (click)="this.goEdit(editTemplateModal,'modal','modal-lg',item)" title="编辑">
                      <em class="fa-lg fas fa-edit mr-1"></em>
                    </a>
                    <a href="#" (click)="this.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)="this.search($event)"></frame-pager>
          </div>

          <!-- 编辑页面 -->
          <div class="col-lg-12" *ngIf="this.item && this.editShowType != null &&this.editShowType!='modal'">
            <ng-container *ngTemplateOutlet="editTemplateModal">
            </ng-container>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- only编辑页面 -->
  <div class="col-lg-12" *ngIf="this.item && this.editShowType != null && this.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)]="this.item.id" [formControl]="this.formModel.controls['id']"/>
    <table style="width: 70%;margin-left: 60px;height: 160px;" *ngIf="item">
        <tr>
          <td style="width: 50px">开始时间：</td>
          <td style="width: 80px;height: 40px;">
            <div class="input-group">
              <input class="form-control"  type="text" DateTimePicker formControlName="start_time" [formControl]="formModel.controls['start_time']" [dpType]="'time'" [dpValue] = "item.start_time"
              [(ngModel)]="item.start_time" />
              <div class="input-icon">
                  <i class="icon-calendar" ></i>
                </div>
            </div>
            
            <span class="text-danger" *ngIf="this.formModel.get('start_time').hasError('required') && (this.formModel.get('start_time').dirty || this.formModel.get('start_time').touched)">请输入开始时间</span>
          </td>
        </tr>
        <tr>
          <td >结束时间：</td>
          <td style="height: 40px">
              <div class="input-group">
                <input class="form-control"  type="text" DateTimePicker formControlName="end_time" [formControl]="formModel.controls['end_time']" [dpType]="'time'" [dpValue] = "item.end_time"
                [(ngModel)]="item.end_time" />
                <div class="input-icon">
                    <i class="icon-calendar" ></i>
                  </div>
              </div>
              <span class="text-danger" *ngIf="this.formModel.get('end_time').hasError('required') && (this.formModel.get('end_time').dirty || this.formModel.get('end_time').touched)">请输入结束时间</span>
          </td>
        </tr>
        <tr>
            <td >类型：</td>
            <td style="height: 40px">
                <select class="custom-select" formControlName="type" [formControl]="this.formModel.controls['type']" [(ngModel)]="item.type">
			              <option value="1">免考</option>
                    <option value="2">前置学历</option>
                    <option value="3">免考审定结果公布</option>
                    <option value="4">现场审核</option>
                </select>
                <span class="text-danger" *ngIf="this.formModel.get('type').hasError('required') && (this.formModel.get('type').dirty || this.formModel.get('type').touched)">请选择类型</span>
            </td>
          </tr>
          <tr>
              <td >状态：</td>
              <td style="height: 40px">
                  <select class="custom-select" formControlName="status" [formControl]="this.formModel.controls['status']" [(ngModel)]="item.status">
                      <option value="1">启用</option>
                      <option value="0">禁用</option>
                     
                  </select>
                  <span class="text-danger" *ngIf="this.formModel.get('status').hasError('required') && (this.formModel.get('status').dirty || this.formModel.get('status').touched)">请选择</span>
              </td>
            </tr>

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

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

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