<div class="mainCon" style="padding-top: 45px;" [@EnterLeave]>
    <Navbar [leftContent]="icon"
            (onLeftClick)="onLeftClick()"
            [rightContent]="r"
            style="background-color: #28c9bd;position: fixed;top: 0;width: 100%;z-index: 2;"
    >
        {{fieldRegionName}}控制
    </Navbar>
    <ng-template #r>
        <span (click)="pullToRefresh()">刷新</span>
    </ng-template>
    <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>
