var viewer;
let fragProxy;
var targetFloorZ;
var elevatorSpeed;
var allDbIdsStr;
let bulbLight;//點燈
let spotLight;//聚光燈
var myDataList;
var viewableData;
var dataVizExtn;
var spriteColorRed;
var levels;//剖面用
var baseApiUrl = "http://localhost:3604";
var instanceTree;
//var objSendData = { Data: null };
var tagIdDevList = [];//模型設備List: device_number、device_coordinate_3d、forge_dbid
var roomDataList = [];//模型房間List: room_id、room_name

function launchViewer(urn) {
    var av = Autodesk.Viewing;
    var options = {
        env: 'AutodeskProduction',
        getAccessToken: getForgeToken
    };

    Autodesk.Viewing.Initializer(options, () => {
        viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('forgeViewer'));
        //viewer = new Autodesk.Viewing.Viewer3D(document.getElementById('forgeViewer'));//沒有工具列
        viewer.start();
        var documentId = 'urn:' + urn;

        //加入熱點
        viewer.addEventListener(av.GEOMETRY_LOADED_EVENT, addHotPoint, {
            once: true,
        });

        Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);


    });
}

function getAllLeafComponents(viewer, callback) {
    var cbCount = 0;
    var tree;
    var jsData = []

    function getLeafComponentsRec(current, parent) {
        cbCount++;
        if (tree.getChildCount(current) != 0) {
            tree.enumNodeChildren(current, function (children) {
                getLeafComponentsRec(children, current);
            }, false);
        }
        var nodeName = viewer.model.getInstanceTree().getNodeName(current)
        jsData.push({ id: current, parent: parent, text: nodeName })

        if (--cbCount == 0) callback(jsData);
    }
    viewer.getObjectTree(function (objectTree) {
        tree = objectTree;
        var rootId = tree.getRootId()
        var nodeName = viewer.model.getInstanceTree().getNodeName(rootId)
        jsData.push({ id: rootId, parent: '#', text: nodeName })
        var allLeafComponents = getLeafComponentsRec(rootId, '#');

    });
}

