<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" [@EnterLeave]>
        <div class="topPart">
            <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>
        <div class="middlePart">
            <ion-list>
                <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>
                    <!--一键控制{{a.l}}-->
                    <!--<v-switch [value]="a.v" (click)="allCheck(a)" [loading]="a.d"></v-switch>-->
                <ion-item *ngFor="let a of allBtns" lines="full" insert="false"  >
                    <!--<v-switch [value]="a.value" (click)="toggle(a)" [loading]="a.loading"></v-switch>-->
                    <ion-label>一键控制{{a.l}}</ion-label>
                    <v-switch [value]="a.v" (click)="allCheck(a)" [loading]="a.d"></v-switch>
                </ion-item>
            </ion-list>
        </div>
        <div class="bottomPart">
            <ion-list>
                <!--{{a.fieldDeviceName}}-->
                <ion-item  *ngFor="let a of devices;let i = index" lines="full">
                <!--<v-switch [value]="a.value" (click)="toggle(a)" [loading]="a.loading"></v-switch>-->
                    <ion-label>{{a.fieldDeviceName}}</ion-label>
                    <v-switch [value]="a.value" (click)="toggle(a)" [loading]="a.loading"></v-switch>
                </ion-item>
            </ion-list>
        </div>
    </div>
    <ng-template #icon>
        <span class="vo v-back"></span>
    </ng-template>


    <!--<div class="popBox123" style="z-index: 9999;-->
        <!--position: absolute;-->
        <!--top: 40%;-->
        <!--width: 500px;-->
        <!--background-color: #ffffff;">-->

        <!--<div class="content-frank">正在向设备发起指令,预计还有  15 秒</div>-->
    <!--</div>-->

    <v-loading-bump style="z-index: 9999; color: red" [remain]="comm.remain" *ngIf="comm.isLoading"></v-loading-bump>
</ion-content>
