import {AfterViewInit, Component, ElementRef, OnInit, Renderer2, 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';
import {color, pageSize} from '../app.constants';
import {AlarmService} from '../alarm/alarm.service';
import {NzMessageService} from 'ng-zorro-antd';
import {LayoutService} from '../layouts/layout.service';
import {SelectGroupComponent} from '../modal/select-group/select-group.component';

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

})
export class HomeComponent implements OnInit,AfterViewInit {
    @ViewChild('smartSelectGroup') smartSelectGroup:SelectGroupComponent;
    @ViewChild("leftDiv") leftDiv:ElementRef;
    @ViewChild("rightDiv") rightDiv:ElementRef;

    color = color;
    leftOneChart;
    leftTwoChart;
    rightOneChart;
    rightTwoChart;

    warnList= [];

    totalNum;
    groupList;

    pageNum = 1;
    pageCount = 10;
    loading = false;

    obj = {
        leftGroupId:null,
        alarmGroupId:null
    };

    leftOneData = {
        high:<any>null,
        warning:Number,
        normal:Number,
        disabled:Number,
    };
    leftOneTotal = <any>null;
    leftTwoData  =<any> {
        high:<any>Number,
        warning:<any>Number,
        normal:<any>Number,
        disabled:<any>Number,
    };
    leftTwoTotal:Number;

    rightTotal = 0;

    //我的关注
    followList;

    constructor(
        private overAllSer:OverAllService,private message:NzMessageService,
        private alarmSer:AlarmService,private renderer:Renderer2,
        private layoutSer:LayoutService,
        private principal: Principal,
        private eventManager: JhiEventManager
    ) {
    }

    ngOnInit() {
        this.getAlarmList();

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

        this.getGroup();

        this.getMyFollow();
    }

    ngAfterViewInit(){
       let rightHeight = this.rightDiv.nativeElement.clientHeight;
        this.renderer.setStyle(this.leftDiv.nativeElement,"height",rightHeight +"px");
    }

    //我的关注
    getMyFollow(){
        this.layoutSer.myFollow().subscribe(
            (res)=>{
                this.followList = res.data;
            }
        )
    }

    //获取分组
    getGroup() {
        this.overAllSer.findGroup().subscribe(
            (res) => {
                this.groupList = res.data;
                this.obj.leftGroupId = this.groupList[0].groupid;
                this.countGroupItem();
            }
        );
    }

    //主机组中统计
    countGroupItem(){
        this.layoutSer.findHostCountByStatusByGroup(this.obj.leftGroupId).subscribe(
            (res)=>{
                // this.leftOneData = res.data;
                // this.leftOneData.high= ( (this.leftOneData.high / this.leftOneTotal).toFixed(2) )*100;
                this.setLeftOne(res.data);
            }
        );
        this.layoutSer.findItemStatisticsByGroupid(this.obj.leftGroupId).subscribe(
            (res)=>{
                this.leftTwoData = res.data;
                this.setLeftTwo(res.data);

            }
        )
    }

