/**
 * Description 画拓扑图的行为函数
 * Input ： 接口的数据
 * Output ：  getCanvas
 * other  : 无
 * author : lsb
 */

// tslint:disable-next-line:max-line-length
import { isValueExsit, substringUUID, splitIP, NAT, SLB, ROUTE, VM, RDS, DNAT_SNAT, setIconProperty, filter, simulateHoverClick, SCALE, scaleCanvas, dragCanvas, canvasHeight } from './canvasFunction';
import { getCanvasContext, Text, Line, Arrow, Icon } from './constructor';

/**
 *
 * @param res 数据
 * @param platform 平台 admin || pc
 */
export function getCanvas(res: any, platform: any) {
    let MY_CANVAS: any = document.getElementById('myCanvas');
    let CONTEXT: object = MY_CANVAS.getContext('2d');
    // 获取context
    getCanvasContext(CONTEXT);
    // 字体大小
    let FONT_SIZE: number = 12;
    // 云主机列表
    let VM_LIST: Array<any> = [];
    // RDS列表
    let RDS_LIST: Array<any> = [];
    // 所有图标的坐标
    let ALL_ICON_COOR_ARR: Array<any> = [];
    // 图标之间的间距
    let BETWEEN_DISTANCE: number = 200;
    // betweenDistance平均为3份
    let ONE_PART: number = Math.round(BETWEEN_DISTANCE / 3 * 10) / 10;
    // 计算画布的高和宽
    canvasHeight(MY_CANVAS, res);
    // 交换机离左边边界的距离
    let DISTANCE_OF_SWITCH = NAT.width * 2 + ONE_PART * 3;
    // 判断值是否存在
    let isNatDataExsit = isValueExsit(res.data.natData, 'natData');
    let isrouteDataExsit = isValueExsit(res.data.routeData, 'routeData');
    let isVswitchDataExsit = isValueExsit(res.data.vswitchData, 'vswitchData');
    let isRouteTableDataExsit = isValueExsit(res.data.routeTableData, 'routeTableData');


    // 设置属性
    setIconProperty(isNatDataExsit, res.data.natData);
    setIconProperty(isrouteDataExsit, res.data.routeData);
    setIconProperty(isVswitchDataExsit, res.data.vswitchData);
    setIconProperty(isRouteTableDataExsit, res.data.routeTableData);
    if (res.data.slb.length > 0 && res.data.slb[0]) {
        let isSlbExsit = isValueExsit(res.data.slb[0], 'noMountSlb');
        setIconProperty(isSlbExsit, res.data.slb[0]);

    }
    /**
    * 画出设备图标实例，带有矩形的
    * @param {object} icon 图标对象数据  NAT || SLB ||SWITCH || ROUTE || VM
    * @param {number} iconX 图标的横坐标位置
    * @param {number} iconY 图标的纵坐标位置
    * @param {string} textContent 图标右下角矩形的内容
    * @return {object}  iconInstanceCoordinate:设备图标实例的左右中心的坐标
    */
    function iconInstance(icon: object, iconX: number, iconY: number, textContent: string) {
        let instance = new Icon(icon, iconX, iconY, textContent);
        let iconInstanceCoordinate = instance.drawIcon();
        ALL_ICON_COOR_ARR.push(iconInstanceCoordinate);
        return iconInstanceCoordinate; // 设备图标实例的左右中心的坐标
    }

    /**
     * 画出设备图标及矩形文本及右边的直线
     * @param {object} icon  图标对象数据  NAT || SLB || SWITCH || ROUTE || VM
     * @param {number} iconX  图标的横坐标位置
     * @param {number} iconY  图标的纵坐标位置
     * @param {string} iconName  矩形内文本的内容
     * @param {object} showInfoType  展示设备图标信息的类型---'iconAndRect':展示图标和矩形 || 'showAllInfo':展示设备所有信息 || 'showPublicPrivateNet':展示出公网和内网ip
     * @param {object} infoObj 对象---{ publicIP:公网ip,privateIP:私网ip, DNAT_SNAT:DNAT/SNAT查看,ip:ip地址}
     * @return {object} 返回一个坐标
     */
    function drawDevice(icon: any, iconX: number, iconY: number, iconName: string, showInfoType: string, infoObj: any): any {
        switch (showInfoType) {
            case 'iconAndRect': // 画图标和矩形
                {
                    let iconCoor = iconInstance(icon, iconX - icon['width'], iconY - icon['height'] / 2, iconName); // 设备图标实例
                    return iconCoor;
                }
            case 'showAllInfo': // 需要传publicIp、DNAT_SNAT、ip
                {
                    // DNAT/SNAT的坐标
                    let coordinate: any;
                    let startX = iconX - icon['width'];
                    let startY = iconY - icon['height'] / 2;
                    iconInstance(icon, startX, startY, iconName); // 设备图标实例
                    let publicIP = splitIP(infoObj['publicIP']);
                    let publicIPArr = publicIP.split(',');
                    if (publicIP !== 'null') {
                        if (publicIPArr.length > 1) {
                            // tslint:disable-next-line:max-line-length
                            let textOne = new Text("公网:" + publicIPArr[0], startX + (icon['width'] / 3) * 2 + 7, startY + (icon['height'] / 3) * 2 + 40);
                            // tslint:disable-next-line:max-line-length
                            let textTwo = new Text("......", startX + (icon['width'] / 3) * 2 + 7, startY + (icon['height'] / 3) * 2 + 50);
                            textOne.drawText(); // 画图标下方的公网ip
                            textTwo.drawText(); // 画图标下方的公网ip
                        } else {
                            // tslint:disable-next-line:max-line-length
                            let textOne = new Text("公网:" + publicIPArr[0], startX + (icon['width'] / 3) * 2 + 7, startY + (icon['height'] / 3) * 2 + 40);
                            textOne.drawText(); // 画图标下方的公网ip
                        }

                    }
                    if (infoObj['DNAT_SNAT']) {
                        let textTwo = new Text(infoObj['DNAT_SNAT'], startX + icon['width'] + 7, startY - 10, '#4074e1');
                        let textCoor = textTwo.drawText(); // 画图标右上方的文字
                        coordinate = textCoor;
                    }
                    if (infoObj['ip']) {
                        let textThree = new Text(infoObj['ip'], startX + icon['width'] + 7, startY - 10 + FONT_SIZE, 'gray');
                        textThree.drawText(); // 画图标右上方的ip
                    }
                    return coordinate;
                }

            case 'showPublicPrivateNet': // 需要传privateIp、publicIp
                {
                    let publicIP = splitIP(infoObj['publicIP']);
                    let privateIP = splitIP(infoObj['privateIP']);

                    let iconCoor = iconInstance(icon, iconX, iconY, iconName); // 设备图标实例的左右中心的带你坐标
                    if (publicIP !== 'null' && privateIP !== 'null') {
                        // tslint:disable-next-line:max-line-length
                        let textOne = new Text(infoObj['privateIP'], iconX + Math.ceil(icon['width'] / 4) * 3, iconY + Math.ceil(icon['height'] / 3) * 2 + 35);
                        textOne.drawText(); // 画图标下方的私网ip
                        // tslint:disable-next-line:max-line-length

                        let publicIPArr = publicIP.split(",");
                        if (publicIPArr.length > 1) {
                            let textTwo = new Text("公网:" + publicIPArr[0], iconX + Math.ceil(icon['width'] / 4) * 3, iconY + Math.ceil(icon['height'] / 3) * 2 + 40 + FONT_SIZE);
                            let textThree = new Text("......", iconX + Math.ceil(icon['width'] / 4) * 3, iconY + Math.ceil(icon['height'] / 3) * 2 + 55 + FONT_SIZE);
                            textTwo.drawText(); // 画图标下方的公网ip
                            textThree.drawText(); // 画图标下方的公网ip
                        } else {
                            let textTwo = new Text("公网:" + publicIPArr[0], iconX + Math.ceil(icon['width'] / 4) * 3, iconY + Math.ceil(icon['height'] / 3) * 2 + 40 + FONT_SIZE);
                            textTwo.drawText(); // 画图标下方的公网ip
                        }
                        return iconCoor; // 设备图标实例的左右中心的带你坐标
                    }
                }
                break;
            default:
                break;
        }
    }

    /**
     * 画云主机左边的横线和云主机图标
     * @param {*} verticalLineObj 交换机右边竖线的坐标对象
     * @param {*} vmArr  交换机包含云主机的数量
     * @param {*} onePart 交换机与云主机距离的三分之一
     * @return {*} 返回一个数组
     */
    function drawLineAndIconList(verticalLineObj: any, vmArr: any, onePart: number) {
        let verticalLineLength = verticalLineObj['endY'] - verticalLineObj['startY'];
        let verticalOnePart = Math.round(verticalLineLength / (vmArr.length - 1) * 10) / 10;
        let lineList = [];
        let vmListCoor = [];
        for (let j = 0; j < vmArr.length; j++) {
            // 画云主机左边的横线
            // tslint:disable-next-line:max-line-length
            let lineInstance = new Line(verticalLineObj['startX'], verticalLineObj['startY'] + verticalOnePart * j, verticalLineObj['startX'] + onePart, verticalLineObj['startY'] + verticalOnePart * j);
            lineList.push(lineInstance);
            let coordinate: any = lineList[j].drawLine();
            // 画云主机图标
            let vm = { startX: coordinate.lineEndCoordinateX, startY: coordinate.lineEndCoordinateY - vmArr[j].height / 2 };
            let obj = {
                privateIP: '私网:' + (vmArr[j].privateIP ? vmArr[j].privateIP : '-'),
                publicIP: '公网:' + (vmArr[j].publicIP ? vmArr[j].publicIP : '-')
            };
            let vmName = vmArr[j].about ? vmArr[j].about : substringUUID(vmArr[j].vmResourceUUID ? vmArr[j].vmResourceUUID : vmArr[j].rdsUUID);
            let vmInstance = drawDevice(vmArr[j], vm.startX, vm.startY, vmName, 'showPublicPrivateNet', obj);
            vmInstance['slb'] = vmArr[j].slb;
            vmListCoor.push(vmInstance);
        }
        return vmListCoor;
    }

    /**
    * 画RDS左边的横线和RDS图标
    * @param {*} verticalLineObj 交换机右边竖线的坐标对象
    * @param {*} rdsArr  交换机包含云主机的数量
    * @param {*} onePart 交换机与云主机距离的三分之一
    * @return {*} 返回一个数组
    */
    // function drawLineAndIconListrds(verticalLineObj: object, rdsArr: any, onePart: number) {
    //     let verticalLineLength = verticalLineObj['endY'] - verticalLineObj['startY'];
    //     let verticalOnePart = Math.round(verticalLineLength / (rdsArr.length - 1) * 10) / 10;
    //     let lineList = [];
    //     let rdsListCoor = [];
    //     for (let j = 0; j < rdsArr.length; j++) {
    //         // 画云主机左边的横线
    //         // tslint:disable-next-line:max-line-length
    //         let lineInstance = new Line(verticalLineObj['startX'], verticalLineObj['startY'] + verticalOnePart * j, verticalLineObj['startX'] + onePart, verticalLineObj['startY'] + verticalOnePart * j);
    //         lineList.push(lineInstance);
    //         let coordinate = lineList[j].drawLine();
    //         // 画云主机图标
    //         let rds = { startX: coordinate.lineEndCoordinateX, startY: coordinate.lineEndCoordinateY - rdsArr[j].height / 2 };
    //         let obj = {
    //             privateIP: '私网:' + rdsArr[j].privateIP,
    //             publicIP: '公网:' + rdsArr[j].publicIP
    //         };
    //         let vmName = rdsArr[j].about ? rdsArr[j].about : substringUUID(rdsArr[j].rdsUUID);
    //         let vmInstance = drawDevice(rdsArr[j], rds.startX, rds.startY, vmName, 'showPublicPrivateNet', obj);
    //         vmInstance['slb'] = rdsArr[j].slb;
    //         rdsListCoor.push(vmInstance);
    //     }
    //     return rdsListCoor;
    // }


    /**
     * 画交换机和云主机/rds之间的连线
     * @param {any} switchArray 交换机数组
     * @param {number} distance 交换机离左边边界的
     * @return {object} 返回坐标位置
     */
    function drawSwitchToVm(switchArray: any, distance: number): object {
        let iconCoorArr = [];
        let switchBox: any = [];
        for (let i = 0; i < switchArray.length; i++) {
            let boxHalfHeight;
            switchArray[i].vmArray = switchArray[i].vmArray.concat(switchArray[i].rdsArray);
            if (switchArray[i].vmArray.length === 0 || switchArray[i].vmArray.length === 1) {
                let switchBoxChild = switchArray[i].vmArray.length + 1;
                // 这里加16是交换机图标的高和云主机的高相差16
                switchBox.push(VM.height * SCALE * switchBoxChild);
                boxHalfHeight = Math.round((switchBox[i] / 2) * 10) / 10;
            } else {
                // 每一个大块中有多少个小块
                let switchBoxChild = switchArray[i].vmArray.length * 2 - 1;
                switchBox.push(switchArray[i].vmArray[0].height * switchBoxChild);
                boxHalfHeight = Math.round((switchBox[i] / 2) * 10) / 10;
            }
            // if (switchArray[i].rdsArray.length === 0 || switchArray[i].rdsArray.length === 1) {
            //     let switchBoxChild = switchArray[i].rdsArray.length + 1;
            //     // 这里加16是交换机图标的高和云主机的高相差16
            //     switchBox.push(RDS.height * SCALE * switchBoxChild);
            //     boxHalfHeight = Math.round((switchBox[i] / 2) * 10) / 10;
            // } else {
            //     // 每一个大块中有多少个小块
            //     let switchBoxChild = switchArray[i].rdsArray.length * 2 - 1;
            //     switchBox.push(switchArray[i].rdsArray[0].height * switchBoxChild);
            //     boxHalfHeight = Math.round((switchBox[i] / 2) * 10) / 10;
            // }
            // 画交换机
            let switchStartY = 0;
            switchBox.forEach((current: any, index: number) => {
                if (index < switchBox.length - 1) {
                    switchStartY += switchBox[index] + VM.height * SCALE;
                } else {
                    switchStartY += switchBox[index] / 2;
                }
            });
            let icon = null;

            icon = { startX: distance, startY: switchStartY };

            let switchName = switchArray[i].about ? switchArray[i].about : substringUUID(switchArray[i].resourceUUID); // 交换机的名字
            let iconObj: any = iconInstance(switchArray[i], icon.startX, icon.startY, switchName);
            /**
             * 以下是画交换机左边的横线
             */
            // tslint:disable-next-line:max-line-length
            let leftSwitchLine = { startX: iconObj.leftCoordinate.leftX, startY: iconObj.leftCoordinate.leftY, endX: iconObj.leftCoordinate.leftX - ONE_PART * 2, endY: iconObj.leftCoordinate.leftY };
            let leftSwitchLineInstance = new Line(leftSwitchLine.startX, leftSwitchLine.startY, leftSwitchLine.endX, leftSwitchLine.endY);
            let leftSwitchLineCoor: any = leftSwitchLineInstance.drawLine();
            // 画交换机左边的横线上方的文字
            // 拼接ip
            let ipSplice = switchArray[i].network + '/' + switchArray[i].iMaskLength;
            let ip = new Text(ipSplice, leftSwitchLineCoor['lineEndCoordinateX'] + 20, leftSwitchLineCoor['lineEndCoordinateY'] - 8);
            ip.drawText();


            //以下是画交换机右边的线和云主机
            // 画交换机右边的横线
            // tslint:disable-next-line:max-line-length
            let line = { startX: iconObj.rightCoordinate.rightX, startY: iconObj.rightCoordinate.rightY, endX: iconObj.rightCoordinate.rightX + ONE_PART, endY: iconObj.rightCoordinate.rightY };
            if (switchArray[i].vmArray.length > 1) { // 如果交换机有云主机并且包含的数量大于一   那么就画右边的横线
                let lineInstance = new Line(line.startX, line.startY, line.endX, line.endY);
                lineInstance.drawLine();
            }
            if (switchArray[i].vmArray.length === 1) { // 如果交换机有云主机并且包含的数量等于一   那么就画右边的横线和云主机
                line.endX = iconObj.rightCoordinate.rightX + ONE_PART * 2;
                let lineInstance = new Line(line.startX, line.startY, line.endX, line.endY);
                let oneLineCoor: any = lineInstance.drawLine();
                // 画横线右边的图标
                let obj = { privateIP: '私网:' + (switchArray[i].vmArray[0].privateIP ? switchArray[i].vmArray[0].privateIP : '-'), publicIP: '公网:' + (switchArray[i].vmArray[0].publicIP ? switchArray[i].vmArray[0].publicIP : '-') };
                // tslint:disable-next-line:max-line-length
                let vmName = switchArray[i].vmArray[0].about ? switchArray[i].vmArray[0].about : substringUUID(switchArray[i].vmArray[0].vmResourceUUID ? switchArray[i].vmArray[0].vmResourceUUID : switchArray[i].vmArray[0].rdsUUID);
                // tslint:disable-next-line:max-line-length
                let coordinate = drawDevice(switchArray[i].vmArray[0], oneLineCoor['lineEndCoordinateX'], oneLineCoor['lineEndCoordinateY'] - switchArray[i].vmArray[0].height / 2, vmName, 'showPublicPrivateNet', obj);
                coordinate['slb'] = switchArray[i].vmArray[0].slb;
                VM_LIST.push(coordinate);
            }
            // 画交换机右边的竖线
            if (switchArray[i].vmArray.length > 1 || switchArray[i].rdsArray.length > 1) {
                // tslint:disable-next-line:max-line-length
                let verticalLine = { startX: line.endX, startY: line.endY - boxHalfHeight + switchArray[i].vmArray[0].height / 2, endX: line.endX, endY: line.endY + boxHalfHeight - switchArray[i].vmArray[0].height / 2 };
                let verticalLineInstance = new Line(verticalLine.startX, verticalLine.startY, verticalLine.endX, verticalLine.endY);
                verticalLineInstance.drawLine();
                // 画连接对应云主机的线的集合
                let coordinate = drawLineAndIconList(verticalLine, switchArray[i].vmArray, ONE_PART);


                coordinate.forEach(function (current) {
                    VM_LIST.push(current);
                });
            }

            // if (switchArray[i].rdsArray.length > 1) { // 如果交换机有云主机并且包含的数量大于一   那么就画右边的横线
            //     let lineInstance = new Line(line.startX, line.startY, line.endX, line.endY);
            //     lineInstance.drawLine();
            // }
            // if (switchArray[i].rdsArray.length === 1) { // 如果交换机有云主机并且包含的数量等于一   那么就画右边的横线和云主机
            //     line.endX = iconObj.rightCoordinate.rightX + ONE_PART * 2;
            //     let lineInstance = new Line(line.startX, line.startY, line.endX, line.endY);
            //     let oneLineCoor = lineInstance.drawLine();
            //     // 画横线右边的图标
            //     let obj = { privateIP: '私网:' + switchArray[i].rdsArray[0].privateIP, publicIP: '公网:' + switchArray[i].rdsArray[0].publicIP };
            //     // tslint:disable-next-line:max-line-length
            //     let rdsName = switchArray[i].rdsArray[0].about ? switchArray[i].rdsArray[0].about : substringUUID(switchArray[i].rdsArray[0].rdsUUID);
            //     // tslint:disable-next-line:max-line-length
            //     let coordinate = drawDevice(switchArray[i].rdsArray[0], oneLineCoor['lineEndCoordinateX'], oneLineCoor['lineEndCoordinateY'] - switchArray[i].rdsArray[0].height / 2, rdsName, 'showPublicPrivateNet', obj);
            //     coordinate['slb'] = switchArray[i].rdsArray[0].slb;
            //     VM_LIST.push(coordinate);
            // }
            // // 画交换机右边的竖线
            // if (switchArray[i].rdsArray.length > 1) {
            //     // tslint:disable-next-line:max-line-length
            //     let verticalLine = { startX: line.endX, startY: line.endY - boxHalfHeight + switchArray[i].rdsArray[0].height * 3, endX: line.endX, endY: line.endY + boxHalfHeight - switchArray[i].rdsArray[0].height * 3 };
            //     let verticalLineInstance = new Line(verticalLine.startX, verticalLine.startY, verticalLine.endX, verticalLine.endY);
            //     verticalLineInstance.drawLine();
            //     // 画连接对应云主机的线的集合
            //     let coordinate = drawLineAndIconList(verticalLine, switchArray[i].rdsArray, ONE_PART);
            //     coordinate.forEach(function (current) {
            //         VM_LIST.push(current);
            //     });
            // }
            iconCoorArr[i] = iconObj;
        }

        // 画默认路由和交换机中间的竖线
        // tslint:disable-next-line:max-line-length
        let verOfLeftSwitchLine = { startX: iconCoorArr[0].leftCoordinate.leftX - ONE_PART * 2, startY: iconCoorArr[0].leftCoordinate.leftY, endX: iconCoorArr[iconCoorArr.length - 1].leftCoordinate.leftX - ONE_PART * 2, endY: iconCoorArr[iconCoorArr.length - 1].leftCoordinate.leftY };
        // tslint:disable-next-line:max-line-length
        let verLeftSwitchLine = new Line(verOfLeftSwitchLine.startX, verOfLeftSwitchLine.startY, verOfLeftSwitchLine.endX, verOfLeftSwitchLine.endY);
        verLeftSwitchLine.drawLine();

        // tslint:disable-next-line:max-line-length
        let centerOfverticalLine = { startX: verOfLeftSwitchLine.startX, startY: verOfLeftSwitchLine.startY + (verOfLeftSwitchLine.endY - verOfLeftSwitchLine.startY) / 2 };
        return centerOfverticalLine;
    }

    /**
   * 画交换机和RDS及之间的连线
   * @param {any} switchArray 交换机数组
   * @param {number} distance 交换机离左边边界的
   * @return {object} 返回坐标位置
   */
    // function drawSwitchToRds(switchArray: any, distance: number): object {
    //     let iconCoorArr = [];
    //     let switchBox = [];
    //     for (let i = 0; i < switchArray.length; i++) {
    //         let boxHalfHeight;
    //         if (switchArray[i].rdsArray.length === 0 || switchArray[i].rdsArray.length === 1) {
    //             let switchBoxChild = switchArray[i].rdsArray.length + 1;
    //             // 这里加16是交换机图标的高和云主机的高相差16
    //             switchBox.push(VM.height * SCALE * switchBoxChild);
    //             boxHalfHeight = Math.round((switchBox[i] / 2) * 10) / 10;
    //         } else {
    //             // 每一个大块中有多少个小块
    //             let switchBoxChild = switchArray[i].rdsArray.length * 2 - 1;
    //             switchBox.push(switchArray[i].rdsArray[0].height * switchBoxChild);
    //             boxHalfHeight = Math.round((switchBox[i] / 2) * 10) / 10;
    //         }
    //         // 画交换机
    //         let switchStartY=0 ;
    //         switchBox.forEach((current, index) => {
    //             if (index < switchBox.length - 1) {
    //                 switchStartY += switchBox[index]+RDS.height * SCALE;
    //             } else {
    //                 switchStartY += switchBox[index] / 2;
    //             }
    //         });
    //         let icon = null;

    //         icon = { startX: distance, startY: switchStartY };

    //         let switchName = switchArray[i].about ? switchArray[i].about : substringUUID(switchArray[i].uuid); // 交换机的名字
    //         let iconObj: any = iconInstance(switchArray[i], icon.startX, icon.startY, switchName);
    //         /**
    //          * 以下是画交换机左边的横线
    //          */
    //         // tslint:disable-next-line:max-line-length
    //         let leftSwitchLine = { startX: iconObj.leftCoordinate.leftX, startY: iconObj.leftCoordinate.leftY, endX: iconObj.leftCoordinate.leftX - ONE_PART * 2, endY: iconObj.leftCoordinate.leftY };
    //         let leftSwitchLineInstance = new Line(leftSwitchLine.startX, leftSwitchLine.startY, leftSwitchLine.endX, leftSwitchLine.endY);
    //         let leftSwitchLineCoor = leftSwitchLineInstance.drawLine();
    //         // 画交换机左边的横线上方的文字
    //         // 拼接ip
    //         let ipSplice = switchArray[i].network + '/' + switchArray[i].iMaskLength;
    //         let ip = new Text(ipSplice, leftSwitchLineCoor['lineEndCoordinateX'] + 20, leftSwitchLineCoor['lineEndCoordinateY'] - 8);
    //         ip.drawText();


    //           //以下是画交换机右边的线和RDS
    //         // 画交换机右边的横线
    //         // tslint:disable-next-line:max-line-length
    //         let line = { startX: iconObj.rightCoordinate.rightX, startY: iconObj.rightCoordinate.rightY, endX: iconObj.rightCoordinate.rightX + ONE_PART, endY: iconObj.rightCoordinate.rightY };
    //         if (switchArray[i].rdsArray.length > 1) { // 如果交换机有云主机并且包含的数量大于一   那么就画右边的横线
    //             let lineInstance = new Line(line.startX, line.startY, line.endX, line.endY);
    //             lineInstance.drawLine();
    //         }
    //         if (switchArray[i].rdsArray.length === 1) { // 如果交换机有云主机并且包含的数量等于一   那么就画右边的横线和云主机
    //             line.endX = iconObj.rightCoordinate.rightX + ONE_PART * 2;
    //             let lineInstance = new Line(line.startX, line.startY, line.endX, line.endY);
    //             let oneLineCoor = lineInstance.drawLine();
    //             // 画横线右边的图标
    //             let obj = { privateIP: '私网:' + switchArray[i].rdsArray[0].privateIP, publicIP: '公网:' + switchArray[i].rdsArray[0].publicIP };
    //             // tslint:disable-next-line:max-line-length
    //             let vmName = switchArray[i].rdsArray[0].about ? switchArray[i].rdsArray[0].about : substringUUID(switchArray[i].rdsArray[0].rdsUUID);
    //             // tslint:disable-next-line:max-line-length
    //             let coordinate = drawDevice(switchArray[i].rdsArray[0], oneLineCoor['lineEndCoordinateX'], oneLineCoor['lineEndCoordinateY'] - switchArray[i].rdsArray[0].height / 2, vmName, 'showPublicPrivateNet', obj);
    //             coordinate['slb'] = switchArray[i].rdsArray[0].slb;
    //             RDS_LIST.push(coordinate);
    //         }
    //         // 画交换机右边的竖线
    //         if (switchArray[i].rdsArray.length > 1) {
    //             // tslint:disable-next-line:max-line-length
    //             let verticalLine = { startX: line.endX, startY: line.endY - boxHalfHeight + switchArray[i].rdsArray[0].height / 2, endX: line.endX, endY: line.endY + boxHalfHeight - switchArray[i].rdsArray[0].height / 2 };
    //             let verticalLineInstance = new Line(verticalLine.startX, verticalLine.startY, verticalLine.endX, verticalLine.endY);
    //             verticalLineInstance.drawLine();
    //             // 画连接对应云主机的线的集合
    //             let coordinate = drawLineAndIconListrds(verticalLine, switchArray[i].rdsArray, ONE_PART);
    //             coordinate.forEach(function (current) {
    //                 RDS_LIST.push(current);
    //             });
    //         }
    //         iconCoorArr[i] = iconObj;
    //     }

    //     // 画默认路由和交换机中间的竖线
    //     // tslint:disable-next-line:max-line-length
    //     let verOfLeftSwitchLine = { startX: iconCoorArr[0].leftCoordinate.leftX - ONE_PART * 2, startY: iconCoorArr[0].leftCoordinate.leftY, endX: iconCoorArr[iconCoorArr.length - 1].leftCoordinate.leftX - ONE_PART * 2, endY: iconCoorArr[iconCoorArr.length - 1].leftCoordinate.leftY };
    //     // tslint:disable-next-line:max-line-length
    //     let verLeftSwitchLine = new Line(verOfLeftSwitchLine.startX, verOfLeftSwitchLine.startY, verOfLeftSwitchLine.endX, verOfLeftSwitchLine.endY);
    //     verLeftSwitchLine.drawLine();

    //     // tslint:disable-next-line:max-line-length
    //     let centerOfverticalLine = { startX: verOfLeftSwitchLine.startX, startY: verOfLeftSwitchLine.startY + (verOfLeftSwitchLine.endY - verOfLeftSwitchLine.startY) / 2 };
    //     return centerOfverticalLine;
    // }

    /**
     * 当交换机的个数大于0的时候画路由器和交换机
     * 当交换机的个数为0的时候只画路由器
     * @return {object} 路由的坐标
     */
    function drawRouteAndSwitch(): object {
        if (res.data.vswitchData && res.data.vswitchData.length > 0) {
            // 画连接交换机所有的线和相对应的云主机
            // if (res.data.vswitchData.rdsArray.length > 0) {

            // }
            let centerOfverticalLine: any = drawSwitchToVm(res.data.vswitchData, DISTANCE_OF_SWITCH);
            // 画连接交换机所有的线和相对应的RDS
            // let centerOfverticalLineRds = drawSwitchToRds(res.data.vswitchData, DISTANCE_OF_SWITCH);
            // 画路由器右边的横线
            // tslint:disable-next-line:max-line-length
            let rightLineOfRoute = { startX: centerOfverticalLine['startX'], startY: centerOfverticalLine['startY'], endX: centerOfverticalLine['startX'] - ONE_PART * 2, endY: centerOfverticalLine['startY'] };
            // let rightLineOfRouteRds = { startX: centerOfverticalLineRds['startX'], startY: centerOfverticalLineRds['startY'], endX: centerOfverticalLineRds['startX'] - ONE_PART * 2, endY: centerOfverticalLineRds['startY'] };
            // tslint:disable-next-line:max-line-length
            let rightLineOfRouteInstance = new Line(rightLineOfRoute.startX, rightLineOfRoute.startY, rightLineOfRoute.endX, rightLineOfRoute.endY);
            // let rightLineOfRouteInstanceRds = new Line(rightLineOfRouteRds.startX, rightLineOfRouteRds.startY, rightLineOfRouteRds.endX, rightLineOfRouteRds.endY);
            let rightLineOfRouteCoor: any = rightLineOfRouteInstance.drawLine();
            // let rightLineOfRouteCoorRds = rightLineOfRouteInstanceRds.drawLine();
            // 画默认路由器
            let route = { startX: rightLineOfRouteCoor['lineEndCoordinateX'], startY: rightLineOfRouteCoor['lineEndCoordinateY'] };
            // tslint:disable-next-line:max-line-length
            let routeName = res.data.routeTableData.about ? res.data.routeTableData.about : res.data.routeTableData.resourceUUID ? substringUUID(res.data.routeTableData.resourceUUID) : '默认路由';
            let coordinate = drawDevice(res.data.routeTableData, route.startX, route.startY, routeName, 'iconAndRect', undefined);
            return coordinate;
        } else {
            // 画默认路由器
            let route = { startX: 300, startY: 300 };
            // tslint:disable-next-line:max-line-length
            let routeName = res.data.routeTableData.about ? res.data.routeTableData.about : res.data.routeTableData.resourceUUID ? substringUUID(res.data.routeTableData.resourceUUID) : '默认路由';
            let coordinate = drawDevice(res.data.routeTableData, route.startX, route.startY, routeName, 'iconAndRect', undefined);
            return coordinate;
        }
    }

    // function drawRouteAndSwitchRds(): object {
    //     if (res.data.vswitchData && res.data.vswitchData.length > 0) {

    //         // 画连接交换机所有的线和相对应的RDS
    //         let centerOfverticalLineRds = drawSwitchToRds(res.data.vswitchData, DISTANCE_OF_SWITCH);
    //         // 画路由器右边的横线
    //         // tslint:disable-next-line:max-line-length
    //         let rightLineOfRouteRds = { startX: centerOfverticalLineRds['startX'], startY: centerOfverticalLineRds['startY'], endX: centerOfverticalLineRds['startX'] - ONE_PART * 2, endY: centerOfverticalLineRds['startY'] };
    //         // tslint:disable-next-line:max-line-length
    //         let rightLineOfRouteInstanceRds = new Line(rightLineOfRouteRds.startX, rightLineOfRouteRds.startY, rightLineOfRouteRds.endX, rightLineOfRouteRds.endY);
    //         let rightLineOfRouteCoorRds = rightLineOfRouteInstanceRds.drawLine();
    //         // 画默认路由器
    //         let route = { startX: rightLineOfRouteCoorRds['lineEndCoordinateX'], startY: rightLineOfRouteCoorRds['lineEndCoordinateY'] };
    //         // tslint:disable-next-line:max-line-length
    //         let routeName = res.data.routeTableData.about ? res.data.routeTableData.about : res.data.routeTableData.uuid ? substringUUID(res.data.routeTableData.uuid) : '默认路由';
    //         let coordinate = drawDevice(res.data.routeTableData, route.startX, route.startY, routeName, 'iconAndRect', undefined);
    //         return coordinate;
    //     } else {
    //         // 画默认路由器
    //         let route = { startX: 300, startY: 300 };
    //         // tslint:disable-next-line:max-line-length
    //         let routeName = res.data.routeTableData.about ? res.data.routeTableData.about : res.data.routeTableData.uuid ? substringUUID(res.data.routeTableData.uuid) : '默认路由';
    //         let coordinate = drawDevice(res.data.routeTableData, route.startX, route.startY, routeName, 'iconAndRect', undefined);
    //         return coordinate;
    //     }
    // }

    /**
     * 画nat网关
     * 当存在nat网关的时候画nat网关
     * @param {object} routeCoor 路由器的坐标
     * @return {object} 返回 DNAT/SNAT文字坐标
     */
    function drawNat(routeCoor: any): object {
        let coordinate;
        if (res.data.natData && routeCoor) {
            // 画默认路由头上的直线
            // tslint:disable-next-line:max-line-length
            let leftLineOfRoute = { startX: routeCoor['leftCoordinate'].leftX + ROUTE.width / 4, startY: routeCoor['leftCoordinate'].leftY + ROUTE.height * SCALE / 2 - 9, endX: routeCoor['leftCoordinate'].leftX + ROUTE.width / 4, endY: routeCoor['leftCoordinate'].leftY + ROUTE.height * SCALE / 2 + ONE_PART };
            // tslint:disable-next-line:max-line-length
            let topLineOfRouteInstance = new Line(leftLineOfRoute.startX, leftLineOfRoute.startY, leftLineOfRoute.endX, leftLineOfRoute.endY);
            let topLineOfRouteCoor: any = topLineOfRouteInstance.drawLine();
            // 画nat网关
            let natName = res.data.natData.about ? res.data.natData.about : substringUUID(res.data.natData.resourceUUID);
            // tslint:disable-next-line:max-line-length
            let nat = { startX: topLineOfRouteCoor['lineEndCoordinateX'] + res.data.natData.width / 2, startY: topLineOfRouteCoor['lineEndCoordinateY'] };
            coordinate = drawDevice(res.data.natData, nat.startX, nat.startY, natName, 'showAllInfo', {
                publicIP: '公网:' + res.data.natData.publicIP,
                privateIP: '私网:' + res.data.natData.privateIP,
                DNAT_SNAT: DNAT_SNAT,
                ip: '0.0.0.0/0'
            });
        }

        return coordinate;
    }

    /**
     * 画箭头
     * @returns {any} 返回箭头坐标的集合
     */
    function drawArrow() {
        // 箭头集合
        let arr: any = [];
        let containerArr: any = [];
        if (slbArr.length > 0) {
            // 遍历slbArr数组
            slbArr.forEach(function (outCurrent: any) {
                if (outCurrent.length > 0) {
                    // 画云主机关联的右边的箭头集合
                    outCurrent.forEach(function (innerCurrent: any) {
                        // tslint:disable-next-line:max-line-length
                        let arrowInstance = new Arrow(innerCurrent.rightCoordinate.rightX, innerCurrent.rightCoordinate.rightY, innerCurrent.rightCoordinate.rightX + ONE_PART * 2, innerCurrent.rightCoordinate.rightY);
                        containerArr.push(arrowInstance);
                    });
                }
            });
        }
        containerArr.forEach(function (current: any, index: number) {
            let arrow = current.drawArrow();
            arr.push(arrow);
        });
        return arr;
    }



    /**
     * 画slb的连接线和画slb
     * @param {*} arrowArray
     */
    function drawSlb(arrowArray: any) {
        if (arrowArray.length > 0 && slbArr.length > 0) {
            // 云主机右边黑色的竖线
            // tslint:disable-next-line:max-line-length
            let verticalLine = { startX: arrowArray[0].arrowEndCoordinateX, startY: arrowArray[0].arrowEndCoordinateY, endX: arrowArray[arrowArray.length - 1].arrowEndCoordinateX, endY: arrowArray[arrowArray.length - 1].arrowEndCoordinateY };

            let verticalLineInstance = new Line(verticalLine.startX, verticalLine.startY, verticalLine.endX, verticalLine.endY, 'black');
            let verticalLineCoor = verticalLineInstance.drawLine();
            // 黑色竖线右边的横线
            let verLineLength = verticalLine.endY - verticalLine.startY;
            // tslint:disable-next-line:max-line-length
            let line = { startX: verticalLine.startX, startY: verticalLine.startY + verLineLength / 2, endX: verticalLine.startX + ONE_PART, endY: verticalLine.startY + verLineLength / 2 };
            let lineInstance = new Line(line.startX, line.startY, line.endX, line.endY, 'black');

            let lineCoor: any = lineInstance.drawLine();


            let slbName = slbArr[0][0].icon.slb.about ? slbArr[0][0].icon.slb.about : substringUUID(slbArr[0][0].icon.slb.resourceUUID);
            // 画slb图标
            let slbIcon = { startX: lineCoor['lineEndCoordinateX'], startY: lineCoor['lineEndCoordinateY'] - SLB['height'] / 2 };
            drawDevice(slbArr[0][0].slb, slbIcon.startX, slbIcon.startY, slbName, 'showPublicPrivateNet', {
                publicIP: '公网:' + slbArr[0][0].slb.publicIP,
                privateIP: '私网:' + slbArr[0][0].slb.privateIP
            });
        } else {
            let myCanvasW: any = (document as any).getElementById('myCanvas')['width'];
            if (res.data.slb.length > 0 && res.data.slb[0].hasOwnProperty('type')) {
                let slbName = res.data.slb[0].about ? res.data.slb[0].about : substringUUID(res.data.slb[0].resourceUUID);
                drawDevice(res.data.slb[0], myCanvasW - 140, 40, slbName, 'showPublicPrivateNet', {
                    publicIP: '公网:' + res.data.slb[0].publicIP,
                    privateIP: '私网:' + res.data.slb[0].privateIP
                });
            }


        }
    }

    // 画路由器和交换机
    let routeCoordinate = drawRouteAndSwitch();
    // 画nat网关
    let DNAT_SNAT_Coor = drawNat(routeCoordinate);
    // slb的数组
    let slbArr = filter(VM_LIST);
    // 判断是否存在slb
    let isSlbDataExsit = isValueExsit(slbArr, 'slb');
    // 给slb对象设置属性
    setIconProperty(isSlbDataExsit, slbArr);

    // 画箭头
    let arrowArr = drawArrow();
    // 画slb
    drawSlb(arrowArr);
    // 模拟hover效果和点击效果
    simulateHoverClick(MY_CANVAS, ALL_ICON_COOR_ARR, DNAT_SNAT_Coor, res.data.natData, platform);
    // 实现缩放功能
    scaleCanvas();
    // 实现拖动功能
    dragCanvas(MY_CANVAS);


}