function onDocumentLoadSuccess(doc) {
    var viewables = doc.getRoot().getDefaultGeometry();
    viewer.loadDocumentNode(doc, viewables).then(i => {
        // documented loaded, any action?
    });
    viewer.addEventListener(Autodesk.Viewing.AGGREGATE_SELECTION_CHANGED_EVENT, (args) => {
        var currSelection = viewer.getSelection();
        var domElem = document.getElementById('id_printer');
        domElem.innerText = currSelection[0];


        //var color = new THREE.Vector4(255 / 255, 0, 0, 1);
        //viewer.setThemingColor(751, color);

        //var color = new THREE.Vector4(0, 1, 0, 1);
        //viewer.setThemingColor(751, color);



        //var dbid = currSelection[0]; //750;
        //var it = NOP_VIEWER.model.getData().instanceTree;
        //var indexinNames = it.nodeAccess.dbIdToIndex[dbid];
        //var indexinStrings = it.nodeAccess.names[indexinNames];
        //var nodeMainString = it.nodeAccess.strings[indexinStrings];
        //var nodeSuffixString = it.nodeAccess.nameSuffixes[indexinStrings];
        //var nodeFinalName = it.getNodeName(dbid);
        //console.log("names: " + indexinNames + ", inStrings: " + indexinStrings + ", nodeMainString: " + nodeMainString + ", nodeSuffix: " + nodeSuffixString);
        //console.log("nodeFinalName: " + nodeFinalName);

        //var vp = viewer.impl.clientToViewport(event.canvasX, event.canvasY);
        //var renderer = viewer.impl.renderer();

        //var dbId = renderer.idAtPixel(vp.x, vp.y);
        //if (dbId) {
        //    console.debug("Selected Id: " + dbId);
        //    //viewer.select(dbId);
        //    //viewer.impl.invalidate(true);
        //    viewer.model.getExternalIdMapping(data => console.log(data));
        //}

        //set color
        //let nodeIdObj = 750;
        //this.viewer.setThemingColor(nodeIdObj, red, this.model);

        //const color = new THREE.Vector4(1.0, 0.0, 0.0, 0.5);
        //viewer.setThemingColor(751, color, null, true);

        var myDbid = currSelection;
        //viewer.getProperties(myDbid, function (e) {
        //    //console.log('Entire object response ', e);
        //    //console.log('Properties ', e.properties);
        //    //foreach(item in e.properties) {
        //    //    if (item.displayName == "【tag_id】") {
        //    //        console.log(">> " + item.displayValue);
        //    //    }
        //    //}

        //    e.properties.forEach(function (item) {
        //        //if (item.displayName == "【tag_id】") {
        //        //    console.log(">> " + item.displayValue);
        //        //}
        //        if (item.displayName == "tag_id") {
        //            console.log(">> " + item.displayValue);
        //        }
        //    });

        //});

    });

    //viewer.loadExtension('ToolbarExtension');


    viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function () {
        instanceTree = viewer.model.getData().instanceTree;

        var domElem = document.getElementById('all_id');
        allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex);
        domElem.innerText = allDbIdsStr;

        //parseInt(allDbIdsStr[i]
        //for (var i = 0; i < allDbIdsStr.length; i++) {
        //    //setTransparency(parseInt(allDbIdsStr[i]), 0.2);
        //    viewer.getProperties(parseInt(allDbIdsStr[i], function (e) {
        //         e.properties.forEach(function (item) {
        //             //if (item.displayName == "【tag_id】") {
        //             //    console.log(">> " + item.displayValue);
        //             //}
        //             if (item.displayName == "tag_id") {
        //                 console.log(">> " + item.displayValue);
        //             }
        //         });

        //     })
        //}

        // ------------------ 取得tag_id底下的nodeId --------------------------------------
        var curDbId = 0;
        var tagId = 0;
        var _parentId = 0;
        var _childId = 0;
        var itemName = '';
        var childIdArr = new Array();
        let evelMap = new Map();

        let tree = viewer.model.getData().instanceTree;
        const model = viewer.model;
        const fragList = model.getFragmentList();


        loadHeatmaps(model);



        //allDbIdsStr.forEach((dbId) => {
        //    curDbId = parseInt(dbId);
        //    viewer.getProperties(curDbId, function (e) {
        //        e.properties.forEach(function (item) {
        //            if (item.displayName == "tag_id" && e.name == "【電梯】") {

        //                //getFragmentWorldMatrixByNodeId(e.dbId, viewer);
        //                //let fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag);

        //                tree.enumNodeFragments(e.dbId, function (frag) {

        //                    let fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag);
        //                    let matrix = new THREE.Matrix4();
        //                    console.log("proxy: " + fragProxy.position);

        //                    fragProxy.getWorldMatrix(matrix);

        //                });



        //                tagId = e.dbId;
        //                viewer.getProperties(tagId, function (e2) {
        //                    e2.properties.forEach(function (item2) {
        //                        if (item2.displayName == "child") {
        //                            _parentId = item2.displayValue;

        //                            viewer.getProperties(_parentId, function (e3) {
        //                                let itemMap = new Map();
        //                                e3.properties.forEach(function (item3) {
        //                                    if (item3.displayName == "child") {
        //                                        _childId = item3.displayValue;
        //                                        childIdArr.push(_childId);

        //                                        var n = 0;
        //                                        viewer.getProperties(childIdArr[n], function (e5) {
        //                                            e5.properties.forEach(function (item5) {
        //                                                if (item5.displayName == "Name") {
        //                                                    itemName = item5.displayValue;
        //                                                    itemMap.set(childIdArr[0], itemName)
        //                                                    console.log("childIdArr[0] ", childIdArr[0])
        //                                                    console.log("item name: ", itemName);
        //                                                    n += 3;
        //                                                }
        //                                            });
        //                                        })

        //                                        n = 1;
        //                                        viewer.getProperties(childIdArr[n], function (e6) {
        //                                            e6.properties.forEach(function (item6) {
        //                                                if (item6.displayName == "Name") {
        //                                                    itemName = item6.displayValue;
        //                                                    itemMap.set(childIdArr[1], itemName)
        //                                                    console.log("childIdArr[1] ", childIdArr[1])
        //                                                    console.log("item name: ", itemName);
        //                                                    n += 3;
        //                                                }
        //                                            });
        //                                        })

        //                                        n = 2;
        //                                        viewer.getProperties(childIdArr[n], function (e7) {
        //                                            e7.properties.forEach(function (item7) {
        //                                                if (item7.displayName == "Name") {
        //                                                    itemName = item7.displayValue;
        //                                                    itemMap.set(childIdArr[2], itemName)
        //                                                    console.log("childIdArr[2] ", childIdArr[2])
        //                                                    console.log("item name: ", itemName);
        //                                                    n += 3;
        //                                                }
        //                                            });
        //                                        })

        //                                    }
        //                                });
        //                                evelMap.set(item.displayValue, itemMap)
        //                            })

        //                        }
        //                    });
        //                })
        //            }
        //        });

        //    })

        //})

      allDbIdsStr.forEach((dbId) => {
        curDbId = parseInt(dbId);
        viewer.getProperties(curDbId, function (e) {
          e.properties.forEach(function (item) {
            if (item.displayName == "【tag_id】") { // Tag_name tag_id 【tag_id】
              if (item.displayValue != "") {
                ////if ((item.displayValue).indexOf('TPE_B1_LT_L1') > -1) {// TPE_B1_ME_M10
                //console.log("--------------------------------------------------");
                //console.log("Tag_name dbid: " + e.dbId);
                //console.log("value: " + item.displayValue);
                ////}
                var str = item.displayValue.split('_');
                if (str.length == 2) { //兩段為房間 ex: U7F_01
                  roomDataList.push({ room_id: e.dbId, room_name: item.displayValue });
                }
                else if (str.length == 8) { //八段為設備 ex: TPE_B1_ME_M10_U7F_NA_FCU_N1
                  //取得座標
                  let bounds = new THREE.Box3();
                  instanceTree.enumNodeFragments(e.dbId, (fragId) => {
                    let box = new THREE.Box3();
                    fragList.getWorldBounds(fragId, box);
                    bounds.union(box);
                  }, true);
                  var position = bounds.center();
                  ////if ((item.displayValue).indexOf('TPE_B1_LT_L1') > -1) {
                  //console.log("position: (" + (position.x).toFixed(2) + ", " + (position.y).toFixed(2) + ", " + (position.z).toFixed(2) + ")");
                  //console.log("--------------------------------------------------");
                  ////}
                  tagIdDevList.push({ device_number: item.displayValue, device_coordinate_3d: '{ "x": ' + (position.x).toFixed(2) + ', "y": ' + (position.y).toFixed(2) + ', "z": ' + (position.z).toFixed(2) + ' }', forge_dbid: e.dbId, room_name: "" });
                }

              }
            }
            if (item.displayName == "【room_id】") {
              tagIdDevList = tagIdDevList.map(tagItem => {
                if (tagItem.forge_dbid === e.dbId) {
                  tagItem = { ...tagItem, room_name: item.displayValue }
                }
                return tagItem
              })
            }
          });
        })
      })

        //---------------------- end ---------------------------------------------------



        //var curDbId = 0;
        //var tagId = 0;
        //var _parentId = 0;
        //var _childId = 0;
        ////var childIdArr = new Array();
        //let evelMap = new Map();

        //allDbIdsStr.forEach((dbId) => {
        //    curDbId = parseInt(dbId);
        //    viewer.getProperties(curDbId, function (e) {
        //        e.properties.forEach(function (item) {
        //            if (item.displayName == "tag_id" && e.name == "【電梯】") {

        //                tagId = e.dbId;
        //                viewer.getProperties(tagId, function (e2) {
        //                    e2.properties.forEach(function (item2) {
        //                        if (item2.displayName == "child") {
        //                            _parentId = item2.displayValue;

        //                            viewer.getProperties(_parentId, function (e3) {
        //                                var childIdArr = new Array();

        //                                e3.properties.forEach(function (item3) {
        //                                    if (item3.displayName == "child") {
        //                                        _childId = item3.displayValue;
        //                                        childIdArr.push(_childId);
        //                                    }
        //                                });
        //                                evelMap.set(item.displayValue, childIdArr)
        //                                console.log("map: " + evelMap);
        //                            })

        //                        }
        //                    });
        //                })
        //            }
        //        });

        //    })

        //})


        //let tree = viewer.model.getData().instanceTree;
        let nodeId = 12112;//12104; //749; //10952;
        let nodeId2 = 12111;//12105; //750;
        let nodeId3 = 12110;//12104; //751;

        tree.enumNodeFragments(nodeId, function (frag) {
            fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag);
            fragProxy.getAnimTransform();
            let fragPosition = new THREE.Vector3(0, 0, 0);// 一樓0 二樓15 三樓 26

            fragProxy.position = fragPosition

            fragProxy.updateAnimTransform()

        });
        viewer.impl.sceneUpdated(true);

        //------------ add -------------
        tree.enumNodeFragments(nodeId2, function (frag) {
            fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag);
            fragProxy.getAnimTransform();
            let fragPosition = new THREE.Vector3(0, 0, 0);// 一樓0 二樓15 三樓 26

            fragProxy.position = fragPosition

            fragProxy.updateAnimTransform()

        });
        viewer.impl.sceneUpdated(true);

        tree.enumNodeFragments(nodeId3, function (frag) {
            fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag);
            fragProxy.getAnimTransform();
            let fragPosition = new THREE.Vector3(0, 0, 0);// 一樓0 二樓15 三樓 26

            fragProxy.position = fragPosition

            fragProxy.updateAnimTransform()

        });
        viewer.impl.sceneUpdated(true);

    });

    //add toolbar fail
    //function ToolbarExtension(viewer, options) {
    //    Autodesk.Viewing.Extension.call(this, viewer, options);
    //}

    //ToolbarExtension.prototype = Object.create(Autodesk.Viewing.Extension.prototype);
    //ToolbarExtension.prototype.constructor = ToolbarExtension;

    //ToolbarExtension.prototype.load = function () {
    //    this.viewer.setLightPreset(6);
    //    this.viewer.setEnvMapBackground(true);
    //    this.viewer.fitToView();
    //    return true;
    //};

    //ToolbarExtension.prototype.unload = function () {

    //};
    //Autodesk.Viewing.theExtensionManager.registerExtension('ToolbarExtension', ToolbarExtension);

    //ToolbarExtension.prototype.onToolbarCreated = function (toolbar) {
    //    //alert('TODO: customize Viewer toolbar');

    //    var viewer = this.viewer;
    //    var button1 = new Autodesk.Viewing.UI.Button('show-env-bg-button');
    //    button1.onClick = function (e) {
    //        viewer.setEnvMapBackground(true);
    //    };
    //    button1.addClass('show-env-bg-button');
    //    button1.setToolTip('Show Environment');

    //    //SubToolbar
    //    this.subToolbar = new Autodesk.Viewing.UI.ControlGroup('my-custom-toolbar');
    //    this.subToolbar.addControl(button1);
    //    toolbar.addControl(this.subToolbar);

    //};


    //加入點燈光
    //bulbLight = new THREE.PointLight(0xffffff, 1, 1, 2);//0xff0000
    //bulbLight.position.set(-17.33, 51.03, -2.52);//17.880840301513672
    //bulbLight.castShadow = true;
    //bulbLight.intensity = 50;
    //bulbLight.distance = 1;
    //bulbLight.emissiveIntensity = bulbLight.intensity / Math.pow(0.02, 2.0);
    //viewer.scene.add(bulbLight);

    //聚光燈
    //spotLight = new THREE.SpotLight(0xffff00, 80, 10);//0xffffff
    //spotLight.position.set(-7.58, 18.20, -0.25); //set(-17.33, 51.03, -2.52);
    //spotLight.castShadow = true;
    //spotLight.visible = true;
    //var geom = new THREE.BoxGeometry(); //create 幾何對象 -17.33, 51.03, -4.52
    //var material = new THREE.MeshLambertMaterial({ color: 0xffff00 });//0xff0000
    //var cube = new THREE.Mesh(geom, material);
    //cube.position.set(-7.58, 18.20, -1); //set(-17.33, 51.03, -10);//-4.52
    //viewer.scene.add(cube);
    //spotLight.target = cube;
    //viewer.scene.add(spotLight);

}