    setLeftOne(data){
        this.leftOneTotal = data.disabled + data.high + data.normal + data.warning;
        this.leftOneChart =
            {
                title: {
                    text: this.leftOneTotal+'台\n设备',
                    x: '40%',
                    y: '40%',
                    itemGap: 50,
                    textStyle: {
                        color: '#333',
                        fontSize: 18,
                        fontWeight: 'normal',
                    },
                    subtextStyle: {
                        color: '#de4751',
                        fontSize: 12
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },

                series: [
                    {
                        name:"设备",
                        type: 'pie',
                        clockWise: true,
                        center: ["45%", "50%"],
                        radius: ['40%', '60%'],
                        color: ['#fcee56', '#ff8400', '#f93215', '#701002', '#2fb35b', '#a0a0a0'],
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: [
                            {value: data.warning, name: '告警'},
                            {value: data.disabled, name: '禁止'},
                            {value: data.high, name: '严重'},
                            {value: data.normal, name: '正常'},
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
    }

    setLeftTwo(data){
        this.leftTwoTotal = data.disabled + data.high + data.normal + data.warning;
        this.leftTwoChart =
            {
                title: {
                    text: this.leftTwoTotal+'个\n监测点',
                    x: '40%',
                    y: '40%',
                    itemGap: 50,
                    textStyle: {
                        color: '#333',
                        fontSize: 18,
                        fontWeight: 'normal',
                    },
                    subtextStyle: {
                        color: '#de4751',
                        fontSize: 12
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },

                series: [
                    {
                        name:"监测点",
                        type: 'pie',
                        clockWise: true,
                        center: ["45%", "50%"],
                        radius: ['40%', '60%'],
                        color: ['#fcee56', '#ff8400', '#f93215', '#701002', '#2fb35b', '#a0a0a0'],
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: [
                            {value: data.warning, name: '告警'},
                            {value: data.disabled, name: '禁止'},
                            {value: data.high, name: '严重'},
                            {value: data.normal, name: '正常'},
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
    }

    findGroupCount(){
        this.layoutSer.findGroupCount().subscribe(
            (res)=>{
                this.rightTotal = res.data.length;
                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.layoutSer.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)'
                                }
                            }
                        }
                    ]
                };
            }
        )
    }

    //获取告警分组
    getAlarmList(){
        const data = {
            pageNum: this.pageNum,
            pageCount: this.pageCount,
            obj:{
                groupid: this.obj.alarmGroupId,
            }
        };
        this.alarmSer.eventFind(data).subscribe(
            (res) => {
                if(res.errCode == 10000){
                    if(res.data){
                        this.warnList = res.data.data;
                        this.totalNum = res.data.totalNum;
                    }
                }else{
                    this.message.info(res.errMsg);
                }
            }
        );
    }

    showAddFollow(){
        this.smartSelectGroup.showAddModal("选择资源")
    }

    //关注资源图表
    setBarEcharts(){
        // var color= ['#fb734e', '#e32f46','#94d96c', '#0bbcb7','#1a9bfc','#7049f0'];
        // var dataStyle = {
        //     normal: {
        //         label: {
        //             show: false
        //         },
        //         labelLine: {
        //             show: false
        //         },
        //         shadowBlur: 40,
        //         borderWidth: 10,
        //         shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
        //     }
        // };
        // var placeHolderStyle = {
        //     normal: {
        //         color: '#393d50',
        //         label: {
        //             show: false
        //         },
        //         labelLine: {
        //             show: false
        //         }
        //     },
        //     emphasis: {
        //         color: '#393d50'
        //     }
        // };
        // option = {
        //     backgroundColor: '#142058',
        //     title: {
        //         text: '匹配度',
        //         x: 'center',
        //         y: 'center',
        //         textStyle: {
        //             fontWeight: 'normal',
        //             fontSize: 24,
        //             color: "#fff",
        //         }
        //     },
        //     tooltip: {
        //         trigger: 'item',
        //         show: true,
        //         formatter: "{b} : <br/>{d}%",
        //         backgroundColor: 'rgba(0,0,0,0.7)', // 背景
        //         padding: [8, 10], //内边距
        //         extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
        //     },
        //
        //     series: [{
        //         name: 'Line 1',
        //         type: 'pie',
        //         clockWise: false,
        //         radius: [186, 200],
        //         center:['50%','50%'],
        //         itemStyle: dataStyle,
        //         hoverAnimation: false,
        //         startAngle: 90,
        //         label:{
        //             borderRadius:'10',
        //         },
        //         data: [{
        //             value: 54.6,
        //             name: '四级匹配度',
        //             itemStyle: {
        //                 normal: {
        //                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        //                         offset: 0,
        //                         color:color[0]
        //                     }, {
        //                         offset: 1,
        //                         color: color[1]
        //                     }])
        //                 }
        //             }
        //         },
        //             {
        //                 value: 45.4,
        //                 name: '',
        //                 tooltip: {
        //                     show: false
        //                 },
        //                 itemStyle: placeHolderStyle
        //             },
        //         ]
        //     },
        //         {
        //             name: 'Line 2',
        //             type: 'pie',
        //             clockWise: false,
        //             radius: [146, 160],
        //             center:['50%','50%'],
        //             itemStyle: dataStyle,
        //             hoverAnimation: false,
        //             startAngle: 90,
        //             data: [{
        //                 value: 56.7,
        //                 name: '三级匹配度',
        //                 itemStyle: {
        //                     normal: {
        //                         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        //                             offset: 0,
        //                             color: color[2]
        //                         }, {
        //                             offset: 1,
        //                             color: color[3]
        //                         }])
        //                     }
        //                 }
        //             },
        //                 {
        //                     value: 43.3,
        //                     name: '',
        //                     tooltip: {
        //                         show: false
        //                     },
        //                     itemStyle: placeHolderStyle
        //                 },
        //             ]
        //         },
        //         {
        //             name: 'Line 3',
        //             type: 'pie',
        //             clockWise: false,
        //             radius: [106, 120],
        //             center:['50%','50%'],
        //             itemStyle: dataStyle,
        //             hoverAnimation: false,
        //             startAngle: 90,
        //             data: [{
        //                 value: 30,
        //                 name: '二级匹配度',
        //                 itemStyle: {
        //                     normal: {
        //                         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        //                             offset: 0,
        //                             color: color[4]
        //                         }, {
        //                             offset: 1,
        //                             color: color[5]
        //                         }]),
        //                     }
        //                 }
        //             },
        //                 {
        //                     value: 0,
        //                     name: '',
        //                     tooltip: {
        //                         show: false
        //                     },
        //                     itemStyle: placeHolderStyle
        //                 },
        //             ]
        //         }
        //     ]
        // };
    }

    change(e){
        this.pageNum = e;
        this.getAlarmList();
    }

    //设置关注
    getItem(e){
        const data = {
            resourceIds:e.map(res=>{
                return e+"";
            })
        }
        this.layoutSer.addFollow(data).subscribe(
            (res)=>{
                if(res.errCode == 10000){
                    this.message.success("添加关注成功");
                }else{
                    this.message.error(res.errMsg);
                }
            }
        )
    }

    //取消关注
    cancel(item){
        const data = {
            resourceIds:[item.resourceId]
        }
        this.layoutSer.unFollow(data).subscribe(
            (res)=>{
                if(res.errCode == 10000){
                    this.getMyFollow();
                    this.message.success('取消关注成功');
                }else{
                    this.message.error(res.errMsg);
                }
            }
        )
    }
}
