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

</ion-header>

<ion-content color="light" style="height: 100%;">
  <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>

</ion-content>