//------------------- 加入熱點 -----------------
async function addHotPoint(data) {
    var viewer = data.target;
    dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
    const DataVizCore = Autodesk.DataVisualization.Core;
    const viewableType = Autodesk.DataVisualization.Core.ViewableType.SPRITE;//DataVizCore.ViewableType.SPRITE;
    const spriteColor = new THREE.Color(0xffff00); //0xffffff
    spriteColorRed = new THREE.Color(0xff0000);
    const spriteIcon = "https://d2zqnmauvnpnnm.cloudfront.net/assets-1/images/circle.svg"; //"/img/forge/hotspot.svg";

    const style = new DataVizCore.ViewableStyle(viewableType, spriteColor, spriteIcon);


    //function onSpriteClicked(event) {
    //    console.log(`Sprite clicked: ${event.dbId}`);
    //}

    //熱點 點擊事件註冊
    viewer.addEventListener(DataVizCore.MOUSE_CLICK, onSpriteClicked);//MOUSE_CLICK SPRITE_SELECTED
    //viewer.addEventListener(DataVizCore.MOUSE_CLICK_OUT, onSpriteClickedOut);
    //viewer.addEventListener(DataVizCore.MOUSE_DOWN, onSpriteClicked);
    //viewer.addEventListener(DataVizCore.MOUSE_HOVERING, onSpriteHovering);

    viewer.addEventListener(
        Autodesk.Viewing.SELECTION_CHANGED_EVENT,
        onSelectionChange
    );

    viewableData = new DataVizCore.ViewableData();
    viewableData.spriteSize = 24; // Sprites as points of size 24 x 24 pixels

    //熱圖 打點  x: 0, y: 25.03, z: -2.52  三菱
    myDataList = [{ position: { x: -21.95, y: 8.92, z: 63.27 } }, //-21.95, 8.92, 63.27
    { position: { x: -21.95, y: 7.61, z: 63.27 } },//-21.95, 7.61, 63.27
    { position: { x: -21.95, y: 6.43, z: 63.27 } },//-21.95, 6.43, 63.27
    { position: { x: -21.95, y: 5.31, z: 63.27 } }//-21.95, 5.31, 63.27
    ];// x: -17.33, y: 51.03, z: -2.52 ; x: -23.21, y: 51.03, z: -2.52

    myDataList.forEach((myData, index) => {
        const dbId = 10 + index;
        const myPosition = myData.position;
        const viewable = new DataVizCore.SpriteViewable(myPosition, style, dbId);

        viewableData.addViewable(viewable);
    });

    await viewableData.finish();
    dataVizExtn.addViewables(viewableData);

    //---------------- 熱點點擊事件 --------------------
    function onSpriteClicked(event) {
        event.hasStopped = true;
        if (event != undefined && event != null) {
            if (event.dbId >= 10 && event.dbId <= 13) {//event.dbId > 0 && event.dbId < 19
                console.log(`Sprite clicked: ${event.dbId}`);
                openHotspotModal();
            }

            if (event.clickInfo != null) {
                //if (event.clickInfo.dbId == 12449) {
                //const viewablesToUpdate = [event.dbId];
                //dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
                //    return {
                //        color: spriteColorRed,
                //    };
                //});
                //}


                //document.getElementById('lbltipAddedComment').innerHTML .toFixed(2);
                document.getElementById('deviceName').innerHTML = viewer.model.getInstanceTree().getNodeName(event.clickInfo.dbId);
                document.getElementById('deviceDbid').innerHTML = event.clickInfo.dbId;
                document.getElementById('devicePosition').innerHTML = "(" + (event.clickInfo.point.x).toFixed(2) + ", " + (event.clickInfo.point.y).toFixed(2) + ", " + (event.clickInfo.point.z).toFixed(2) + ")";
                console.log(`event>>  dbId: ${event.clickInfo.dbId}, id: ${event.clickInfo.object.id}, position.x: ${event.clickInfo.point.x}, y: ${event.clickInfo.point.y}, z: ${event.clickInfo.point.z}, name: ${viewer.model.getInstanceTree().getNodeName(event.clickInfo.dbId)}`);
            }
        }
    }

    //function onSpriteClickedOut(event) {
    //    //const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
    //    event.hasStopped = true;

    //    const viewablesToUpdate = [event.dbId];
    //dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
    //    return {
    //        scale: 1.0, // Restore the viewable size
    //        //url: "https://.../circle.svg",
    //    };
    //});
    //}

    //function onSpriteHovering(event) {
    //    const targetDbId = event.dbId;

    //    if (event != undefined && event != null && event.hovering) {

    //        if (targetDbId >= 10 && targetDbId <= 13) {//event.dbId > 0 && event.dbId < 19
    //            console.log(`Sprite clicked: ${event.dbId}`);
    //            openHotspotModal();
    //        }

    //        console.log(`The mouse hovers over ${targetDbId}`);
    //    } else {
    //        console.log(`The mouse hovers off ${targetDbId}`);
    //    }
    //}
}
//------------------- end --------------

