import {Component, ViewChild, OnInit, ElementRef, AfterViewInit} from '@angular/core';
import {fadeIn} from '../../animations/fade-in';
import {TransferService} from '../../service/transfer.service';
import {ActivatedRoute} from '@angular/router';


@Component({
    selector: 'app-page-detail',
    templateUrl: './page-detail.component.html',
    styleUrls: ['./page-detail.component.scss'],
    animations: [fadeIn]
})
export class PageDetailComponent implements OnInit {
     pie1 = {};
     pie2 = {};
     pie3 = {};
     line1 = {};
     line2 = {};
     line3 = {};

    constructor(private tf: TransferService, private ar: ActivatedRoute) {
    }

    item = {};
    pieOption = {
        title: {
            text: '温度',
            x: 'center',
            y: 'center',
            textStyle: {
                color: '#555555',
                fontSize: 16,
                fontWeight: 'normal'
            },
        },
        series: [{
            type: 'pie',
            radius: ['65%', '85%'],
            avoidLabelOverlap: false,
            startAngle: 270,
            color: ['#9f8fc1'],
            hoverAnimation: false,
            legendHoverLink: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: false
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [{
                value: 20,
                itemStyle: {
                    normal: {
                        color: '#1890ff'
                    }
                }

            }, {
                value: 20,
                itemStyle: {
                    normal: {
                        color: '#cccccc'
                    }
                }

            }]
        }]
    };

    lineOption = {
        backgroundColor: '#293042',
        grid: {
            left: 10,
            top: '10%',
            bottom: 20,
            right: 40,
            containLabel: true
        },
        title: {
            text: '温度',
            x: 'center',
            top: '0',
            textStyle: {
                color: '#cccccc'
            }
        },
        xAxis: {
            data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
            boundaryGap: false,
            axisLine: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: '#cccccc'
                }
            },
            axisTick: {
                show: false
            }
        },
        yAxis: {
            ayisLine: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: '#cccccc'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#cccccc'
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#cccccc'
                }
            }
        },
        series: [{
            type: 'line',
            smooth: true,
            symbolSize: 10,
            animation: false,
            lineWidth: 1.2,
            hoverAnimation: false,
            data: [22.20, 16.82, 27.91, 30.00, 40.90, 32.30, 29.10],
            symbol: 'circle',
            itemStyle: {
                normal: {
                    color: '#f17a52',
                    shadowBlur: 40,
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#f17a52',

                        }
                    }
                }
            },
            areaStyle: {
                normal: {
                    color: '#f17a52',
                    opacity: 0.08
                }
            }

        }
        ]
    };

    ngOnInit() {
        this.ar.queryParams.subscribe((params) => {
            if (params) {
                this.item = {
                    name: params.name,
                    online: 1,
                    error: 1,
                    time: 111,
                    x: 1,
                    y: 2,
                    z: 3
                };
            }
        });
        this.initPieCharts();
        this.initLineCharts();
    }

    initPieCharts() {
        const option = JSON.parse(JSON.stringify(this.pieOption));
        option.title.text = '温度';
        option.series[0].data[0].value = 75;
        option.series[0].data[1].value = 25;
        this.pie1 = JSON.parse(JSON.stringify(option));
        option.title.text = '湿度';
        option.series[0].data[0].value = 50;
        option.series[0].data[1].value = 50;
        this.pie2 = JSON.parse(JSON.stringify(option));
        option.title.text = '压力';
        option.series[0].data[0].value = 25;
        option.series[0].data[1].value = 75;
        this.pie3 = JSON.parse(JSON.stringify(option));
    }

    initLineCharts() {
        const option = JSON.parse(JSON.stringify(this.lineOption));
        option.title.text = '温度';
        this.line1 = JSON.parse(JSON.stringify(option));
        option.title.text = '湿度';
        this.line2 = JSON.parse(JSON.stringify(option));
        option.title.text = '压力';
        this.line3 = JSON.parse(JSON.stringify(option));
    }

    toList() {
        this.tf.transfer({
            from: 'app-page-detail',
            to: 'app-home',
            url: '/main',
            query: '',
            hash: 'page_one'
        });
    }

}
