@{
    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">kW h</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">0.00</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">0.00</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 fs-xl font-weight-bold" id="today_irradiance">0.00</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">0.00</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">0.00</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">0.00</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 fs-xl font-weight-bold" id="today_kwhkwp">0.00</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_kwhkwp">0.00</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-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">0.00</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">0.00</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">0</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">0.00</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>電廠裝置容量 kWp</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"
                    }],
                "columnDefs": [{
                    'targets': 2,
                    'searchable': false,
                    'orderable': false,
                    'createdCell': function (td, cellData, rowData, row, col) {
                        @*$(td).append('<div class="row"></div>');*@
                        cellData = cellData.toFixed(3);
                        $(td).html(cellData);
                    }
                }],
                "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.toFixed(3));
                $("#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">' +
                    '<a href="StationOverview/Info?stationId=' + item.id + '" target="_blank">' +
                    item.name +
                    '</a>' +
                    '</h1>' +
                    '<div id="bodyContent">' +
                    '<div class="row">' +
                    '<div class="col-12">' +
                    '<div>今日發電量(kW h)：' + item.today_kWh + '</div>'+
                    '<div>今日日照度(k W/m<sup>2</sup>)：' + item.today_irradiance + '</div>'+
                    '<div>今日發電小時(hr)：' + item.solarHour + '</div>' +
                    '<div>裝置容量(kWp)：' + item.generatingCapacity.toFixed(3) + '</div>' +
                    '<div>掛錶日期：' + item.electricityMeterAt + '</div>' +
                    '<div>天氣：' + item.wx + '</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]);

                        google.maps.event.addListener(infowindow, 'domready', function () {
                            $(document).find('#content').parent().css('overflow-x', 'hidden');

                        });

                        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>
}