<ion-header style="background-color: #F3F4F4;">

</ion-header>

<ion-content  color='light' style="height: 100%">
  <h1 style="
            font-size: 16px;
            padding-left: 5px;
            border-left: 5px solid #28c9bd;
            line-height: 25px;
            margin-bottom: 5px;">模式状态</h1>
  <ion-item lines="full">
    <ion-label>运行模式</ion-label>
    <ion-select multiple="false" cancelText="取消" okText="确认" [(ngModel)]="controlModel" disabled="true">
      <ion-select-option *ngFor="let option of controlModelOptions" [value]="option.modelId">{{option.modelValue}}</ion-select-option>
    </ion-select>
  </ion-item>

  <h1 style="
            font-size: 16px;
            padding-left: 5px;
            border-left: 5px solid #28c9bd;
            line-height: 25px;
            margin-bottom: 5px;">时间模式</h1>
  <ion-item lines="full">
    <i class="vo v-yue{{curDate}}"></i>
    <span style="margin-left: 100px; font-size:15px"> 开启时间     {{on}}<br><br>关闭时间     {{off}}</span>
  </ion-item>
  <h1 style="
            font-size: 16px;
            padding-left: 5px;
            border-left: 5px solid #28c9bd;
            line-height: 25px;
            margin-bottom: 5px;">控制/状态</h1>
  <ion-item *ngIf="devices" lines="full" insert="false">
    <ion-label>一键控制</ion-label>
    <ion-toggle slot="end" [checked]="batchSwitch.op" [disabled]="batchSwitch.disabled"
                [(ngModel)]="batchSwitch.op" (load)="batchSwitch.load" (click)="toggle(batchSwitch)"></ion-toggle>
    <!--<v-switch (click)="allCheck(batchSwitch)" [value]="batchSwitch.op" [disabled]="batchSwitch.disabled" [loading]="batchSwitch.load"></v-switch>-->
  </ion-item>
  <div>
    <ion-card *ngFor="let device of devices" class="card" color="white">
      <ion-card-header class="cardHeader">
        <ion-card-subtitle align="center">{{device.fieldDeviceName}}</ion-card-subtitle>
      </ion-card-header>

      <ion-card-content class="cardContent">
        <ion-toggle class="btn-switch" *ngIf="device.alarm === 0" [checked]="device.op" [disabled]="device.disabled"
                    [(ngModel)]="device.op" (click)="deviceCheck(device)"></ion-toggle>
        <ion-toggle class="btn-switch" *ngIf="device.alarm === 1" [checked]="device.op" [disabled]="device.disabled" color="danger"
                    [(ngModel)]="device.op" (click)="deviceCheck(device)"></ion-toggle>
        <!--<v-switch class="btn-switch" (click)="deviceCheck(device)" [value]="device.state" [disabled]="device.disabled" [loading]="device.load"></v-switch>-->
      </ion-card-content>
    </ion-card>
  </div>

  <v-loading-bump style="z-index: 9999; color: red" [remain]="comm.remain" *ngIf="comm.isLoading"></v-loading-bump>
</ion-content>
