<div class="tableBar" @fade>
  <div class="btnLine" style="margin-bottom: 10px">
    <label class="subTitle"> {{topicModelName}} 主题配置模板{{'detail' | translate}}</label>
    <button nz-button class="searchBtn" [nzLoading]="isLoading" (click)="add()"><span>{{'addTopic' | translate}}</span></button>
    <app-back [isLoading]="isLoading"></app-back>
  </div>
  <nz-table #nzTable
            [nzData]="data"
            [nzSize]="'middle'"
            nzShowSizeChanger
            [nzLoading]="isLoading">
    <thead nz-thead>
    <tr>
      <th nz-th><span>{{'num' | translate}}</span></th>
      <th nz-th><span>{{'topicName' | translate}}</span></th>
      <th nz-th><span>{{'topicType' | translate}}</span></th>
      <th nz-th><span>{{'dataType' | translate}}</span></th>
      <th nz-th><span>{{'inTime' | translate}}</span></th>
      <th nz-th><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 class="canClick" (click)="toConfig(one)">{{one.topicName}}</td>
      <td nz-td>{{one.topicType === 0 ? '推送主题' : one.topicType === 1 ? '订阅主题': '推送订阅主题'}}</td>
      <td nz-td>{{one.dataType === 0 ? 'json' : 'bin'}}</td>
      <td nz-td>{{one.interval}}</td>
      <td nz-td>
        <span class="editSpan" (click)="update(one)">{{'update' | 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)]="isV" [nzContent]="con1" nzWidth="500"
          [nzFooter]="foot1" [nzTitle]="isUpdate ? ('update' | translate) : ('add' | translate)" (nzOnCancel)="cancel()" nzMaskClosable="false">
  <ng-template #con1>
      <app-search-item isMust="true" inModal="true" [label]="'topicName' | translate" [(value)]="req.topicName"></app-search-item>
      <app-search-select isMust="true" inModal="true" [label]="'topicType' | translate" [(value)]="req.topicType"
                       [data]="[{a: '推送主题', b: 0}, {a: '订阅主题', b: 1}, {a: '推送订阅主题', b: 2}]" optL="a" optV="b"></app-search-select>
      <app-search-select isMust="true" inModal="true" [label]="'dataType' | translate" [(value)]="req.dataType"
                         [data]="[{a: 'json', b: 0}, {a: 'bin', b: 1}]" optL="a" optV="b"></app-search-select>
      <app-search-select *ngIf="!isUpdate" isMust="true" inModal="true" [label]="'probesModel' | translate" [(value)]="req.probesModelNo"
                         [data]="probesModels" optL="probesModelName" optV="probesModelNo"></app-search-select>
    <app-search-item inModal="true" [label]="'dataInterval' | translate" [(value)]="req.dataInterval"></app-search-item>
    <!--<app-search-item isMust="true" inModal="true" [label]="'frequency' | translate" [(value)]="req.frequency"></app-search-item>-->
    <app-search-item isMust="true" inModal="true" [label]="'interval' | translate" [(value)]="req.interval"></app-search-item>
  </ng-template>
  <ng-template #foot1>
    <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>
