<ion-header translucent="false" no-border>
  <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 style="">
    <ion-segment mode="ios" style="position: sticky; height: 35px;" color="secondary" (ionChange)="segmentChanged($event)">
      <ion-segment-button  mode="ios" value="trouble" [checked]="isTroubleDis" class="ion-segment-button" style="--border-radius:0xp;">
        <ion-label>故障</ion-label>
      </ion-segment-button>
      <ion-segment-button  mode="ios" value="alarm" [checked]="isAlarmDis" class="ion-segment-button" style="--border-radius:0xp;">
        <ion-label>预警</ion-label>
      </ion-segment-button>
    </ion-segment>

    <ion-item lines="full" class="ionItem" style="height: 45px;"> <!-- color="gray" -->
      <div style="float:left; display: inline-block; position: relative; width:40%; padding-top: 10px;">
        <!--<ion-select class="selectBtn font-content" interface="popover" placeholder="状态" [(ngModel)]="disposeState" (ionChange)="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 class="selectBtn font-content" interface="popover" placeholder="状态" [(ngModel)]="disposeState" (ionChange)="refresh()" id="selectState">
          <ion-select-option *ngFor="let option of stateOptions" [value]="option.modelId">{{option.modelValue}}</ion-select-option>
        </ion-select>
      </div>
      <div style="float:left; display: inline-block; position: relative; width:40%; padding-top: 10px;">
        <ion-select class="selectBtn font-content" interface="popover" placeholder="类型" [(ngModel)]="fieldDeviceType" (ionChange)="refresh()" id="selectType">
          <ion-select-option *ngFor="let option of typeOptions" [value]="option.modelId">{{option.modelValue}}</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-option value="水槽" class="popLabel">水槽</ion-select-option>-->
        </ion-select>
      </div>
    </ion-item>

    <ion-item lines="full" class="ionItem" color="gray" style="height: 45px; --inner-padding-end: 0px;">
      <div style="width: 26%">
        <ion-datetime class="content-text-color" style="position: relative;" displayFormat="YYYY/MM" cancelText="取消" doneText="确认" [(ngModel)]="startTime" (ionChange)="refresh()" id="selectStartTime"></ion-datetime>
      </div>
      <div style="width: 4%">
        <span class="font-content">~</span>
      </div>
      <div style="width: 28%">
        <ion-datetime class="content-text-color" style="position: relative;" displayFormat="YYYY/MM" cancelText="取消" doneText="确认" [(ngModel)]="stopTime" style="margin-left: 3px;" (ionChange)="refresh()" id="selectStopTime"></ion-datetime>
      </div>
      <div style="width: 40%; padding-right: 15px;">
        <div class="note" style="margin-bottom: 5px;">
          <div style="width:80%; display:inline-block">
            <span class="font-note" style="text-align: right; padding-right:5px;">未解决数</span>
          </div>
          <div style="width:20%; display:inline-block;">
            <span class="main-color" style="font-size: 13px" *ngIf="isTroubleDis">{{detailInfo.devErr}}</span>
            <span class="main-color" style="font-size: 13px" *ngIf="isAlarmDis">{{detailInfo.alarm}}</span>
          </div>
        </div>
        <div class="note">
          <div style="width:80%; display:inline-block">
            <span class="font-note" style="text-align: right; padding-right:5px;">总数</span>
          </div>
          <div style="width:20%; display:inline-block;">
            <span class="main-color" style="font-size: 13px" *ngIf="isTroubleDis">{{detailInfo.devErrTotal}}</span>
            <span class="main-color" style="font-size: 13px" *ngIf="isAlarmDis">{{detailInfo.alarmTotal}}</span>
          </div>
        </div>
      </div>
    </ion-item>
  </div>

</ion-header>

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

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

      <div class="timeline" *ngIf="troubleList.length > 0">
        <div class="entry outDiv" *ngFor="let item of troubleList">
          <div class="title">
            <div><img [src]="'../../assets/img/' + item.fieldDeviceType + '.png'" class="deviceIcon"></div>
            <p class="font-ts" style="font-size:13px !important">{{item.troubleTime}}</p>
          </div>
          <div class="body inDiv">

            <div id="parentDiv" >
              <div style="width:65%; float: left">
                <h3 style="margin-bottom: 5px;" class="font-content-title">{{item.description}}</h3>
                <div *ngIf="item.data !== null && item.data.temp !== undefined && item.data.temp !== null && item.data.temp !== ''" class="warnContent font-content">温度: {{item.data.temp | number:'0.1-1'}} ℃</div>
                <div *ngIf="item.data !== null && item.data.humid !== undefined && item.data.humid !== null && item.data.humid !== ''" class="warnContent font-content">湿度: {{item.data.humid | number:'0.1-1'}} % RH</div>
                <div *ngIf="item.data !== null && item.data.heatStressLevel !== undefined && item.data.heatStressLevel !== null && item.data.heatStressLevel !== ''" class="warnContent font-content">热应激等级: {{item.data.heatStressLevel}}</div>
                <div *ngIf="item.data !== null && item.data.liquidPump !== undefined && item.data.liquidPump !== null  && item.data.liquidPump !== ''" class="warnContent font-content">供液泵: {{item.data.liquidPump | number:'0.0-3'}} MPa</div>
                <div *ngIf="item.data !== null && item.data.press !== undefined && item.data.press !== null && item.data.press !== ''" class="warnContent font-content">电磁阀: {{item.data.press | number:'0.0-3'}} MPa</div>
                <div *ngIf="item.data !== null && item.data.NH3 !== undefined && item.data.NH3 !== null && item.data.NH3 !== ''" class="warnContent font-content">氨气: {{item.data.NH3 | number:'0.0-2'}} 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>



