<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%;">
      <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" style="width: 98%;">
      <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 class="main-title-detail">时间参数</h1>
    <ion-item lines="full" insert="false">
      <span class="content">{{fieldDeviceNameA}}喷淋时间 &nbsp;&nbsp;&nbsp;&nbsp;{{controlConfig.a}} &nbsp;&nbsp;&nbsp;&nbsp; 秒</span>
    </ion-item>
    <ion-item lines="full" insert="false">
      <span class="content">{{fieldDeviceNameB}}喷淋时间 &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 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 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 mode="ios" class="btn-switch" *ngIf="device.alarm === 0" [checked]="device.op" [disabled]="device.disabled"
                      [(ngModel)]="device.op" (click)="deviceCheck(device)"></ion-toggle>
          <ion-toggle mode="ios" 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>
  </div>
  <!--<v-loading-bump style="z-index: 9999; color: red" [remain]="comm.remain" *ngIf="comm.isLoading"></v-loading-bump>-->
</ion-content>
