<style>
</style>

<div class="row">
    <div id="leftDiv" class="col-sm-12 col-xl-6">

    </div>
    <div id="rightDiv" class="col-sm-12 col-xl-6">

    </div>
</div>

<!-- Modal center Add -->
<div class="modal fade" id="lightSchModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static"
     data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered" role="document" style="min-width:60%">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    燈控排程
                </h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"><i class="fal fa-times"></i></span>
                </button>
            </div>
            <div class="modal-body">
                <!--<table id="lightSchTable" class="table table-bordered table-striped text-center m-0 w-100">
                </table>-->
                <div id="lightSchBlock" style="height:60vh"></div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
                <button type="button" id="lightSchSavBtn" class="btn btn-primary">儲存</button>
            </div>
        </div>
    </div>
</div>

<script>
  var allDevList = [];  //全設備清單
  var alarmDbIdList = []; // 紀錄異常 forge 圓點，避免點擊與異常顏色衝突
  var subDeviceData = [];
  var heatMap = null;
  var buildMenuData = {};
  var forgeInvType = null;
  var forgeInvTypeDef = null;

  $(function () {
    getBuildMenu((arr, data) => {
      console.log("系統監控",arr, data)
      buildMenuData = data;
      if (arr.indexOf(4) != -1) {
        getFloDevList(arr[0] == 4 ? "left" : "right");
        setLightColor();
      }
      if (arr.indexOf(3) != -1) {
        getHotspotPoint(() => {
          show3DModel(data.urn_3D);
          getInviForge();
        });
      }
    });
  })

  // 依據 drawing type 決定呈現畫面
  function getHtmlByType(type = 0, data = {}) {
    let strHtml = ``;
    switch (type) {
      case 2:
        strHtml = `<div style="height:85vh">
                                <iframe src="${data.system_url}" width="100%" height="100%"></iframe>
                           </div>`;
        break;
      case 4:
        strHtml = `<div class="d-flex mb-4" style="gap:15px">
                                ${setTopLight()}
                            </div>

                            <div class="col-12 p-0" id="floDevList">

                            </div>`;
        break;
      case 3:
        strHtml = `<div class="d-flex mb-4" style="position: relative; gap:15px">
                                <div name="forgeViewer" style="position: absolute;width: 100%;height:85vh;">
                                ${setTopHeatBar()}
                                  </div>
                            </div>
                            `;
        break;
    }

    return strHtml;
  }
  //baja 訂閱設備
  function subDevice() {

    let myBaja = new subscriptionDevices();
    var ordPath = {
      "area_tag": pageAct.AreaTag,
      "building_tag": pageAct.buiTag,
      "system_tag": pageAct.sysMainTag,
      "name_tag": pageAct.sysSubTag,
    }
    myBaja.setSubscribeDevicesByBql(ordPath);
    myBaja.setSubscribeDevicesCallBack(function (data) {
      // console.log(data)
      let matchDevice = allDevList.filter(x => x.device_number == data.device_number_full)[0];
      if (!matchDevice) {
        return false;
      }

      //將訂閱值塞入 subDeviceData
      if (subDeviceData.findIndex(x => x.device_number == matchDevice.device_number) == -1) {
        let obj = {};
        obj.device_number = matchDevice.device_number;
        obj.dbid = matchDevice.forge_dbid;
        subDeviceData.push(obj)
      }

      let subData = subDeviceData.filter(x => x.device_number == matchDevice.device_number)[0];

      if (subData) {
        subData[data.point_name] = data.value;
      }

      let norDevPoiName = matchDevice.device_normal_point_name;
      let cloDevPoiName = matchDevice.device_close_point_name;
      let errDevPoiName = matchDevice.device_error_point_name;

      if (data.point_name == "SSC") {
        const lightOn = data.value.includes("true")
        setLightOpenOrClose(lightOn, matchDevice.device_guid);
        if (lightOn) {
          setLightValues(matchDevice.device_guid, 200, 0xe1cf18);
        } else {
          setLightValues(matchDevice.device_guid, 0, 0xe1cf18);
        }
      }

      if (data.point_name == "Temp") {
        console.log("Temp",data.device_number_full, parseInt(data.value))
        heatMap?.changeTemp(data.device_number_full, !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0);
        let devIdx = allDevList.findIndex(x => x.device_number == data.device_number_full);
        allDevList[devIdx]._temp = !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0;
      }

      if (data.point_name == norDevPoiName && data.value == matchDevice.device_normal_point_value) {
        //顯示正常燈號
        $(`#${matchDevice.device_number}_status`).attr("data-light-type", "normal").data("light-type", "normal");
      } else if (data.point_name == cloDevPoiName && data.value == matchDevice.device_close_point_value) {
        $(`#${matchDevice.device_number}_status`).attr("data-light-type", "close").data("light-type", "close");
      } else if (data.point_name == errDevPoiName && data.value == matchDevice.device_error_point_value) {
        $(`#${matchDevice.device_number}_status`).attr("data-light-type", "error").data("light-type", "error");
      }

      setLightColor();
      setForgeHotSpotColor(matchDevice);
      lightDevForgeSpotLig(matchDevice)
      // 從設備訂閱更新每個設備卡片即時點位
      setDevItemPoiValBySub(data);
    });

    myBaja.setSubscribeDeviceEndCallBack(function (data) {
      endPageLoading();
      if (data.findIndex(x => x.point_name == "Temp") != -1) {
        // 顯示溫度條
        showHeat("[name=forgeHeatBar]");
      }
    });

  }

  function lightDevForgeSpotLig(devObj) {


  }

  // 從設備訂閱更新每個設備卡片即時點位
  function setDevItemPoiValBySub(data) {

    let pointSpan = $(`.card.device-wrap[data-number=${data.device_number_full}] span[name=devItemPoiVal]`);
    if (pointSpan && pointSpan.data("point") == data.point_name) {
      // console.log(data)
      pointSpan.text(data.value);
    }
  }

  function setLightColor() {
    $("[data-light-type]").each((index, ele) => {
      let type = $(ele).data("light-type");
      let isFlashing = false;
      let color = "#000";
      switch (type) {
        case "normal":
          color = pageAct.sysSubObj.device_normal_color ?? "var(--theme-success)";
          isFlashing = pageAct.sysSubObj.device_normal_flashing == "1";
          break;
        case "close":
          color = pageAct.sysSubObj.device_close_color ?? "var(--theme-secondary)";
          isFlashing = pageAct.sysSubObj.device_close_flashing == "1";
          break;
        case "error":
          color = pageAct.sysSubObj.device_error_color ?? "var(--theme-danger)";
          isFlashing = pageAct.sysSubObj.device_error_flashing == "1";
          break;
      }
      $(ele).css("background-color", color);
      //是否閃爍
      if (isFlashing) {
        $(ele).parents(".card.device-wrap").addClass("light-flash");
      } else {
        $(ele).parents(".card.device-wrap").removeClass("light-flash");
      }
    })
  }

  // 設置昇位圖上方 燈號
  function setTopLight() {
    let sysSubObj = pageAct.sysSubObj;
    let strHtml = ``;
    if (sysSubObj.device_normal_point_name != null && sysSubObj.device_normal_point_value != null) {
      strHtml += ` <div class="row m-0 align-items-center">
                            <span id="sysNorLight" class="circle-light mr-2 " data-light-type="normal"></span>
                            <label class="mb-0">${sysSubObj.device_normal_text}</label>
                        </div>`;
    }
    if (sysSubObj.device_close_point_name != null && sysSubObj.device_close_point_value != null) {
      strHtml += ` <div class="row m-0 align-items-center">
                                    <span id="sysCloLight" class="circle-light mr-2" data-light-type="close"></span>
                                    <label class="mb-0">${sysSubObj.device_close_text}</label>
                            </div>`;
    }
    if (sysSubObj.device_error_point_name != null && sysSubObj.device_error_point_value != null) {
      strHtml += ` <div class="row m-0 align-items-center">
                            <span id="sysErrLight" class="circle-light mr-2" data-light-type="error"></span>
                            <label class="mb-0">${sysSubObj.device_error_text}</label>
                        </div>`;
    }

    return strHtml;
  }

  function setLightSchBlcok(obj) {
    let devNum = $(obj).parents(".device-wrap").data("number");
    let devPath = devNum.replaceAll("_", "/");
    let iframe = `<iframe src="/ord?station:%7Cslot:/${devPath}/Sch|view:?fullScreen=true" style="min-height:100px;width:100%;height:100%"></iframe>`
    $("#lightSchBlock").html(iframe);
  }

  // forge 3D 異常點位變紅色
  function setForgeHotSpotColor(device) {
    let subData = subDeviceData.filter(x => x.device_number == device.device_number)[0]
    if (subData && subData[device.device_error_point_name] == device.device_error_point_value && (!isNaN(parseInt(device.spriteDbid)) || !isNaN(parseInt(device._dbId)))) {
      const _dbId = parseInt(device.spriteDbid) || parseInt(device._dbId)
      alarmDbIdList = [...alarmDbIdList, _dbId]
      // console.log("異常", _dbId)
      changeColorForHotspot(_dbId, "error");
    } else if (subData[device.device_error_point_name] !== device.device_error_point_value && (!isNaN(parseInt(device.spriteDbid)) || !isNaN(parseInt(device._dbId)))) {
      const _dbId = parseInt(device.spriteDbid) || parseInt(device._dbId)
      let index = alarmDbIdList.findIndex(dbId => dbId == _dbId);
      index !== -1 && alarmDbIdList.splice(index, 1)
    }
  }

  // 取得昇位圖點位 (deviceItem)
  function getRiserPoiObj() {
    let tarDevItem = pageAct.devItems?.filter(x => x.is_show_riserDiagram == 1);
    if (tarDevItem && tarDevItem[0]) {
      return tarDevItem[0];
    }
    return null;
  }

  // 取得設備列表 並繪製卡片
  function getFloDevList(position = "left") {
    let url = baseApiUrl + "/api/Device/GetDeviceList";
    let sendData = {
      sub_system_tag: pageAct.sysSubTag,
      building_tag: pageAct.buiTag,
      floor_tag: pageAct.floTag,
    };
    objSendData.Data = sendData;
    ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
      if (!res || res.code != "0000" || !res.data) {

      } else {
        let strHtml = ``;
        $.each(res.data, (index, floObj) => {
          strHtml += `<div class='d-flex justify-content-start mb-5'>`
          strHtml += `<button id="floItemBtn${floObj.full_name}" type="button" class="btn btn-primary waves-effect waves-themed mr-5 mt-1 align-self-start" >${floObj.full_name}</button>`
          strHtml += `<div class="col p-0 d-grid grid-gap-5 grid-temp-col-c" style="--c-grid-temp-col:repeat(auto-fill,minmax(250px,1fr))">`
          $.each(floObj.device_list, (index2, devObj) => {
            allDevList.push(devObj);
            let devItem = getRiserPoiObj();
            strHtml += `<div class="card m-1 border device-wrap" data-number="${devObj.device_number}" data-position="${position}">
                                        <div class="card-body p-2">
                                            <div class="d-flex mb-2">
                                                <div  class="mr-5 cur-poi">
                                                    <span class="d-inline-block mr-3">
                                                        <img src="${baseImgUrl + varPathDevIcon + devObj.device_image}" class="profile-image rounded-circle" onerror="defDev(this)" alt="...">
                                                    </span>
                                                    <a name="devItemName" data-number="${devObj.device_number}" href="javascript:;">${devObj.full_name}</a>
                                                </div>
                                            </div>
                                        <div class="d-flex mb-0 mt-2 align-items-center">
                                                <span id="${devObj.device_number}_status" class="circle-light"></span>
                                                <span class="${devItem ? "" : "d-none"} ml-2">${devItem?.full_name}：<span name="devItemPoiVal" data-point="${devItem?.points}"></span>${devItem?.unit}</span>
                                                <a href="javascript:;" name="devItem" data-id="${devObj.device_guid}" data-number="${devObj.device_number}" data-name="${devObj.full_name}" class=" ml-2 mb-0 " data-toggle="tooltip" title="默认的 Tooltip">詳細資料</a>
                                            </div>
                                        </div>
                                    </div>`;
          })
          strHtml += "</div></div>";
        })
        // Niagara 產生 file 開頭字串問題
        strHtml = strHtml.replaceAll(`src="/file/`, `src="`);

        if (!res.data || res.data.length == 0) {
          endPageLoading();
        } else {
          // 訂閱 baja 設備
          subDevice();
        }

        // 繪製 html
        $("#floDevList").append(strHtml);

        // 存入 device 基本資料至元素 data 屬性
        $("#floDevList a[name=devItem]").each((idx, ele) => {
          if (allDevList.findIndex(x => x.device_number == $(ele).data("number")) != -1) {
            $(ele).data("devobj", allDevList.filter(x => x.device_number == $(ele).data("number"))[0]);
          }
        })

        // 初始化 pop 視窗
        initPopover();
        // 卡片設備名稱點擊事件
        devItemNameEvent();
      }
    }, null, "POST").send();
  }

  function getBuildMenu(callback = null) {
    let url = baseApiUrl + "/api/Device/GetBuildMenu";
    let sendData = {
      main_system_tag: pageAct.sysMainTag,
      sub_system_tag: pageAct.sysSubTag,
      building_tag: pageAct.buiTag,
    };
    objSendData.Data = sendData;
    ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
      if (!res || res.code != "0000" || !res.data) {

      } else {
        let leftData = {}, rightData = {};

        for (var key in res.data) {
          if (key.startsWith("left")) {
            leftData[key.split("left_")[1]] = res.data[key];
          } else if (key.startsWith("right")) {
            rightData[key.split("right_")[1]] = res.data[key];
          }
        }

        if (res.data.left_drawing != null) {
          $("#leftDiv").html(getHtmlByType(res.data.left_drawing, leftData));
        } else {
          $("#leftDiv").html(getHtmlByType(0, leftData));
        }
        if (res.data.right_drawing != null) {
          $("#rightDiv").html(getHtmlByType(res.data.right_drawing), rightData);
        } else {
          $("#rightDiv").html(getHtmlByType(0, rightData));
        }

        callback ? callback([res.data.left_drawing, res.data.right_drawing], res.data) : "";
      }
    }, null, "POST").send();
  }

  // Card 即時狀態
  function drawStateTabBlo(devNum) {
    let devPath = devNum.replaceAll("_", "/");
    let position = $(`.card.device-wrap[data-number=${devNum}]`).data("position") || "left";
    let width = buildMenuData[position + "_icon_click_url_width"] ? buildMenuData[position + "_icon_click_url_width"] + "px" : "100%";
    let height = buildMenuData[position + "_icon_click_url_height"] ? buildMenuData[position + "_icon_click_url_height"] + "px" : "100%";
    let strHtml
if(pageAct.sysSubTag == "C") {
  strHtml = `<div style="width:${width};height:${height};">
                            <iframe src="./px/CCTV/TEST_RENDER.mp4" style="width:${width};height:${height};"></iframe>
                       </div>`
} else {
  strHtml = `<div style="width:${width};height:${height};">
                            <iframe src="/ord?station:%7Cslot:/${devPath}|view:?fullScreen=true" style="width:${width};height:${height};"></iframe>
                       </div>`
}

    return strHtml;
  }

  function iframeResize(obj) {
    obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
  }

  function show3DModel(urn) {
    $(loadEle).Loading("start");
    launchViewerForHotspot(urn, (viewer, nodeIds) => {
      // 隱藏 toolbar
      document.querySelector("#guiviewer3d-toolbar").style.display = "none";
      let devDbIds = allDevList.map(x => x.forge_dbid);
      // 大類
      let subDevDbId = [];
      allDevList.forEach(({ device_nodes }) => {
        subDevDbId = [...subDevDbId, ...device_nodes.map(n => n.forge_dbid)]
      })
      // console.log(devDbIds, subDevDbId)
      // 從資料庫設定不可視模型的類型，若沒有取道該小類不可視類型，則套用資料庫設定預設類型
      if (forgeInvType) {
        setInviForge(forgeInvType, [...devDbIds, ...subDevDbId]);
      } else {
        setInviForge(forgeInvTypeDef, [...devDbIds, ...subDevDbId]);
      }

      $(loadEle).Loading("close");
      let sensorObjs = []
      let devices = []
      if (pageAct.sysSubTag === "M12") {
        addHotPoint(viewer)
        allDevList.forEach((device) => {
          const sensorObj = new Forge3DSensor({
            viewer: viewer,
            ordPath: {
              "area_tag": pageAct.AreaTag,
              "building_tag": pageAct.buiTag,
            },
            selector: "[name=forgeViewer]",
            elevCb: () => {
              let elevOption = {
                selector: "[name=forgeViewer]",
                viewer: viewer,
                ordPath: {
                  "area_tag": pageAct.AreaTag,
                  "building_tag": pageAct.buiTag,
                },
                sensorObjs
              }

              // 電梯移動訂閱程序載入
              let forge3DElev = new Forge3DElevFull(elevOption);
              forge3DElev.bajaEndCallback = function () {
                endPageLoading();
              }
              forge3DElev.init();
            },
            curDevice: {
              ...device,
              roomDbId: !isNaN(parseInt(device.room_dbid)) ? parseInt(device.room_dbid) : -1,
              id: device.device_number,
              position: isJSON(device.device_coordinate_3d) ? JSON.parse(device.device_coordinate_3d) : {}, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
              temp: 25,
              forge_dbid: parseInt(device.forge_dbid)
            }
          });
          sensorObjs.push(sensorObj)
        })
      } else {
        devices = allDevList.map(x => {
          return {
            roomDbId: !isNaN(parseInt(x.room_dbid)) ? parseInt(x.room_dbid) : -1,
            id: x.device_number,
            position: isJSON(x.device_coordinate_3d) ? JSON.parse(x.device_coordinate_3d) : {}, // x: 0, y: 25, z: -2.5      (3.35, -4.81, 12.88
            sensorTypes: ["temperature", "humidity"],
            temp: 30,
            forgeDbId: parseInt(x.forge_dbid)
          }
        })

        if ((pageAct.sysSubTag == "M12" || pageAct.sysSubTag == "ELEV") && elevatorShow) {
          let elevOption = {
            selector: "[name=forgeViewer]",
            viewer: viewer,
            ordPath: {
              "area_tag": pageAct.AreaTag,
              "building_tag": pageAct.buiTag,
            },
          }

          // 電梯移動訂閱程序載入
          let forge3DElev = new Forge3DElevFull(elevOption);
          forge3DElev.bajaEndCallback = function () {
            endPageLoading();
          }
          forge3DElev.init();
        }
      }

      let option = {
        devices: devices,
      }

      if (pageAct.sysMainTag !== "LT" && pageAct.sysSubTag !== "M12") {
        console.log(pageAct.sysSubTag, option)
        heatMap = new ADHeatMaps(option);
        heatMap.onComplete = () => {
          $.each(allDevList, (idx, dev) => {
            heatMap.changeTemp(dev.device_number, dev._temp || 0);
          })
        }
      }

      if (subDeviceData.length != 0) {
        let stSubArr = subDeviceData.map(x => Object.keys(x).filter(y => y == "ST").map(y => x));

        for (let sub of stSubArr) {
          let matchDevice = allDevList.filter(x => x.device_number == sub[0]?.device_number)[0];
          if (matchDevice) {
            setForgeHotSpotColor(matchDevice);
          }
        }
      }
      if (pageAct.sysSubTag == "W2") {
        // console.log("@@",pageAct, pageAct.sub_system_tag)
        getWaterNodeId(viewer);
      } else if (pageAct.sysSubTag == "E1") {
        getE1NodeId(viewer)
      }

    }, () => {
      $(loadEle).Loading("close");
    }, "[name=forgeViewer]");


  }

  // 供水系統 - 取得欲染色 dbid
  function getWaterNodeId() {
    // let url = baseApiUrl + "/api/Device/GetForgeNodeIdFromVar";
    // let sendData = { forgeNodeKey: "water_wupply" };
    // objSendData.Data = sendData;
    // ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
    //     if (!res || res.code != "0000" || !res.data) {

    //     } else {
    //         if (!isNaN(parseInt(res.data[0]?.system_value))) {
    //             changeColor(parseInt(res.data[0]?.system_value))
    //         }
    //         console.log(res.data)
    //     }
    // }, null, "POST").send();
    // console.log("1",viewer.model)
    viewer.model.search("給水", (nodeIds) => {
      // console.log("2",nodeIds)
      viewer.show(nodeIds)
    }, (e) => { console.log(e) })

  }


  // 高壓配電盤染色
  function getE1NodeId() {
    viewer.model.search("高壓電力", (nodeIds) => {
      // console.log("2",nodeIds)
      viewer.show(nodeIds)
    }, (e) => { console.log(e) })
  }

  function getHotspotPoint(callback = null) {
    let url = baseApiUrl + "/api/GetDevForCor";
    let sendData = {
      "device_area_tag": pageAct.AreaTag,
      "device_building_tag": pageAct.buiTag,
      "device_system_tag": pageAct.sysMainTag,
      "device_name_tag": pageAct.sysSubTag,
    };
    console.log(sendData)
    objSendData.Data = sendData;
    ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
      if (!res || res.code != "0000" || !res.data) {

      } else {

        let myDataList = [];
        $.each(res.data, (idx, data) => {
          let item = {};
          item.position = {};
          if (data.device_coordinate_3d != null && isJSON(data.device_coordinate_3d)) {
            item.position = JSON.parse(data.device_coordinate_3d);
          }
          $.extend(item, data);
          myDataList.push(item);
        })
        setHotspotPoint(myDataList);
        if (pageAct.sysMainTag == "LT") {
          setLightPoint(myDataList);
        }
        callback ? callback() : "";
      }
    }, null, "POST").send();

  }

  function setHotspotPoint(myDataList = []) {
    console.log("2", myDataList)
    getHopspotPoint(myDataList);
  }

  function setLightPoint(myDataList = []) {
    // console.log(myDataList)
    getLightData(myDataList);
  }

  // 取得 不可視 3D 模型類型
  function getInviForge() {
    let url = baseApiUrl + "/api/Device/GetForgeInvType";

    ytAjax = new YourTeam.Ajax(url, null, function (res) {
      if (!res || res.code != "0000" || !res.data) {

      } else {
        let datas = res.data;

        forgeInvType = datas.filter(x => x.sub_system_tag == pageAct.sysSubTag)[0]?.invisible_value;
        forgeInvTypeDef = datas.filter(x => x.invisible_type == "default_value")[0]?.invisible_value;
      }
    }, null, "POST").send();
  }

  // 設置 模型隱藏或透明
  function setInviForge(type, devDbIds) {
    if (type == "Hide") {
      hideAllObjects(devDbIds);
    } else if (type == "Opacity") {
      setTransparentBuilding(0, devDbIds);
    }
  }

  var parentEle = "";
  onEvent("autodesk:click:sprite", "[name=forgeViewer]", function (e, obj) {
    forgeUnFocusAll();
    let rect = $("[name=forgeViewer]")[0].getBoundingClientRect();
    let position = [rect.left + rect.width / 2, rect.top + rect.height / 3]
    // console.log(position)
    // let position = [obj.event.target.toolController.lastClickX - 300, obj.event.target.toolController.lastClickY - 300];
    let devObj = obj.myData;
    let name = allDevList.filter(x => x.device_guid == devObj.device_guid)[0]?.full_name || devObj.full_name;
    devObj.full_name = name;
    parentEle = crePosPopover(position, devObj);
    $(parentEle).click();
  })

  onEvent("autodesk:clickOut:sprite", "[name=forgeViewer]", function (e) {
    $(parentEle).YTTooltip("hide");
  })

  onEvent("autodesk:complete:sprite", "[name=forgeViewer]", function (e, obj) {
    $("#floDevList a[name=devItem]").each((idx, ele) => {
      let devNum = $(ele).data("number");
      let dbid = obj.myDataList.filter(x => x.device_number == devNum)[0]?._dbId;
      allDevList.forEach((dev, idx) => {
        if (dev.device_number == devNum) {
          dev.spriteDbid = dbid;
          setForgeHotSpotColor(dev);
        }
      })
      $(ele).data("dbId", dbid);

    })
  })

  onEvent("yt:tooltip:show", "[name=devItem]", function (e, obj) {
    forgeUnFocusAll();
  })

  function forgeUnFocusAll() {
    $("#floDevList a[name=devItem]").each((idx, ele) => {
      const eleDbId = $(ele).data("dbId")
      if (alarmDbIdList.some(dbId => dbId == eleDbId)) {
        changeScaleForHotspot(eleDbId, false)
        return
      }
      else {
        // 3D 熱點解除
        controlFocusHotspot(eleDbId, false);
      }
    })
  }
</script>