<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">
      <div [ngClass]="{'sucCir': bump.alarm === 0, 'errCir': bump.alarm === 0}"></div>&nbsp;
      <span class="content">{{bump.alarm === 1 ? '异常' : '运行'}}</span>
      <span class="content" style="margin-left: 30px">压力:  {{bump.press}} Mpa</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 lines="full" insert="false">
    <span class="content">{{param[0].fieldDeviceName}}喷淋时间 &nbsp;&nbsp;&nbsp;&nbsp;{{controlConfig.A}} &nbsp;&nbsp;&nbsp;&nbsp; 秒</span>
  </ion-item>
  <ion-item lines="full" insert="false">
    <span class="content">{{param[1].fieldDeviceName}}喷淋时间 &nbsp;&nbsp;&nbsp;&nbsp;{{controlConfig.B}} &nbsp;&nbsp;&nbsp;&nbsp; 秒</span>
  </ion-item>
  <ion-item lines="full" insert="false">
    <span class="content">间隔时间 &nbsp;&nbsp;&nbsp;&nbsp; {{controlConfig.interval}} &nbsp;&nbsp;&nbsp;&nbsp; 秒</span>
  </ion-item>

  <h1 style="
            font-size: 16px;
            padding-left: 5px;
            border-left: 5px solid #28c9bd;
            line-height: 25px;
            margin-bottom: 5px;">控制/状态</h1>
  <div>
    <ion-card *ngFor="let device of param" class="card" color="white">
      <ion-card-header class="cardHeader">
        <ion-card-title class="card-title">
          <div style="width:100%;text-align:center;">
            <div style="width:48%;display: inline-block; height: 40px;float: left; text-align: center; padding-top: 10px;">
              <div style="text-align: center;margin:auto">{{device.fieldDeviceName}}</div>
            </div>
            <div style="width:48%;display: inline-block"><img [src]="'../../assets/img/shower-' + device.state + '.png'" style="width:50px !important; margin: auto;"></div>
          </div>
        </ion-card-title>
      </ion-card-header>

      <ion-card-content class="cardContent">
        <span  class="content">压力  {{device.press}} MPa</span><br>
        <!--  <ion-toggle [checked]="a.state"></ion-toggle>-->
        <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(a)" [value]="a.state" [loading]="a.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>