// 熱點 更換顏色
function changeColorForHotspot(dbId) {
    //const viewablesToUpdate = [event.dbId];
    const viewablesToUpdate = dbId;
    dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
        return {
            color: spriteColorRed,
        };
    });
}


////---------------- 熱點點擊事件 --------------------
//function onSpriteClicked(event) {
//    //event.hasStopped = true;
//    if (event != undefined && event != null) {
//        if (event.dbId >= 10 && event.dbId <= 13) {//event.dbId > 0 && event.dbId < 19
//            console.log(`Sprite clicked: ${event.dbId}`);
//            //alert("I am an alert box! " + event.dbId);
//            openHotspotModal();
//        }

//        if (event.clickInfo != null) {
//            //document.getElementById('lbltipAddedComment').innerHTML .toFixed(2);
//            document.getElementById('deviceName').innerHTML = viewer.model.getInstanceTree().getNodeName(event.clickInfo.dbId);
//            document.getElementById('deviceDbid').innerHTML = event.clickInfo.dbId;
//            document.getElementById('devicePosition').innerHTML = "(" + (event.clickInfo.point.x).toFixed(2) + ", " + (event.clickInfo.point.y).toFixed(2) + ", " + (event.clickInfo.point.z).toFixed(2) + ")";
//            console.log(`event>>  dbId: ${event.clickInfo.dbId}, id: ${event.clickInfo.object.id}, position.x: ${event.clickInfo.point.x}, y: ${event.clickInfo.point.y}, z: ${event.clickInfo.point.z}, name: ${viewer.model.getInstanceTree().getNodeName(event.clickInfo.dbId)}`);
//        }
//    }
//}

