@{
    ViewData["MainNum"] = "1";
    ViewData["SubNum"] = "2";
    ViewData["Title"] = "電站總覽";
}

<ol class="breadcrumb page-breadcrumb">
    <li class="breadcrumb-item"><a href="javascript:void(0);">總覽</a></li>
    <li class="breadcrumb-item active">@ViewData["Title"]</li>
    <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
</ol>

<!-- Your main content goes below here: -->
<div class="row">
    <div class="col-xl-12">
        <div id="panel-5" class="panel">
            <div class="panel-container show">
                <div class="panel-content">
                    <div class="subheader">
                        <h1 class="subheader-title"> 電站分佈區域 </h1>
                    </div>
                    <div class="row mb-3 d-flex align-items-center px-3">
                        <div class="pr-3">
                            <button type="button" class="btn btn-secondary waves-effect waves-themed" onclick="Allcity()">全選</button>
                        </div>
                        <div class="pr-3">
                            <div class="frame-wrap" id="citytest">
                                <button type="button" class="btn btn-outline-success waves-effect waves-themed">
                                    新北市
                                    <span class="badge bg-success-700 ml-2" id="acount">4</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-3 d-flex align-items-top px-3">
                        <div class="col-1 p-0">
                            <button type="button" class="btn btn-secondary waves-effect waves-themed" onclick="AllStatus()">全選</button>
                        </div>
                        <div class="col-11 p-2">
                            <div class="row frame-wrap" id="CheckStatus">
                                <div class="col-2 mb-2 custom-control custom-checkbox d-flex align-content-center">
                                    <input type="checkbox" class="custom-control-input" id="Status_1" checked="">
                                    <label class="custom-control-label" for="Status_1">設備正常 <i class="btn btn-success btn-sm btn-icon rounded-circle waves-effect waves-themed fal fa-check"></i></label>
                                </div>
                                <div class=" col-2 mb-2 custom-control custom-checkbox align-content-center">
                                    <input type="checkbox" class="custom-control-input" id="Status_2" checked="">
                                    <label class="custom-control-label" for="Status_2">設備斷線  <i class="btn btn-warning btn-sm btn-icon rounded-circle waves-effect waves-themed fal fa-exclamation"></i></label>
                                </div>
                                <div class="col-2 mb-2 custom-control custom-checkbox align-content-center">
                                    <input type="checkbox" class="custom-control-input" id="Status_3" checked="">
                                    <label class="custom-control-label" for="Status_3">設備異常  <i class="btn btn-danger btn-sm btn-icon rounded-circle waves-effect waves-themed fal fa-horizontal-rule"></i></label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-3 d-flex align-items-center px-3">
                        <div class="pr-3">
                            <label>排序條件</label>
                        </div>
                        <div class="pr-3">
                            <div class="frame-wrap" >
                                <select class="form-control" id="kwh_order">
                                    <option value="0">發電量 - 正序</option>
                                    <option value="1">發電量 - 倒序</option>
                                </select>
                            </div>
                        </div>
                        <div class="pr-3">
                            <div class="frame-wrap" >
                                <select class="form-control" id="pr_order">
                                    <option value="0">PR值 - 正序</option>
                                    <option value="1">PR值 - 倒序</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div id="area" class="tab-content p-3">
                        <div class="row mb-5">
                            <div class="card-columns">
                                <div class="card">
                                    <div class="card-header bg-fusion-25 py-2 pr-3 d-flex align-items-center flex-wrap">
                                        <h4 class="mb-0 font-weight-bold"><span class="fal fa-bolt mr-1"></span> 發電量</h4>
                                        <div class="ml-auto">kW h</div>
                                    </div>
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between">
                                            <p>今日發電量</p>
                                            <p><span class="color-info-700" id="today_kwh">126,161.72</span></p>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <p>累積發電量</p>
                                            <p><span class="color-info-700" id="total_kwh">4,069.73</span></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header bg-fusion-25 py-2 pr-3 d-flex align-items-center flex-wrap">
                                        <h4 class="mb-0 font-weight-bold"><span class="fal fa-sun mr-1"></span> 日照度</h4>
                                        <div class="ml-auto">k W/m<sup>2</sup></div>
                                    </div>
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between">
                                            <p>即時平均日照度</p>
                                            <p><span class="color-info-700" id="today_irradiance">126,161.72</span></p>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <p>平均日照度(30天)</p>
                                            <p><span class="color-info-700" id="avg_irradiance">4,069.73</span></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header bg-fusion-25 py-2 pr-3 d-flex align-items-center flex-wrap">
                                        <h4 class="mb-0 font-weight-bold"><span class="fal fa-bolt mr-1"></span> PR值</h4>
                                        <div class="ml-auto">%</div>
                                    </div>
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between">
                                            <p>即時平均 PR 值</p>
                                            <p><span class="color-info-700" id="today_PR">119.04</span></p>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <p>平均 PR 值(30天)</p>
                                            <p><span class="color-info-700" id="avg_PR">3.84</span></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header bg-fusion-25 py-2 pr-3 d-flex align-items-center flex-wrap">
                                        <h4 class="mb-0 font-weight-bold"><span class="fal fa-sun mr-1"></span>有效日照時數</h4>
                                        <div class="ml-auto">hr</div>
                                    </div>
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between">
                                            <p>即時平均有效日照時數</p>
                                            <p><span class="color-info-700" id="today_kwhkwp">140.39</span></p>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <p>平均有效日照時數(30天)</p>
                                            <p><span class="color-info-700" id="avg_kwhkwp">4.53</span></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header bg-fusion-25 py-2 pr-3 d-flex align-items-center flex-wrap">
                                        <h4 class="mb-0 font-weight-bold"><span class="fal fa-bolt mr-1"></span> 減碳量</h4>
                                        <div class="ml-auto">kG</div>
                                    </div>
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between">
                                            <p>今日減碳量</p>
                                            <p><span class="color-info-700" id="today_carbon">6,091.78</span></p>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <p>累積減碳量</p>
                                            <p><span class="color-info-700" id="total_carbon">985.98</span></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-content p-3">
                        <div class="row mb-5 d-flex justify-content-between">
                            <div class="col-12 text-right">
                                <a href="javascript:TableDisplay();" class="btn btn-secondary btn-icon waves-effect waves-themed mr-1" style="width: 47px;"><span class="fal fa-list fa-2x mt-2"></span></a>
                                <a href="javascript:CardDisplay();" class="btn btn-secondary btn-icon waves-effect waves-themed mr-1" style="width: 47px;"><span class="fal fa-grip-horizontal fa-2x mt-2"></span></a>
                            </div>
                        </div>
                        <div id="templateCard" style="display:none">
                            <div class="col-xl-3 mb-3">
                                <div class="card border m-auto m-lg-0">
                                    <a id="editSolarUrl" href="0station.html">
                                        <img id="Solarimg" src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
                                    </a>
                                    <div class="card-body d-flex justify-content-between pb-0 px-2">
                                        <h4 id="solarName" class="font-weight-bold" style="line-height: 27px;">
                                            新竹巨城站
                                        </h4>
                                        <p class="card-text"><i class="fal fa-cloud-sun-rain fa-2x" id="weathericon"></i></p>
                                    </div>
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item px-2">
                                            <div class=" d-flex justify-content-between">
                                                <p>發電量</p>
                                                <p><span class="color-primary-400" id="Capacity">185</span> kWh</p>
                                                <p id="Temp">27°C</p>
                                            </div>
                                            <div class=" d-flex justify-content-between">
                                                <p>發電金額</p>
                                                <p><span class="color-primary-400" id="PowerRate">2,5840</span> NT</p>
                                                <p><span class="color-primary-400" id="stationtype">65</span></p>
                                            </div>
                                            <div class=" d-flex justify-content-between">
                                                <p>PR值</p>
                                                <p><span class="color-primary-400" id="PR">65</span> %</p>
                                                <div style="text-align:right">
                                                    <p class="small" id="date">06-30 17:50</p>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                    <div class="progress progress-sm">
                                        <div class="progress-bar bg-info" id="aria" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="">
                            <div class="row mb-5" id="areaCard">
                            </div>
                        </div>
                        <div class="TableArea" id="tablearea" style="display:none">
                            <div class="p-3">
                                <table id="solarTable" class="table table-bordered table-hover m-0 text-center">
                                    <thead class="thead-themed">
                                        <tr>
                                            <th>編號</th>
                                            <th>電站名稱</th>
                                            <th>裝置容量(kWp)</th>
                                            <th>累積發電量</th>
                                            <th>今日發電量</th>
                                            <th>發電小時</th>
                                            <th>PR</th>
                                            <th>日照</th>
                                            <th>平均日照</th>
                                            <th>今日收入</th>
                                            <th>狀況</th>
                                            <th>功能</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="templateArea" hidden="hidden">
    <div class="tab-pane" id="tab-name" role="tabpanel" aria-labelledby="tab-name">
        <div class="row mb-5 d-flex justify-content-between">
            <div class="col-6 text-right">
                <a href="javascript:TableDisplay();" class="btn btn-secondary btn-icon waves-effect waves-themed"><span class="fal fa-list mr-1"></span></a>
                <a href="javascript:CardDisplay();" class="btn btn-secondary btn-icon waves-effect waves-themed"><span class="fal fa-grip-horizontal mr-1"></span></a>
            </div>
        </div>
        <div class="row solarCard" id="solarCard">
        </div>
        <div class="TableArea">
            <table id="solarTable" class="table table-bordered table-hover m-0 text-center">
                <thead class="thead-themed">
                    <tr>
                        <th>編號</th>
                        <th>電站名稱</th>
                        <th>裝置容量(kWp)</th>
                        <th>累積發電量</th>
                        <th>今日發電量</th>
                        <th>發電小時</th>
                        <th>PR</th>
                        <th>日照</th>
                        <th>平均日照</th>
                        <th>今日收入</th>
                        <th>狀況</th>
                        <th>功能</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>

    </div>
