<div class="mainCon">
    <Navbar [leftContent]="icon"
            (onLeftClick)="onLeftClick()"
            style="background-color: #28c9bd"
    >
        {{fieldRegionName}}控制
    </Navbar>
    <PullToRefresh [direction]="state.direction"
                   [(ngModel)]="state.refreshState"
                   [endReachedRefresh]="state.endReachedRefresh"
                   (onRefresh)="pullToRefresh($event)"
                   style="min-height: calc(100% - 45px)"
    >
    <div class="topPart">
        <ListItem multipleLine *ngIf="this.yewei">
            当前液位:
            <div class="process">
                <div [class]="'inlineProcess ' + color" [ngStyle]="{width: proc + '%'}">
                </div>
            </div>
            {{yewei.toFixed(2)}}m
        </ListItem>
        <ListItem multipleLine *ngIf="this.temp">
            当前温度:
            <div style="display: inline-block;margin-left: calc(100% - 145px);vertical-align: middle">
                {{temp.toFixed(2)}}℃
            </div>
        </ListItem>
        <div *ngFor="let a of nb;let i = index">
            <ListItem multipleLine [extra]="a.fieldDeviceName === '南水' ? s1 : s2">
                {{a.fieldDeviceName}}
            </ListItem>
            <ListItem multipleLine *ngIf="a.fieldDeviceName === '南水' ? nanClicked : beiClicked">
                选择开启时间
                <Stepper class="stepClass" [(ngModel)]="duration" [min]="1" [showNumber]="true"></Stepper>分钟
                <div style="text-align: right;padding-top: 10px">
                    <div Button style="margin-right: 10px" class="btn" (click)="cancel()" [inline]="true" [size]="'small'" [type]="'default'">取消</div>
                    <div Button (click)="confirm(a)" class="btn" [inline]="true" [size]="'small'" [type]="'primary'">确认</div>
                </div>
            </ListItem>
        </div>
    </div>
    <div class="bottomPart">
        <ListItem multipleLine *ngFor="let a of devices;let i = index">
            {{a.fieldDeviceName}}
            <v-switch [value]="a.value" (click)="toggle(a)" [loading]="a.loading"></v-switch>
        </ListItem>
    </div>
    </PullToRefresh>
</div>
<ng-template #icon>
    <span class="vo v-back"></span>
</ng-template>
<ng-template #s1>
    <v-switch [value]="value[0]" [disabled]="beiLoading || value[1]" (click)="toggleNb(0)" [loading]="nanLoading"></v-switch>
</ng-template>
<ng-template #s2>
    <v-switch [value]="value[1]" [disabled]="nanLoading || value[0]" (click)="toggleNb(1)" [loading]="beiLoading"></v-switch>
</ng-template>
