<div class="content-heading justify-content-between">
  <div>框架配置 - 资源管理</div>
  <div>
    <a [hidden]="viewStep !=='page' " href="#" (click)="goResEdit('only')"><em class="fa-lg fas icon-plus "></em></a>
  </div>
</div>
<div class="ml-0 table-responsive bg-white" [hidden]="mode == 'edit' || editShowType=='only'">
  <table class="table table-striped table-hover table-bordered">
    <thead>
      <tr>
        <th><a href="#" (click)="pager.sort('res_name')">资源名称</a></th>
        <th>资源路径</th>
        <th>资源类型</th>
        <th>图标</th>
        <th>是否启用</th>
        <th style="width:100px;">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let res of framePager.getRecords()">
        <td>{{res.res_name}}</td>
        <td>{{res.res_url}}</td>
        <td>{{res.res_type}}</td>
        <td><em [class]="res.res_css"></em></td>
        <td>{{res.res_status | frameDict : 'FrameStatus'}}</td>
        <td>
          <a href="#" (click)="goResEdit('only',res)"><em class="fa-lg fas fa-edit "></em></a>
          <a class="ml-2" href="#" (click)="deleteRes(res)"><em class="fa-lg fas fa-trash text-danger"></em></a>
        </td>
      </tr>
    </tbody>
  </table>
  <frame-pager [url]="QUERY_URL"  hasCheck="true" #framePager></frame-pager>

</div>
<div class="col-lg-12" *ngIf="item && editShowType != null &&editShowType =='only'">
  <ng-container *ngTemplateOutlet="editTemplateModal">
  </ng-container>
</div>

<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.res_id">编辑</span> <span *ngIf="!item.res_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)="saveRes()">
        <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 #editFormTemplate>
  <form [formGroup]="formModel" *ngIf="item" (ngSubmit)="save()" class="form-validate form-horizontal" novalidate>
    <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" placeholder="请填写资源名称" formControlName="res_name" [formControl]="formModel.controls['res_name']"
          [(ngModel)]="item.res_name" />
        <span class="text-danger" *ngIf="formModel.get('res_name').hasError('required') && (formModel.get('res_name').dirty || formModel.get('res_name').touched)">请填写收费名称</span>
      </div>
      <label class="col-lg-2 col-form-label text-lg-right">资源状态</label>
      <div class="col-lg-4">
        <select name="res_status" [(ngModel)]="item.res_status" frameDict [dictName]="'FrameStatus'" [(dictValue)]="item.res_status"
          [tipFlag]="true" class="form-control" formControlName="res_status" [formControl]="formModel.controls['res_status']">
        </select>
        <span class="text-danger" *ngIf="formModel.get('res_status').hasError('required') && (formModel.get('res_status').dirty || formModel.get('res_status').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 name="res_type" [(ngModel)]="item.res_type" frameDict [dictName]="'Res_Type'" [(dictValue)]="item.res_type"
          [tipFlag]="true" class="form-control" formControlName="res_type" [formControl]="formModel.controls['res_type']">
        </select>
        <span class="text-danger" *ngIf="formModel.get('res_type').hasError('required') && (formModel.get('res_type').dirty || formModel.get('res_type').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" value="" placeholder="请填写资源路径" formControlName="res_url" [formControl]="formModel.controls['res_url']"
          [(ngModel)]="item.res_url" />
      </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" placeholder="请填写资源排序" formControlName="res_order" [formControl]="formModel.controls['res_order']"
          [(ngModel)]="item.res_order" />
        <span class="text-danger" *ngIf="formModel.get('res_order').hasError('required') && (formModel.get('res_order').dirty || formModel.get('res_order').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" value="" placeholder="请填写资源样式" formControlName="res_css" [formControl]="formModel.controls['res_css']"
          [(ngModel)]="item.res_css" />
      </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="form-control" formControlName="res_pid" [formControl]="formModel.controls['res_pid']"
          [(ngModel)]="item.res_pid">
          <option *ngFor="let item of resArray" value="{{item.res_id}}">({{item.res_id}}){{item.res_name}}</option>
        </select> -->
        <flex-select [allowClear]="true" [(items)]="resArray" respDataPath="array" optionValueField="res_id"
          optionTextField="res_name" [(ngModel)]="item.res_pid" placeholder="请选择" width="150" noResultsFound="无数据"
		  formControlName="res_pid" [formControl]="formModel.controls['res_pid']">
        </flex-select>
        <span class="text-danger" *ngIf="formModel.get('res_pid').hasError('required') && (formModel.get('res_pid').dirty || formModel.get('res_pid').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.res_desc" rows="5" formControlName="res_desc" [formControl]="formModel.controls['res_desc']"></textarea>
      </div>
    </div>

  </form>
</ng-template>