<ion-header>
  <ion-toolbar color="dark">
    <ion-title class="title">牛舍告警一览</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content color="light">
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
  <ion-card *ngFor="let item of alarmItems" style="margin-top:10px; margin-bottom:0px;" color="white">
    <ion-card-header style="padding-top: 3px; padding-bottom: 3px;">
      <ion-card-title style="display: inline-block" style="width:100%">
        <div class="cardTitle">
          <div style="width: 65%; padding-right: 5px; display: inline-block">
            <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="float:left; padding-top: 4px;">
              <span style="text-align: center" class="font-sub-title">{{item.fieldRegionName}}</span>
            </div>
            <ion-badge color="danger" mode="ios" *ngIf="item.total > 0" class="badge">{{item.total}}</ion-badge>
          </div>
          <div style="width: 30%; padding-right: 5px; display: inline-block; font-size: 13px; color:#62C7CC">
            <ion-select interface="popover" placeholder="" style="padding: 0px; text-align: right;" [(ngModel)]="item.interval" (ionChange)="dismissPopover(item)">
              <ion-select-option value="12" class="popLabel">近一年</ion-select-option>
              <ion-select-option value="6" class="popLabel">近六个月</ion-select-option>
              <ion-select-option value="3" class="popLabel">近三个月</ion-select-option>
              <ion-select-option value="1" class="popLabel">近一个月</ion-select-option>
            </ion-select>
          </div>

        </div>
      </ion-card-title>
    </ion-card-header>
    <ion-card-content class="cardContent">
      <div class="sub" style="text-align: center; " style="width:100%">
        <ion-row style="width:100%">
          <ion-col style="padding: 0px 5px; width:50%; border-right:1px solid lightgray" (click)="toControl(item, 'trouble')">
            <div>
              <div style="height: 70px; width: 100%">
                <div style="height: 40px; float:left;width: 100%">
                  <div style="width: 75%; display: inline-block; text-align: right;">
                    <span class="label-large content-text-color" style="margin-top: 15px;">未解决故障数</span>
                  </div>
                  <div style="width: 25%; display: inline-block; text-align: left;">
                    <span style="color:#f04141; font-size:32px; ">{{item.devErr}}</span>
                  </div>
                </div>
                <div style="height: 25px; float:left;width: 100%">
                  <div style="width: 75%; display: inline-block; text-align: right;">
                    <span class="label-small note-text-color" style="margin-top: 8px;">总数</span>
                  </div>
                  <div style="width: 25%; display: inline-block; text-align: left;">
                    <span style="margin-left:2px;" class="note-text-color">{{item.devErrTotal}}</span>
                  </div>
                </div>
              </div>
            </div>
          </ion-col>

          <ion-col style="padding: 0px 5px; width:50%" (click)="toControl(item, 'alarm')">
            <div>
              <div style="height: 70px; width: 100%">
                <div style="height: 40px; float:left;width: 100%">
                  <div style="width: 75%; display: inline-block; text-align: right;">
                    <span class="label-large content-text-color" style="margin-top: 15px;">未解决预警数</span>
                  </div>
                  <div style="width: 25%; display: inline-block; text-align: left;">
                    <span style="color:#f0ca45; font-size:32px;">{{item.alarm}}</span>
                  </div>
                </div>
                <div style="height: 25px; float:left;width: 100%">
                  <div style="width: 75%; display: inline-block; text-align: right;">
                    <span class="label-small note-text-color" style="margin-top: 8px;">总数</span>
                  </div>
                  <div style="width: 25%; display: inline-block; text-align: left;">
                    <span style="margin-left:2px;" class="note-text-color">{{item.alarmTotal}}</span>
                  </div>
                </div>
              </div>
            </div>
          </ion-col>
        </ion-row>
      </div>
    </ion-card-content>

  </ion-card>

</ion-content>
