<main id="js-page-content" role="main" class="page-content">
    <div class="row">
        <div class="col-sm-12 col-xl-4 poisition-relative">
            <!-- <img src="img/clouds.png" class="img-fluid" style="min-height: 520px;"> -->
            <div id="forgeViewer"
                 class="position-absolute"
                 style="width: 96%; height: 96%"></div>
            <!-- <video playsInline autoPlay muted>
                        <source src="./media/video/TEST_RENDER.mp4" type="video/mp4" />
                    </video> -->
        </div>
        <div class="col-sm-12 col-xl-4">
            <div class="row">
                <div class="col-sm-6 col-xl-6">
                    <div class="p-3 bg-primary-300 rounded overflow-hidden position-relative text-white mb-g">
                        <div class="">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500">
                                <span id="todayUseElec">--</span>
                                <small class="m-0 l-h-n">今日用電量 kWH</small>
                            </h3>
                        </div>
                        <i class="fal fa-user position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1"
                           style="font-size: 6rem"></i>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-6">
                    <div class="p-3 bg-warning-400 rounded overflow-hidden position-relative text-white mb-g">
                        <div class="">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500">
                                <span id="yesUseElec">--</span>
                                <small class="m-0 l-h-n">昨日用電量 kWH</small>
                            </h3>
                        </div>
                        <i class="fal fa-gem position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4"
                           style="font-size: 6rem"></i>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div id="panel-2"
                         class="panel"
                         data-panel-sortable
                         data-panel-collapsed
                         data-panel-close>
                        <div class="panel-hdr">
                            <h2>昨日/今日用電比較 (kWh)</h2>
                        </div>
                        <div class="panel-container show">
                            <div class="panel-content poisition-relative">
                                <div class="p-1 position-absolute pos-right pos-top mt-3 mr-3 z-index-cloud d-flex align-items-center justify-content-center">
                                    <!--<div class="border-faded border-top-0 border-left-0 border-bottom-0 py-2 pr-4 mr-3 hidden-sm-down">
                                                            <div class="text-right fw-500 l-h-n d-flex flex-column">
                                                                <div class="h3 m-0 d-flex align-items-center justify-content-end">
                                                                    <div class='icon-stack mr-2'>
                                                                        <i class="base base-7 icon-stack-3x opacity-100 color-success-600"></i>
                                                                        <i class="base base-7 icon-stack-2x opacity-100 color-success-500"></i>
                                                                        <i class="fal fa-arrow-up icon-stack-1x opacity-100 color-white"></i>
                                                                    </div>
                                                                    $44.34 / GE
                                                                </div>
                                                                <span class="m-0 fs-xs text-muted">Increased Profit as per redux margins and estimates</span>
                                                            </div>
                                                        </div>
                                                        <div class="js-easy-pie-chart color-info-400 position-relative d-inline-flex align-items-center justify-content-center" data-percent="35" data-piesize="95" data-linewidth="10" data-scalelength="5">
                                                            <div class="js-easy-pie-chart color-success-400 position-relative position-absolute pos-left pos-right pos-top pos-bottom d-flex align-items-center justify-content-center" data-percent="65" data-piesize="60" data-linewidth="5" data-scalelength="1" data-scalecolor="#fff">
                                                                <div class="position-absolute pos-top pos-left pos-right pos-bottom d-flex align-items-center justify-content-center fw-500 fs-xl text-dark">78%</div>
                                                            </div>
                                                        </div>-->
                                </div>
                                <div style="width: 100%; min-height: 300px">
                                    <canvas class="chart" id="eveDayElecChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-xl-4">
            <div class="row">
                <div class="col-sm-6 col-xl-6">
                    <div class="p-3 bg-success-200 rounded overflow-hidden position-relative text-white mb-g">
                        <div class="">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500">
                                <span id="insPower">--</span>
                                <small class="m-0 l-h-n">即時功率 kW</small>
                            </h3>
                        </div>
                        <i class="fal fa-lightbulb position-absolute pos-right pos-bottom opacity-15 mb-n5 mr-n6"
                           style="font-size: 8rem"></i>
                    </div>
                </div>
                <div class="col-sm-6 col-xl-6">
                    <div class="p-3 bg-info-200 rounded overflow-hidden position-relative text-white mb-g">
                        <div class="">
                            <h3 class="display-4 d-block l-h-n m-0 fw-500">
                                <span id="insPowerPer">--</span>
                                <small class="m-0 l-h-n">即時契約容量占比 %</small>
                            </h3>
                        </div>
                        <i class="fal fa-globe position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4"
                           style="font-size: 6rem"></i>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div id="panel-3"
                         class="panel"
                         data-panel-sortable
                         data-panel-collapsed
                         data-panel-close>
                        <div class="panel-hdr">
                            <h2>本週/上週用電比較 (kWh)</h2>
                        </div>
                        <div class="panel-container show">
                            <div class="panel-content poisition-relative">
                                <!--<div class="pb-5 pt-3">
                                                      <div class="row">
                                                          <div class="col-6 col-xl-3 d-sm-flex align-items-center">
                                                              <div class="p-2 mr-3 bg-info-200 rounded">
                                                                  <span class="peity-bar" data-peity="{&quot;fill&quot;: [&quot;#fff&quot;], &quot;width&quot;: 27, &quot;height&quot;: 27 }">3,4,5,8,2</span>
                                                              </div>
                                                              <div>
                                                                  <label class="fs-sm mb-0">Bounce Rate</label>
                                                                  <h4 class="font-weight-bold mb-0">37.56%</h4>
                                                              </div>
                                                          </div>
                                                          <div class="col-6 col-xl-3 d-sm-flex align-items-center">
                                                              <div class="p-2 mr-3 bg-info-300 rounded">
                                                                  <span class="peity-bar" data-peity="{&quot;fill&quot;: [&quot;#fff&quot;], &quot;width&quot;: 27, &quot;height&quot;: 27 }">5,3,1,7,9</span>
                                                              </div>
                                                              <div>
                                                                  <label class="fs-sm mb-0">Sessions</label>
                                                                  <h4 class="font-weight-bold mb-0">759</h4>
                                                              </div>
                                                          </div>
                                                          <div class="col-6 col-xl-3 d-sm-flex align-items-center">
                                                              <div class="p-2 mr-3 bg-success-300 rounded">
                                                                  <span class="peity-bar" data-peity="{&quot;fill&quot;: [&quot;#fff&quot;], &quot;width&quot;: 27, &quot;height&quot;: 27 }">3,4,3,5,5</span>
                                                              </div>
                                                              <div>
                                                                  <label class="fs-sm mb-0">New Sessions</label>
                                                                  <h4 class="font-weight-bold mb-0">12.17%</h4>
                                                              </div>
                                                          </div>
                                                          <div class="col-6 col-xl-3 d-sm-flex align-items-center">
                                                              <div class="p-2 mr-3 bg-success-500 rounded">
                                                                  <span class="peity-bar" data-peity="{&quot;fill&quot;: [&quot;#fff&quot;], &quot;width&quot;: 27, &quot;height&quot;: 27 }">6,4,7,5,6</span>
                                                              </div>
                                                              <div>
                                                                  <label class="fs-sm mb-0">Clickthrough</label>
                                                                  <h4 class="font-weight-bold mb-0">19.77%</h4>
                                                              </div>
                                                          </div>
                                                      </div>
                                                  </div>-->
                                <div style="width: 100%; min-height: 300px">
                                    <canvas class="chart" id="eveWeekElecChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12 col-lg-8">
            <div class="row" id="sysSubBtnList"></div>
        </div>

        <div class="col-sm-12 col-lg-4">
            <div class="row h-100">
                <div class="col-lg-6">
                    <div id="panel-3" class="panel" style="height: calc(100% - 1.5rem)">
                        <div class="panel-hdr">
                            <h2>異常狀態</h2>
                        </div>
                        <div class="panel-container h-100 show">
                            <div class="panel-content poisition-relative p-0 row p-0 h-100">
                                <div class="col-12 mb-2 position-relative row m-0 justify-content-center"
                                     style="max-height: 150px">
                                    <canvas class="chart" id="errRecChart"></canvas>
                                </div>
                                <div class="col-12 mb-2 position-relative row m-0 justify-content-center"
                                     style="max-height: 150px">
                                    <canvas class="chart" id="errChkChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div id="panel-3" class="panel" style="height: calc(100% - 1.5rem)">
                        <div class="panel-hdr">
                            <h2>工單進度</h2>
                        </div>
                        <div class="panel-container h-100 show">
                            <div class="panel-content poisition-relative row p-0 h-100 p-0">
                                <div class="col-12 mb-2 position-relative row m-0 justify-content-center"
                                     style="max-height: 150px">
                                    <canvas class="chart" id="worOrdErrChart"></canvas>
                                </div>
                                <div class="col-12 mb-2 position-relative row m-0 justify-content-center"
                                     style="max-height: 150px">
                                    <canvas class="chart" id="worOrdFinChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<script>
    var tarElePath = "";
    var sysSubList = [];
    var viewer3DNodeIds = [];

    var eveDayElecChart = null;
    var eveWeekElecChart = null;
    var worOrdErrChart = null;
    var worOrdFinChart = null;
    var errRecChart = null;
    var errChkChart = null;
    var loadedCnt = 0;
    var chartDataCnt = {
        alarmCnt: 0,
        recCnt: 0,
        chkedErrCnt: 0,
        unChkedErrCnt: 0,
    };

    var sysIconList = [
        { mainSys: "EE", subSys: "E1", iconClass: "./gif/E1_white.png" },
        { mainSys: "EE", subSys: "E2", iconClass: "./gif/E2_white.png" },
        { mainSys: "EE", subSys: "E3", iconClass: "./gif/E3_white.png" },
        { mainSys: "EE", subSys: "E4", iconClass: "./gif/E4-1_white.png" }, // 電表
        { mainSys: "LT", subSys: "L1", iconClass: "./gif/L1_white.png" },
        { mainSys: "LT", subSys: "L2", iconClass: "./gif/L2_white.png" }, // 景觀照明 0131目前沒有
        { mainSys: "ME", subSys: "M1", iconClass: "./gif/M1_white.png" }, // 儲冰 0131目前沒有
        { mainSys: "ME", subSys: "M5", iconClass: "./gif/M5-2_white.png" }, // 送排風
        { mainSys: "ME", subSys: "M8", iconClass: "./gif/M8_white.png" }, // 排油煙0131目前沒有
        { mainSys: "ME", subSys: "M10", iconClass: "./gif/M10_white.png" },
        { mainSys: "ME", subSys: "M12", iconClass: "./gif/M12_white.png" },
        { mainSys: "ELEV", subSys: "EL", iconClass: "./gif/EL_white.png" },
        { mainSys: "FE", subSys: "F1", iconClass: "./gif/F1_white.png" },
        { mainSys: "FE", subSys: "F2", iconClass: "./gif/lamp_white.png" }, // 排煙 0131目前沒有
        { mainSys: "WP", subSys: "W1", iconClass: "./gif/W1_white.png" }, // 電子水表0131目前沒有
        { mainSys: "WP", subSys: "W2", iconClass: "./gif/W2_white.png" },
        { mainSys: "WP", subSys: "P1", iconClass: "./gif/P1_white.png" },
        { mainSys: "S", subSys: "C", iconClass: "./gif/C_white.png" }, // CCTV
        { mainSys: "S", subSys: "P", iconClass: "./gif/P_white.png" }, // 緊急求救
        { mainSys: "S", subSys: "R", iconClass: "./gif/R_white.png" }, // 門禁
        { mainSys: "P", subSys: "PSC", iconClass: "./gif/PSC_white.png" }, // 停管
        { mainSys: "W3", subSys: "W1", iconClass: "./gif/W3_white.png" }, // 0131目前沒有
    ];

    var tempSysSubText = [
        { text: "電梯系統", mainSys: "ELEV", subSys: "EL" }, // 1
        { text: "空調系統", mainSys: "ME", subSys: "M10" }, // 2
        { text: "照明系統", mainSys: "LT", subSys: "L1" }, // 3
        { text: "環境感測設備", mainSys: "ME", subSys: "M12" }, // 4
        { text: "電錶系統", mainSys: "EE", subSys: "E4" }, // 5
        { text: "供水系統", mainSys: "WP", subSys: "W2" }, // 6
        { text: "高壓配電盤", mainSys: "EE", subSys: "E1" }, // 7
        { text: "汙廢水設備", mainSys: "WP", subSys: "P1" }, // 8
        { text: "低壓配電盤", mainSys: "EE", subSys: "E2" }, //9
        { text: "緊急發電機", mainSys: "EE", subSys: "E3" }, //10
        { text: "消防設備", mainSys: "FE", subSys: "F1" }, //11
        { text: "CCTV系統", mainSys: "S", subSys: "C" }, //12
        { text: "門禁系統", mainSys: "S", subSys: "R" }, //13
        { text: "停管系統", mainSys: "P", subSys: "PSC" }, //14
        { text: "緊急求救系統", mainSys: "S", subSys: "P" }, //15
        { text: "送排風系統", mainSys: "ME", subSys: "M5" }, //16
        //{ text: "景觀照明系統", mainSys: "LT", subSys: "L2", },
        //{ text: "儲冰系統", mainSys: "ME", subSys: "M1", },
        // { text: "排油煙設備", mainSys: "ME", subSys: "M8", },
        //{ text: "排煙系統", mainSys: "FE", subSys: "F2", },
        //{ text: "電子水錶", mainSys: "WP", subSys: "W1", },
        // { text: "熱水系統", mainSys: "W3", subSys: "W1", },
    ];

    $(document).ready(function () {
        $(loadEle).Loading("start");
        $(loadEle).Loading("close");
        show3DModel();
        getSubList();
        getFirstEletric();
    });

    function demoSubList() {
        let isExiNames = $("#sysSubBtnList .dev-group button[id^=sysSubCardBtn]")
            .toArray()
            .map((x) => $(x).text());
        let strHtml = ``;

        $.each(tempSysSubText, (idx, obj) => {
            if (
                isExiNames.indexOf(obj.text) == -1 &&
                $("#sysSubBtnList .dev-group").length < 16
            ) {
                let iconObj = sysIconList.filter(
                    (x) => x.mainSys == obj.mainSys && x.subSys == obj.subSys
                )[0];
                strHtml = `<div class="btn-group btn-group-lg col-lg-3 mb-4 dev-group">
                              <button name="topFunBtn" data-page="alert" type="button" class="btn btn-secondary col-4 d-flex jusity-content-center">
                                  <img src="${iconObj.iconClass}" class="w-100"></img>
                                  </button>
                              <button id="sysSubCardBtn${obj.subSys}" type="button" class="btn btn-secondary" data-id="${obj.subSys}" style="font-size: 20px">${obj.text}</button>
                          </div>`;
                $("#sysSubBtnList").append(strHtml);
            }
        });
    }

    //取得 左下方 各系統小類
    function getSubList() {
        let url = baseApiUrl + "/api/Device/GetMainSub";
        let sendData = {
            building_tag: pageAct.buiTag,
        };
        objSendData.Data = sendData;
        ytAjax = new YourTeam.Ajax(
            url,
            objSendData,
            function (res) {
                if (!res || res.code != "0000" || !res.data) {
                } else {
                    let strHtml = ``;
                    let contest = ["E4", "EL", "L1", "M10", "M12"];
                    $.each(res.data.history_Main_Systems, (index, mainSysObj) => {
                        $.each(mainSysObj.history_Sub_systems, (index2, subSysObj) => {
                            if (contest.indexOf(subSysObj.sub_system_tag) != -1) {
                                sysSubList.push({
                                    sysMainTag: mainSysObj.main_system_tag,
                                    sysSubTag: subSysObj.sub_system_tag,
                                });
                            }
                            let iconClass = sysIconList.filter(
                                (x) =>
                                    x.mainSys == mainSysObj.main_system_tag &&
                                    x.subSys == subSysObj.sub_system_tag
                            )[0]?.iconClass;
                            strHtml += `<div class="btn-group btn-group-lg col-lg-3 mb-4 dev-group" data-id="/${pageAct.AreaTag}/${pageAct.buiTag}/${mainSysObj.main_system_tag}/${subSysObj.sub_system_tag}">
                              <button name="topFunBtn" data-page="alert" type="button" class="btn btn-secondary col-4">
                                  <img src="${iconClass}" class="w-100 "></img>
                                  </button>
                              <button id="sysSubCardBtn${subSysObj.sub_system_tag}" type="button" class="btn btn-secondary" data-id="${subSysObj.sub_system_tag}"  style="font-size: 20px">${subSysObj.full_name}</button>
                          </div>`;
                        });
                    });
                    $("#sysSubBtnList").html(strHtml);
                    demoSubList();
                }
            },
            null,
            "POST"
        ).send();
    }

    //取得第一筆電錶
    function getFirstEletric() {
        let url = baseApiUrl + "/api/Energe/GetElecBySubSysTag";

        ytAjax = new YourTeam.Ajax(
            url,
            null,
            function (res) {
                if (!res || res.code != "0000" || !res.data) {
                } else {
                    subSysElecList = res.data;
                    tarElePath =
                        subSysElecList.filter((x) => x.mainSubTag == "total")[0]
                            ?.system_device_tag ?? "";
                    getSubBaja();
                    getElectricBaja();
                    getChart();
                }
            },
            null,
            "POST"
        ).send();
    }

    function getSubBaja() {
        let devPath = tarElePath.split("_").slice(0, 8).join("/");
        let tempOrdPath = { devicePath: devPath };
        let myBaja = new subscriptionElectricmeter();

        myBaja.setSubscribeElectricmeterByBql(tempOrdPath);
        myBaja.setSubscribeElectricmeterCallBack(function (data) {
            if (data.point_name == "P") {
                let value = parseFloat(data.value).roundDecimal(2);
                $("#insPower").text(value);
                $("#insPowerPer").text((value / 4).roundDecimal(2));
            }
        });
        myBaja.setSubscribeElectricmeterEndCallBack(function () { });
    }

    //從 baja 取得電表用電量
    function getElectricBaja() {
        let devNum = tarElePath.split("_").slice(0, 8).join("_");
        let devPath = tarElePath.split("_").slice(0, 8).join("/");

        let today =
            displayDate(new Date(), "date").replaceAll("/", "-") + "T00:00:00";
        let prevTwoWeek =
            displayDate(getTimeByType(null, -14), "date").replaceAll("/", "-") +
            "T00:00:00";
        let yesterday =
            displayDate(getTimeByType(null, -1), "date").replaceAll("/", "-") +
            "T00:00:00";
        let tomorrow =
            displayDate(getTimeByType(null, 1), "date").replaceAll("/", "-") +
            "T00:00:00";

        // 今日用電量
        getElectricMeterDayDataByBaja(
            devNum + "_KWH",
            n4Sup,
            today,
            tomorrow,
            (data) => {
                let result = data?.data[0]?.sum;
                result = result ? parseFloat(result).toFixed(2) : 0;
                $("#todayUseElec").text(result);
            }
        );

        // 今日用電量 (每小時)
        getElectricMeterHourDataByBaja(
            devNum + "_KWH",
            n4Sup,
            yesterday,
            tomorrow,
            (data) => {
                let todayData = data.data.filter(
                    (x) =>
                        x.timestamp.$date.$year == getTimeByType("year") &&
                        x.timestamp.$date.$month == getTimeByType("month") &&
                        x.timestamp.$date.$day == getTimeByType("date")
                );
                let yesData = data.data.filter(
                    (x) =>
                        x.timestamp.$date.$year == getTimeByType("year", -1) &&
                        x.timestamp.$date.$month == getTimeByType("month", -1) &&
                        x.timestamp.$date.$day == getTimeByType("date", -1)
                );
                chartEveDaysElec(todayData, yesData);
            }
        );

        // 昨日用電量
        getElectricMeterDayDataByBaja(
            devNum + "_KWH",
            n4Sup,
            yesterday,
            today,
            (data) => {
                let result = data?.data[0]?.sum;
                result = result ? parseFloat(result).toFixed(2) : 0;
                $("#yesUseElec").text(result);
            }
        );

        // 本週與上週用電量 (每天)
        getElectricMeterDayDataByBaja(
            devNum + "_KWH",
            n4Sup,
            prevTwoWeek,
            tomorrow,
            (data) => {
                let curDay = new Date().getDay() == 0 ? 7 : new Date().getDay();
                let curWeekData = data.data.filter(
                    (x) =>
                        strToDate(displayDate(new Date(), "date"), null, 1 - 7) <=
                        strToDate(x.timestamp.$cEncStr)
                );
                let prevWeekData = data.data.filter(
                    (x) =>
                        strToDate(displayDate(new Date(), "date"), null, 1 - 14) <=
                        strToDate(x.timestamp.$cEncStr) &&
                        strToDate(new Date(), null, 1 - 7) >=
                        strToDate(x.timestamp.$cEncStr)
                );

                chartEveWeeksElec(curWeekData, prevWeekData);
            }
        );
    }

    function getChart() {
        // 異常數量與復歸數量
        getAlarmCountByBaja((aData) => {
            chartDataCnt.alarmCnt = aData;
        });
        getRecoverCountByBaja((rData) => {
            chartDataCnt.recCnt = rData;
        });
        // 異常數量與復歸數量
        getCheckedAckedCountByBaja((data) => {
            chartDataCnt.chkedErrCnt = data;
        });

        getUnCheckedAckedCountByBaja((uData) => {
            chartDataCnt.unChkedErrCnt = uData;
        });

        // 獲取所有異常數量
        getAlarmForChartDataByBaja((allAlarmCount) => {
            // 呼叫 api 找出所有有維修單的資料 (已派工)
            // 所有異常數量 - 維修單數量(已派工) = 未派工
            let url = baseApiUrl + "/operation/OpeRecListAllTime";
            const token = cookies.get("JWT-Authorization");
            fetch(url, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    Authorization: `bearer ${token}`,
                },
            })
                .then((res) => res.json())
                .then((data) => {
                    // console.log(allAlarmCount)
                    const { finish, notfinish } = data.data;
                    chartWorOrdFin([finish, notfinish]); // 已完成 未完成
                    chartWorOrdErr([
                        allAlarmCount - (finish + notfinish),
                        finish + notfinish,
                    ]);
                    chkBajaLoaded();
                });
        });
    }

    function chkBajaLoaded() {
        // loadedCnt++;

        // if (loadedCnt >= 9) {
        const ErrRecLabel = () => {
            const normal = `異常 ${chartDataCnt.alarmCnt}`;
            const offnormal = `復歸 ${chartDataCnt.recCnt}`;
            return [normal, offnormal];
        };

        const ErrChkLabel = () => {
            const acked = `已確認 ${chartDataCnt.chkedErrCnt}`;
            const unacked = `未確認 ${chartDataCnt.unChkedErrCnt}`;
            return [acked, unacked];
        };
        chartErrRec(ErrRecLabel, [chartDataCnt.alarmCnt, chartDataCnt.recCnt]);
        chartErrChk(ErrChkLabel, [
            chartDataCnt.chkedErrCnt,
            chartDataCnt.unChkedErrCnt,
        ]);
        $(loadEle).Loading("close");
        // }
    }

    // 圖表 - 今天與昨天用電量 (長條圖)
    function chartEveDaysElec(todayData, yesData) {
        let eveDayElecChartCanvas = $("#eveDayElecChart").get(0).getContext("2d");
        let curHour = new Date().getHours();
        todayData.data = todayData.filter((x) => x.timestamp.$time.$hour < curHour);
        yesData.data = yesData.filter((x) => x.timestamp.$time.$hour < curHour);
        let eveDayElecChartData = {
            labels: todayData?.data.map((x) => x.timestamp.$time.$hour),
            datasets: [
                {
                    id: "today",
                    type: "bar",
                    label: "今日用電量",
                    fill: false,
                    backgroundColor: color.success._500,
                    borderColor: color.success._500,
                    pointColor: color.success._500,
                    pointBackgroundColor: color.main1,
                    data: todayData?.data.map((x) => x.sum),
                    order: 1,
                },
                {
                    id: "yesterday",
                    type: "bar",
                    label: "昨日用電量",
                    fill: false,
                    backgroundColor: color.info._100,
                    borderColor: color.info._100,
                    pointColor: color.info._100,
                    pointBackgroundColor: color.info._100,
                    data: yesData?.data.map((x) => x.sum),
                    order: 2,
                },
            ],
        };

        let eveDayElecChartOptions = {
            maintainAspectRatio: false,
            responsive: true,
            legend: {
                display: true,
            },
            scales: {
                x: {
                    offset: true,
                    grid: { color: color.fusion._500 },
                },
                y: {
                    beginAtZero: true,
                    ticks: {
                        min: 0,
                    },
                },
            },
            tooltips: {
                callbacks: {
                    label: function (tooltipItem) {
                        let isTodayOrYes = tooltipItem.datasetIndex == 1 ? "昨日" : "今日";
                        return isTodayOrYes + "用電量 : " + tooltipItem.value + " kWH";
                    },
                    title: function (tooltipItem) {
                        let result =
                            tooltipItem[0].xLabel.toString().padStart(2, "0") + ":00";
                        return result;
                    },
                },
            },
        };

        if (eveDayElecChart == null) {
            eveDayElecChart = new Chart(eveDayElecChartCanvas, {
                data: eveDayElecChartData,
                options: eveDayElecChartOptions,
            });
            console.log(eveDayElecChart);
        } else {
            eveDayElecChart.data.datasets.forEach((dataset) => {
                if (dataset.order == 1) {
                    dataset.data.splice(
                        0,
                        dataset.data.length,
                        ...todayData?.data.map((x) => x.sum)
                    );
                    // dataset.data = todayData?.data.map((x) => x.sum);
                } else {
                    dataset.data.splice(
                        0,
                        dataset.data.length,
                        ...yesData?.data.map((x) => x.sum)
                    );
                    // dataset.data = yesData?.data.map((x) => x.sum);
                }
            });
            eveDayElecChart.update();
        }
    }

    // 圖表 - 這週與上週用電量 (長條圖)
    function chartEveWeeksElec(curWeekData, prevWeekData) {
        // console.log(curWeekData.map(x => x.sum),prevWeekData.map(x => x.sum))
        let eveWeekElecChartCanvas = $("#eveWeekElecChart").get(0).getContext("2d");

        let eveWeekElecChartData = {
            labels: curWeekData.map((x) =>
                dayToChiDay(strToDate(x.timestamp.$cEncStr, "day"))
            ),
            datasets: [
                {
                    id: "today",
                    type: "bar",
                    label: "本週用電量",
                    fill: false,
                    backgroundColor: color.success._500,
                    borderColor: color.success._500,
                    pointColor: color.success._500,
                    pointBackgroundColor: color.success._500,
                    data: curWeekData.map((x) => x.sum),
                    order: 1,
                },
                {
                    id: "yesterday",
                    type: "bar",
                    label: "上週用電量",
                    fill: false,
                    backgroundColor: color.info._100,
                    borderColor: color.info._100,
                    pointColor: color.info._100,
                    pointBackgroundColor: color.info._100,
                    data: prevWeekData.map((x) => x.sum),
                    order: 2,
                },
            ],
        };
        // console.log(eveWeekElecChartData)
        let eveWeekElecChartOptions = {
            maintainAspectRatio: false,
            responsive: true,
            legend: {
                display: true,
            },
            scales: {
                x: {
                    offset: true,
                    grid: { color: color.fusion._500 },
                },
                y: {
                    beginAtZero: true,
                    ticks: {
                        min: 0,
                    },
                },
            },
            tooltips: {
                callbacks: {
                    label: function (tooltipItem) {
                        let isTodayOrYes = tooltipItem.datasetIndex == 1 ? "上週" : "本週";
                        return isTodayOrYes + "用電量 : " + tooltipItem.value + " kWH";
                    },
                    title: function (tooltipItem) {
                        // console.log(tooltipItem)
                        let result = tooltipItem[0]?.xLabel.toString();
                        return result;
                    },
                },
            },
        };
        // console.log(eveWeekElecChartOptions)
        if (eveWeekElecChart == null) {
            eveWeekElecChart = new Chart(eveWeekElecChartCanvas, {
                data: eveWeekElecChartData,
                options: eveWeekElecChartOptions,
            });
            // console.log(eveWeekElecChart,eveWeekElecChartData, eveWeekElecChartOptions)
        } else {
            eveWeekElecChart.data.datasets.forEach((dataset) => {
                if (dataset.order == 1) {
                    dataset.data.splice(
                        0,
                        dataset.data.length,
                        ...curWeekData?.data.map((x) => x.sum)
                    );
                    // dataset.data = curWeekData.map((x) => x.sum);
                } else {
                    dataset.data.splice(
                        0,
                        dataset.data.length,
                        ...prevWeekData?.data.map((x) => x.sum)
                    );
                    // dataset.data = prevWeekData.map((x) => x.sum);
                }
            });
            eveWeekElecChart.update();
        }
    }

    // 圖表 - 異常與復歸圖表 (圓餅圖)
    function chartErrRec(labelsFn, datas) {
        let errRecChartCanvas = (ctx = $("#errRecChart").get(0).getContext("2d"));

        let errRecChartData = {
            labels: labelsFn(),
            datasets: [
                {
                    label: "數量",
                    unit: "個",
                    fill: true,
                    backgroundColor: [color.danger._500, color.info._300],
                    data: datas,
                },
            ],
        };

        let errRecChartOptions = {
            maintainAspectRatio: false,
            responsive: true,
            plugins: {
                legend: {
                    display: true,
                    labels: {
                        color: "#fff",
                    },
                },
            },
            tooltips: {
                enabled: true,
            },
        };

        // This will get the first returned node in the jQuery collection.
        if (errRecChart == null) {
            errRecChart = new Chart(errRecChartCanvas, {
                type: "pie",
                data: errRecChartData,
                options: errRecChartOptions,
            });
        } else if (
            datas[0] !== errRecChart.data.datasets[0].data[0] ||
            datas[1] !== errRecChart.data.datasets[0].data[1]
        ) {
            const newLable = labelsFn();
            errRecChart.data.labels.splice(0, 2, newLable[0], newLable[1]);
            errRecChart.data.datasets.forEach((dataset) => {
                dataset.data.splice(0, 2, datas[0], datas[1]);
            });
            errRecChart.update();
            // console.log("圖表 - 異常與復歸圖表 (圓餅圖)", labelsFn(), datas, errRecChart.data.datasets);
        }
    }

    // 圖表 - 異常確認與未確認圖表 (圓餅圖)
    function chartErrChk(labelsFn, datas) {
        let errChkChartCanvas = (ctx = $("#errChkChart").get(0).getContext("2d"));

        let errChkChartData = {
            labels: labelsFn(),
            datasets: [
                {
                    label: "數量",
                    unit: "個",
                    fill: true,
                    backgroundColor: [color.danger._500, color.info._300],
                    data: datas,
                },
            ],
        };

        let errChkChartOptions = {
            maintainAspectRatio: false,
            responsive: true,
            plugins: {
                legend: {
                    display: true,
                    labels: {
                        color: "#fff",
                    },
                },
            },
            tooltips: {
                enabled: true,
            },
        };

        if (errChkChart == null) {
            errChkChart = new Chart(errChkChartCanvas, {
                type: "pie",
                data: errChkChartData,
                options: errChkChartOptions,
            });
        } else if (
            datas[0] !== errChkChart.data.datasets[0].data[0] ||
            datas[1] !== errChkChart.data.datasets[0].data[1]
        ) {
            const newLable = labelsFn();
            errChkChart.data.labels.splice(0, 2, newLable[0], newLable[1]);
            errChkChart.data.datasets.forEach((dataset) => {
                dataset.data.splice(0, 2, datas[0], datas[1]);
            });
            errChkChart.update();
        }
    }

    // 圖表 - 異常未派工與異常已派工 (圓環圖)
    function chartWorOrdErr(datas) {
        let labels = [`未派工 ${datas[0]}`, `已派工 ${datas[1]}`];
        let worOrdErrChartCanvas = (ctx = $("#worOrdErrChart")
            .get(0)
            .getContext("2d"));

        let worOrdErrChartData = {
            labels: labels,
            datasets: [
                {
                    label: "數量",
                    unit: "個",
                    fill: true,
                    backgroundColor: [color.danger._500, color.info._300],
                    data: datas,
                },
            ],
        };

        let worOrdErrChartOptions = {
            maintainAspectRatio: false,
            responsive: true,
            plugins: {
                legend: {
                    display: true,
                    labels: {
                        color: "#fff",
                    },
                },
            },
            tooltips: {
                enabled: true,
            },
        };

        if (worOrdErrChart == null) {
            worOrdErrChart = new Chart(worOrdErrChartCanvas, {
                type: "doughnut",
                data: worOrdErrChartData,
                options: worOrdErrChartOptions,
            });
        } else if (
            datas[0] !== worOrdErrChart.data.datasets[0].data[0] ||
            datas[1] !== worOrdErrChart.data.datasets[0].data[1]
        ) {
            const newLable = labelsFn();
            worOrdErrChart.data.labels.splice(0, 2, newLable[0], newLable[1]);
            worOrdErrChart.data.datasets.forEach((dataset) => {
                dataset.data.splice(0, 2, datas[0], datas[1]);
            });
            worOrdErrChart.update();
        }
    }

    // 圖表 - 工單已完成與工單未完成 (圓環圖)
    function chartWorOrdFin(datas) {
        let labels = [`已完成 ${datas[0]}`, `未完成 ${datas[1]}`];
        let worOrdFinChartCanvas = (ctx = $("#worOrdFinChart")
            .get(0)
            .getContext("2d"));

        let worOrdFinChartData = {
            labels: labels,
            datasets: [
                {
                    label: "數量",
                    unit: "個",
                    fill: true,
                    backgroundColor: [color.danger._500, color.info._300],
                    data: datas,
                },
            ],
        };

        let worOrdFinChartOptions = {
            maintainAspectRatio: false,
            responsive: true,
            plugins: {
                legend: {
                    display: true,
                    labels: {
                        color: "#fff",
                    },
                },
            },
            tooltips: {
                enabled: true,
            },
        };

        if (worOrdFinChart == null) {
            worOrdFinChart = new Chart(worOrdFinChartCanvas, {
                type: "doughnut",
                data: worOrdFinChartData,
                options: worOrdFinChartOptions,
            });
        } else if (
            datas[0] !== worOrdFinChart.data.datasets[0].data[0] ||
            datas[1] !== worOrdFinChart.data.datasets[0].data[1]
        ) {
            const newLable = labelsFn();
            worOrdFinChart.data.labels.splice(0, 2, newLable[0], newLable[1]);
            worOrdFinChart.data.datasets.forEach((dataset) => {
                dataset.data.splice(0, 2, datas[0], datas[1]);
            });
            worOrdFinChart.update();
        }
    }

    // 從 baja 訂閱 左下角各系統小類異常狀態
    function getAlarmSub(data) {
        $.each(data.data, (idx, alaObj) => {
            if (alaObj.alarmClass.indexOf("_") != -1) {
                let mainSubSys = alaObj.alarmClass.split("_").slice(0, 2).join("/");
                const img = $(
                    `.btn-group.dev-group[data-id*='${mainSubSys}'] img`
                )[0]?.src.split(".");
                if (img?.length > 0) {
                    img[img.length - 1] = "gif";
                    $(`.btn-group.dev-group[data-id*='${mainSubSys}'] img`)[0].src =
                        img.join(".");
                    // console.log($(`.btn-group.dev-group[data-id*='${mainSubSys}'] img`)[0].src)
                    $(`.btn-group.dev-group[data-id*='${mainSubSys}'] img`).addClass(
                        "blink"
                    );
                }
            }
        });
        $(`.dev-group img.blink`).each((idx, ele) => {
            let devPath = $(ele).parents(".dev-group").data("id");
            let sysPath = devPath.split("/").slice(3, 5).join("/");
            let alaDevPath = data.data.map((x) =>
                x.alarmClass?.split("_").slice(0, 2).join("/")
            );
            if (alaDevPath.indexOf(sysPath) == -1) {
                const img = $(
                    `.btn-group.dev-group[data-id*='${sysPath}'] img`
                )[0]?.src.split(".");
                if (img?.length) {
                    img[img.length - 1] = "png";
                    $(`.btn-group.dev-group[data-id*='${sysPath}'] img`)[0].src =
                        img.join(".");
                    $(ele).removeClass("blink");
                }
            }
        });
    }

    function show3DModel() {
        launchViewerNoTools(pageAct.urn, (viewer) => {
            document.querySelector("#guiviewer3d-toolbar").style.display = "none";
            let elevOption = {
                selector: "#forgeViewer",
                viewer: viewer,
                ordPath: {
                    area_tag: pageAct.AreaTag,
                    building_tag: pageAct.buiTag,
                },
            };

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

    $(window).on("timeout:1h", function () {
        getElectricBaja();
    });
    $(window).on("timeout:3s", function () {
        if (
            $("#worOrdFinChart")?.get(0) &&
            $("#worOrdErrChart")?.get(0) &&
            $("#errRecChart")?.get(0) &&
            $("#errChkChart")?.get(0)
        ) {

            console.log("3s chart....");
            getChart();
        }
    });

    onEvent("click", "button[id^=sysSubCardBtn]", function () {
        let subSysTag = $(this).data("id");
        $(`#subSysBtn${subSysTag}`).click();
    });
</script>