//function onSpriteClickedOut(event) {
//    //const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
//    event.hasStopped = true;

//    const viewablesToUpdate = [event.dbId];
//    dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
//        return {
//            scale: 1.0, // Restore the viewable size
//            url: "https://.../circle.svg",
//        };
//    });

//    // Continue with application logic that reacts to the deselection
//    // event (e.g., update UI to a state where no selection is made).
//}

function onSelectionChange(event) {
    if (event != undefined && event != null) {
        const dbIds = event.dbIdArray;

        if (dbIds.length > 0) {
            // 處理已選取元件的邏輯

            //openHotspotModal();
            console.log(`------ name: ${viewer.model.getInstanceTree().getNodeName(dbIds)} , dbId: ${dbIds}`);//, id: ${event.clickInfo.object.id}, position.x: ${event.clickInfo.point.x}, y: ${event.clickInfo.point.y}, z: ${event.clickInfo.point.z}
        } else {
            // 處理沒有選取元件的邏輯
            console.log("no item");
        }
    }
}
//---------------- end -----------------------------

//----------------- 開關熱點小視窗 ----------------------
function openHotspotModal() {
    var modal = document.getElementById("hotspotModal");
    modal.style.display = "block";
    $("#pills-register-tab").removeClass("active");
    $("#pills-alarm-tab").removeClass("active");
    $("#pills-operation-tab").removeClass("active");
    $("#pills-login-tab").tab("show");
}

function closeHotspotModal() {
    var modal = document.getElementById("hotspotModal");
    modal.style.display = "none";
    //dataVizExtn.removeAllViewables();

}
//------------------ end --------------------------------

//-------------- 更改燈光範圍 --------------------------
function setLightPower(value) {
    //bulbLight.intensity = (value * 10);
    //bulbLight.distance = value;
    viewer.impl.sceneUpdated(true);
}

function setLightOpenOrClose(value) {
    if (value)
        spotLight.visible = true;
    else {
        spotLight.visible = false;
    }
    viewer.impl.sceneUpdated(true);
}

function setLightTransparency(value) {
    bulbLight.intensity = (value * 10);
    //bulbLight.
    viewer.impl.sceneUpdated(true);
}
//------------- end -----------------------------------


//function getPosition(nodeId) {
function getFragmentWorldMatrixByNodeId(nodeId, viewer) {
    let tree = viewer.model.getData().instanceTree;
    let result = {
        fragId: [],
        matrix: [],
    };
    //let viewer = this.viewer;
    tree.enumNodeFragments(nodeId, function (frag) {

        let fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag);
        let matrix = new THREE.Matrix4();

        fragProxy.getWorldMatrix(matrix);

        result.fragId.push(frag);
        result.matrix.push(matrix);
    });
    console.log("position: " + result);
    return result;
}
//}

function setTransparentBuilding() {
    //allDbIdsStr.forEach((dbId) => {
    //    setTransparency(dbId, 0.2);
    //})

    for (var i = 0; i < allDbIdsStr.length; i++) {
        setTransparency(parseInt(allDbIdsStr[i]), 0);
    }

}

function recoverTransparentBuilding() {
    //allDbIdsStr.forEach((dbId) => {
    //    setTransparency(dbId, 1);
    //})

    for (var i = 0; i < allDbIdsStr.length; i++) {
        setTransparency(parseInt(allDbIdsStr[i]), 1);
    }
}

//設定模型 透明度
function setTransparency(nodeId, opacity) {
    var model = viewer.model;
    //var nodeId = 1633;

    var fragList = viewer.model.getFragmentList();

    var fragIds = []

    model.getData().instanceTree.enumNodeFragments(
        nodeId, (fragId) => {
            fragIds.push(fragId)
        });

    fragIds.forEach((fragId) => {
        //获取材质
        var material = fragList.getMaterial(fragId);

        if (material) {
            //设置透明度
            material.opacity = opacity;//0.5;
            material.transparent = true;
            //标记更新
            material.needsUpdate = true;
        }
    })

    //更新viewer
    viewer.impl.invalidate(true, true, true);
}



