import {Component, OnInit, OnDestroy, ViewChild} from '@angular/core';
import {Transfer} from '../service/transfer';
import {ActivatedRoute} from '@angular/router';
import {Api} from '../service/api';

declare var mqtt: any;

@Component({
    selector: 'v-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit, OnDestroy {

    constructor(private tf: Transfer, private ac: ActivatedRoute, private api: Api) {}

    @ViewChild('slide') slide;
    // client;
    // topic;
    // private options = {
    //     keepalive: 10,
    //     clientId: 'mqttjs_' + Math.random().toString(16).substr(2, 8),
    //     protocolId: 'MQTT',
    //     protocolVersion: 4,
    //     clean: false,
    //     connectTimeout: 60000,
    //     username: 'pasture',
    //     password: 'Pasture37774020',
    // };

    imgs = ['1.jpg', '2.jpg', '3.jpg'];

    lunbo = {
        speed: 1000,
        allowTouchMove: true,
        effect: 'flip',
        autoplay: {
            delay: 2000,
        },
        loop: true,
        spaceBetween: 0
    };
    alarms = [];

    items = [{
        name: '东中转池',
        yewei: '',
        nan: false,
        bei: false,
        isNB: 1,
        url: 'east'
    }, {
        name: '西中转池',
        yewei: '',
        nan: false,
        bei: false,
        isNB: 1,
        url: 'west'
    }
    // , {
    //     name: '沉砂池',
    //     yewei: 12,
    //     nan: 1,
    //     bei: 0,
    //     isNB: 0,
    //     state: 1,
    //     url: 'east'
    // }, {
    //     name: '八角池',
    //     yewei: 12,
    //     nan: 1,
    //     bei: 0,
    //     isNB: 0,
    //     state: 1,
    //     url: 'east'
    // }, {
    //     name: '匀浆池',
    //     yewei: 12,
    //     nan: 1,
    //     bei: 0,
    //     isNB: 0,
    //     state: 1,
    //     url: 'east'
    // }, {
    //     name: '分离池',
    //     yewei: 12,
    //     nan: 1,
    //     bei: 0,
    //     isNB: 0,
    //     state: 1,
    //     url: 'east'
    // }, {
    //     name: '发酵池',
    //     yewei: 12,
    //     nan: 1,
    //     isNB: 0,
    //     bei: 0,
    //     state: 1,
    //     url: 'east'
    // }, {
    //     name: '出料',
    //     yewei: 12,
    //     nan: 1,
    //     isNB: 0,
    //     bei: 0,
    //     state: 1,
    //     url: 'east'
    // }
    ];

    ngOnInit(): void {
        this.init();
        this.ac.queryParams.subscribe((e) => {
            this.ionViewWillEnter();
        });
    }

    // ionic的生命周期函数
    ionViewWillEnter () {
        this.slideDidChange();
        this.getData();
    }

    ngOnDestroy(): void {
        this.endMqtt();
    }

    init() {
        this.initMqtt();
        this.getData();
    }

    getData() {
        const dong = {
            name: '东中转池',
            yewei: '',
            nan: false,
            bei: false,
            isNB: 1,
            url: 'east'
        };
        const xi = {
            name: '西中转池',
            yewei: '',
            nan: false,
            bei: false,
            isNB: 1,
            url: 'west'
        };
        let flagd = 0;
        // flagx = 0;
        // 东中转池 19041003 0号通道为液位
        this.api.data.getRealData([{sn: '19041003', type: 'WTDR18X'}, (data) => {
            flagd ++;
            if (data && data.constructor === Array) {
                if (data.length > 0) {
                    if (data[0].value) {
                        data[0].value = Number(data[0].value) > 0 ? data[0].value : '0';
                        data[0].value = Number(data[0].value) <= 6.5 ? data[0].value : '6.5';
                        dong.yewei = (6.5 - Number(data[0].value)).toFixed(2);
                    }
                }
            } else {
                this.api.presentMsgToast('获取数据失败');
            }
            if (flagd === 2) {
                this.items[0] = dong;
                this.items = [...this.items];
            }
        }]);
        // 东中转池 19041004 0,1号通道为南水 2,3号通道为北水
        this.api.data.getRealData([{sn: '19041004', type: 'WTDR66C'}, (data) => {
            flagd ++;
            if (data && data.constructor === Array) {
                if (data.length > 0) {
                    if (data[0]) {
                        dong.nan = !!(data[0].value === '1.0');
                    }
                    if (data[2]) {
                        dong.bei = !!(data[2].value === '1.0');
                    }
                }
            } else {
                this.api.presentMsgToast('获取数据失败');
            }
            if (flagd === 2) {
                this.items[0] = dong;
                this.items = [...this.items];
            }
        }]);
        // 西中转池 19041006 0号通道为液位
        this.api.data.getRealData([{sn: '19041006', type: 'WTDR18X'}, (data) => {
            if (data && data.constructor === Array) {
                if (data.length > 0) {
                    if (data[0].value) {
                        data[0].value = Number(data[0].value) > 0 ? data[0].value : '0';
                        data[0].value = Number(data[0].value) <= 6.5 ? data[0].value : '6.5';
                        xi.yewei = (6.5 - Number(data[0].value)).toFixed(2);
                    }
                }
            } else {
                this.api.presentMsgToast('获取数据失败');
            }
            this.items[1] = xi;
            this.items = [...this.items];
        }]);
    }

    initMqtt() {
        // this.client = mqtt.connect('ws://120.27.235.39:8083/mqtt', this.options);
        // this.topic = 'topic/hello';
        //
        // this.client.on('connect', () => {
        //     this.msg = 'mqtt连接成功';
        //     this.client.subscribe(this.topic);
        //     this.client.on('message', (a, b) => {
        //         console.log(a, b);
        //     });
        // });
    }

    endMqtt() {
        // this.client.unsubscribe(this.topic);
        // this.client.disconnect();
    }

    slideDidChange() {
        this.slide.startAutoplay();
    }

    toControl(url) {
        this.tf.transfer({
            url: '/' + url,
            query: '',
            hash: ''
        });
    }
}
