<div class="clr-row">
  <div class="clr-col-lg-12 clr-col-md-12 clr-col-sm-12 clr-col-xs-12">
    <div class="clr-row flex-items-xs-between flex-items-xs-top" style="padding-left: 15px; padding-right: 15px;">
      <h2 class="header-title">审计日志列表</h2>
    </div>

    <clr-datagrid (clrDgRefresh)="refresh($event)" class="wayne-clr-datagrid">
      <clr-dg-column class="col-id">
        <ng-container *clrDgHideableColumn="{hidden: false}">ID</ng-container>
      </clr-dg-column>
      <clr-dg-column [clrDgField]="'user'">
        <ng-container *clrDgHideableColumn="{hidden: false}">操作用户</ng-container>
      </clr-dg-column>
      <clr-dg-column [clrDgField]="'userIp'">
        <ng-container *clrDgHideableColumn="{hidden: false}">用户IP</ng-container>
      </clr-dg-column>
      <clr-dg-column>
        <ng-container *clrDgHideableColumn="{hidden: false}">SubjectId</ng-container>
      </clr-dg-column>
      <clr-dg-column [clrDgField]="'logType'">
        <ng-container *clrDgHideableColumn="{hidden: false}">操作类型</ng-container>
      </clr-dg-column>
      <clr-dg-column [clrDgField]="'logLevel'">
        <ng-container *clrDgHideableColumn="{hidden: false}">日志级别</ng-container>
      </clr-dg-column>
      <clr-dg-column [clrDgField]="'action'">
        <ng-container *clrDgHideableColumn="{hidden: false}">Action</ng-container>
      </clr-dg-column>
      <clr-dg-column>
        <ng-container *clrDgHideableColumn="{hidden: false}">日期</ng-container>
      </clr-dg-column>
      <clr-dg-column>
        <ng-container *clrDgHideableColumn="{hidden: false}">{{'BUTTON.DETAIL' | translate}}</ng-container>
      </clr-dg-column>

      <clr-dg-row *ngFor="let al of auditLogs" [clrDgItem]="al">
        <clr-dg-cell class="col-id">{{al.id}}</clr-dg-cell>
        <clr-dg-cell>{{al.user}}</clr-dg-cell>
        <clr-dg-cell>{{al.userIp}}</clr-dg-cell>
        <clr-dg-cell>{{al.subjectId}}</clr-dg-cell>
        <clr-dg-cell>{{al.logType}}</clr-dg-cell>
        <clr-dg-cell>{{al.logLevel}}</clr-dg-cell>
        <clr-dg-cell>{{al.action}}</clr-dg-cell>
        <clr-dg-cell>{{al.createTime | date:'yyyy-MM-dd HH:mm:ss'}}</clr-dg-cell>
        <clr-dg-cell>{{al.message}}</clr-dg-cell>
      </clr-dg-row>
      <clr-dg-footer>
        <wayne-paginate
          [(currentPage)]="currentPage"
          [total]="pageState.page.totalCount"
          [pageSizes]="[10, 20, 50]"
          (sizeChange)="pageSizeChange($event)"
        >
        </wayne-paginate>
      </clr-dg-footer>
    </clr-datagrid>
  </div>
</div>
