import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import * as echarts from 'echarts';
import {DateFormatter} from '@angular/common/src/pipes/deprecated/intl';
import {NavController} from '@ionic/angular';
import {Transfer} from '../../service/transfer';

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

    @ViewChild('fanChartsContent') container1: ElementRef;
    @ViewChild('showerChartsContent') container2: ElementRef;
    @ViewChild('tempAndHumiChartsContent') container3: ElementRef;
    fanOptions: any = {};
    showerOptions: any = {};
    tempAndHumiOptions: any = {};
    fieldRegionNameList = [];
    today = '';

    hasChartData = false;

    constructor(public nav: NavController, private tf: Transfer) {
    }

    ngOnInit() {
        this.init();
    }

    init() {
        this.today = '2019-11-10';
        this.fieldRegionNameList = [{name: '1号牛舍', checked: true}, {name: '2号牛舍', checked: false},
            {name: '3号牛舍', checked: false}, {name: '4号牛舍', checked: false},
            {name: '5号牛舍', checked: false}, {name: '6号牛舍', checked: false}];
        this.fanChart();
        this.showerChart();
        this.environmentChart();
    }

    fanChart() {
        this.fanOptions = {
            backgroundColor: '#fff',
            color: ['#B2E8E8', '#cb595c'],
            // title: {
            //     text: '动态数据',
            //     subtext: '纯属虚构'
            // },
            tooltip: {
                trigger: 'axis',
                // axisPointer: {
                //     type: 'cross',
                //     label: {
                //         backgroundColor: '#72efff'
                //     }
                // }
                axisPointer: {
                    // 坐标轴指示器，坐标轴触发有效
                    type: 'line', // 默认为直线，可选为：'line' | 'shadow'
                    label: 'cross',
                    show: true
                },
            },
            legend: {
                data: ['运行时长/小时', '平均压力/兆帕']
            },
            dataZoom: {
                show: false,
                start: 0,
                end: 100
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: true,
                    data: ['1号牛舍', '2号牛舍', '3号牛舍', '4号牛舍', '5号牛舍', '6号牛舍'],
                    axisLabel: {
                        interval: 0,
                        rotate: 40
                    }
                }
                ,
                {
                    type: 'category',
                    boundaryGap: true,
                    // data: ['1号牛舍', '2号牛舍', '3号牛舍', '4号牛舍', '5号牛舍', '6号牛舍']
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    scale: true,
                    name: '运行时长',
                    // max: 1200,
                    // min: 0,
                    boundaryGap: [0.1, 0.1]
                },
                {
                    type: 'value',
                    scale: true,
                    name: '平均压力',
                    // max: 1200,
                    // min: 0,
                    boundaryGap: [0.1, 0.1]
                }
            ],
            series: [
                {
                    name: '运行时长',
                    type: 'bar',
                    xAxisIndex: 1,
                    yAxisIndex: 1,
                    barWidth: 20,
                    data: [100, 80, 90, 95, 85, 70]
                },
                {
                    name: '平均压力',
                    type: 'line',
                    data: [80, 70, 60, 66, 85, 90]
                }
            ],
            grid : {
                left : '1%',   // 组件离容器左侧的距离
                right : '1%',
                bottom : '0%',
                top : '15%',
                containLabel : true     // grid 区域是否包含坐标轴的刻度标签
            }
        };

        // const fieldRegionNameList = ['1号牛舍', '2号牛舍', '3号牛舍', '4号牛舍', '5号牛舍', '6号牛舍'];
        // const runTimeList = [100, 80, 90, 95, 85, 70];
        // const pressList = [10, 8, 9, 5, 8, 7];
        // this.fanOptions.xAxis.data = fieldRegionNameList;
        // this.fanOptions.series[0].data = runTimeList;
        // this.fanOptions.series[1].data = pressList;

        const charts = document.getElementById('fanChartsContent');
        charts.style.width = window.innerWidth * 0.95 - 20 + 'px';
        echarts.init(this.container1.nativeElement).setOption(this.fanOptions);
        echarts.init(this.container1.nativeElement).resize();
    }

    showerChart() {
        this.showerOptions = {
            backgroundColor: '#fff',
            color: ['#B2E8E8', '#cb595c'],
            // title: {
            //     text: '动态数据',
            //     subtext: '纯属虚构'
            // },
            tooltip: {
                trigger: 'axis',
                // axisPointer: {
                //     type: 'cross',
                //     label: {
                //         backgroundColor: '#72efff'
                //     }
                // }
                axisPointer: {
                    // 坐标轴指示器，坐标轴触发有效
                    type: 'line', // 默认为直线，可选为：'line' | 'shadow'
                    label: 'cross',
                    show: true
                },
            },
            legend: {
                data: ['运行时长/小时', '平均压力/兆帕']
            },
            dataZoom: {
                show: false,
                start: 0,
                end: 100
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: true,
                    data: ['1号牛舍', '2号牛舍', '3号牛舍', '4号牛舍', '5号牛舍', '6号牛舍'],
                    axisLabel: {
                            interval: 0,
                            rotate: 40
                    }
                }
                ,
                {
                    type: 'category',
                    boundaryGap: true,
                    // data: ['1号牛舍', '2号牛舍', '3号牛舍', '4号牛舍', '5号牛舍', '6号牛舍']
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    scale: true,
                    name: '运行时长',
                    // max: 1200,
                    // min: 0,
                    boundaryGap: [0.1, 0.1]
                },
                {
                    type: 'value',
                    scale: true,
                    name: '平均压力',
                    // max: 1200,
                    // min: 0,
                    boundaryGap: [0.1, 0.1]
                }
            ],
            series: [
                {
                    name: '运行时长',
                    type: 'bar',
                    xAxisIndex: 1,
                    yAxisIndex: 1,
                    barWidth: 20,
                    data: [100, 80, 90, 95, 85, 70]
                },
                {
                    name: '平均压力',
                    type: 'line',
                    data: [80, 70, 60, 66, 85, 90]
                }
            ],
            grid : {
                left : '1%',   // 组件离容器左侧的距离
                right : '1%',
                bottom : '0%',
                top : '15%',
                containLabel : true     // grid 区域是否包含坐标轴的刻度标签
            }
        };

        // const fieldRegionNameList = ['1号牛舍', '2号牛舍', '3号牛舍', '4号牛舍', '5号牛舍', '6号牛舍'];
        // const runTimeList = [100, 80, 90, 95, 85, 70];
        // const pressList = [10, 8, 9, 5, 8, 7];
        // this.fanOptions.xAxis.data = fieldRegionNameList;
        // this.fanOptions.series[0].data = runTimeList;
        // this.fanOptions.series[1].data = pressList;

        const charts = document.getElementById('showerChartsContent');
        charts.style.width = window.innerWidth * 0.95 - 20 + 'px';
        echarts.init(this.container2.nativeElement).setOption(this.showerOptions);
        echarts.init(this.container2.nativeElement).resize();
    }

    environmentChart() {
        // TODO 等待接口
        // if (this.chartData && this.chartData[0] && this.chartData[0].dataList && this.chartData[0].dataList.length > 0) {
        this.hasChartData = true;

        // @ts-ignore
        // this.tempAndHumiOptions = {
        //             backgroundColor: '#fff',
        //             tooltip: {
        //                 // 鼠标悬停提示内容
        //                 trigger: 'axis', // 触发类型，默认数据触发，可选为：'axis' item
        //                 axisPointer: {
        //                     // 坐标轴指示器，坐标轴触发有效
        //                     type: 'line', // 默认为直线，可选为：'line' | 'shadow'
        //                     label: 'cross',
        //                     show: true
        //                 },
        //             },
        //             xAxis: {
        //                 type: 'category',
        //                 axisTick: {
        //                     show: false,
        //                 },
        //                 boundaryGap: false,
        //                 axisLabel: {
        //                     color: '#424242',
        //                     // formatter:function(value) {
        //                     //     return value.substring();
        //                     // }
        //                 },
        //                 axisLine: {
        //                     lineStyle: {
        //                         color: 'rgba(136,136,136,0.5)',
        //                         width: 2,
        //                     }
        //                 },
        //             },
        //             yAxis: {
        //                 type: 'value',
        //                 axisTick: {
        //                     show: true, // 显示刻度线
        //                 },
        //                 axisLabel: {
        //                     color: '#424242'  // y轴上的字体颜色
        //                 },
        //                 axisLine: {
        //                     lineStyle: {
        //                         width: 2,
        //                         color: 'rgba(136,136,136,0.5)', // y轴的轴线的宽度和颜色
        //                     }
        //                 },
        //                 splitLine: {
        //                     show: true
        //                 }
        //             },
        //             grid : {
        //                 left : '1%',   // 组件离容器左侧的距离
        //                 right : '1%',
        //                 bottom : '0%',
        //                 top : '5%',
        //                 containLabel : true     // grid 区域是否包含坐标轴的刻度标签
        //             },
        //             series: [
        //                 {
        //                     name: '温度',
        //                     type: 'line',
        //                     symbol: 'none',
        //                     smooth: false,
        //                     itemStyle: {
        //                         normal: {
        //                             color: '#72efff',
        //                         }
        //                     },
        //                 },
        //                 {
        //                     name: '湿度',
        //                     type: 'line',
        //                     symbol: 'none',
        //                     smooth: false,
        //                     itemStyle: {
        //                         normal: {
        //                             color: '#4f73ff',
        //                         }
        //                     },
        //                 }
        //             ],
        //         };

        this.tempAndHumiOptions = {
            backgroundColor: '#fff',
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['温度', '湿度']
            },
            xAxis:  {
                type: 'category',
                boundaryGap: false,
                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
            },
            yAxis: [
                {
                    type: 'value',
                    scale: true,
                    name: '湿度(% RH)',
                    // max: 1200,
                    // min: 0,
                    boundaryGap: [0.1, 0.1]
                },
                {
                    type: 'value',
                    scale: true,
                    name: '温度(℃)',
                    // max: 1200,
                    // min: 0,
                    boundaryGap: [0.1, 0.1]
                }
            ],
            series: [
                {
                    name: '温度',
                    type: 'line',
                    yAxisIndex: 1,
                    data: [11, 12, 15, 16, 18, 21, 22, 25, 26, 26, 27, 29],
                    itemStyle: {
                        normal: {
                            color: '#B2E6E8',
                        }
                    },
                },
                {
                    name: '湿度',
                    type: 'line',
                    data: [78, 80, 76, 78, 70, 66, 68, 66, 70, 60, 64, 60],
                    itemStyle: {
                        normal: {
                            color: '#3C91AB',
                        }
                    },
                }
            ],
            grid : {
                left : '9%',   // 组件离容器左侧的距离
                right : '8%',
                bottom : '0%',
                top : '15%',
                containLabel : true     // grid 区域是否包含坐标轴的刻度标签
            },
        };

        const timeData = [1, 2, 3, 4, 5, 6, 7, 8];
        const tempvalueData = [15, 18, 20, 22, 24, 26, 27, 29];
        const humivalueData = [80, 82, 85, 81, 75, 70, 68, 65];
        // this.chartData[0].dataList.forEach((item) => {
        //     // timeData.push(new Date(item.time).getHours());
        //     timeData.push( (new Date(item.time).getHours().toString()) );
        //     valueData.push(item.value);
        // });
        // this.tempAndHumiOptions.xAxis.data = timeData;
        // this.tempAndHumiOptions.series[0].data = tempvalueData;
        // this.tempAndHumiOptions.series[1].data = humivalueData;

        const charts = document.getElementById('tempAndHumiChartsContent');
        charts.style.width = window.innerWidth * 0.95 - 20 + 'px';
        echarts.init(this.container3.nativeElement).setOption(this.tempAndHumiOptions);
        echarts.init(this.container3.nativeElement).resize();
        // }
    }

    segmentChanged(ev) {
    }

    toDetail(ev) {
        const query = '/env-anal-detail';
        this.tf.transfer({
            url: '/' + ev.url,
            query: query,
            hash: ''
        });
        this.nav.navigateForward(query);
    }
}
