import {Component, OnInit} from '@angular/core';
import {Transfer} from '../service/transfer';
import {Api} from '../service/api';
import {Load} from '../service/load';
import {ActivatedRoute} from '@angular/router';
import {animate, state, style, transition, trigger} from '@angular/animations';
import {fadeIn} from '../animations/fade-in';
import {toLeft} from '../animations/toLeftAndBack';
import {flyIn} from '../animations/flyIn';
import {NavController} from '@ionic/angular';

@Component({
    selector: 'v-east',
    templateUrl: './east.page.html',
    styleUrls: ['./east.page.scss'],
    animations: [
        // trigger('toLeft', [
        //     state('toLeft', style({
        //         'transform': 'translateX(-80px)'
        //     })),
        //     state('backLeft', style({
        //         'transform': 'translateX(0)'
        //     })),
        //     transition('toLeft => backLeft', animate('1150ms')),
        //     transition('backLeft => toLeft', animate('1150ms'))
        // ] )
        flyIn
    ]
})
export class EastPage implements OnInit {
    value = [];
    yewei;
    temp;
    proc = 0;
    duration = 23;
    nanClicked = false;
    beiClicked = false;
    nanLoading = false;
    beiLoading = false;
    _inv;
    color;
    nb = [];
    devices = [];
    fieldRegionNo = '';
    fieldRegionName = '';
    workMode = '1';
    workModeSetting = {'workMode' : '1',
                         'DeviceNo' : '' };

    constructor(private tf: Transfer, private api: Api, private load: Load, private ac: ActivatedRoute, private nav: NavController) {
    }

    ngOnInit() {
        this.ac.queryParams.subscribe((data) => {
            this.fieldRegionNo = data.no;
            this.fieldRegionName = data.name;
        });
    }

    workModeEvent() {
        let opt = {fieldDeviceNo : this.workModeSetting.DeviceNo ,
                    op : this.workModeSetting.workMode ,
                    startTime: parseInt((new Date().getTime() / 1000).toString(), 10),
                     ts: parseInt((new Date().getTime() / 1000).toString(), 10)
                    };

        opt.startTime = opt.ts;

        this.api.control.controlSwitch([opt, (data) => {
            ;
        }]);
    }

    // ionic的生命周期函数
    ionViewWillEnter() {
        this.nanClicked = false;
        this.beiClicked = false;
        this.nanLoading = false;
        this.beiLoading = false;
        this.getData(0);
    }

    ionViewWillLeave() {
        clearTimeout(this._inv);
    }

    toggleNb(index) {
        if (!(this.beiLoading || this.nanLoading || this.value[0] || this.value[1])) {
            if (index === 0) {
                this.nanClicked = true;
                this.nanLoading = true;
            } else if (index === 1) {
                this.beiClicked = true;
                this.beiLoading = true;
            }
        } else if (this.value[index]) {
            this.confirm(this.nb[index]);
        }
    }

    toggle(a) {
        a.loading = true;
        const req = {
            fieldDeviceNo: a.fieldDeviceNo,
            op: a.value ? 0 : 1,
            ts: parseInt((new Date().getTime() / 1000).toString(), 10)
        };
        this.api.control.controlSwitch([req, (data) => {
            if (data && data.code === 1) {
                this.getData(1);
                this.api.presentMsgToast(data.message);
            } else {
                this.api.presentMsgToast(data.message);
            }
            a.loading = false;
        }]);
    }

    cancel() {
        this.nanClicked = false;
        this.beiClicked = false;
        this.nanLoading = false;
        this.beiLoading = false;
    }

    confirm(a) {
        const req = a.value ? {
            fieldDeviceNo: a.fieldDeviceNo,
            op: 0,
            startTime: parseInt((new Date().getTime() / 1000).toString(), 10),
            ts: parseInt((new Date().getTime() / 1000).toString(), 10)
        } : {
            fieldDeviceNo: a.fieldDeviceNo,
            op: 1,
            duration: this.duration,
            startTime: parseInt((new Date().getTime() / 1000).toString(), 10),
            ts: parseInt((new Date().getTime() / 1000).toString(), 10)
        };
        this.api.control.controlSwitch([req, (data) => {
            if (data && data.code === 1) {
                this.getData(1);
                this.api.presentMsgToast(data.message);
            } else {
                this.api.presentMsgToast(data.message);
            }
            this.cancel();
        }]);
    }

    onLeftClick() {
        // this.tf.transfer({url: '/home'});
        this.nav.navigateBack('/home');
    }

    getData(time) {
        if (time) {
            this.load.toLoad('加载中...', false);
        }
        this.api.app.getDeviceData([{fieldRegionNo: this.fieldRegionNo}, (data) => {
            if (data.constructor === Array) {
                this.devices = data;
                debugger
                this.devices.forEach((value, i) => {
                    if ( value.fieldDeviceType === '配置' ) {
                        this.workModeSetting.workMode = value.value;
                        this.workModeSetting.DeviceNo = value.fieldDeviceNo;

                    }
                }
            )
            } else {
                this.api.presentMsgToast(data.message || '获取数据失败');
            }
            this.load.offLoad();
        }]);

        this.api.app.getLiquidLevelData([{fieldRegionNo: this.fieldRegionNo}, (data) => {
            if (typeof (data.liquidLevel) === 'number') {
                this.yewei = Number(data.liquidLevel) < 0 ? 0 : Number(data.liquidLevel);
                this.proc = Number(data.liquidLevel) < 0 ? 0 : (Number(data.liquidLevel) / (Number(data.liquidLevelMax) * 1.5)) > 1
                    ? 100 : (Number(data.liquidLevel) / (Number(data.liquidLevelMax) * 1.5)) * 100;
                this.color = Number(data.liquidLevel) > Number(data.liquidLevelMax) ||
                Number(data.liquidLevel) < Number(data.liquidLevelMin) ? 'red' : '';
            }
            if (typeof (data.temp) === 'number') {
                this.temp = Number(data.temp);
            }
        }]);

        this.api.app.getNorthSouthWaterData([{fieldRegionNo: this.fieldRegionNo}, (data) => {
            if (data.constructor === Array) {
                this.nb = data;
                this.value = this.nb.map(a => a.value);
            } else {
                this.api.presentMsgToast(data.message || '获取数据失败');
            }
        }]);
    }

    pullToRefresh() {
        this.getData(1);
    }
}
