<div class="content-heading justify-content-between">
  <div>基础配置 - 费用管理</div>
  <div>
    <a [hidden]="viewStep !=='page' " href="#" (click) = "goViewStep('add', initFee)"><em class="fa-lg fas icon-plus "></em></a>
  </div>
</div>
<div class="ml-0 table-responsive bg-white" [hidden]="viewStep !== 'page'">
  <table class="table table-striped table-hover table-bordered">
    <thead>
    <tr>
      <th>#</th>
      <th><a (click)="page.sort('fee_name')">费用名称</a></th>
      <th>报考金额</th>
      <th>可用于多次报考</th>
      <th>备注信息</th>
      <th style="width:100px;"></th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let v of page.getRecords(); let i = index">
      <td>{{i + 1}}</td>
      <td>{{v.fee_name}}</td>
      <td>{{v.fee_amount/100 | currency : 'CNY' : 'symbol-narrow'}}</td>
      <td [innerHTML]="v.fee_status | frameStatus"></td>
      <td>{{v.fee_desc}}</td>
      <td>
        <a class="ml-3" href="#" (click)="goViewStep('edit', v, 'cf/fee/find.htm')"><em class="fa-lg fas fa-edit "></em></a>
        <a frameRole res="cf_manage" class="ml-3" href="#" (click)="page.optr('cf/fee/del.htm',{fee_id:v.fee_id},undefined,'费用【'+v.fee_name+'】已成功删除！')"><em class="fa-lg fas fa-trash text-danger"></em></a>
      </td>
    </tr>
    </tbody>
  </table>
  <frame-pager [url]="'cf/fee/page.htm'" #page></frame-pager>
</div>


<div  [hidden]="viewStep === 'page' ">
  <div class="card card-default">
    <div class="card-body">
      <form [formGroup]="valForm"  class="form-validate form-horizontal" novalidate="">
        <div class="row" >
          <label class="col-lg-1 col-form-label text-lg-right">费用名称</label>
          <div class="col-lg-3">
            <input class="form-control" #elAutoFocus type="text" formControlName="fee_name" [formControl]="valForm.controls['fee_name']" [(ngModel)]="entity.fee_name" />
            <span class="text-danger" *ngIf="valForm.controls['fee_name'].hasError('required') && (valForm.controls['fee_name'].dirty || valForm.controls['fee_name'].touched)">请输入费用名称</span>
            <span class="text-danger" *ngIf="valForm.controls['fee_name'].hasError('rangewords') && (valForm.controls['fee_name'].dirty ||valForm.controls['fee_name'].touched)">最少需要2个字符，最大允许32个字符</span>
          </div>

          <label class="col-lg-1 col-form-label text-lg-right">费用金额</label>
          <div class="col-lg-3">
            <input class="form-control" type="text" formControlName="fee_amount" [formControl]="valForm.controls['fee_amount']" [(ngModel)]="entity.fee_amount"/>
            <span class="text-danger" *ngIf="valForm.controls['fee_amount'].hasError('required') && (valForm.controls['fee_amount'].dirty || valForm.controls['fee_amount'].touched)">费用金额不允许为空</span>
            <span class="text-danger" *ngIf="valForm.controls['fee_amount'].hasError('min') && (valForm.controls['fee_amount'].dirty || valForm.controls['fee_amount'].touched)">费用金额至少为0</span>

          </div>

          <label class="col-lg-1 col-form-label text-lg-right">一次交费通行</label>
          <div class="col-lg-3">
            <select class="custom-select" formControlName="fee_status" [formControl]="valForm.controls['fee_status']" [(ngModel)]="entity.fee_status" frameDict [dictName]="'FrameStatus'"></select>
            <span class="text-danger" *ngIf="valForm.controls['fee_status'].hasError('required') && (valForm.controls['fee_status'].dirty || valForm.controls['fee_status'].touched)">费用状态不允许为空</span>
          </div>
        </div>
      </form>
      <div class="row mt-3" >
        <label class="col-lg-1 col-form-label text-lg-right">备注信息</label>
        <div class="col-lg-11">
          <textarea class="form-control" [(ngModel)]="entity.fee_desc" rows="5"></textarea>
        </div>
      </div>
      <div class="card-footer mt-2 text-center">
        <button class="btn btn-info" (click)="submitForm('cf/fee/')">{{getStepName()}}费用</button>&nbsp;&nbsp;&nbsp;
        <button class="btn btn-default" (click)="viewStep ='page'">取消操作</button>
      </div>
    </div>
  </div>
</div>


