<div class="searchBar" @fade *ngIf="canEdit">
  <div class="btnLine" >
    <button nz-button class="searchBtn" [nzLoading]="isLoading" (click)="add()" ><span>{{'add' | translate}}</span></button>
  </div>
</div>
<div class="tableBar" @fade>
  <nz-table #nzTable
            [nzData]="data"
            [nzLoading]="isLoading">
    <thead nz-thead>
    <tr>
      <th nz-th><span>{{'num' | translate}}</span></th>
      <th nz-th><span>{{'retentionPolicyName' | translate}}</span></th>
      <th nz-th><span>{{'duration' | translate}}</span></th>
      <th nz-th><span>{{'isDefault' | translate}}</span></th>
      <th nz-th><span>{{'shardDuration' | translate}}</span></th>
      <th nz-th><span>{{'remark' | translate}}</span></th>
      <th nz-th *ngIf="canEdit"><span>{{'oper' | translate}}</span></th>
    </tr>
    </thead>
    <tbody nz-tbody>
    <tr *ngFor="let one of nzTable.data,let i = index">
      <td nz-td>{{i + 1}}</td>
      <td nz-td>{{one.retentionPolicyName}}</td>
      <td nz-td>{{one.duration}}</td>
      <td nz-td><div *ngIf="1 === one.defaultPolicy">是</div><div *ngIf="0 === one.defaultPolicy">否</div></td>
      <td nz-td>{{one.shardDuration}}</td>
      <td nz-td>{{one.remark}}</td>
      <td nz-td *ngIf="canEdit">
        <span class="editSpan" (click)="onSetDefalut(one)">{{'setAsDefault' | translate}}</span>
        <nz-divider nzType="vertical"></nz-divider>
        <span class="editSpan" (click)="edit(one)">{{'edit' | translate}}</span>
        <nz-divider nzType="vertical"></nz-divider>
        <span class="deleteFontColor" (click)="deleteConfirm(one)">{{'delete' | translate}}</span>
      </td>
    </tr>
    </tbody>
  </nz-table>
</div>

<nz-modal [(nzVisible)]="isVisible" [nzTitle]="(isUpdate ? 'editPolicy' : 'addPolicy') | translate" [nzContent]="modalContent" nzWidth="500"
          [nzFooter]="modalFooter" (nzOnCancel)="cancel()" nzMaskClosable="false">
  <ng-template #modalContent>
    <app-search-item isMust="true" *ngIf="!isUpdate" [(value)]="req.retentionPolicyName" [label]="'retentionPolicyName' | translate" inModal="true"></app-search-item>
    <app-search-item isMust="true" *ngIf="isUpdate" [(value)]="req.retentionPolicyName" [label]="'retentionPolicyName' | translate" readonly="true" inModal="true"></app-search-item>

    <app-search-item isMust="true" [label]="'popDuration' | translate" inModal="true"
                     [(value)]="req.duration" [type]="'number'"></app-search-item>
    <app-search-select isMust="true" [(value)]="req.defaultPolicy" [label]="'isDefault' | translate" inModal="true"
                       [data]="[{opLabel: '是', opValue: 1}, {opLabel: '否', opValue: 0}]"
                       optL="opLabel" optV="opValue"
                       *ngIf="!isUpdate"></app-search-select>
    <app-search-item isMust="true" [label]="'popShardDuration' | translate" inModal="true"
                     [(value)]="req.shardDuration" [type]="'number'" ></app-search-item>
    <app-search-item [(value)]="req.remark" [label]="'remark' | translate" inModal="true"></app-search-item>
  </ng-template>
  <ng-template #modalFooter>
    <button nz-button nzType="default" [nzLoading]="isLoading" (click)="cancel()"><span>{{'cancel' | translate}}</span></button>
    <button nz-button class="searchBtn" nzType="primary" [nzLoading]="isLoading" (click)="save()"><span>{{'confirm' | translate}}</span></button>
  </ng-template>
</nz-modal>
