<div class="searchBar" @fade>
  <app-search-item [label]="'sensorName' | translate" [(value)]="query.name"></app-search-item>
  <app-search-item [label]="'sensorSN' | translate" [(value)]="query.sn"></app-search-item>
  <div class="btnLine">
    <button nz-button [nzType]="'primary'" class="searchBtn" [nzLoading]="isLoading" (click)="onSearch()">
      <span>{{'search' | translate}}</span></button>
    <button nz-button class="searchBtn" [nzLoading]="isLoading" (click)="onGetAll()"><span>{{'allData' | translate}}</span>
    </button>
    <button nz-button class="searchBtn" [nzLoading]="isLoading" (click)="multiAdd()">
      <span>{{'multiAdd' | translate}}</span></button>
    <button nz-button [nzType]="'primary'" class="searchBtn" [nzLoading]="isLoading" (click)="add()">
      <span>{{'addSensor' | translate}}</span></button>
  </div>
</div>
<div class="tableBar" @fade>
  <nz-table #nzTable
            [nzData]="data"
            [nzLoading]="isLoading"
            [nzFrontPagination]="false"
            [(nzPageIndex)]="page"
            [(nzPageSize)]="rows"
            [nzTotal]="total"
            (nzPageIndexChange)="pageChange()"
            (nzPageSizeChange)="pageChange()">
    <thead nz-thead>
    <tr>
      <th
        nzShowCheckbox
        [(nzChecked)]="isAllCheck"
        [nzDisabled]="data.length===0"
        [nzIndeterminate]="isIndeterminate"
        (nzCheckedChange)="checkAll($event)"
      ></th>
      <th nz-th><span>{{'sensorName' | translate}}</span></th>
      <th nz-th><span>{{'sensorSN' | translate}}</span></th>
      <th nz-th><span>{{'frontName' | translate}}</span></th>
      <th nz-th><span>{{'type' | translate}}</span></th>
      <th nz-th><span>{{'off/on' | translate}}</span></th>
      <th nz-th
          nzShowFilter
          [nzFilterMultiple]="false"
          [nzFilters]="listOfBind"
          (nzFilterChange)="filter($event)">
        <span>{{'isbind' | translate}}</span></th>
      <th nz-th><span>{{'belongCompany' | 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 nzShowCheckbox [(nzChecked)]="one.checked" (nzCheckedChange)="oneCheck(i)"></td>
      <td nz-td class="canClick" (click)="toSee(one)">{{one.name}}</td>
      <td nz-td>{{one.sn}}</td>
      <td nz-td>{{one.prefixName}}</td>
      <td nz-td>{{one.type}}</td>
      <td nz-td>
        <nz-switch [nzControl]="true" (click)="toggleOn(one)" [(ngModel)]="one.state"
                   [nzLoading]="one.isLoading"></nz-switch>
      </td>
      <td nz-td>{{one.pDeviceNo ? '是' : '否'}}</td>
      <td nz-td>{{one.companyName}}</td>
      <td nz-td>
        <span *ngIf="!one.pDeviceNo" class="editSpan" (click)="bind(one)">{{'bind' | translate}}</span>
        <span *ngIf="one.pDeviceNo" class="editSpan" (click)="unbind(one)">{{'unbind' | translate}}</span>
        <nz-divider nzType="vertical"></nz-divider>
        <span class="editSpan" (click)="update(one)">{{'update' | translate}}</span>
        <nz-divider *ngIf="!one.pDeviceNo && !one.state" nzType="vertical"></nz-divider>
        <span *ngIf="!one.pDeviceNo && !one.state" class="editSpan" (click)="divide(one)">{{'divide' | translate}}</span>
        <nz-divider nzType="vertical"></nz-divider>
        <span class="deleteFontColor" (click)="deleteConfirm(one)">{{'delete' | translate}}</span>
      </td>
    </tr>
    </tbody>
  </nz-table>
  <div class="btnLine whenOneLine" style="position: absolute;bottom: 30px;">
    <button nz-button class="delBtn" [nzType]="'primary'" [nzLoading]="isLoading" [disabled]="!isCheckedOne" (click)="allDelete()">
      <span>{{'delete' | translate}}</span></button>
    <button nz-button class="searchBtn" [nzLoading]="isLoading" [disabled]="!canbind" (click)="allBind()"><span>{{'bind' | translate}}</span>
    </button>
    <button nz-button class="unbindBtn" [nzType]="'primary'" [nzLoading]="isLoading" [disabled]="!canUnbind" (click)="allUnbind()">
      <span>{{'unbind' | translate}}</span></button>
    <button nz-button class="searchBtn" [nzLoading]="isLoading" [disabled]="!isCheckedOne" (click)="allDivide()"><span>{{'divide' | translate}}</span>
    </button>
    <!--<button nz-button [nzType]="'primary'" [nzLoading]="isLoading" [disabled]="!isCheckedOne" (click)="allUpdate()">-->
      <!--<span>{{'update' | translate}}</span></button>-->
  </div>
</div>

<nz-modal [(nzVisible)]="isAddConV" [nzContent]="con1" nzWidth="500" [nzTitle]="isUpdate ? ('updateSensor' | translate) : ('addSensor' | translate)"
          [nzFooter]="foot1" (nzOnCancel)="cancel()" nzMaskClosable="false">
  <ng-template #con1>
    <app-search-item inModal="true" isMust="true" [label]="'sensorName' | translate"
                     [(value)]="req.name"></app-search-item>
    <app-search-item *ngIf="!isUpdate" isMust="true" inModal="true" [label]="'sensorSN' | translate"
                     [(value)]="req.sn"></app-search-item>
    <app-search-item *ngIf="!isUpdate" isMust="true" inModal="true" [label]="'type' | translate" [(value)]="req.type"></app-search-item>
    <app-search-item *ngIf="!isUpdate" isMust="true" inModal="true" [label]="'configJson' | translate"
                     [(value)]="req.configJson"></app-search-item>
    <app-search-item *ngIf="isUpdate" inModal="true" [label]="'front' | translate"
                     [(value)]="req.prefixName"></app-search-item>
    <app-search-select *ngIf="!isUpdate" isMust="true" [(value)]="req.topicModelNo" [label]="'topicModel' | translate" optL="topicModelName"
                       [data]="topicModels" inModal="true" optV="topicModelNo"></app-search-select>
    <app-search-select isMust="true" [(value)]="req.companyNo" [label]="'selectCompany' | translate" optL="companyName"
                       (valueChange)="companySelected($event)" [data]="companys" inModal="true" optV="companyNo"></app-search-select>
    <!--<app-search-select isMust="true" *ngIf="req.companyNo" [(value)]="req.influxdbDatabaseNo"-->
                       <!--[label]="'selectInfluxDB' | translate" optL="databaseName"-->
                       <!--[data]="influxdbs" inModal="true" optV="influxdbDatabaseNo"></app-search-select>-->
    <app-search-select [(value)]="req.sceneNo" [label]="'selectScene' | translate" optL="sceneName"
                       [data]="scenes" inModal="true" optV="sceneNo"></app-search-select>
    <app-search-item inModal="true" [label]="'remark' | translate"
                     [(value)]="req.remark"></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('req')"><span>{{'confirm' | translate}}</span></button>
  </ng-template>
</nz-modal>

<nz-modal [(nzVisible)]="isMultiAddConV" [nzContent]="con2" nzWidth="500" [nzTitle]="('multiAdd' | translate) + ('sensor' | translate)"
          [nzFooter]="foot2" (nzOnCancel)="cancel()" nzMaskClosable="false">
  <ng-template #con2>
    <app-search-item isMust="true" inModal="true" [label]="'startSN' | translate"
                     [(value)]="req.startSN"></app-search-item>
    <app-search-item isMust="true" inModal="true" [label]="'addNum' | translate"
                     [(value)]="req.num"></app-search-item>
    <app-search-item isMust="true" inModal="true" [label]="'type' | translate"
                     [(value)]="req.type"></app-search-item>
    <app-search-select isMust="true" [(value)]="req.topicModelNo" [label]="'topicModel' | translate" optL="topicModelName"
                       [data]="topicModels" inModal="true" optV="topicModelNo"></app-search-select>
    <app-search-select isMust="true" inModal="true" [(value)]="req.companyNo" [label]="'selectCompany' | translate"
                       optL="companyName" [data]="companys" optV="companyNo"></app-search-select>
    <!--<app-search-select inModal="true" *ngIf="req.companyNo" [(value)]="req.influxdbDatabaseNo"-->
                       <!--[label]="'selectInfluxDB' | translate" optL="databaseName"-->
                       <!--[data]="influxdbs" optV="influxdbDatabaseNo"></app-search-select>-->
    <app-search-select inModal="true" [(value)]="req.sceneNo" [label]="'selectScene' | translate" optL="sceneName"
                       [data]="scenes" optV="sceneNo"></app-search-select>
    <app-search-item inModal="true" [label]="'remark' | translate"
                     [(value)]="req.remark"></app-search-item>
  </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('req')"><span>{{'confirm' | translate}}</span></button>
  </ng-template>
</nz-modal>

<nz-modal [(nzVisible)]="isBindConV" [nzContent]="con3" nzWidth="500" [nzTitle]="'bindGateway' | translate"
          [nzFooter]="foot3" (nzOnCancel)="cancel()" nzMaskClosable="false">
  <ng-template #con3>
    <div class="searchItem inModal">
      <div class="item-label">
        <span class="deleteFontColor">* </span>{{'selectGateway' | translate}}
      </div>
      <div class="item-input">
        <input nz-input placeholder="" [nzAutocomplete]="auto" [(ngModel)]="req3.device" (input)="onInput($event.target?.value)">
        <nz-autocomplete nzBackfill #auto>
          <nz-auto-option *ngFor="let one of selectedGateways" (click)="companySelected()" [nzLabel]="one.type + '-' + one.sn" [nzValue]="one">
            {{one.type}} - {{one.sn}}
          </nz-auto-option>
        </nz-autocomplete>
      </div>
    </div>
    <app-search-item isMust="true" inModal="true" [label]="isMulti ? ('bindStartTongxinAddr' | translate): ('bindTongxinAddr' | translate)"
                     nz-tooltip [nzTitle]="'gatewayBindTips' | translate"
                     [(value)]="req3.address"></app-search-item>
  </ng-template>
  <ng-template #foot3>
    <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('req3')">
      <span>{{'confirm' | translate}}</span></button>
  </ng-template>
</nz-modal>

<nz-modal [(nzVisible)]="isDivideConV" [nzContent]="con5" nzWidth="500" [nzTitle]="('divide' | translate) + ('sensor' | translate)"
          [nzFooter]="foot5" (nzOnCancel)="cancel()" nzMaskClosable="false">
  <ng-template #con5>
    <app-search-select isMust="true" [(value)]="req5.companyNo" [label]="'selectCompany' | translate" optL="companyName"
                       [data]="companys" inModal="true" optV="companyNo"></app-search-select>
  </ng-template>
  <ng-template #foot5>
    <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('req5')"><span>{{'confirm' | translate}}</span></button>
  </ng-template>
</nz-modal>