function setElevatorFloor(floor) {
    if (floor == 0)
        targetFloorZ = 0;
    else if (floor == 1)
        targetFloorZ = 14.6;// 15;
    else if (floor == 2)
        targetFloorZ = 24.6;// 26;
    else if (floor == 3)
        targetFloorZ = 34.6;
    else if (floor == 4)
        targetFloorZ = 44.6;
    else if (floor == 5)
        targetFloorZ = 54.6;
    else if (floor == 6)
        targetFloorZ = 64.6;
    else if (floor == 7)
        targetFloorZ = 74.6;
    else if (floor == 8)
        targetFloorZ = 84.6;
    else if (floor == 9)
        targetFloorZ = 94.6;
    else if (floor == 10)
        targetFloorZ = 104.6;
    else if (floor == 11)
        targetFloorZ = 114.6;
    else if (floor == 12)
        targetFloorZ = 124.6;
    else if (floor == -1)
        targetFloorZ = -13;
}

function setElevatorSpeed(speed) { //0.01 ~ 1
    elevatorSpeed = speed;
}

function movElevator() {
    let tree = viewer.model.getData().instanceTree;//三組:(749,750,751),(755,756,757),(761,762,763)
    let nodeId = 12112;//12104; //749; //10952;
    let nodeId2 = 12111;//12105; //750;
    let nodeId3 = 12110;//12104; //751;
    let fragProxyZ = 0;
    var movStatus = 0; // 0=no 1=up 2=down
    changeColor(nodeId3);
    //setTransparency(0.2);
    setTransparentBuilding();


    if (fragProxy.position.z > targetFloorZ) {
        movStatus = 2
    }
    else if (fragProxy.position.z < targetFloorZ) {
        movStatus = 1
    }

    if (movStatus == 0) {
        return;
    }

    tree.enumNodeFragments(nodeId, function (frag) {
        fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag);
        fragProxy.getAnimTransform();
        //let fragPosition = new THREE.Vector3(0, 0, 15);// 一樓0 二樓15 三樓 26
        if (movStatus == 2) {
            fragProxy.position.z -= elevatorSpeed;
        }
        else if (movStatus == 1) {
            fragProxy.position.z += elevatorSpeed;
        }

        fragProxyZ = fragProxy.position.z;
        fragProxy.updateAnimTransform()

    });
    viewer.impl.sceneUpdated(true);

    tree.enumNodeFragments(nodeId2, function (frag) {
        fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag);
        fragProxy.getAnimTransform();
        //let fragPosition = new THREE.Vector3(0, 0, 15);// 一樓0 二樓15 三樓 26
        if (movStatus == 2) {
            fragProxy.position.z -= elevatorSpeed;
        }
        else if (movStatus == 1) {
            fragProxy.position.z += elevatorSpeed;
        }

        fragProxyZ = fragProxy.position.z;
        fragProxy.updateAnimTransform()

    });
    viewer.impl.sceneUpdated(true);

    tree.enumNodeFragments(nodeId3, function (frag) {
        fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag);
        fragProxy.getAnimTransform();
        //let fragPosition = new THREE.Vector3(0, 0, 15);// 一樓0 二樓15 三樓 26
        if (movStatus == 2) {
            fragProxy.position.z -= elevatorSpeed;
        }
        else if (movStatus == 1) {
            fragProxy.position.z += elevatorSpeed;
        }

        fragProxyZ = fragProxy.position.z;
        fragProxy.updateAnimTransform()

    });
    viewer.impl.sceneUpdated(true);

    if (movStatus == 2) {
        if (fragProxyZ >= targetFloorZ) {
            requestAnimationFrame(movElevator);
        }
        else {
            hideColor(nodeId3);
            //setTransparency(1);
            recoverTransparentBuilding();
        }
    }
    else if (movStatus == 1) {
        if (fragProxyZ <= targetFloorZ) {
            requestAnimationFrame(movElevator);
        }
        else {
            hideColor(nodeId3);
            //setTransparency(1);
            recoverTransparentBuilding();
        }
    }


    //let fragPosition = new THREE.Vector3(position);// 一樓0 二樓15 三樓 26

    //fragProxy.position = fragPosition;

    //fragProxy.updateAnimTransform();

    //viewer.impl.sceneUpdated(true);
}

function changeColor(nodeId) {//電梯變綠色
    var color = new THREE.Vector4(0, 1, 0, 1);
    viewer.setThemingColor(nodeId, color);
}

function hideColor(nodeId) {//顏色改成透明
    var color = new THREE.Vector4(0, 1, 0, 0);
    viewer.setThemingColor(nodeId, color);
}

function getAllDbIds(viewer) {
    var instanceTree = viewer.model.getData().instanceTree;

    var allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex);

    return allDbIdsStr.map(function (id) { return parseInt(id) });
}

//釋放viewer
function ReleaseViewer() {
    viewer.finish();
    viewer = null;
    Autodesk.Viewing.shutdown();
}

//擴展類 刪除添加的所有DOM元素和事件
//ToolbarExtension.prototype.unload = function () {
//    if (this.subToolbar) {
//        this.viewer.toolbar.removeControl(this.subToolbar);
//        this.subToolbar = null;
//    }
//};


// ---- 模型剖面 ----
function getCutPlaneParam(idx, n) {
    if (idx < 0 || !n) return;

    const level = this.levels[idx];
    if (!level) return;

    //const precision = Autodesk.Viewing.Private.calculatePrecision( level.elevation  );
    const model = this.viewer.model;
    const globalOffset = model.getData().globalOffset;
    const units = model.getUnitString();
    const elevRaw = Autodesk.Viewing.Private.convertUnits('ft', units, 1, level.elevation);

    let d = elevRaw - globalOffset.z - 0.5;
    if (n == 1)
        d = -1 * d;

    return new THREE.Vector4(0, 0, n, d);
}

