<ion-header mode="ios" translucent="false">
    <ion-toolbar color="secondary">
        <ion-buttons slot="start">
            <ion-back-button text=""></ion-back-button>
        </ion-buttons>
        <ion-title class="ion-tittle">{{fieldRegionName}}控制</ion-title>
        <ion-buttons slot="end">
            <ion-button style="font-size: medium" (click)="pullToRefresh()">刷新</ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <div class="mainCon" style="" [@EnterLeave]>
        <ion-content style="padding-top: 45px ;margin-bottom:45px ;position:relative;overflow-y:auto;">
            <div>
                <ListItem multipleLine *ngIf="yewei || yewei === 0">
                    当前液位:
                    <div class="process">
                        <div [class]="'inlineProcess ' + color" [ngStyle]="{width: proc + '%'}">
                        </div>
                    </div>
                    {{yewei.toFixed(2)}}m
                </ListItem>
                <ListItem multipleLine *ngIf="temp || temp === 0">
                    当前温度:
                    <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="middlePart">
                <ion-item lines="full">
                    <ion-label>运行模式</ion-label>
                        <ion-select multiple="false" cancelText="取消" okText="确认" [(ngModel)]="workModeSetting.workMode" [(value)]="workModeSetting.workMode"  (ionChange)="workModeEvent()">
                        <ion-select-option value="0">现场控制</ion-select-option>
                        <ion-select-option value="1">远程手控</ion-select-option>
                        <ion-select-option value="2">全自动</ion-select-option>
                    </ion-select>
                </ion-item>

                    <!--<ion-label>发现设备运行时间过长</ion-label>-->

            </div>
            <div class="bottomPart">
                <ion-list>
                    <ion-item *ngFor="let a of devices;let i = index" lines = "full">
                        <ion-label>{{a.fieldDeviceName}}</ion-label>
                        <v-switch (click)="toggle(a)" [value]="a.value" [disabled]="opDisable" [loading]="a.loading" ></v-switch>
                    </ion-item>
                </ion-list>
                <!--<ListItem multipleLine *ngFor="let a of devices;let i = index">-->
                    <!---->
                   <!---->
                <!--</ListItem>-->
            </div>
            <ion-button color="danger" expand="full" (click)="unlock()" *ngIf="alarmMsg.locked">现设备运行时间过长点击解锁</ion-button>
        </ion-content>
    </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>
    <v-loading-bump style="z-index: 9999; color: red" [remain]="comm.remain" *ngIf="comm.isLoading"></v-loading-bump>
</ion-content>
