<div class="panel panel-default">
  <div>
    <!--标题-->
    <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>

  <div class="panel-body ml-sm " [hidden]="editShowType=='only'">
    <!--查询条件-->
    <div class="row mb-3 ml-1" [hidden]="editShowType=='only'">
      <div class="col-lg-12">
        <form class="form-inline" (ngSubmit)="framePager.goSearch()" >
          <!-- 支持排序 -->
          <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>
          <div class="input-group mr-1 input-group-sm">
            <label class="ml-sm">转考类型：</label>
            <select name="major_level" [(ngModel)]="query.turn_type" frameDict [dictName]="'turn_type'" [(dictValue)]='query.turn_type' class="form-control">
            </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>
        </form>
      </div>
    </div>

    <!-- 工具栏 -->
    <div class="row mb-2" [hidden]="editShowType=='only'">
      <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)="goEdit(editTemplateModal,'only')"
            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>
        </div>

      </div>
    </div>

    <!--表格-->
    <div class="row" [hidden]="editShowType=='only'">
      <div class="col-sm-12 ml-0">
        <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>开始时间</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>{{item.year}}{{item.time | frameDict: 'time'}}</td>
              <td>{{item.start_time | date: 'yyyy-MM-dd'}}</td>
              <td>{{item.end_time | date: 'yyyy-MM-dd'}}</td>
              <td>{{item.type| frameDict: 'turn_type'}}</td>
              <td>{{item.status| frameDict: 'Status'}}</td>
              <td align="center">
                <a href="#" *ngIf="item.id>0"  (click)="goEdit(editTemplateModal,'only','modal-lg',item)"
                  title="编辑"><em class="fa-lg fas fa-edit mr-1"></em></a>
                <a href="#" *ngIf="item.id>0"  (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>
  <!-- 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" (ngSubmit)="save()" class="form-validate form-horizontal" novalidate>
    <input type="hidden" formControlName="id" [formControl]="formModel.controls['id']" />

    <div class="row mt-3">
      <label class="col-lg-2 col-form-label text-lg-right">年份：</label>
      <div class="col-lg-4">
        <flex-select [allowClear]="true" [url]="YEAR_URL" respDataPath="array" optionValueField="year" optionTextField="year"
          [(ngModel)]="item.year" placeholder="请选择" width="222" formControlName="year"
          [formControl]="formModel.controls['year']" noResultsFound="无数据">
        </flex-select>
        <span class="text-danger" *ngIf="formModel.get('year').hasError('required') && (formModel.get('year').dirty || formModel.get('year').touched)">请选择年份</span>
      </div>

      <label class="col-lg-2 col-form-label text-lg-right">时间：</label>
      <div class="col-lg-4">
        <select class="custom-select" formControlName="time" [formControl]="formModel.controls['time']" [(ngModel)]="item.time"
          frameDict [dictName]="'time'" [(dictValue)]="item.time">
        </select>
        <span class="text-danger" *ngIf="formModel.get('time').hasError('required') && (formModel.get('time').dirty || formModel.get('time').touched)">请选择时间</span>
      </div>
    </div>

    <div class="row mt-3">
      <label class="col-lg-2 col-form-label text-lg-right">开始时间：</label>
      <div class="col-lg-4">
        <div class="input-group">
          <input class="form-control" type="text" DateTimePicker [dpType]="'date'" [dpValue]="item.start_time"
            formControlName="start_time" [formControl]="formModel.controls['start_time']" [(ngModel)]="item.start_time" />
          <div class="input-group-append">
            <div class="input-group-text"><i class="icon-calendar"></i></div>
          </div>
        </div>
        <span class="text-danger" *ngIf="formModel.get('start_time').hasError('required') && (formModel.get('start_time').dirty || formModel.get('start_time').touched)">请选择开始时间</span>
      </div>

      <label class="col-lg-2 col-form-label text-lg-right">结束时间：</label>
      <div class="col-lg-4">
        <div class="input-group">
          <input class="form-control" type="text" DateTimePicker [dpType]="'date'" [dpValue]="item.end_time"
            formControlName="end_time" [formControl]="formModel.controls['end_time']" [(ngModel)]="item.end_time" />
          <div class="input-group-append">
            <div class="input-group-text"><i class="icon-calendar"></i></div>
          </div>
        </div>
        <span class="text-danger" *ngIf="formModel.get('end_time').hasError('required') && (formModel.get('end_time').dirty || formModel.get('end_time').touched)">请选择结束时间</span>
      </div> 
    </div>

    <div class="row mt-3">
      <label class="col-lg-2 col-form-label text-lg-right">转考类型：</label>
      <div class="col-lg-4">
        <select class="custom-select" formControlName="type" [formControl]="formModel.controls['type']" [(ngModel)]="item.type"
          frameDict [dictName]="'turn_type'" [(dictValue)]="item.type">
        </select>
        <span class="text-danger" *ngIf="formModel.get('type').hasError('required') && (formModel.get('type').dirty || formModel.get('type').touched)">请选择转考类型</span>
      </div>
      <label class="col-lg-2 col-form-label text-lg-right">状态：</label>
      <div class="col-lg-4">
        <select class="custom-select" formControlName="status" [formControl]="formModel.controls['status']" [(ngModel)]="item.status"
          frameDict [dictName]="'Status'" [(dictValue)]="item.status">
        </select>
        <span class="text-danger" *ngIf="formModel.get('status').hasError('required') && (formModel.get('status').dirty || formModel.get('status').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>

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