</div>

@section Scripts{
    <script>
        var localurl = this.location.href;
        var tablocation = "";
        var ids = new Array(0);//當前選擇縣市
        var powerids = new Array(0);//當前選擇電站
        var Allids = new Array(0);//全部縣市
        var status123 = new Array(0);//狀態
        //#region Array.Remove
        Array.prototype.remove = function (val) {
            var index = this.indexOf(val);
            if (index > -1) {
                this.splice(index, 1);
            }
        };
        //#endregion
        
        $(function () {
            status123 = [];
            
            var Nurl = "/PowerStation/GetSolarCitySummary";
            $.post(Nurl, function (rel) {
                if (rel.code != "0000") {
                    toast_error(rel.msg);
                    return;
                }
                $('#citytest').empty();
                for (var i = 0; i < rel.data.length; i++) {
                    $('#citytest').append("<button type='button' class='btn btn-success waves-effect waves-themed ml-2' id='" + 'cityID_' + rel.data[i].cityId + "'>" +
                        rel.data[i].city +
                        "<span class= 'badge bg-success-700 ml-2' >" + rel.data[i].amount + "</span >" +
                        "</button >");
                    ids.push(rel.data[i].cityId);
                    Allids.push(rel.data[i].cityId);
                }
                status123.push(1);
                status123.push(2);
                status123.push(3);
                getStation(ids);
            }, 'json');
            
        });


        $('#citytest').on("click", "button", function () {
            var clickid = $(this).attr('id');
            var classid = clickid.split("_");
            var value = document.getElementById(clickid).className;
            if (value == 'btn btn-outline-success waves-effect waves-themed ml-2') {  //選擇
                document.getElementById(clickid).setAttribute("class", 'btn btn-success waves-effect waves-themed ml-2');
                ids.push(Number(classid[1]));
            }
            else { //取消
                document.getElementById(clickid).setAttribute("class", 'btn btn-outline-success waves-effect waves-themed ml-2');
                ids.remove(Number(classid[1]));
            }
            getStation(ids);
        })

        function getStation(ids)
        {
            var kwh = $('#kwh_order').val();
            var pr = $('#pr_order').val();
            var send_data = {
                cityid: ids,
                status: status123,
                kwhOrder: kwh,
                prOrder: pr
            };
            ids.sort(function (a, b) {
                return a - b;
            });
            ids.sort();
            if (ids.length == 0 || status123.length == 0) {
                $('#areaCard').empty();
                $('#solarTable').find('tbody').empty();
                $("#today_kwh").html(0);
                $("#total_kwh").html(0);
                $("#today_irradiance").html(0);
                $("#avg_irradiance").html(0);
                $("#today_PR").html(0);
                $("#avg_PR").html(0);
                $("#today_kwhkwp").html(0);
                $("#avg_kwhkwp").html(0);
                $("#today_carbon").html(0);
                $("#total_power_station_count").html(0);
                $("#total_capacity").html(0);
                $("#update_at").html(0);
            }
            else
            {
                var Nurl = "/StationOverview/GetSolarByCity";
                $.post(Nurl, send_data, function (rel) {
                    if (rel.code != "0000") {
                        toast_error(rel.msg);
                        return;
                    }
                    $('#areaCard').empty();
                    $('#solarTable').find('tbody').empty();
                    powerids = [];
                    $.each(rel.data, function (index, val) {
                        $('#templateCard').find('.col-xl-3').clone().attr('id', 'card_' + val.id).appendTo($('#areaCard'));
                        var statusicon;
                        switch (val.healthStatus) {
                            case 1: statusicon = "<i class='btn btn-success btn-sm btn-icon rounded-circle waves-effect waves-themed fal fa-check'></i>"; break;
                            case 2: statusicon = "<i class='btn btn-warning btn-sm btn-icon rounded-circle waves-effect waves-themed fal fa-exclamation'></i>"; break;
                            case 3: statusicon = "<i class='btn btn-danger btn-sm btn-icon rounded-circle waves-effect waves-themed fal fa-horizontal-rule'></i>"; break;
                            default:
                                statusicon = 'NULL'; break;
                        }
                        $('#card_' + val.id).find('#solarName').html(statusicon + val.name);
                        $('#card_' + val.id).find('#weathericon')[0].setAttribute("class", 'fal fa-' + val.todayWeather + ' fa-2x');
                        $('#card_' + val.id).find('#Temp').html((val.todayWeatherTemp == -99)? "": val.todayWeatherTemp + '°C');
                        var type = "";
                        switch (val.solarType) {
                            case 0: type = "自建躉售"; break;
                            case 1: type = "租建躉售"; break;
                            case 2: type = "自建自用"; break;
                            default:
                                console.log(`Sorry, we are out of ${val.solarType}.`);
                        }
                        $('#card_' + val.id).find('#editSolarUrl').find('#Solarimg').attr('src', val.mainDisplay);
                        $('#card_' + val.id).find('#editSolarUrl').find('#Solarimg').attr('style', "width: 100%;height: 210.5px;");
                        $('#card_' + val.id).find('#stationtype').html(type);
                        var time = new Date(val.createdAt);
                        $('#card_' + val.id).find('#editSolarUrl').attr('href', localurl + '/Info?stationId=' + val.id);
                        $('#card_' + val.id).find('#date').html(time.getMonth() + "/" + time.getDate() + " " + time.getHours() + ":" + time.getMinutes());
                        $('#card_' + val.id).find('#Capacity').html(val.today_kWh.toFixed(2));
                        $('#card_' + val.id).find('#PowerRate').html((val.today_kWh * val.powerRate).toFixed(2));
                        $('#card_' + val.id).find('#PR').html(val.today_PR);
                        $('#card_' + val.id).find('#aria').attr('aria-valuenow', val.today_PR);
                        $('#card_' + val.id).find('#aria').attr('style', "width:" + val.today_PR + "%;");
                        powerids.push(val.id);
                        var statusName;
                        switch (val.healthStatus) {
                            case 1:
                                statusName = "設備正常";
                                break;
                            case 2:
                                statusName = "設備斷線";
                                break;
                            case 3:
                                statusName = "設備異常";
                                break;
                            default:
                                statusName = "NULL";
                        }
                        $('#solarTable').find('tbody').append('<tr>' +
                            '<td>' + val.code + '</td>' +
                            '<td>' + val.name + '</td>' +
                            '<td>' + val.generatingCapacity + '</td>' +
                            '<td>' + val.total_kWh.toFixed(2) + '</td>' +
                            '<td>' + val.today_kWh.toFixed(2) + '</td>' +
                            '<td>' + val.solarHour.toFixed(2) + '</td>' +
                            '<td>' + val.today_PR + '</td>' +
                            '<td>' + val.today_irradiance.toFixed(2) + '</td>' +
                            '<td>' + val.avg_irradiance.toFixed(2) + '</td>' +
                            '<td>' + val.today_Money.toFixed(2) + '</td>' +
                            '<td>' + statusName + '</td>' +
                            '<td><button type="button" class="btn btn-primary btn-pills waves-effect waves-themed" onclick="location.href=\'' + localurl + '/Info?stationId=' + val.id + '\'">選擇</button></td>' +

                            '</tr>');
                    });
                    GetStationCard();
                }, 'json');
            }
            
        }
        function GetStationCard()
        {
            var send_data = {
                ids: powerids
            };
            var url = "/StationOverview/GetStationCard";
            $.post(url, send_data, function (rel) {
                if (rel.code != "0000") {
                    toast_error(rel.msg);
                    return;
                }
                mapOverview = rel.data;
                $("#today_kwh").html(mapOverview.today_kwh);
                $("#total_kwh").html(mapOverview.total_kwh);
                $("#today_irradiance").html(mapOverview.today_irradiance);
                $("#avg_irradiance").html(mapOverview.avg_irradiance);
                $("#today_PR").html(mapOverview.today_PR);
                $("#avg_PR").html(mapOverview.avg_PR);
                $("#today_kwhkwp").html(mapOverview.today_kwhkwp);
                $("#avg_kwhkwp").html(mapOverview.avg_kwhkwp);
                $("#today_carbon").html(mapOverview.today_carbon);
                $("#total_power_station_count").html(mapOverview.totalPowerStationCount);
                $("#total_capacity").html(mapOverview.totalCapacity);
                $("#update_at").html(mapOverview.updatedAt);
            });
        }

        //#region 選擇狀態checkbox
        $('#CheckStatus').on("click", "input", function () {
            var clickid = $(this).attr('id');
            var classid = clickid.split("_");
            var job = document.getElementById(clickid);
            if (job.checked == true) {
                status123.push(Number(classid[1]));
            }
            else {
                status123.remove(Number(classid[1]));
            }
            getStation(ids);
        })
        //#endregion

        $('#kwh_order').change(function () {
            getStation(ids);
        })

        $('#pr_order').change(function () {
            getStation(ids);
        })

        //#region 縣市全選
        function Allcity() {
            ids = [];
            $.each(Allids, function (index, val) {
                var cityid = 'cityID_' + val;
                document.getElementById(cityid).setAttribute("class", 'btn btn-success waves-effect waves-themed ml-2');
                ids.push(val);
            });
            getStation(ids);
        }
        //#endregion

        //#region 狀態全選
        function AllStatus() {
            status123 = [];
            for (var i = 1; i <= 3; i++)
            {
                $('#Status_' + i).prop("checked", true);
                status123.push(i);
            }
            getStation(ids);
        }
        //#endregion

        function CardDisplay() {

            document.getElementById("tablearea").style.display = "none";
            document.getElementById("areaCard").style.display = "";
            //$("#tablearea").hide();
            //$("#templateCard").show();

        }
        function TableDisplay() {
            document.getElementById("areaCard").style.display = "none";
            document.getElementById("tablearea").style.display = "";
            //$('#tablearea').show();
            //$('#templateCard').hide();
        }
    </script>
}