import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {Api} from '../../service/api';
import {Load} from '../../service/load';
import {NgxDatatableModule} from '@swimlane/ngx-datatable';
import {DateFormatter} from '@angular/common/src/pipes/deprecated/intl';
import {DatePipe} from '@angular/common';

@Component({
    selector: 'v-env-history',
    templateUrl: './env-history.page.html',
    styleUrls: ['./env-history.page.scss'],
})
export class EnvHistoryPage implements OnInit {

    constructor(private api: Api, private ac: ActivatedRoute, private load: Load, private datePipe: DatePipe) {
    }

    fieldRegionNo = '';
    fieldRegionName = '';
    heatStressLevel = 0;

    item: any = {};

    chartOption = {};
    tableRows = [];
    tableColumns = [
        { name: '时间', prop: 'ts'},
        { name: '热应激', prop: 'thi'},
        { name: '温度 <br> ℃', prop: 'temp'},
        { name: '湿度 <br> rH', prop: 'humi'},
        { name: '氨气浓度 <br> ppm', prop: 'NH3'}
    ];
    tableColumnWidths = [
        {column: 'ts', width: 70},
        {column: 'thi', width: 80},
        {column: 'temp', width: 70},
        {column: 'humi', width: 70},
        {column: 'NH3', width: 90}
    ]

    ngOnInit() {
        this.init();
    }

    init() {
        this.ac.queryParams.subscribe((data) => {
            this.fieldRegionNo = data.no;
            this.fieldRegionName = data.name;
            this.heatStressLevel = data.heatStressLevel;
            this.getData(0);
        });
    }

    getData(time) {
        if (time) {
            this.load.toLoad('加载中...', false);
        }
        const req: any = {};
        req.fieldRegionNo = this.fieldRegionNo;
        req.startTime = new Date().valueOf() - 8 * 3600 * 1000;
        req.endTime = new Date().valueOf();
        this.api.cowshedApp.getHistoryByFieldRegionNo([req, (data) => {
            if (data) {
                this.paintChart(data);
            }
        }]);

        req.counts = 10;

        this.api.cowshedApp.getHistoryTableByFieldRegionNo([req, (data) => {
            if (data && data.constructor === Array) {
                this.item = data;
                this.paintTable(data);
            }
        }]);
    }

    paintChart(param) {
        const temp = [];
        const humi = [];
        const thi = [];
        const times = [];
        if (param.temp && param.temp.constructor === Array) {
            param.temp.map(item => {
                times.push(this.datePipe.transform(item.time, 'hh:mm'));
                temp.push(Number(item.value).toFixed(2));
            });
        }
        if (param.humi && param.humi.constructor === Array) {
            param.humi.map(item => {
                humi.push(Number(item.value).toFixed(1));
            });
        }
        if (param.thi && param.thi.constructor === Array) {
            param.thi.map(item => {
                thi.push(item.value);
            });
        }

        this.chartOption = {
            backgroundColor: '#fff',
            tooltip: {
                trigger: 'axis',
                // axisPointer: {
                //     type: 'cross',
                //     label: {
                //         backgroundColor: '#72efff'
                //     }
                // }
                axisPointer: {
                    // 坐标轴指示器，坐标轴触发有效
                    type: 'line', // 默认为直线，可选为：'line' | 'shadow'
                    label: 'cross',
                    show: true
                },
            },
            legend: {
                data: ['温度', '湿度', '热应激']
            },
            visualMap: [
                {show: false, type: 'continuous', seriesIndex: 0, min: 0, max: 400},
                {show: false, type: 'continuous', seriesIndex: 1, dimension: 0, min: 0, max: 400}],
            xAxis: {
                name: '', type: 'category',
                data: times,
            },
            yAxis: [
                {name: '温度(℃)', type: 'value', splitLine: {show: false}},
                {name: '湿度(%)', type: 'value', max: 100, splitLine: {show: false}}
            ],
            series: [
                {name: '温度', data: temp, type: 'line'},
                {name: '湿度', data: humi, yAxisIndex: 1, type: 'line'},
                {name: '热应激', data: thi, yAxisIndex: 1, type: 'line'}
            ]
        };
    }

    paintTable(param) {
        this.tableRows = [];

        param.map(item => {
            this.tableRows.push({
                ts: this.datePipe.transform(item.ts, 'hh:mm'),
                thi: item.heatStressLevel,
                temp: item.temp.toFixed(2),
                humi: item.humi.toFixed(1),
                NH3: item.NH3.toFixed(3)
            });
        });

        // this.tableColumns.forEach((col: any) => {
        //     const colReWidth = this.tableColumnWidths.find(colWidth => colWidth.column === col.prop);
        //     if (colReWidth) {
        //         col.width = colReWidth.width;
        //     }
        // });
    }
}
