@{
    ViewData["MainNum"] = "1";
    ViewData["SubNum"] = "1";
    ViewData["Title"] = "地圖總覽";
}
<ol class="breadcrumb page-breadcrumb">
    <li class="breadcrumb-item"><a href="javascript:void(0);">總覽</a></li>
    <li class="breadcrumb-item active">地圖總覽</li>
    <li class="position-absolute pos-top pos-right d-none d-sm-block">最後更新時間 <span id="update_at"></span></li>
</ol>

<!-- Your main content goes below here: -->

<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">kwh</div>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <p>總發電量</p>
                    <p><span class="color-info-700 fs-xl font-weight-bold" id="today_kwh">126,161.72</span></p>
                </div>
                <div class="d-flex justify-content-between">
                    <p>平均發電量</p>
                    <p><span class="color-info-700 fs-xl font-weight-bold" 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">kw/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 fs-xl font-weight-bold" 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 fs-xl font-weight-bold" 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 fs-xl font-weight-bold" 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 fs-xl font-weight-bold" 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> kWh / kWp</h4>
                <div class="ml-auto">hr</div>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <p>即時平均 kWh / kWp</p>
                    <p><span class="color-info-700 fs-xl font-weight-bold" id="today_kwhkwp">140.39</span> kW/m2</p>
                </div>
                <div class="d-flex justify-content-between">
                    <p>平均 kWh / kWp (30天)</p>
                    <p><span class="color-info-700 fs-xl font-weight-bold" id="avg_kwhkwp">4.53</span> kW/m2</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-cow 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 fs-xl font-weight-bold" id="today_carbon">6,091.78</span></p>
                </div>
                <div class="d-flex justify-content-between">
                    <p>總減碳量</p>
                    <p><span class="color-info-700 fs-xl font-weight-bold" id="total_carbon">985.98</span></p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-auto" style="width: 60%;">
        <div id="panel-1" class="panel">
            <div class="panel-hdr">
                <h2>電站分佈圖</h2>
            </div>
            <div class="panel-container show">
                <div class="panel-content">
                    <div class="map-respondive">
                        <div id="map" style="width: 100%; height:450px"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-auto" style="width: 40%;">
        <div class="row">
            <div class="col-xl-6">
                <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>
                    <div class="card-body" style="min-height: 148px;">
                        <p class="text-center display-3"><span class="color-info-700 font-weight-bold" id="total_power_station_count">52</span></p>
                        <p class="text-right mb-0">廠</p>
                    </div>
                </div>
            </div>

            <div class="col-xl-6">
                <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>
                    <div class="card-body" style="min-height: 148px;">
                        <p class="text-center display-3"><span class="color-info-700 font-weight-bold" id="total_capacity">1288.63</span></p>
                        <p class="text-right mb-0">MWp</p>
                    </div>
                </div>
            </div>
            <div class="col-xl-12 mt-4">
                <div id="panel-1" class="panel">
                    <div class="panel-hdr">
                        <h2>電站分佈小計</h2>
                    </div>
                    <div class="panel-container show">
                        <div class="panel-content">
                            <table id="capacity-Table" class="table text-center m-0">
                                <thead class="thead-themed">
                                    <tr>
                                        <th>縣市</th>
                                        <th>電站數量</th>
                                        <th>裝置容量 MWp</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xl-12">
        <div id="map" style="width: 100%; height:60vh"></div>
    </div>
</div>


