import {Component, OnInit, ViewChild} from '@angular/core';
import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import { JhiEventManager } from 'ng-jhipster';
import { Account, Principal } from '../shared';
import {OverAllService} from '../overAll/overAll.service';
import {WarnListComponent} from '../modal/warn-list/warn-list.component';

@Component({
    selector: 'jhi-home',
    templateUrl: './home.component.html',
    styleUrls: [
        'home.css'
    ]

})
export class HomeComponent implements OnInit {
    @ViewChild('warnList') warnList:WarnListComponent;

    leftOneChart;
    leftTwoChart;
    rightOneChart;
    rightTwoChart;

    totalNum;

    constructor(
        private overAllSer:OverAllService,
        private principal: Principal,
        private eventManager: JhiEventManager
    ) {
    }

    ngOnInit() {
        this.search();

        this.findGroupCount();
        this.findHostCount();

        this.setLeftOne();
        this.setLeftTwo();
    }

    setLeftOne(){
        this.leftOneChart =
            {
                title: {
                    text: '82台\n主机',
                    x: '23%',
                    y: '40%',
                    itemGap: 50,
                    textStyle: {
                        color: '#fff',
                        fontSize: 26,
                        fontWeight: 'normal',
                    },
                    subtextStyle: {
                        color: '#de4751',
                        fontSize: 12
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },

                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        clockWise: true,
                        center: ["30%", "50%"],
                        radius: ['40%', '60%'],
                        color: ['#fcee56', '#ff8400', '#f93215', '#701002', '#2fb35b', '#a0a0a0'],
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: [
                            {value: 235, name: '告警'},
                            {value: 110, name: '一般严重'},
                            {value: 234, name: '严重'},
                            {value: 35, name: '灾难'},
                            {value: 505, name: '正常'},
                            {value: 48, name: '未知'}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
    }

    setLeftTwo(){
        this.leftTwoChart =
            {
                title: {
                    text: '82台\n主机',
                    x: '23%',
                    y: '40%',
                    itemGap: 50,
                    textStyle: {
                        color: '#fff',
                        fontSize: 26,
                        fontWeight: 'normal',
                    },
                    subtextStyle: {
                        color: '#de4751',
                        fontSize: 12
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },

                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        clockWise: true,
                        center: ["30%", "50%"],
                        radius: ['40%', '60%'],
                        color: ['#fcee56', '#ff8400', '#f93215', '#701002', '#2fb35b', '#a0a0a0'],
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: [
                            {value: 235, name: '告警'},
                            {value: 110, name: '一般严重'},
                            {value: 234, name: '严重'},
                            {value: 35, name: '灾难'},
                            {value: 505, name: '正常'},
                            {value: 48, name: '未知'}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
    }

    findGroupCount(){
        this.overAllSer.findGroupCount().subscribe(
            (res)=>{
                this.rightOneChart = {
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },

                    series : [
                        {
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data:res.data.map(e=>{
                                const arr = {
                                    value:e.count,
                                    name:e.name
                                };
                                return arr;
                            }),
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
            }
        )
    }

    findHostCount(){
        this.overAllSer.findHostCount().subscribe(
            (res)=>{
                this.rightTwoChart = {
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },

                    series : [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data:res.data.map(e=>{
                                const arr = {
                                    value:e.count,
                                    name:e.name
                                }
                                return arr;
                            }),
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
            }
        )
    }

    search(){
        const obj = {
            isWaring:'yes',
            hostid:null,
        };
        this.warnList.getList(obj);
    }

    getTotal(e){
        this.totalNum = e;
    }
}
