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

</ion-header>

<ion-content color="light" style="background-color: #F3F4F4;">
  <ion-segment scrollable style="position: sticky; margin-top:10px;" color="secondary" (ionChange)="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" (ionChange)="reflush()">
      <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" (ionChange)="reflush()">
      <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" (ionChange)="reflush()"></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;" (ionChange)="reflush()"></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 style="padding:5px;">
    <div class="detailContent">
      <div class="timeline" *ngIf="detailInfoLength > 0">
        <div class="entry" *ngFor="let item of detailInfo.trouble">
          <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" class="warnContent">温度: {{item.data.temp}} ℃</div>
                <div *ngIf="item.data !== null && item.data.humi" class="warnContent">湿度: {{item.data.humi}} %</div>
                <div *ngIf="item.data !== null && item.data.heatStressLevel" class="warnContent">热应激等级: {{item.data.heatStressLevel}}</div>
                <div *ngIf="item.data !== null && item.data.liquidPump" class="warnContent">供液泵压力: {{item.data.liquidPump}} MPa</div>
                <div *ngIf="item.data !== null && item.data.press" class="warnContent">电磁阀压力: {{item.data.press}} MPa</div>
                <div *ngIf="item.data !== 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 === 0" [src]="'../../assets/img/troubleDisposeState' + item.disposeState + '.png'" class="warnIcon" (click)="onRecvClick(item)">-->
<!--                <ion-button color="primary" size="small" style="display: inline-block" *ngIf="a.disposeState === 0"  (click)='onRecvClick(a)'>确认修复</ion-button>-->
                <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>
  </div>

</ion-content>

