<ion-header no-border>
    <ion-toolbar color="dark" mode="ios">
        <ion-buttons slot="start">
          <ion-back-button mode="ios" text="" ></ion-back-button>
        </ion-buttons>
        <ion-title mode="ios" class="title">{{item.fieldRegionName}}详情</ion-title>
        <ion-buttons slot="end">
          <ion-button style="font-size: medium" (click)="toHistory(item)">历史</ion-button>
        </ion-buttons>
    </ion-toolbar>
    <div class="top">
        <span [ngClass]="{'online': item.online, 'offline': !item.online}">{{item.online ? '在线' : '离线'}}    </span>
        <span *ngIf="item.online && item.operationModel === 1 || item.operationModel === 0" class="online">{{item.operationModel ? '远控' :'现控'}}    </span>
        <span *ngIf="item.online && item.operationModel === 4" class="offline">现控    </span>
        <span *ngIf="item.online && item.operationModel === 1" [ngClass]="{'online': item.isWisdomModel, 'offline': !item.isWisdomModel}" class="online">智控    </span>
        <span *ngIf="item.ts" class="right font-ts">{{item.ts | date: 'yyyy-MM-dd HH:mm'}}</span>
    </div>
    <div style="background-color: #F0F0F0;" align="center">
          <v-kanban-small class="home-bar" name="温度" [inData]="item.temp | number:'0.1-1'" iconWidth="50%" unit="℃" [iconImg]="'../../assets/img/icon-temp.png'" [fontColor]="item.tempColor" fontSize="14px"></v-kanban-small>
          <v-kanban-small class="home-bar" name="湿度" [inData]="item.humi | number:'0.1-1'" iconWidth="50%" unit="% RH" [iconImg]="'../../assets/img/icon-humi.png'" [fontColor]="item.humiColor"  fontSize="14px"></v-kanban-small>
          <v-kanban-small class="home-bar" name="热应激" [inData]="item.heatStressLevelName" iconWidth="35%" [iconImg]="'../../assets/img/icon-heat.png'" [fontColor]="item.heatStressColor" fontSize="14px"></v-kanban-small>
          <v-kanban-small class="home-bar" name="在离舍" [inData]="inHouseName" iconWidth="35%" [iconImg]="'../../assets/img/icon-house.png'" iconColor="#62C7CC" fontSize="14px"></v-kanban-small>
    </div>
    <div class="inHouseDiv font-content-title">
           <ion-label class="inHouseLabel normalColor">在离舍开关控制</ion-label>
           <ion-toggle mode="ios" color="secondary" [(ngModel)]="inHouseState" [checked]="inHouseState" [disabled]="inHouseDisabled"
                       (click)="inHouseControl(inHouseState)"></ion-toggle>
           <!--<v-switch (click)="inHouseControl(item.inHouse)" [value]="item.inHouse.inHouse" [loading]="loading"></v-switch>-->
    </div>
</ion-header>
<ion-content color="light">
  <!--<ion-router-outlet></ion-router-outlet>-->
    <!--<ion-tabs>-->
        <!--<ion-tab-bar slot="top" mode="ios" style="&#45;&#45;border: 0px;height: 30px;" color="light-gray">-->
            <!--<ion-tab-button tab="fan" class="tabBtn ion-segment-button">-->
                <!--<ion-label>风机</ion-label>-->
            <!--</ion-tab-button>-->
            <!--<ion-tab-button tab="shower" class="tabBtn ion-segment-button" [routerLink]="showerLink">  &lt;!&ndash;[rootParams]="fieldRegionNo"&ndash;&gt;-->
                <!--<ion-label>喷淋</ion-label>-->
            <!--</ion-tab-button>-->
            <!--<ion-tab-button tab="light" class="tabBtn ion-segment-button" [routerLink]="lightLink">-->
                <!--<ion-label>照明</ion-label>-->
            <!--</ion-tab-button>-->
            <!--<ion-tab-button tab="waterchannel" class="tabBtn ion-segment-button" [routerLink]="waterchannelLink">-->
                <!--<ion-label>水槽</ion-label>-->
            <!--</ion-tab-button>-->
        <!--</ion-tab-bar>-->
    <!--</ion-tabs>-->
    <!--<ion-router-outlet></ion-router-outlet>-->
    <ion-segment mode="ios" scrollable style="position: sticky;" color="secondary" [value]="selectedTab"
                 (ionChange)="segmentChanged($event)">
        <ion-segment-button mode="ios" style="border-radius: 0px 5px 0px 0px;" value="fan" s>
            <ion-label style="font-size:10px">风机</ion-label>
        </ion-segment-button>
        <ion-segment-button mode="ios" style="border-radius: 0px 5px 0px 0px;" value="shower">
            <ion-label style="font-size:10px">喷淋</ion-label>
        </ion-segment-button>
        <ion-segment-button mode="ios" style="border-radius: 0px 5px 0px 0px;" value="light">
            <ion-label style="font-size:10px">照明</ion-label>
        </ion-segment-button>
        <ion-segment-button mode="ios" style="border-radius: 0px 5px 0px 0px;" value="water">
            <ion-label style="font-size:10px">水槽</ion-label>
        </ion-segment-button>
    </ion-segment>

    <div *ngIf="selectedTab === 'fan'">
       <v-env-fan [fieldRegionNo]="fieldRegionNo" [operationModel]="item.operationModel" [online]="item.online"></v-env-fan>
    </div>
    <div *ngIf="selectedTab === 'shower'">
        <v-env-shower [fieldRegionNo]="fieldRegionNo" [operationModel]="item.operationModel" [online]="item.online"></v-env-shower>
    </div>
    <div *ngIf="selectedTab === 'light'">
        <v-env-light [fieldRegionNo]="fieldRegionNo" [operationModel]="item.operationModel" [online]="item.online"></v-env-light>
    </div><div *ngIf="selectedTab === 'water'">
    <v-env-waterchannel [fieldRegionNo]="fieldRegionNo"></v-env-waterchannel>
</div>

</ion-content>