function onButtonClicked() {
    const upperSelector = document.getElementById('adn-upper-lvl-selector');
    const lowerSelector = document.getElementById('adn-lower-lvl-selector');

    if (!upperSelector || !lowerSelector)
        return;

    const upperIdx = upperSelector.selectedIndex;
    const upperCutPlaneParam = this.getCutPlaneParam(upperIdx, 1);
    const lowerIdx = lowerSelector.selectedIndex;
    const lowerCutPlaneParam = this.getCutPlaneParam(lowerIdx, -1);

    this.viewer.setCutPlanes([upperCutPlaneParam, lowerCutPlaneParam]);
}

/**
 * Autodesk.Viewing.Document.load() failuire callback.
 */
function onDocumentLoadFailure(viewerErrorCode) {
    console.error("onDocumentLoadFailure() - errorCode:" + viewerErrorCode);
}

function getForgeToken(callback) {
    // for 三菱
    fetch('/api/forge/oauth/token').then(res => {
        res.json().then(data => {
            callback(data.dictionary.access_token, data.dictionary.expires_in);
        });
    });

    //for wsp get token
    //var wspApiUrl = "https://quick-sonar-302302.de.r.appspot.com";
    //fetch(wspApiUrl + '/api/forge/getToken').then(res => {
    //    res.json().then(data => {
    //        callback(data.access_token, data.expires_in);
    //    });
    //});

    //callback("eyJhbGciOiJSUzI1NiIsImtpZCI6IlU3c0dGRldUTzlBekNhSzBqZURRM2dQZXBURVdWN2VhIn0.eyJzY29wZSI6WyJkYXRhOnJlYWQiXSwiY2xpZW50X2lkIjoib0FoWVJBZkpvUkFRVFFqZmtBdExRSGkwYTIyc2pwSEoiLCJhdWQiOiJodHRwczovL2F1dG9kZXNrLmNvbS9hdWQvYWp3dGV4cDYwIiwianRpIjoiMm1EZ25yN0puYnhNUU91d2h2Y0lhTlZTOTIxOU9WMDlLZkZIRmhpa3BuMTUwbUNVbmRsVU9ZazdCMWxURXA4QiIsImV4cCI6MTY3MDk4NjgwM30.EfXtO7rdW25_WFxcFdYA-yWMUnRenuWc8MtvrM3i92jJU1_gZ7L1GJCLTH1MRJqnxp9X-oO4NToq1kt2sbUYWgwUPd3BvJwckr55s9hagy-0WENfUfEgX1csnrrKpnnbmlHIGQBgsUTklRRXleW6A63A0XkVH0GvJFv4h7K6-4gAi21SLhE_GwmbTWXSOxuoDnluIAVEDEf0ZmUYgnb4nImujScz876e4A0PagW0yf9-RSqmzNUctsasP6MBzLQxOHMd97jQvBDCFEzQqGgpbSTyc43Gdhy2wQM9sSxc_vR3ZvzJPm_78uda0HjH9M8B9SjwY07XHHdhGmbH-1FBQw", 3599);
}

