<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.online, 'errCir': !bump.online}"></div>&nbsp;
      <span class="content">{{bump.online ? '在线' : '离线'}}</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" *ngIf="controlConfig.a" insert="false">
    <span class="content">A区喷淋时间        {{controlConfig.a}} 秒</span>
  </ion-item>
  <ion-item lines="full" *ngIf="controlConfig.b" insert="false">
    <span class="content">B区喷淋时间        {{controlConfig.b}} 秒</span>
  </ion-item>
  <ion-item lines="full" *ngIf="controlConfig.interval" insert="false">
    <span class="content">间隔时间        {{controlConfig.interval}} 秒</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 a of param" class="card" color="white">
      <ion-card-header>
        <ion-card-title class="card-title">{{a.fieldDeviceName}}</ion-card-title>
      </ion-card-header>

      <ion-card-content style="margin: 0px; padding-top:0px;">
        <span  class="content">压力  {{a.press}} MPa</span><br>
        <!--  <ion-toggle [checked]="a.state"></ion-toggle>-->
        <v-switch class="btn-switch" (click)="deviceCheck(a)" [value]="a.state" [loading]="a.load"></v-switch>
      </ion-card-content>
    </ion-card>
  </div>
</ion-content>
