import { Component, OnInit, TemplateRef } from '@angular/core';
import { NzModalService } from 'ng-zorro-antd/modal';
import { SysService } from './sys.service';

@Component({
  selector: 'sys-roles',
  template: `

  <nz-page-header i18n-nzTitle nzTitle="角色管理">
    <nz-page-header-extra>
      <button *can="['create', 'own', 'role']" class="btn" (click)="openModal(roleCreate, modalTitle('roleCreate'))" >
        <i class="fal fa-user-plus"></i>
        <ng-container i18n>创建角色</ng-container></button>
      <ng-template #roleCreate let-modal="modalRef">
        <sys-role-edit (onSuccess)="refresh(); modal.close()"></sys-role-edit>
      </ng-template>
    </nz-page-header-extra>
  </nz-page-header>

  <cg-pager 
    remoteHeaderUrl="/napi/web/role/pager/headers"
    remoteUrl="/napi/web/role/pager"
    [debug]="false"
    [inputSort]="sort"
    [listTemplate]="listTpl"
    [refresh]="refreshTrigger"
    [showOrder]="false"
  ></cg-pager>

  <ng-template #listTpl let-list="list" let-headers="headers"  >
    <cg-pager-table (onSort)="sort=$event"  [headers]="headers" [list]="list?.data" [cellRenders]="{user, grants, tableOperations}" > </cg-pager-table> 
  </ng-template>

  <ng-template #grants let-item="item" >
    <nz-tag nzColor="default" *ngFor="let grant of item?.grants" >{{grant.resource}}:{{grant.action}}{{grant.possession}}</nz-tag>
  </ng-template>

  <ng-template #user let-item="item" >
    {{item?.user?.username}}
  </ng-template>

  <ng-template #tableOperations let-item="item" >
    &nbsp;
    <ng-container *can="['update', 'own', 'role', item.isOwner]">
      <button class="btn btn-sm me-1" (click)="openModal(roleEdit, modalTitle('roleEdit'))" i18n>更新</button>
      <ng-template #roleEdit let-modal="modalRef">
        <sys-role-edit [roleId]="item._id" (onSuccess)="refresh(); modal.close()" ></sys-role-edit>
      </ng-template>
    </ng-container>
    <button *can="['delete', 'own', 'role', item.isOwner]" class="btn btn-sm" cgOpButton 
      i18n-confirmContent confirmContent="确定要删除'{{item.name}}'这个角色？" [operation]="sys.deleteRoleOp(item._id)" (onSuccess)="refresh()" >
    <i class="fal fa-user-times"></i><ng-container i18n>删除</ng-container></button>
  </ng-template>

  `,
  styles: [
  ]
})
export class RolesComponent implements OnInit {

  sort: any;
  refreshTrigger: boolean = false;

  constructor(
    public sys: SysService,
    private modal: NzModalService,

  ) { }

  ngOnInit(): void {
  }

  refresh() {
    this.refreshTrigger = !this.refreshTrigger;
  }

  modalTitle(key: string) {
    let title = '';
    switch(key) {
    case 'roleCreate':
      title = $localize`创建角色`;
      break;
    case 'roleEdit':
      title = $localize`更新角色`;
      break;
    default:
      break;
    }
    return title;
  }
  openModal(content: TemplateRef<any>, title: string) {
    this.modal.create({
      nzContent: content,
      nzTitle: title,
      nzFooter: null,
      nzCentered: true,
      nzCloseOnNavigation: true,
      nzWidth: 888,
    })
  }

}
