
<ion-header translucent="false">
  <ion-toolbar color="dark">
    <ion-buttons slot="start">
      <ion-back-button mode="ios" text="" ></ion-back-button>
    </ion-buttons>
    <ion-title class="appTitle">{{fieldRegionName}}告警详情</ion-title>
  </ion-toolbar>

  <div>
    <ion-segment scrollable style="position: sticky; margin-top:10px;" color="secondary" (click)="segmentChanged($event)">
      <ion-segment-button value="trouble" [checked]="isTroubleDis">
        <ion-label>故障</ion-label>
      </ion-segment-button>
      <ion-segment-button value="alarm" [checked]="isAlarmDis">
        <ion-label>预警</ion-label>
      </ion-segment-button>
    </ion-segment>

    <ion-item lines="full" class="ionItem" color="gray">
      <ion-select interface="popover" placeholder="状态" [(ngModel)]="disposeState" (onClick)="refresh()" id="selectState">
        <ion-select-option value="全部" class="popLabel">全部</ion-select-option>
        <ion-select-option value="0" class="popLabel">待修复</ion-select-option>
        <ion-select-option value="1" class="popLabel">已修复</ion-select-option>
      </ion-select>
      <ion-select interface="popover" placeholder="类型" [(ngModel)]="fieldDeviceType" (click)="refresh()" id="selectType">
        <ion-select-option value="全部" class="popLabel">全部</ion-select-option>
        <ion-select-option value="环境" class="popLabel">环境</ion-select-option>
        <ion-select-option value="风机" class="popLabel">风机</ion-select-option>
        <ion-select-option value="喷淋" class="popLabel">喷淋</ion-select-option>
        <ion-select-option value="照明" class="popLabel">照明</ion-select-option>
        <ion-select-option value="水槽" class="popLabel">水槽</ion-select-option>
      </ion-select>
    </ion-item>

    <ion-item lines="full" class="ionItem" style="height: 45px;">
      <div style="width: 28%">
        <ion-datetime style="position: relative;" displayFormat="YYYY/MM" cancelText="取消" doneText="确认" [(ngModel)]="startTime" (click)="refresh()" id="selectStartTime"></ion-datetime>
      </div>
      <div style="width: 2%">
        <span>~</span>
      </div>
      <div style="width: 30%">
        <ion-datetime style="position: relative;" displayFormat="YYYY/MM" cancelText="取消" doneText="确认" [(ngModel)]="stopTime" style="margin-left: 3px;" (click)="refresh()" id="selectStopTime"></ion-datetime>
      </div>
      <div style="width: 40%">
        <div class="note" style="margin-bottom: 5px;">
          <span style="text-align: right; padding-right:5px; width:60%;">未解决数</span>
          <span style="width:40%" *ngIf="isTroubleDis">{{detailInfo.devErr}}</span>
          <span style="width:40%" *ngIf="isAlarmDis">{{detailInfo.alarm}}</span>
        </div>
        <div class="note">
          <span style="text-align: right; padding-right:5px; width:60%;">总数</span>
          <span style="width:40%" *ngIf="isTroubleDis">{{detailInfo.devErrTotal}}</span>
          <span style="width:40%" *ngIf="isAlarmDis">{{detailInfo.alarmTotal}}</span>
        </div>
      </div>
    </ion-item>
  </div>

</ion-header>

<ion-content color="light" style="background-color: #F3F4F4;" scroll="false">

  <div style="padding:5px;">
    <div class="detailContent">

      <div class="timeline" *ngIf="troubleList.length > 0">
        <div class="entry" *ngFor="let item of troubleList">
          <div class="title">
            <div><img [src]="'../../assets/img/' + item.fieldDeviceType + '.png'" class="deviceIcon"></div>
            <p style="font-size: 14px">{{item.troubleTime}}</p>
          </div>
          <div class="body">
            <h3 style="margin-bottom: 5px;">{{item.description}}</h3>
            <div>
              <div style="width:65%; float: left">
                <div *ngIf="item.data !== null && item.data.temp !== undefined && item.data.temp !== null && item.data.temp !== ''" class="warnContent">温度: {{item.data.temp}} ℃</div>
                <div *ngIf="item.data !== null && item.data.humi !== undefined && item.data.humi !== null && item.data.humi !== ''" class="warnContent">湿度: {{item.data.humi}} %</div>
                <div *ngIf="item.data !== null && item.data.heatStressLevel !== undefined && item.data.heatStressLevel !== null && item.data.heatStressLevel !== ''" class="warnContent">热应激等级: {{item.data.heatStressLevel}}</div>
                <div *ngIf="item.data !== null && item.data.liquidPump !== undefined && item.data.liquidPump !== null  && item.data.liquidPump !== ''" class="warnContent">供液泵压力: {{item.data.liquidPump}} MPa</div>
                <div *ngIf="item.data !== null && item.data.press !== undefined && item.data.press !== null && item.data.press !== ''" class="warnContent">电磁阀压力: {{item.data.press}} MPa</div>
                <div *ngIf="item.data !== null && item.data.NH3 !== undefined && item.data.NH3 !== null && item.data.NH3 !== ''" class="warnContent">氨气: {{item.data.NH3}} ppm</div>
              </div>
              <div style="width:35%; float: left">
                <div *ngIf="displayArea === 'trouble' && item.disposeState === 0" >
                  <ion-button color="secondary" style="display: inline-block; width: 55px; height: 30px; font-size: 12px; border-radius: 20px;" (click)="onRecvClick(item)">确认修复</ion-button>
                </div>
                <img *ngIf="displayArea === 'trouble' && item.disposeState === 1" [src]="'../../assets/img/troubleDisposeState' + item.disposeState + '.png'" class="warnIcon">

                <img *ngIf="displayArea === 'alarm'" [src]="'../../assets/img/disposeState' + item.disposeState + '.png'" class="warnIcon">
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>

    <!--<ion-list id="troubleList"></ion-list>-->
    <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)" id="infiniteScroll">
      <ion-infinite-scroll-content
              loadingSpinner="bubbles"
              loadingText="加载中...">
      </ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </div>

</ion-content>