async function loadHeatmaps(model) {

    const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");

    // Given a model loaded from Forge
    const structureInfo = new Autodesk.DataVisualization.Core.ModelStructureInfo(model);

    //x: -17.33, y: 51.03, z: -2.52
    const devices = [
        {
            id: "Oficina 3",
            //name: "Oficina-",
            position: { x: 6.98, y: -19.00, z: 16.86 }, // x: 0, y: 25, z: -2.5      (-4.93, -20.61, 16.86)
            sensorTypes: ["temperature", "humidity"]
        },
        {
            id: "Oficina 2",
            //name: "Oficina-",
            position: { x: 35.85, y: -2.24, z: 16.86 }, // x: 0, y: 25.03, z: -2.52  (23.94, -3.85, 16.86)
            sensorTypes: ["temperature", "humidity"]
        },
        {
            id: "Oficina 1",
            //name: "Oficina-",
            position: { x: 6.98, y: -2.24, z: 16.86 }, // x: 0, y: 25.03, z: -2.52   (-4.93, -3.85, 16.86)
            sensorTypes: ["temperature", "humidity"]
        }
    ];

    // Initialize sensor values
    let sensorVals = [];
    for (let i = 0; i < devices.length; i++) {
        sensorVals[i] = Math.random();
    }

    //var offset = Autodesk.viewer.model.getGlobalOffset();
    //removeOffset(devices[0], offset)

    //---------------- test node ---------------

    // Retrive all dbIds that compose the stadium roof.
    const it = viewer.model.getInstanceTree();
    const roomDbIds = [];

    //it.enumNodeChildren(
    //    5027,//4239
    //    (id) => {
    //        if (it.getNodeName(id) == "【ARC】【樓板】RC") {//【ARC】【樓板】RC 樓板
    //            roomDbIds.push(id);
    //        }
    //    },
    //    true
    //);
    roomDbIds.push(11449);//5113 834 838 8106 8177 792 8181 7567
    //roomDbIds.push(8183);
    //roomDbIds.push(8185);

    const {
        SurfaceShadingData,
        SurfaceShadingPoint,
        SurfaceShadingNode,
    } = Autodesk.DataVisualization.Core;

    const shadingNode = new SurfaceShadingNode("Room Panel", roomDbIds);

    devices.forEach((device) => {
        const shadingPoint = new SurfaceShadingPoint(
            device.id,
            device.position,
            device.sensorTypes
        );
        shadingNode.addPoint(shadingPoint);
    });

    // Generates `SurfaceShadingData` after assigning each device to a room.
    //const shadingData = await Autodesk.structureInfo.generateSurfaceShadingData(devices);
    //const shadingData = await structureInfo.generateSurfaceShadingData(devices);
    //shadingData.initialize(model);
    const heatmapData = new SurfaceShadingData();
    heatmapData.addChild(shadingNode);
    heatmapData.initialize(model);

    // Setup surface shading
    await dataVizExtn.setupSurfaceShading(model, heatmapData);

    //dataVizExtn.registerSurfaceShadingColors("co2", [0x00ff00, 0xff0000]);
    dataVizExtn.registerSurfaceShadingColors("temperature", [0xff0000, 0x0000ff]);

    function getSensorValue(device, sensorType) {
        return sensorVals[parseInt(device.id.slice(-1)) - 1]; // 值: 0~1之間
        //return 0;
    }


    dataVizExtn.renderSurfaceShading("Room Panel", "temperature", getSensorValue);

    setInterval(() => {
        // Modify sensor values.
        for (let i = 0; i < devices.length; i++) {
            sensorVals[i] = Math.random();
        }
        dataVizExtn.updateSurfaceShading(getSensorValue);
    }, 2000);

    //viewer.hide(5108);//五樓底下的六樓物件
    //-------------------------------------------------------------------------------


    // Use the resulting shading data to generate heatmap from.
    //await dataVizExtn.setupSurfaceShading(model, shadingData);

    // Register color stops for the heatmap. Along with the normalized sensor value
    // in the range of [0.0, 1.0], `renderSurfaceShading` will interpolate the final
    // heatmap color based on these specified colors.
    //const sensorColors = [0x0000ff, 0x00ff00, 0xffff00, 0xff0000];

    // Set heatmap colors for temperature
    //const sensorType = "temperature";
    //dataVizExtn.registerSurfaceShadingColors(sensorType, sensorColors);

    // Function that provides sensor value in the range of [0.0, 1.0]

    //function getSensorValue(surfaceShadingPoint, sensorType) {
    //    // The `SurfaceShadingPoint.id` property matches one of the identifiers passed
    //    // to `generateSurfaceShadingData` function. In our case above, this will either
    //    // be "cafeteria-entrace-01" or "cafeteria-exit-01".
    //    const deviceId = surfaceShadingPoint.id;

    //    // Read the sensor data, along with its possible value range
    //    let sensorValue = readSensorValue(deviceId, sensorType);
    //    const maxSensorValue = getMaxSensorValue(sensorType);
    //    const minSensorValue = getMinSensorValue(sensorType);

    //    // Normalize sensor value to [0, 1.0]
    //    sensorValue = (sensorValue - minSensorValue) / (maxSensorValue - minSensorValue);
    //    return clamp(sensorValue, 0.0, 1.0);
    //}

    // This value can also be a room instead of a floor
    //const floorName = "01 - Entry Level";
    //dataVizExtn.renderSurfaceShading(floorName, sensorType, getSensorValue);

    //dataVizExtn.updateSurfaceShading(getSensorValue);

}

async function loadHeatmap() {
    const model = viewer.model;
    loadHeatmaps(model);
}

function hideObject() {
    //viewer.hide(4);
    for (var i = 0; i < allDbIdsStr.length; i++) {
        viewer.hide(parseInt(allDbIdsStr[i]));
    }
}

function openObject() {
    //viewer.show(4);
    for (var i = 0; i < allDbIdsStr.length; i++) {
        viewer.show(parseInt(allDbIdsStr[i]));
    }
}

async function setObjectTransparent() {
    //setTransparency(4, 0);
    setTransparentBuilding();
}

async function cancelObjectTransparent() {
    //setTransparency(4, 1);
    recoverTransparentBuilding();

}

async function test() {
    var model = viewer.model;
    var nodeId = 560;

    var fragList = viewer.model.getFragmentList();

    var fragIds = []

    model.getData().instanceTree.enumNodeFragments(
        nodeId, (fragId) => {
            fragIds.push(fragId)
        });

    fragIds.forEach((fragId) => {
        //获取材质
        var material = fragList.getMaterial(fragId);

        if (material) {
            //设置透明度
            material.opacity = 0;
            material.transparent = true;
            //标记更新
            material.needsUpdate = true
        }
    })

    //更新viewer
    viewer.impl.invalidate(true, true, true)

}

//------------ 剖面 ----------------------
async function getRemoteLevels() {
    const aecData = await Autodesk.Viewing.Document.getAecModelData(this.viewer.model.getDocumentNode());
    if (!aecData.levels) return null;

    const levels = aecData.levels;
    levels.sort((a, b) => b.elevation - a.elevation);
    return levels;
}

async function getLevelsData() {
    const data = await this.getRemoteLevels();
    this.levels = data;
}

function profile() {
    const upperIdx = 6;
    const upperCutPlaneParam = this.getCutPlaneParam(upperIdx, 1);
    const lowerIdx = 7;
    const lowerCutPlaneParam = this.getCutPlaneParam(lowerIdx, -1);
    this.viewer.setCutPlanes([upperCutPlaneParam, lowerCutPlaneParam]);
}
//----------------- end -----------------------------------------------