@section Scripts{

    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script src="https://unpkg.com/@@googlemaps/markerclustererplus/dist/index.min.js"></script>

    <script>
        var capacityTable;
        var mapOverview;
        var locations = [];


        $(function () {
            //#region 公司管理列表 DataTable
            capacityTable = $("#capacity-Table").DataTable({
                "paging": true,
                "lengthChange": false,
                "searching": false,
                "ordering": false,
                "info": true,
                "autoWidth": false,
                "responsive": true,
                "columns": [{
                    "data": "cityName"
                }, {
                    "data": "subPowerStationCount"
                }, {
                    "data": "subTotalCapacity"
                }],
                "language": {
                    "emptyTable": "查無資料",
                    "processing": "處理中...",
                    "loadingRecords": "載入中...",
                    "lengthMenu": "顯示 _MENU_ 項結果",
                    "zeroRecords": "沒有符合的結果",
                    "info": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
                    "infoEmpty": "顯示第 0 至 0 項結果，共 0 項",
                    "infoFiltered": "(從 _MAX_ 項結果中過濾)",
                    "infoPostFix": "",
                    "search": "搜尋:",
                    "paginate": {
                        "first": "第一頁",
                        "previous": "上一頁",
                        "next": "下一頁",
                        "last": "最後一頁"
                    },
                    "aria": {
                        "sortAscending": ": 升冪排列",
                        "sortDescending": ": 降冪排列"
                    }
                },
                "data": []
            });
            //#endregion

            var url = "/MapOverview/GetMapOverview";
            $.post(url, null, function (rel) {
                if (rel.code != "0000") {
                    toast_error(rel.msg);
                    return;
                }

                mapOverview = rel.data;

                $("#today_kwh").html(mapOverview.today_kwh.toFixed(2));
                $("#total_kwh").html(mapOverview.total_kwh.toFixed(2));
                $("#today_irradiance").html(mapOverview.today_irradiance.toFixed(2));
                $("#avg_irradiance").html(mapOverview.avg_irradiance.toFixed(2));
                $("#today_PR").html(mapOverview.today_PR.toFixed(2));
                $("#avg_PR").html(mapOverview.avg_PR.toFixed(2));
                $("#today_kwhkwp").html(mapOverview.today_kwhkwp.toFixed(2));
                $("#avg_kwhkwp").html(mapOverview.avg_kwhkwp.toFixed(2));
                $("#today_carbon").html(mapOverview.today_carbon.toFixed(2));
                $("#total_carbon").html(mapOverview.total_carbon.toFixed(2));
                $("#total_power_station_count").html(mapOverview.totalPowerStationCount);
                $("#total_capacity").html(mapOverview.totalCapacity);
                $("#update_at").html(mapOverview.updatedAt);

                capacityTable.clear().rows.add(mapOverview.capacityDataTables).draw();

                //#region google map
                initMap();
                //#endregion
            });
        });

        function initMap() {
            

            mapOverview.powerStations.forEach(function (item, index) {
                var contentString = '<div id="content">' +
                    '<div id="siteNotice"></div>' +
                    '<h1 id="firstHeading" class="firstHeading">' + item.name + '</h1>' +
                    '<div id="bodyContent">' +
                    '<div class="row">' +
                    '<div class="col-12">' +
                    '<div>發電量：' + item.today_kWh + '</div>'+
                    '<div>日照度：' + item.today_irradiance + '</div>'+
                    '<div>發電小時：' + item.solarHour + '</div>' +
                    '<div>裝置容量：' + item.generatingCapacity + '</div>' +
                    '<div>天氣：' + + '</div>'+
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '</div>';


                if (item.coordinate != null) {
                    var split = item.coordinate.split(',');
                    if (split[0] == undefined || split[0] == null) {
                        split[0] = 23
                    }

                    if (split[1] == undefined || split[1] == null) {
                        split[1] = 122
                    }

                    locations.push([item.name, contentString, split[0], split[1]]); //format:[標籤名、infoWindow、緯度、經度]
                }
            });

            const map = new google.maps.Map(document.getElementById("map"), {
                zoom: 7,
                center: { lat: 23.5, lng: 123 },
            });

            var infowindow = new google.maps.InfoWindow();
            // Create an array of alphabetical characters used to label the markers.
            // Add some markers to the map.
            // Note: The code uses the JavaScript Array.prototype.map() method to
            // create an array of markers based on a given "locations" array.
            // The map() method here has nothing to do with the Google Maps API.
            const markers = locations.map((location, i) => {
                 marker = new google.maps.Marker({
                     position: new google.maps.LatLng(location[2], location[3]),
                    @*label: location[0],*@
                    map: map
                 });

                google.maps.event.addListener(marker, 'click', (function (marker, i) {
                    return function () {
                        infowindow.setContent(location[1]);
                        infowindow.open(map, marker);
                    }
                })(marker, i));

                return marker;
            });
            // Add a marker clusterer to manage the markers.
            new MarkerClusterer(map, markers, {
                imagePath:
                    "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
            });
        }
    </script>
}