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';

@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) {
    }

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

    item: any = {};

    // START--------------------------------------------------------------------------------
    // TODO 以下为假数据 待删除
    chartOption = {
        backgroundColor: '#F0F8FF',
        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: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: [
            {name: '温度(℃)', type: 'value', splitLine: {show: false}},
            {name: '湿度(%)', type: 'value', max: 100, splitLine: {show: false}}
        ],
        series: [
            {data: [28, 32, 35, 34, 30, 29, 27], type: 'line'},
            {data: [15, 13, 12, 11, 12, 11, 87], yAxisIndex: 1, type: 'line'},
            {data: [76, 45, 43, 23, 34, 54, 23], yAxisIndex: 1, type: 'line'}
        ]
    };

    // 时间 热应激 温度 湿度 光照 风机 喷淋 照明
    tableRows = [
        {ts: '17:00', thi: '轻', temp: '23.8', humi: '56', NH3: '70'},
        {ts: '17:30', thi: '中', temp: '27.2', humi: '43', NH3: '80'},
        {ts: '18:00', thi: '轻', temp: '23.2', humi: '61', NH3: '99'},
        {ts: '18:30', thi: '轻', temp: '23.1', humi: '47', NH3: '100'},
        {ts: '19:00', thi: '轻', temp: '20.2', humi: '43', NH3: '60'},
        {ts: '19:30', thi: '轻', temp: '21.6', humi: '34', NH3: '50'},
        {ts: '20:00', thi: '轻', temp: '22.5', humi: '43', NH3: '40'},
    ];
    // END--------------------------------------------------------------------------------

    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 = 1;

        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(new Date(item.time).getHours());
                temp.push(item.value);
            });
        }
        if (param.humi && param.humi.constructor === Array) {
            param.humi.map(item => {
                humi.push(item.value);
            });
        }
        if (param.thi && param.thi.constructor === Array) {
            param.thi.map(item => {
                thi.push(item.value);
            });
        }

        this.chartOption = {
            backgroundColor: '#fff',
            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: [
                {data: temp, type: 'line'},
                {data: humi, yAxisIndex: 1, type: 'line'},
                {data: thi, yAxisIndex: 1, type: 'line'}
            ]
        };
    }

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

        param.map(item => {
            this.tableRows.push({
                ts: item.ts,
                thi: item.heatStressLevel,
                temp: item.temp,
                humi: item.humi,
                NH3: item.NH3
            });
        });
    }
}
