<main id="js-page-content" role="main" class="page-content">
    <div class="row">
        <div class="col-12">
            <div class="btn-group mb-3">
                <button type="button" class="btn btn-secondary waves-effect waves-themed active" data-id="0" data-tabname="energyTab">用電管理</button>
                <button type="button" class="btn btn-secondary waves-effect waves-themed" data-id="1" data-tabname="energyTab">天然氣管理</button>
                <button type="button" class="btn btn-secondary waves-effect waves-themed" data-id="2" data-tabname="energyTab">水資源管理</button>
                <button type="button" class="btn btn-secondary waves-effect waves-themed" data-id="3" data-tabname="energyTab">再生能源</button>
            </div>
            
        </div>
        <div class="row col-12">
            <div class="row col-xl-6 m-0 p-0">
                <div id="eneSubSysList" class="row col-12 m-0 p-0"></div>

                <div class="col-sm-12 col-xl-12 align-self-end">
                    <div id="panel-2" class="panel panel-locked mb-0" data-panel-sortable data-panel-collapsed data-panel-close>
                        <div class="panel-hdr">
                            <h2>
                                <span id="actSubSysText"></span> - 用電狀況
                            </h2>
                        </div>
                        <div class="panel-container show">
                            <div class="row">
                                <div class="col-sm-12 col-lg-6 d-flex flex-column">
                                    <h4 class="p-3">今日耗電量 kWh</h4>
                                    <div class="panel-content poisition-relative" style="min-height: 346.84px;">
                                        <div id="todayElecNoData" class="row justify-content-center align-items-center h-100" style="display:none;">
                                            <h4>無資料</h4>
                                        </div>
                                        <div style="width:100%; min-height:300px;">
                                            <canvas class="chart" id="todayElecChart"></canvas>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-lg-6 d-flex flex-column">
                                    <h4 class="py-3">用電比較</h4>
                                    <div id="elecCompNoData" class="row justify-content-center align-items-center h-100" style="display:none;">
                                        <h4>無資料</h4>
                                    </div>
                                    <div style="width:100%; min-height:300px;">
                                        <canvas class="chart" id="elecCompChart"></canvas>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="elecAutoReq" class="row flex-column col-xl-6 m-0 p-0">
                <div class="col-auto mb-2">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h4 class="mb-0"><i class="fal fa-server"></i> 自動需量管理</h4>
                                <a href="#" class="btn btn-success"><i class="fal fa-pencil"></i> Edit</a>
                            </div>
                            <div class="row align-items-center">
                                <div class="col-sm-12 col-lg-5">
                                    <p class="card-text color-white pl-5 pr-3 d-flex justify-content-between">
                                        <span>契約容量</span>
                                        <span>1000 kW</span>
                                    </p>
                                    <p class="card-text color-white pl-5 pr-3 d-flex justify-content-between">
                                        <span>警戒容量</span>
                                        <span>800 kW</span>
                                    </p>
                                    <p class="card-text color-white pl-5 pr-3 d-flex justify-content-between">
                                        <span>復歸值</span>
                                        <span>600 kW</span>
                                    </p>
                                </div>
                                <div class="col-sm-12 col-lg-7">
                                    <img src="img/clouds.png" class="img-fluid" style="min-height: 220px;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row col mx-0">
                    <ul class="nav nav-tabs w-100 align-items-end" role="tablist">
                        <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#tab_borders_icons-1" role="tab">自動卸載設定</a> </li>
                        <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab_borders_icons-2" role="tab">手動卸載控制</a> </li>
                    </ul>
                    <div class="tab-content border border-top-0 p-3 w-100">
                        <div class="tab-pane fade show active" id="tab_borders_icons-1" role="tabpanel">
                            <div class="frame-wrap">
                                <table class="table table-bordered table-striped text-center m-0">
                                    <thead class="thead-themed">
                                        <tr>
                                            <th>日期</th>
                                            <th>開始-結束</th>
                                            <th>卸載時長<br>minutes</th>
                                            <th>預計卸載量<br>kW</th>
                                            <th>是否啟用</th>
                                            <th>名稱</th>
                                            <th>功能</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>2022-09-01</td>
                                            <td>11:00:00<br>11:30:00</td>
                                            <td>30</td>
                                            <td>40</td>
                                            <td><input type="checkbox"> 啟用</td>
                                            <td>停車場單號照明</td>
                                            <td><a href="#" class="btn btn-info">修改</a></td>
                                        </tr>
                                        <tr>
                                            <td>2022-09-01</td>
                                            <td>11:00:00<br>11:30:00</td>
                                            <td>30</td>
                                            <td>40</td>
                                            <td><input type="checkbox"> 啟用</td>
                                            <td>停車場單號照明</td>
                                            <td><a href="#" class="btn btn-info">修改</a></td>
                                        </tr>
                                        <tr>
                                            <td>2022-09-01</td>
                                            <td>11:00:00<br>11:30:00</td>
                                            <td>30</td>
                                            <td>40</td>
                                            <td><input type="checkbox"> 啟用</td>
                                            <td>停車場單號照明</td>
                                            <td><a href="#" class="btn btn-info">修改</a></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="tab_borders_icons-2" role="tabpanel">
                            <div class="frame-wrap">
                                <div class="mb-3"> <a href="#" class="btn btn-success">+ 新增</a> </div>
                                <table class="table table-bordered table-striped text-center m-0">
                                    <thead class="thead-themed">
                                        <tr>
                                            <th>編號</th>
                                            <th>名稱</th>
                                            <th>建立人</th>
                                            <th>建立時間</th>
                                            <th>功能</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>平台管理員</td>
                                            <td>王小明</td>
                                            <td>2022-05-02 12:08</td>
                                            <td><a href="#" class="btn btn-info">修改</a> <a href="#" class="btn btn-danger">刪除</a></td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>平台運維</td>
                                            <td>王小明</td>
                                            <td>2022-05-02 12:08</td>
                                            <td>
                                                <div class="custom-control custom-switch">
                                                    <input type="radio" class="custom-control-input" id="customSwitch2radio" checked="" name="defaultSwitchRadioExample">
                                                    <label class="custom-control-label" for="customSwitch2radio">Checked</label>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>客戶管理員</td>
                                            <td>王小明</td>
                                            <td>2022-05-02 12:08</td>
                                            <td><a href="#" class="btn btn-info">修改</a> <a href="#" class="btn btn-danger">刪除</a></td>
                                        </tr>
                                        <tr>
                                            <td>4</td>
                                            <td>客戶運維</td>
                                            <td>王小明</td>
                                            <td>2022-05-02 12:08</td>
                                            <td><a href="#" class="btn btn-info">修改</a> <a href="#" class="btn btn-danger">刪除</a></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

           

        </div>

    </div>





