<div class="searchBar" @fade>
  <app-search-item [label]="'gatewayName' | translate" [(value)]="query.name"></app-search-item>
  <app-search-item [label]="'gatewaySN' | 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>{{'addGateway' | 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>{{'gatewayName' | translate}}</span></th>
      <th nz-th><span>{{'gatewaySN' | translate}}</span></th>
      <th nz-th><span>{{'type' | translate}}</span></th>
      <th nz-th><span>{{'simCardNum' | 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>{{'createTime' | 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.type}}</td>
      <td nz-td>{{one.simcard}}</td>
      <td nz-td>
        <nz-switch [nzControl]="true" [disabled]="one.pDeviceNo" (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>{{one.createTime | date: 'yyyy-MM-dd HH:mm:ss'}}</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 nzType="vertical"></nz-divider>
        <span *ngIf="!one.pDeviceNo && !one.state" class="editSpan"
              (click)="divide(one)">{{'divide' | translate}}</span>
        <nz-divider *ngIf="!one.pDeviceNo && !one.state" nzType="vertical"></nz-divider>
        <span class="deleteFontColor" (click)="deleteConfirm(one)">{{'delete' | translate}}</span>
      </td>
    </tr>
    </tbody>
  </nz-table>
  <div class="btnLine" style="position: absolute;bottom: 30px;">
    <button nz-button [nzType]="'primary'" class="delBtn" [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 [nzType]="'primary'" class="unbindBtn" [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" [nzTitle]="isUpdate ? ('updateGateway' | translate) : ('addGateway' | translate)"
          [nzContent]="con1" nzWidth="500"
          [nzFooter]="foot1" (nzOnCancel)="cancel('isAddConV')" nzMaskClosable="false">
  <ng-template #con1>
    <app-search-item isMust="true" inModal="true" [label]="'gatewayName' | translate"
                     [(value)]="req.name"></app-search-item>
    <app-search-item isMust="true" *ngIf="!isUpdate" inModal="true" [label]="'gatewaySN' | translate"
                     [(value)]="req.sn"></app-search-item>
    <app-search-item isMust="true" *ngIf="!isUpdate" inModal="true" [label]="'type' | translate"
                     [(value)]="req.type"></app-search-item>
    <app-search-item inModal="true" [label]="'simcard' | translate"
                     [(value)]="req.simcard"></app-search-item>
    <app-search-item inModal="true" [label]="'SIMCardType' | translate"
                     [(value)]="req.simcardType"></app-search-item>
    <app-search-item *ngIf="!isUpdate" inModal="true" [label]="'configJson' | translate"
                     [(value)]="req.configJson"></app-search-item>
    <app-search-select isMust="true" inModal="true" [(value)]="req.companyNo" [label]="'selectCompany' | translate"
                       optL="companyName"
                       [data]="companys" optV="companyNo"
                       (valueChange)="onAddChangeCompany(req.companyNo)"></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-select inModal="true" [label]="'selectInfluxDBTable' | translate" [(value)]="req.influxdbDatabaseNo"
                       [data]="companyInfluxDBTableList" optL="databaseName" optV="influxdbDatabaseNo"></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('isAddConV')">
      <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) + ('gateway' | translate)"
          [nzFooter]="foot2" (nzOnCancel)="cancel('isMultiAddConV')" 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" inModal="true" [(value)]="req.companyNo" [label]="'selectCompany' | translate"
                       optL="companyName" [data]="companys" optV="companyNo"
                       (valueChange)="onAddChangeCompany(req.companyNo)"></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-select inModal="true" [label]="'selectInfluxDBTable' | translate" [(value)]="req.influxdbDatabaseNo"
                       [data]="companyInfluxDBTableList" optL="databaseName" optV="influxdbDatabaseNo"></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('isMultiAddConV')">
      <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]="'bindUpGateway' | translate"
          [nzFooter]="foot3" (nzOnCancel)="cancel('isBindConV')" 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('isBindConV')">
      <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" [nzTitle]="('gateway' | translate) + ('divide' | translate)" [nzContent]="con4"
          nzWidth="500"
          [nzFooter]="foot4" (nzOnCancel)="cancel('isDivideConV')" nzMaskClosable="false">
  <ng-template #con4>
    <app-search-select isMust="true" [(value)]="req4.companyNo" [label]="'selectCompany' | translate" optL="companyName"
                       [data]="companys" inModal="true" optV="companyNo"
                       (valueChange)="onDivideChangeCompany(req4.companyNo)"></app-search-select>

    <app-search-select isMust="true" inModal="true" [label]="'selectCompanyInfluxDBTable' | translate" [(value)]="req4.influxdbDatabaseNo"
                       [data]="companyInfluxDBTableList" optL="databaseName" optV="influxdbDatabaseNo"></app-search-select>

  </ng-template>
  <ng-template #foot4>
    <button nz-button nzType="default" [nzLoading]="isLoading" (click)="cancel('isDivideConV')">
      <span>{{'cancel' | translate}}</span></button>
    <button nz-button class="searchBtn" nzType="primary" [nzLoading]="isLoading" (click)="save('req4')">
      <span>{{'confirm' | translate}}</span></button>
  </ng-template>
</nz-modal>
