<div class="env-detail-content">
  <h1 class="main-title-detail">模式状态</h1>
  <ion-item lines="none" style="width: 98%;" class="item-height">
    <ion-grid>
      <ion-row>
        <ion-col>
          <div style="width:30%; float:left">
            <img *ngIf="controlModel === 1" src="../../assets/img/model-on.png" class="modelState">
            <img *ngIf="controlModel !== 1" src="../../assets/img/model-off.png" class="modelState">
          </div>
          <div style="width:70%; float:left">
            <span class="font-content" style="display: inline-block; padding-top: 5px;">手控模式</span>
          </div>
        </ion-col>
        <ion-col>
          <div style="width:30%; float:left">
            <img *ngIf="controlModel === 2" src="../../assets/img/model-on.png" class="modelState">
            <img *ngIf="controlModel !== 2" src="../../assets/img/model-off.png" class="modelState">
          </div>
          <div style="width:70%; float:left">
            <span class="font-content" style="display: inline-block; padding-top: 5px;">自控模式</span>
          </div>
        </ion-col>
        <ion-col>
          <div style="width:30%; float:left">
            <img *ngIf="controlModel === 3" src="../../assets/img/model-on.png" class="modelState">
            <img *ngIf="controlModel !== 3" src="../../assets/img/model-off.png" class="modelState">
          </div>
          <div style="width:70%; float:left">
            <span class="font-content" style="display: inline-block; padding-top: 5px;">智控模式</span>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-item>

  <h1 class="main-title-detail">供液泵状态</h1>
  <ion-item lines="none" class="item-content" class="item-height">
    <ion-grid>
      <ion-row>
        <ion-col>
          <div style="display: inline-block; float:left;">
            <!-- 1-异常，0-正常 -->
            <img *ngIf="bump.alarm === 0" src="../../assets/img/model-on.png" class="modelState" style="margin-right: 0px;">
            <img *ngIf="bump.alarm === 1" src="../../assets/img/model-alarm.png" class="modelState" style="margin-right: 0px;">
          </div>
          <div style="display: inline-block; float:left; padding-top: 2px;">
            <span class="font-content">{{bump.alarm === 1 ? '异常' : '运行'}}</span>
            <span class="font-content" style="margin-left: 30px">压力:&nbsp;<span class="main-color">{{bump.press | number:'0.0-3'}} Mpa</span></span>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>

  </ion-item>
  <h1 class="main-title-detail">时间参数</h1>
  <ion-item lines="none" insert="false">
    <ion-grid>
      <ion-row>
        <ion-col>
          <div style="width:100%;padding-left: 3px;">
            <span class="font-content">{{fieldDeviceNameA}}喷淋时间:&nbsp;<span class="main-color">{{controlConfig.a}}  秒</span></span>
          </div>
        </ion-col>
        <ion-col>
          <div style="width:100%">
            <span class="font-content">间隔时间:&nbsp;<span class="main-color">{{controlConfig.interval}}  秒</span></span>
          </div>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <div style="width:100%;padding-left: 3px;">
            <span class="font-content">{{fieldDeviceNameB}}喷淋时间:&nbsp;<span class="main-color">{{controlConfig.b}}  秒</span></span>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-item>

  <h1 class="main-title-detail">控制状态</h1>
  <div class="card-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 class="card-title-label">
              <div *ngIf="device.alarm === 0" style="text-align: center;margin:auto; color: #828282 !important;">{{device.fieldDeviceName}}</div>
              <div *ngIf="device.alarm === 1" style="text-align: center;margin:auto; color: #F2401C !important;">{{device.fieldDeviceName}}</div>
            </div>
            <div style="width:48%;display: inline-block">
              <img *ngIf="device.cycle === 1 && device.state === 1" src="../../assets/img/shower-ing.gif" style="width:50px !important; margin: auto;">
              <img *ngIf="device.cycle === 1 && device.state === 0" src="../../assets/img/shower-1.png" style="width:50px !important; margin: auto;">
              <img *ngIf="device.cycle === 0 && device.state === 0" src="../../assets/img/shower-0.png" style="width:50px !important; margin: auto;">
              <img *ngIf="device.cycle === 0 && device.state === 1" src="../../assets/img/shower-0.png" style="width:50px !important; margin: auto;">
            </div>
          </div>
        </ion-card-title>

      </ion-card-header>

      <ion-card-content class="cardContent">
        <span  class="font-content">压力:&nbsp;<span class="main-color">{{device.press | number:'0.0-3'}} MPa</span></span><br>
        <ion-toggle mode="ios" class="btn-switch" [checked]="device.op" [disabled]="device.disabled" color="secondary"
                    [(ngModel)]="device.op" (click)="deviceCheck(device)"></ion-toggle>
      </ion-card-content>
    </ion-card>
  </div>
</div>