</main>

<script>
    var subSysList = [];
    var subSysElecList = [];
    var todayElecChart = null;
    var elecCompChart = null;
    var elecCardConText = [{ text1: "即時功耗 kW", text2:"佔比 %"},{ text1: "即時功耗 kW", text2:"佔比 %"},{ text1: "即時功耗 kW", text2:"佔比 %"},{ text1: "即時發電功率 kW", text2:"供電佔比 %"}]

    $(function () {
        getSubSysList();
        getElecBySubSysTag();
    })

    // 左上方 系統小類卡片區塊
    function getSubSysList(type = 0) {
        subSysList = [];
        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 = '';
                $.each(res.data.history_Main_Systems, (index, mainSysObj) => {
                    $.each(mainSysObj.history_Sub_systems, (index2, subSysObj) => {
                        subSysList.push(subSysObj);
                        if (type == 0 || (type == 3 && mainSysObj.main_system_tag == "ELEV")) { 
                            strHtml += `<div class="col-sm-12 col-xl-4 mb-2">
                                            <div class="card elecCard cur-poi" data-id="${mainSysObj.main_system_tag}_${subSysObj.sub_system_tag}" data-name="${subSysObj.full_name}">
                                                <div class="card-body">
                                                    <h4 class="card-title color-white">${subSysObj.full_name}用電</h4>
                                                    <p class="card-text color-white pl-5 pr-3 d-flex justify-content-between">
                                                        <span>${elecCardConText[type]?.text1}</span>
                                                        <span id="insPow${mainSysObj.main_system_tag}_${subSysObj.sub_system_tag}"></span>
                                                    </p>
                                                    <p class="card-text color-white pl-5 pr-3 d-flex justify-content-between">
                                                        <span>${elecCardConText[type]?.text2}</span>
                                                        <span id="insPowPer${mainSysObj.main_system_tag}_${subSysObj.sub_system_tag}"></span>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>`;
                        }
                    })
                })
                if (type == 3) {
                    strHtml += `<div class="col-sm-12 col-xl-4 mb-2">
                                            <div class="card elecCard cur-poi">
                                                <div class="card-body">
                                                    <h4 class="card-title color-white">太陽能設備用電</h4>
                                                    <p class="card-text color-white pl-5 pr-3 d-flex justify-content-between">
                                                        <span>${elecCardConText[type]?.text1}</span>
                                                        <span id="insPow">---</span>
                                                    </p>
                                                    <p class="card-text color-white pl-5 pr-3 d-flex justify-content-between">
                                                        <span>${elecCardConText[type]?.text2}</span>
                                                         <span id="insPow">---</span>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>`;
                }
                $("#eneSubSysList").html(strHtml);
            }
        }, null, "POST").send();

    }

    // 取得 對應系統小類的總電錶
    function getElecBySubSysTag() {
        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;
                getBajaData();
            }
        }, null, "POST").send();
    }

    // 取得 baja 即時資料
    function getBajaData() {
        startPageLoading();
        let yesterday = displayDate(getTimeByType(null, -1), "date").replaceAll("/", "-") + "T00:00:00";
        let tomorrow = displayDate(getTimeByType(null, 1), "date").replaceAll("/", "-") + "T00:00:00";
        let prevThirtyDay = displayDate(getTimeByType(null, -30), "date").replaceAll("/", "-") + "T00:00:00";
        let lastTimeout = null;
        let totalPow = 0;
        let loadedCnt = 0;
        
        // 取系統小類 總即時功率 (total)
        let devPath = subSysElecList.filter(x => x.mainSubTag == "total")[0]?.system_device_tag?.split("_").slice(0, 8).join("/");
        if (devPath) { 
            getElectricMeterNoweDataByBaja(devPath, (data) => {
                data = data.data;
                let result = data.filter(x => x.name == "P")[0]?.value;
                result = result ? result.roundDecimal(2) : 0;
                totalPow = result;
                chkBajaLoaded();
            })
        }
        // 每個系統小類 即時功率
        $.each(subSysElecList, (idx, elecObj) => {
            let devPath = elecObj.system_device_tag?.split("_").slice(0, 8).join("/");
            getElectricMeterNoweDataByBaja(devPath, (data) => {
                data = data.data;
                let result = data.filter(x => x.name == "P")[0]?.value;
                result = result ? result.roundDecimal(2) : 0;
                $(`#insPow${elecObj.mainSubTag}`).text(result);
                $(`#insPowPer${elecObj.mainSubTag}`).text((result / totalPow * 100).roundDecimal(2) + " %");
                clearTimeout(lastTimeout);
                lastTimeout = setTimeout(() => {
                    chkBajaLoaded();
                }, 10)
            })

            // 無對應資料系統小類
            if (idx == subSysElecList.length - 1) {
                let mainSubTags = subSysElecList.filter(x => x.mainSubTag);
                $(".elecCard [id^=insPow]").each((idx, ele) => {
                    let tarMainSubTag = $(ele).prop("id").split("insPow")[1];
                    if (mainSubTags.indexOf(tarMainSubTag) == -1) {
                        $(ele).text("---");
                    }
                })
            }
        })

        onEvent("click", ".elecCard", function() {
            let tarMainSubTag = $(this).data("id");
 
            $("#actSubSysText").text($(this).data("name"));
            $("#todayElecNoData,#elecCompNoData").hide();
            $("#todayElecChart,#elecCompChart").parent().show();
            
            // 空調系統 今日用電量 (每小時)
            let tarDevNum = subSysElecList.filter(x => x.mainSubTag == tarMainSubTag)[0]?.system_device_tag;
            if (!tarDevNum) { 
                $("#todayElecNoData,#elecCompNoData").show();
                $("#todayElecChart,#elecCompChart").parent().hide();
                elecCompChart?.destroy();
                todayElecChart?.destroy();
                return;
            }

            getElectricMeterHourDataByBaja(tarDevNum + "_KWH", "Mitsubishi_Sup", 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"));
                chartTodaysElec(todayData);
                chkBajaLoaded();
            })

            // 空調系統 今日與30日內平均用電比較
            getElectricMeterDayDataByBaja(tarDevNum + "_KWH", "Mitsubishi_Sup", prevThirtyDay, tomorrow, (data) => {
                let curDay = (new Date()).getDay() == 0 ? 7 : (new Date()).getDay();
                let eveWeek = [];
                let curWeekData = data.data.filter(x => strToDate(displayDate(new Date(), "date"), null, 0 - (curDay - 1)) <= strToDate(x.timestamp.$cEncStr));
                
                for (let i = 1; i <= curDay; i++) {
                    let tarDayData = data.data.filter(x => strToDate(x.timestamp.$cEncStr, "day") == i);
                    let tarDayElecs = tarDayData.map(x => x.sum);
                    eveWeek.push(tarDayElecs.sum() / tarDayElecs.length);
                }

                chartEveWeeksElec(curWeekData, eveWeek)
                chkBajaLoaded();
            })
        })
        
        $(".elecCard").first().click();

        function chkBajaLoaded() {
            
            loadedCnt++;
            if (loadedCnt == 2) {
                endPageLoading();
            }
        }
    }

    // 圖表 - 今天用電量 (折線圖)
    function chartTodaysElec(todayData) {
        let todayElecChartCanvas = $('#todayElecChart').get(0).getContext('2d');
        let curHour = (new Date()).getHours();
        todayData.data = todayData.filter(x => x.timestamp.$time.$hour < curHour);
        let todayElecChartData = {
            labels: todayData?.data.map(x => x.timestamp.$time.$hour),
            datasets: [
                {
                    type: 'line',
                    label: '今日用電量',
                    fill: false,
                    data: todayData?.data.map(x => x.sum),
                    borderColor: color.success._500,
                    backgroundColor: color.success._500,
                    pointBackgroundColor: color.success._500,

                    order: 1,
                    borderWidth: 3,
                }
            ]
        }

        let todayElecChartOptions = {
            maintainAspectRatio: false,
            responsive: true,
            legend: {
                display: true,
            },
            scales: {
                xAxes: [{
                    offset: true,
                    gridLines: { color: color.fusion._500 },
                    ticks: {
                        callback: function (value, index, ticks) {
                            return value
                        }
                    },
                }],
                yAxes: [{

                    ticks: {
                        min: 0,
                        beginAtZero: true
                    },
                }]
            },
            tooltips: {
                callbacks: {
                    label: function (tooltipItem) {
                        return "用電量 : " + tooltipItem.value + " kWH";
                    },
                    title: function (tooltipItem) {
                        let result = tooltipItem[0].xLabel.toString().padStart(2, "0") + ":00";
                        return result;
                    }
                }
            },
        }

        // This will get the first returned node in the jQuery collection.
        todayElecChart = new Chart(todayElecChartCanvas, {
            data: todayElecChartData,
            options: todayElecChartOptions
        })
    }

    // 圖表 - 今日與30日內平均用電量比較 (長條圖)
    function chartEveWeeksElec(curWeekData, avgData) {

        let elecCompChartCanvas = $('#elecCompChart').get(0).getContext('2d');
        let elecCompChartData = {
            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: "avg",
                    type: "bar",
                    label: '30日內平均用電量',
                    fill: false,
                    backgroundColor: color.info._100,
                    borderColor: color.info._100,
                    pointColor: color.info._100,
                    pointBackgroundColor: color.info._100,
                    data: avgData,
                    order: 2,
                }
            ]
        }

        let elecCompChartOptions = {
            maintainAspectRatio: false,
            responsive: true,
            legend: {
                display: true,
            },
            scales: {
                xAxes: [{
                    offset: true,
                    gridLines: { color: color.fusion._500 },
                    ticks: {
                        callback: function (value, index, ticks) {
                            return value
                        }
                    },
                }],
                yAxes: [{

                    ticks: {
                        min: 0,
                        beginAtZero: true
                    },
                }]
            },
            tooltips: {
                callbacks: {
                    label: function (tooltipItem) {
                        let isTodayOrYes = tooltipItem.datasetIndex == 1 ? "上週" : "本週";
                        return isTodayOrYes + "用電量 : " + tooltipItem.value + " kWH";
                    },
                    title: function (tooltipItem) {
                        let result = tooltipItem[0].xLabel.toString();
                        return result;
                    }
                }
            },
        }

        // This will get the first returned node in the jQuery collection.
        elecCompChart = new Chart(elecCompChartCanvas, {
            data: elecCompChartData,
            options: elecCompChartOptions
        })
    }

    onEvent("yt:tab:change", "[data-tabname=energyTab]", function () {
        $("#eneSubSysList").parent("div").show();
        let type = $(this).data("id");
        getSubSysList(type);
        getElecBySubSysTag();
        if (type == "1" || type == "2") {
            $("#eneSubSysList").parent("div").hide();
        }
        // 自動需量
        if (type != "0") {
            $("#elecAutoReq").hide();
        } else {
            $("#elecAutoReq").show();
        }
    })
</script>