<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;">
    <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">
            <i class="vo v-fangzi"></i>
            <span style="margin-left:10px">{{item.fieldRegionName}}</span>
            <span class="alarmNum">{{item.total}}</span>
          </div>
          <div style="width: 30%; padding-right: 5px; display: inline-block; font-size: 13px; color:#61C7CC">
            <ion-select interface="popover" placeholder="" style="padding: 0px;" [(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>

          <!--<span style="float:right; padding-right: 5px;">-->
            <!--&lt;!&ndash;<ion-popover-controller></ion-popover-controller>&ndash;&gt;-->
            <!--&lt;!&ndash;<a (click)="presentPopover(item)" [id]="item.fieldRegionNo">近一年</a>&ndash;&gt;-->
            <!---->
          <!--</span>-->
        </div>
      </ion-card-title>
    </ion-card-header>
    <ion-card-content style="padding-top: 5px; padding-bottom: 5px;">
      <div class="sub" style="text-align: center; " style="width:100%">
        <!--<ion-icon name="ios-heart" style="padding: auto"></ion-icon>-->
        <ion-row style="width:100%">
          <ion-col style="padding: 5px; width:50%; border-right:1px solid lightgray" (click)="toControl(item, 'trouble')">
            <div>
              <div style="height: 60px; width: 100%">
                <div style="height: 35px; float:left;width: 100%">
                  <span class="label">未解决故障数</span><span style="color:#d33939; font-size:24px;">{{item.devErr}}</span>
                </div>
                <div style="height: 25px; float:left;width: 100%">
                  <span class="label">总数</span><span>{{item.devErrTotal}}</span>
                </div>
              </div>
            </div>
          </ion-col>

          <ion-col style="padding: 5px; width:50%" (click)="toControl(item, 'alarm')">
            <div>
              <div style="height: 60px; width: 100%">
                <div style="height: 35px; float:left;width: 100%">
                  <span class="label">未解决预警数</span><span style="color:#f0ca45; font-size:24px;">{{item.alarm}}</span>
                </div>
                <div style="height: 25px; float:left;width: 100%">
                  <span class="label">总数</span><span>{{item.alarmTotal}}</span>
                </div>
              </div>
            </div>
          </ion-col>
        </ion-row>
      </div>
    </ion-card-content>

  </ion-card>

</ion-content>
