<ion-header mode="ios">
  <ion-toolbar color="gray">
    <ion-buttons slot="start">
      <ion-back-button color="secondary" defaultHref="/index" text=""></ion-back-button>
    </ion-buttons>
    <ion-searchbar (ionInput)="getItems($event)" debounce="1000" style="height: 40px;"></ion-searchbar>
  </ion-toolbar>
  <ion-slides style="width: 100%; height: 125px;" mode="ios"
              [options]="lunbo" #slide (ionSlideTouchEnd)="slideDidChange()">
    <ion-slide class="slideCon" *ngFor="let one of imgs">
      <div class="inBox">
        <img [src]="'../../../../assets/lunbo/' + one">
      </div>
    </ion-slide>
  </ion-slides>

</ion-header>
<ion-content color='light'>
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
  <h1 style="
            font-size: 16px;
            padding-left: 5px;
            border-left: 5px solid #28c9bd;
            line-height: 25px;
            margin-bottom: 5px;">故障统计</h1>
  <div style="margin-left:1%">
  <v-kanban class="home-bar" name="热应激" [inData]="thiGood" iconClass="vo v-youxuan" iconColor="#3e9058" iconSize="25px" fontSize="25px"></v-kanban>
  <v-kanban class="home-bar" name="热应激" [inData]="thiBad" iconClass="vo v-yujing" iconColor="#FAB139" iconSize="25px" fontSize="25px"></v-kanban>
  <v-kanban class="home-bar" name="故障总数" [inData]="alarmTotal" iconClass="vo v-guzhang2" iconColor="#B23706" iconSize="25px" fontSize="25px"></v-kanban>
  </div>
  <h1 style="
            font-size: 16px;
            padding-left: 5px;
            border-left: 5px solid #28c9bd;
            line-height: 25px;
            margin-bottom: 5px;">牛舍列表</h1>
  <ion-list *ngIf="items.length > 0" mode="md" class="listview" insert = "false" line="none" style="width:96%;margin-left: 2%">
    <ion-item *ngFor="let item of items" (click)="toControl(item)" class="ion-item" style="width: 100%; --padding-start: 0px">
      <div class="item">
        <div class="top">
          <div style="width:10%; float:left"><img [src]="'../../assets/img/house.png'" style="display: inline-block;margin-right: 10px; width:23px !important"> </div>
          <div style="width:90%; float:left; padding-top: 4px;">
            <span style="text-align: center">{{item.fieldRegionName}}</span><span style="text-align: center; font-size:12px; padding-left:10px; color:red;" *ngIf="item.operationModel === 4">(部分设备处于现控状态)</span></div>
        </div>
        <div class="content">
          <span *ngIf="item.temp" class="detailInfo" style="width: 40%">温度: &nbsp;&nbsp;{{item.temp}} ℃</span>
          <span *ngIf="item.humi" class="detailInfo" style="width: 40%">湿度: &nbsp;&nbsp;{{item.humi}} % rH</span>
          <span *ngIf="item.humi" class="detailInfo" style="width: 40%">氨气: &nbsp;&nbsp;{{item.NH3}} ppm</span>
          <span *ngIf="item.heatStressLevel" class="detailInfo" style="width: 40%">热应激: &nbsp;&nbsp;<span class="warmColor{{item.heatStressLevel}}">{{item.heatStressLevelName}}</span></span>
        </div>
        <div class="bottom">
          <div style="width:100%">
            <!--<span [ngClass]="{'online': item.online, 'offline': !item.online}">{{item.online ? '在线' : '离线'}}    </span>-->
            <!--<span *ngIf="item.operationModel" class="online">{{item.operationModel ? '远控' :'现控'}}    </span>-->
            <!--<span *ngIf="item.operationModel" [ngClass]="{'online': item.isWisdomModel, 'offline': !item.isWisdomModel}" class="online">智控    </span>-->
            <!--<span *ngIf="item.ts" class="right">{{item.ts | date: 'yyyy-MM-dd HH:mm'}}</span>-->
            <div [ngClass]="{'online': item.online, 'offline': !item.online}">{{item.online ? '在线' : '离线'}}    </div>
            <!-- 1:远控 0:现控 4:混乱 -->
            <div *ngIf="item.operationModel === 1 || item.operationModel === 0" class="online">{{item.operationModel === 1 ? '远控' :'现控'}}    </div>
            <div *ngIf="item.operationModel === 4" class="offline">现控    </div>
            <div *ngIf="item.operationModel" [ngClass]="{'online': item.isWisdomModel, 'offline': !item.isWisdomModel}" class="online">智控    </div>
            <div *ngIf="item.ts" class="right">{{item.ts | date: 'yyyy-MM-dd HH:mm'}}</div>
          </div>
        </div>
      </div>
    </ion-item>
  </ion-list>
</ion-content>
