import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {TopologyService} from '../../netTopology/topology.service';

declare let editor: any;

@Component({
    selector: 'smart-topology-view',
    templateUrl: './topology-view.component.html',
    styles: [
            `
            .topology-context {
                background: rgba(0, 0, 0, 0.2);
            }`
    ]
})
export class TopologyViewComponent implements OnInit, AfterViewInit {
    @ViewChild('topologyCanvas') topologyCanvas: ElementRef;
    @ViewChild('topologyBody') topologyBody: ElementRef;

    isLoading = false;

    constructor(private topologySer: TopologyService) {
    }

    ngOnInit() {
    }

    ngAfterViewInit() {
        const canvasWidth = this.topologyBody.nativeElement.clientWidth;
        const canvasHeight = this.topologyBody.nativeElement.clientHeight;
        let myCanvas = this.topologyCanvas.nativeElement;
        let context = myCanvas.getContext('2d');
        let ratio = this.getPixelRatio(context);
        myCanvas.style.width = canvasWidth + 'px';
        myCanvas.style.height = canvasHeight + 'px';

        myCanvas.width = myCanvas.width * ratio;
        myCanvas.height = myCanvas.height * ratio;
        context.scale(ratio, ratio);

        editor.loadTopology('', '', 'img/backimg.png', canvasWidth, canvasHeight);
    }

    // 获取像素比
    getPixelRatio(context) {
        const backingStore = context.backingStorePixelRatio ||
            context.webkitBackingStorePixelRatio ||
            context.mozBackingStorePixelRatio ||
            context.msBackingStorePixelRatio ||
            context.oBackingStorePixelRatio ||
            context.backingStorePixelRatio || 1;
        return (window.devicePixelRatio || 1) / backingStore;
    }

    //查询单个
    getDetail(topoId) {
        this.isLoading = true;
        this.topologySer.findItem(topoId).subscribe(
            (res) => {
                if (res.errCode == 10000) {
                    if (res.data.json.length > 0) {
                        let json = JSON.parse(res.data.json);
                        if (json.topology) {
                            this.viewTopology(JSON.parse(json.topology));
                        } else {
                            this.isLoading = false;
                            editor.utils.clearTopology();
                        }
                    } else {
                        this.isLoading = false;
                        editor.utils.clearTopology();
                    }
                    this.findItemStatus();
                }
            }
        );
    }

    //回显拓扑图
    viewTopology(topologyJson) {
        const arr = topologyJson.childs[0].childs;
        const list = [];
        const hostIds = [];
        arr.forEach(e => {
            if (e.elementType == 'link' && e.itemId && e.itemId.length > 2) {
                const data = {
                    itemIdIn: e.itemId.split(',')[0],
                    itemIdOut: e.itemId.split(',')[1],
                    linkId: e.id
                };
                list.push(data);
            }
        });
        arr.forEach(e => {
            if (e.elementType == 'node' && e.hostId) {
                hostIds.push(e.hostId);
            }
        });
        //危险对象
        //故障对象
        const glist = [];
        //删除对象
        const dlist = [];
        if (hostIds.length > 0) {
            const res = {
                hostIds: hostIds
            };
            this.topologySer.findElementStatus(res).subscribe(
                (res) => {
                    //status -1=未监控, 0=正常, 1=危险, 2=故障, 3=未分类
                    const resData = res.data;
                    resData.forEach(e1 => {
                        arr.forEach(e2 => {
                            if (e1.elementId == e2.hostId) {
                                // if(e1.status == -2){
                                //     e2.alarm = "主机被删除，请及时清理";
                                //     e2.fontColor='0,0,0';
                                //     e2.alarmAlpha=0.9;
                                // }
                                if (e1.status == 1) {
                                    e2.alarm = '危险';
                                    e2.fontColor = '0,0,0';
                                    e2.alarmColor = '255,153,18';
                                    e2.alarmAlpha = 0.9;
                                }
                                if (e1.status == 2) {
                                    e2.alarm = '故障';
                                    e2.fontColor = '0,0,0';
                                    e2.alarmAlpha = 0.9;
                                }
                            }
                        });
                    });
                    editor.loadTopologyByJson(topologyJson, 'img/backimg.png');
                    this.isLoading = false;
                }
            );
        }

        //流量数据
        if (list.length > 0) {   //有流量监控-->查询流量监控
            const data = {
                'list': list
            };
            this.topologySer.findFlow(data).subscribe(
                (res) => {
                    const response = res.data;
                    response.forEach(e1 => {
                        arr.forEach(e2 => {
                            if (e1.linkId == e2.id) {
                                e2.text = 'In:' + e1.fullValueIn + ' Out:' + e1.fullValueOut;
                            }
                        });
                    });
                    this.isLoading = false;
                    editor.loadTopologyByJson(topologyJson, 'img/backimg.png');
                }
            );
        } else {   //无流量监控
            this.isLoading = false;
            editor.loadTopologyByJson(topologyJson, 'img/backimg.png');
        }
    }

    //查询监控点状态
    findItemStatus() {

    }

}
