<div class="tableBar" @fade>
  <div class="btnLine" style="margin-bottom: 10px">
    <label class="subTitle"> {{topicName}} 主题{{'detail' | translate}}</label>
    <button nz-button class="searchBtn" nzType="primary" style="margin-right: 10px" [nzLoading]="isLoading" (click)="saveOther()"><span>
            {{'isSaveOtherProbesModel' | translate}}</span></button>
    <button nz-button class="searchBtn" [nzType]="'primary'" [nzLoading]="isLoading" (click)="add()"><span>{{'addWay' | 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>{{'wayName' | translate}}</span></th>
      <th nz-th><span>{{'wayAlias' | translate}}</span></th>
      <th nz-th><span>{{'wayDescription' | translate}}</span></th>
      <th nz-th><span>{{'per' | translate}}</span></th>
      <th nz-th><span>{{'wayType' | translate}}</span></th>
      <th nz-th><span>{{'max' | translate}}</span></th>
      <th nz-th><span>{{'min' | translate}}</span></th>
      <th nz-th><span>{{'alarmMax' | translate}}</span></th>
      <th nz-th><span>{{'alarmMaxMax' | translate}}</span></th>
      <th nz-th><span>{{'alarmMin' | translate}}</span></th>
      <th nz-th><span>{{'alarmMinMin' | translate}}</span></th>
      <th nz-th><span>{{'isTag' | translate}}</span></th>
      <th nz-th><span>{{'isAlarm' | 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>{{one.name}}</td>
      <td nz-td>{{one.alias}}</td>
      <td nz-td>{{one.description}}</td>
      <td nz-td>{{one.unit}}</td>
      <td nz-td>{{one.type}}</td>
      <td nz-td>{{one.rangeMax}}</td>
      <td nz-td>{{one.rangeMin}}</td>
      <td nz-td>{{one.alarmUp}}</td>
      <td nz-td>{{one.upperAlarmLimit}}</td>
      <td nz-td>{{one.alarmDown}}</td>
      <td nz-td>{{one.lowerAlarmLimit}}</td>
      <td nz-td>{{one.isTag === 1 ? '是': '否'}}</td>
      <td nz-td>{{one.isAlarm === 1 ? '是': '否'}}</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="750"
          [nzFooter]="foot1" [nzTitle]="isUpdate ? ('update' | translate) : ('add' | translate)" (nzOnCancel)="cancel()" nzMaskClosable="false">
  <ng-template #con1>
    <div class="half">
      <app-search-item nz-tooltip nzTitle="此处输入为英文或数字" isMust="true" inModal="true" [label]="'wayName' | translate"
                       [(value)]="req.name" maxlength="50"></app-search-item>
      <app-search-select isMust="true" inModal="true" [label]="'wayType' | translate" [(value)]="req.type"
                         [data]="[{a: 'AI'}, {a: 'AO'}, {a: 'DI'}, {a: 'DO'}, {a: 'STRING'}, {a: 'BOOL'}]" optL="a" optV="a"></app-search-select>

      <div class="searchItem inModal">
        <div class="item-label"><span class="deleteFontColor">* </span>{{'isTag' | translate}}
          <span nz-tooltip nzTitle="一般通道是id的才选"><i nz-icon nzType="question-circle" nzTheme="outline"></i></span>
        </div>
        <div class="item-input">
          <nz-radio-group [(ngModel)]="req.isTag">
            <label nz-radio [nzValue]="1">是</label>
            <label nz-radio [nzValue]="0">否</label>
          </nz-radio-group>
        </div>
      </div>

      <div class="searchItem inModal">
        <div class="item-label"><span class="deleteFontColor">* </span>{{'isAlarm' | translate}}</div>
        <div class="item-input">
          <nz-radio-group [(ngModel)]="req.isAlarm">
            <label nz-radio [nzValue]="1">是</label>
            <label nz-radio [nzValue]="0">否</label>
          </nz-radio-group>
        </div>
      </div>
      <app-search-item inModal="true" [label]="'max' | translate" [(value)]="req.rangeMax"></app-search-item>
      <app-search-item *ngIf="req.isAlarm" inModal="true" [label]="'alarmMax' | translate"
                       [(value)]="req.alarmUp"></app-search-item>
      <app-search-item *ngIf="req.isAlarm" inModal="true" [label]="'alarmMaxMax' | translate"
                       [(value)]="req.upperAlarmLimit"></app-search-item>
      <app-search-item *ngIf="req.isAlarm && req.type !== 'DI' && req.type !== 'DO'" inModal="true" [label]="'alarmInterval' | translate"
                       [(value)]="req.alarmInterval"></app-search-item>
    </div>
    <div class="half">
      <app-search-item isMust="true" nz-tooltip nzTitle="此处输入为英文或数字" inModal="true" [label]="'wayAlias' | translate"
                       [(value)]="req.alias" maxlength="50"></app-search-item>
      <app-search-item *ngIf="req.type !== 'DI' && req.type !== 'DO'" isMust="true" inModal="true"
                       [label]="'per' | translate" [(value)]="req.unit"></app-search-item>
      <app-search-item isMust="true" inModal="true" [label]="'wayDescription' | translate"
                       [(value)]="req.description"></app-search-item>

      <div class="searchItem inModal" style="height: 30px;">
      </div>

      <app-search-item inModal="true" [label]="'min' | translate" [(value)]="req.rangeMin"></app-search-item>
      <app-search-item *ngIf="req.isAlarm" inModal="true" [label]="'alarmMin' | translate"
                       [(value)]="req.alarmDown"></app-search-item>
      <app-search-item *ngIf="req.isAlarm" inModal="true" [label]="'alarmMinMin' | translate"
                       [(value)]="req.lowerAlarmLimit"></app-search-item>
      <app-search-item *ngIf="req.isAlarm && (req.type === 'DI' || req.type === 'DO')" inModal="true" [label]="'alarmInterval' | translate"
                       [(value)]="req.alarmInterval"></app-search-item>
    </div>
    <div class="searchItem inModal">
      <div class="item-label" style="width: 149px;">{{'wayInfo' | translate}}</div>
      <div class="item-input" style="width: calc(100% - 158px);">
        <textarea nz-input [(ngModel)]="req.boxedart"></textarea>
      </div>
    </div>
  </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('req')"><span>{{'confirm' | translate}}</span></button>
  </ng-template>
</nz-modal>

<nz-modal [(nzVisible)]="isSaveOther" [nzContent]="con2" nzWidth="500" [nzTitle]="'isSaveOtherProbesModel' | translate"
          [nzFooter]="foot2" (nzOnCancel)="cancel()" nzMaskClosable="false">
  <ng-template #con2>
    <app-search-item inModal="true" isMust="true" [label]="'moduleName' | translate" [(value)]="req2.newProbesModelName"></app-search-item>
    <!--<app-search-select isMust="true" inModal="true" [(value)]="req2.companyNo" [label]="'selectCompany' | translate" optL="companyName"-->
    <!--[data]="companys" optV="companyNo"></app-search-select>-->
  </ng-template>
  <ng-template #foot2>
    <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('req2')"><span>{{'confirm' | translate}}</span></button>
  </ng-template>
</nz-modal>
