<ion-header mode="ios" no-border>
  <ion-toolbar color="dark">
    <ion-buttons slot="start" >
      <ion-back-button  mode="ios" defaultHref="/index" text=""></ion-back-button>
    </ion-buttons>
    <ion-searchbar mode="ios" color="light" autocomplete="on" (ionInput)="getItems($event)" debounce="1000" placeholder="输入名称进行搜索"></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-slides style="width: 100%; height: 125px;" mode="ios"
              [options]="lunbo" #slide>
    <ion-slide class="slideCon" >
      <div class="inBox">
        <img [src]="'../../../../assets/lunbo/4.png'">
      </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 class="main-title">牛舍状况统计</h1>
  <div style="margin:1%">
    <v-kanban-double class="kanban-double" [name1]="'热应激'" [name2]="'故障'"
                     [inData1]="thiGood" [inData2]="thiBad" [inData3]="alarmTotal"
                     [iconImg1]="'../../assets/img/level-good.png'"
                     [iconImg2]="'../../assets/img/level-bad.png'"
                     [iconImg3]="'../../assets/img/alarm.png'"
                     iconColor1="#62C7CC"  iconColor2="#F8B72D" iconColor3="#F2401C"
                     fontSize="30px" ></v-kanban-double>
    <!--<v-kanban-large class="home-bar" name="热应激" [inData]="thiBad" [iconImg]="'../../assets/img/level-bad.png'" iconColor="#FAB139" fontSize="25px" iconWidth="45px !important"></v-kanban-large>-->
    <!--<v-kanban-large class="kanban-large" name="故障总数" [inData]="alarmTotal" [iconImg]="'../../assets/img/alarm.png'" iconColor="#F2401C" fontSize="25px" iconWidth="45px !important"></v-kanban-large>-->
  </div>
  <h1 class="main-title">牛舍列表</h1>
  <ion-list *ngIf="items.length > 0" mode="md" class="list-view" insert = "false" line="none">
    <ion-item *ngFor="let item of items" (click)="toControl(item)" class="ion-item" style="width: 98%; --padding-start: 0px">
      <div class="item">
        <div class="top">
          <div style="float:left;padding-top:3px;">
            <img [src]="'../../assets/img/house.png'" style="display: inline-block;margin-left: 10px; margin-right: 10px;width:20px !important">
          </div>
          <div style="width:60%; float:left; padding-top: 4px;">
            <span style="text-align: center" class="font-sub-title">{{item.fieldRegionName}}</span><span style="text-align: center; font-size:12px; padding-left:10px; color:red;" *ngIf="item.operationModel === 4">(部分设备处于现控状态)</span>
          </div>
          <div style="width:25%; float:left; padding-top: 2px; text-align:right;">
            <img *ngIf="item.alarm" src="../../../assets/img/alarm-small.png" style="display: inline-block; width:25px !important">
          </div>
        </div>
        <div class="content font-content">
          <div class="detailInfo" style="width: 40%">热应激: &nbsp;<span class="warmColor{{item.heatStressLevel}}">{{item.heatStressLevelName}}</span></div>
          <div *ngIf="item.NH3 !== '--'" class="detailInfo" style="width: 40%">氨气: &nbsp;<span class="{{item.NH3Color}}Color">{{item.NH3 | number:'0.0-2'}} ppm</span></div>
          <div *ngIf="item.NH3 === '--'" class="detailInfo" style="width: 40%">氨气: &nbsp;{{'--'}} ppm</div>
          <div *ngIf="item.temp !== '--'" class="detailInfo" style="width: 40%">温度: &nbsp;<span class="{{item.tempColor}}Color">{{item.temp | number:'0.1-1'}} ℃</span></div>
          <div *ngIf="item.temp === '--'" class="detailInfo" style="width: 40%">温度: &nbsp;{{'--'}} ℃</div>
          <div *ngIf="item.humi !== '--'" class="detailInfo" style="width: 40%">湿度: &nbsp;<span class="{{item.humiColor}}Color">{{item.humi | number:'0.1-1'}}% RH</span></div>
          <div *ngIf="item.humi === '--'" class="detailInfo" style="width: 40%">湿度: &nbsp;{{'--'}}% RH</div>
        </div>
        <div class="bottom">
          <div style="width:100%; margin-top:10px">
            <!--<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.online && (item.operationModel === 1 || item.operationModel === 0)" class="online">{{item.operationModel === 1 ? '远控' :'现控'}}    </div>
            <div *ngIf="item.online && item.operationModel === 4" class="offline">现控    </div>
            <div *ngIf="item.online && item.operationModel === 1" [ngClass]="{'online': item.isWisdomModel, 'offline': !item.isWisdomModel}" class="online">智控    </div>
            <div *ngIf="item.ts !== null" class="right font-note">{{item.ts | date: 'yyyy-MM-dd HH:mm'}}</div>
          </div>
        </div>
      </div>
    </ion-item>
  </ion-list>
</ion-content>
