<div class="content-heading justify-content-between">
  <div>框架配置 - 角色管理</div>
  <div>
    <a [hidden]="viewStep !=='page' " href="#" (click) = "goViewStep({},'add')"><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 href="#" (click)="frameRole.sort('role_name')">角色名称</a></th>
      <th>角色类型</th>
      <th>描述信息</th>
      <th>角色状态</th>
      <th>操作员数</th>
      <th>资源数</th>
      <th style="width:120px;"></th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let role of frameRole.getRecords(); let i = index">
      <td>{{i + 1}}</td>
      <td>{{role.role_name}}</td>
      <td [innerHTML]="role.role_type | frameDict : 'FrameRoleType'"></td>
      <td>{{role.role_desc}}</td>
      <td [innerHTML]="role.role_status | frameStatus"></td>
      <td>{{role.optr_count}}</td>
      <td>{{role.res_count}}</td>
      <td>

        <a href="#" (click)="goResStep(role)"><em class="fa-lg fab fa-windows text-success"></em></a>
        <a class="ml-3" href="#" (click)="goViewStep(role,'edit')"><em class="fa-lg fas fa-edit "></em></a>
        <a class="ml-3" href="#" (click)="frameRole.optr('frame/role/delete.htm',{key:role.role_id},undefined,'角色【'+role.role_name+'】已成功删除！')"><em class="fa-lg fas fa-trash text-danger"></em></a>
      </td>
    </tr>
    </tbody>
  </table>
  <frame-pager [url]="'frame/role/page.htm'" #frameRole></frame-pager>
</div>

<div class="col-lg-12" [hidden]="viewStep === 'page' || viewStep === 'res'">
  <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-2 col-form-label text-lg-right">角色名称</label>
          <div class="col-lg-10">
            <input class="form-control" type="text" formControlName="role_name" [formControl]="valForm.controls['role_name']" [(ngModel)]="role.role_name" #elRoleName/>
            <span class="text-danger" *ngIf="valForm.controls['role_name'].hasError('required') && (valForm.controls['role_name'].dirty || valForm.controls['role_name'].touched)">角色名称不允许为空</span>
          </div>
        </div>
        <div class="row mt-2">
          <label class="col-lg-2 col-form-label text-lg-right">角色类型</label>
          <div class="col-lg-4">
            <select class="custom-select" formControlName="role_type" [formControl]="valForm.controls['role_type']" [(ngModel)]="role.role_type" frameDict [dictName]="'FrameRoleType'" [tipMsg]="'请选择类型'"></select>
            <span class="text-danger" *ngIf="valForm.controls['role_type'].hasError('required') && (valForm.controls['role_type'].dirty || valForm.controls['role_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="role_status" [formControl]="valForm.controls['role_status']" [(ngModel)]="role.role_status" frameDict [dictName]="'FrameStatus'" [tipMsg]="'请选择状态'"></select>
            <span class="text-danger" *ngIf="valForm.controls['role_status'].hasError('required') && (valForm.controls['role_status'].dirty || valForm.controls['role_status'].touched)">角色状态不允许为空</span>
          </div>

        </div>
        <div class="row mt-2">
          <label class="col-lg-2 col-form-label text-lg-right">描述信息</label>
          <div class="col-lg-10">
            <textarea class="form-control" formControlName="role_desc" [(ngModel)]="role.role_desc" rows="5"></textarea>
          </div>
        </div>

      </form>
      <div class="card-footer mt-2 text-center">
        <button class="btn btn-info" (click)="submitForm(valForm.value)">{{viewStep + '角色'}}</button>&nbsp;&nbsp;&nbsp;
        <button class="btn btn-default" (click)="role = {};viewStep ='page'">取消操作</button>
      </div>
    </div>
  </div>
</div>

<div class="card card-default" [hidden]="viewStep !== 'res'">
  <div class="card-header">
    角色【{{role.role_name}}】权限分配
  </div>
  <div class="card-body">
      <ul id="tree" class="ztree ml-5" ></ul>
  </div>
  <div class="card-footer text-center">
    <button class="btn btn-info" (click)="saveRes()">保存角色【{{role.role_name}}】的权限分配</button>&nbsp;&nbsp;&nbsp;
    <button class="btn btn-default" (click)="role = {}; viewStep = 'page' ">取消操作</button>
  </div>
</div>
