<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'">
    <!--查询条件-->
    <div class="row mb-3 ml-1" [hidden]="editShowType=='only'">
      <div class="col-lg-12">
        <form class="form-inline">
          <!-- 支持排序 -->
          <table>
            <tr>
              <td>
          <div class="input-group mr-1 input-group-sm">
            <label>&nbsp;&nbsp;&nbsp;&nbsp;关键字：</label>
            <input name="query" [(ngModel)]="query.query" class="input-sm form-control" type="text" value=""
              maxlength="64" placeholder="请输入查询关键字" style="width:180px;">
          </div>
        </td>
        <td>
          <div class="input-group mr-1 input-group-sm">
            <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;批次：</label>
            <flex-select [allowClear]="true" [url]="YEAR_CODE_URL" respDataPath="array" optionValueField="year_code" optionTextField="year_code"
              [(ngModel)]="query.year_code" placeholder="请选择"  noResultsFound="无数据" width="150"
              [ngModelOptions]="{standalone: true}">
            </flex-select>
          </div>
        </td>
        <td>
          <div class="input-group mr-1 input-group-sm">
            <label>主考学校：</label>
            <flex-select [url]="SCHOOL_URL" respDataPath="array" optionValueField="id" optionTextField="org_name"
              [(ngModel)]="query.school_id" placeholder="请选择"  noResultsFound="无数据" width="150"
              [ngModelOptions]="{standalone: true}">
            </flex-select>
          </div>
          </td>
        </tr>
        <tr>
            <td>
          <div class="input-group mr-1 input-group-sm">
            <label>备案类型：</label>
            <select name="major_level" [(ngModel)]="query.std_type" frameDict [dictName]="'std_type'" style="width:180px;"
              class="form-control">
            </select>
          </div>
          </td>
          <td>
          <div class="input-group mr-1 input-group-sm">
            <label>审核状态：</label>
            <select name="major_level" [(ngModel)]="query.status" frameDict [dictName]="'record_status'" style="width:150px;"
              class="form-control">
            </select>
          </div>
          </td>
          <td>
              <div class="input-group mr-1 input-group-sm">
                  <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;专业：</label>
                  <flex-select [allowClear]="true"
                  [url]= "'pl/plMajor/openMajorList.htm'"
                  #major_id
                  respDataPath= "array"
                  optionValueField="major_code"
                  optionTextField="full_name"
                  [(ngModel)]="query.major_code"
                  placeholder="请选择"
                  width = "150"
                  noResultsFound = "无数据"
                  [ngModelOptions]="{standalone: true}"
                  >
              </flex-select>
                </div>
          </td>
          <td align="right">
          <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 mr-1 btn-sm" (click)="reset()">
              <i class="fa fa-search"></i>重置</button>
              
            <button class="btn btn-primary mr-1 btn-sm" (click)="export()" data-toggle="tooltip"
            data-placement="left" title="导出">
            <i class="fa icon-cloud-download"></i>导出</button>    

            </td>
            </tr>
            </table>
            </form>
      </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>序号</th>
              <th align="center">批次</th>
              <th>主考学校</th>
              <th>衔接学校</th>
              <th align="center">准考证号</th>
              <th>考生姓名</th>
              <th>衔接专业</th>
              <th>备案类型</th>
              <th>审核状态</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let item of framePager.getRecords(); let i = index">
              <td>{{framePager.pageStart+i}} </td>
              <td align="center">{{item.year_code}}</td>
              <td>{{item.org_code}}-{{item.org_name}}</td>
              <td>{{item.join_school_code}}-{{item.join_school_name}}</td>
              <td align="center">{{item.ticket_no}}</td>
              <td>{{item.std_new_name}}</td>
              <td>{{item.join_major_name}}</td>
              <td>{{item.std_type | frameDict : 'std_type'}}</td>
              <td>{{item.status | frameDict : 'record_status'}}</td>
            </tr>
          </tbody>
        </table>
        <frame-pager [url]="QUERY_URL" [autoLoad]="false" 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">
        <input class="form-control" type="text" cols="5" placeholder="请填写收费代码" formControlName="fee_item_code"
          [formControl]="formModel.controls['fee_item_code']" [(ngModel)]="item.fee_item_code" />
        <span class="text-danger"
          *ngIf="formModel.get('fee_item_code').hasError('required') && (formModel.get('fee_item_code').dirty || formModel.get('fee_item_code').touched)">请填写收费代码</span>
        <span class="text-danger"
          *ngIf="formModel.get('fee_item_code').hasError('maxlength') && (formModel.get('fee_item_code').dirty || formModel.get('fee_item_code').touched)">收费代码不能超过3位</span>
        <span class="text-danger"
          *ngIf="formModel.controls['fee_item_code'].hasError('pattern') && (formModel.controls['fee_item_code'].dirty ||formModel.controls['fee_item_code'].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" placeholder="请填写收费名称" formControlName="fee_item_name"
          [formControl]="formModel.controls['fee_item_name']" [(ngModel)]="item.fee_item_name" />
        <span class="text-danger"
          *ngIf="formModel.get('fee_item_name').hasError('required') && (formModel.get('fee_item_name').dirty || formModel.get('fee_item_name').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">
        <input class="form-control" type="number" cols="5" placeholder="收费金额" formControlName="price"
          [formControl]="formModel.controls['price']" [(ngModel)]="item.price" />
        <span class="text-danger"
          *ngIf="formModel.get('price').hasError('required') && (formModel.get('price').dirty || formModel.get('price').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-10">
        <textarea class="form-control" [(ngModel)]="item.remark" rows="5" formControlName="remark"
          [formControl]="formModel.controls['remark']"></textarea>
      </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>