@{
    ViewData["MainNum"] = "3";
    ViewData["SubNum"] = "1";
    ViewData["Title"] = "合併電站";
}
@using SolarPower.Models.Role
@model RoleLayerEnum

<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 class="js-get-date"></span></li>
</ol>

<div class="subheader">
    <h1 class="subheader-title">
        <i class='subheader-icon fal fa-globe'></i> 合併電站
    </h1>
</div>

<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="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" style="display:none">
                                <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 class="frame-wrap" id="city">

                            </div>
                        </div>
                    </div>

                    <div class="row mb-5 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="Allpowerstation()">全選</button>
                        </div>
                        <div class="col-11">
                            <div class="row frame-wrap" id="CheckPowerStation">

                            </div>
                        </div>
                    </div>

                    <div class="row mb-5 d-flex align-items-top px-3">
                        <div class="pr-3">
                            <div class="btn-group btn-group-md">
                                <button type="button" class="btn btn-success waves-effect waves-themed btn-change-searchType" id="Group0" onclick="changeType(0,this)">日</button>
                                <button type="button" class="btn btn-secondary waves-effect waves-themed btn-change-searchType" id="Group1" onclick="changeType(1,this)">日區間</button>
                                <button type="button" class="btn btn-secondary waves-effect waves-themed btn-change-searchType" id="Group2" onclick="changeType(2,this)">月</button>
                                <button type="button" class="btn btn-secondary waves-effect waves-themed btn-change-searchType" id="Group3" onclick="changeType(3,this)">年</button>
                            </div>
                        </div>
                        <div class="pr-3" id="quickSearchOption">
                            <button type="button" class="btn btn-secondary waves-effect waves-themed btn-change-quickSearch1" onclick="quickSearch(0)">今天</button>
                            <button type="button" class="btn btn-secondary waves-effect waves-themed btn-change-quickSearch2" onclick="quickSearch(1)">昨天</button>
                        </div>

                        <div class="pr-3">
                            <div class="btn-group" id="js-demo-nesting" role="group" aria-label="Button group with nested dropdown">
                                <input type="date" class="form-control" id="DateGet" />
                            </div>
                            <div class="btn-group" id="DateGettextdiv" role="group" aria-label="Button group with nested dropdown" >
                                <input type="text" class="form-control" id="DateGettext" />
                            </div>
                        </div>
                    </div>

                    <div class="frame-wrap">
                        <div class="row mb-5">
                            <div class="card-columns">
                                <div class="card">
                                    <div class="card-header bg-fusion-25 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" 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 money-card">
                                    <div class="card-header bg-fusion-25 pr-3 d-flex align-items-center flex-wrap">
                                        <h4 class="mb-0 font-weight-bold"><span class="fal fa-dollar-sign mr-1"></span> <span id="money-card-title">發電金額</span></h4>
                                        <div class="ml-auto">NTD</div>
                                    </div>
                                    <div class="card-body" >
                                        <div class="d-flex justify-content-between">
                                            <p id="money-card-subtitle-total">總發金額</p>
                                            <p><span class="color-info-700" id="total_money">126,161.72</span></p>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <p id="money-card-subtitle-avg">今日發電金額</p>
                                            <p><span class="color-info-700" id="today_money">4,069.73</span></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header bg-fusion-25 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>
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between">
                                            <p>平均 kWh / kWp</p>
                                            <p><span class="color-info-700" id="today_kwhkwp">140.39</span></p>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <p>今日 kWh / kWp </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 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>
                                    <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值</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 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" 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 class="row mb-5">
                            <div class="col-xl-6">
                                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                                    <ol class="carousel-indicators">
                                    </ol>
                                    <div class="carousel-inner">
                                    </div>
                                    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                        <span class="sr-only">Previous</span>
                                    </a>
                                    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                        <span class="sr-only">Next</span>
                                    </a>
                                </div>
                            </div>
                            <div class="col-xl-6">
                                <div id="carousel-chart" class="carousel slide" data-ride="carousel">
                                    <ol class="carousel-indicators">
                                        <li data-target="#carousel-chart" data-slide-to="0" class="active"></li>
                                        <li data-target="#carousel-chart" data-slide-to="1"></li>
                                        <li data-target="#carousel-chart" data-slide-to="2"></li>
                                        <li data-target="#carousel-chart" data-slide-to="3"></li>
                                    </ol>
                                    <div class="carousel-inner">
                                        <div class="carousel-item active">
                                            <canvas id="chartToday"></canvas>
                                        </div>
                                        @*<div class="carousel-item">
                                            <canvas id="chart7day"></canvas>
                                        </div>*@
                                        <div class="carousel-item">
                                            <canvas id="chartMonth"></canvas>
                                        </div>
                                        <div class="carousel-item">
                                            <canvas id="chartYear"></canvas>
                                        </div>
                                    </div>
                                    <a class="carousel-control-prev" href="#carousel-chart" role="button" data-slide="prev">
                                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                        <span class="sr-only">Previous</span>
                                    </a>
                                    <a class="carousel-control-next" href="#carousel-chart" role="button" data-slide="next">
                                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                        <span class="sr-only">Next</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xl-6">
                                @*<canvas id="chartToday"></canvas>*@
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>
</div>


@section Scripts{
    <script>
        $(function () {
            var ids = new Array(0);//當前選擇縣市
            var powerids = new Array(0);//當前選擇電站
            var Allids = new Array(0);//全部縣市
            var Allpowerids = new Array(0);//全部電站
            var searchType = 0;//搜尋條件(日,日區間,月,年)
            var datepicker;

            //#region 預設初始值
            $('#DateGet').val(new Date().toISOString().substring(0, 10));
            document.getElementById("DateGettextdiv").style.display = "none";//隱藏
            $('#DateGet').attr('style', 'width:205px');
            $('#DateGettext').attr('style', 'width:205px');
            //#endregion

            //#region 預設載入該使用者可以選擇的電站
            var Nurl = "/PowerStation/GetSolarCitySummary";
            $.post(Nurl, function (rel) {
                if (rel.code != "0000") {
                    toast_error(rel.msg);
                    return;
                }
                for (var i = 0; i < rel.data.length; i++) {
                    $('#city').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(String(rel.data[i].cityId));
                    Allids.push(String(rel.data[i].cityId));
                }
                var send_data = {
                    cityid: ids
                }
                ids.sort();
                var Nurl = "/PowerStation/GetSolarByCity";
                $.post(Nurl, send_data, function (rel) {
                    if (rel.code != "0000") {
                        toast_error(rel.msg);
                        return;
                    }
                    $('#CheckPowerStation').empty();
                    $.each(rel.data, function (index, val) {
                        $('#CheckPowerStation').append("<div class='col-2 mb-2 custom-control custom-checkbox custom-control-inline' id='station_" + val.id + "' ></div>");
                        $('#station_' + val.id).append("<input type='checkbox' class='custom-control-input' id='check_" + val.id + "' checked>");
                        $('#station_' + val.id).append("<label class='custom-control-label' for='check_" + val.id + "'>" + val.name + "</label>");
                        powerids.push(String(val.id));
                        Allpowerids.push(String(val.id));
                    });

                    //modal 電站 下拉式選單
                    //$("#power_station_select_modal").empty();
                    //$.each(rel.data, function (index, val) {
                    //    $("#power_station_select_modal").append($("<option />").val(val.id).text(val.name));
                    //});

                    //預設查詢第一個
                    //$("#power_station_select_modal").val($("#power_station_select_modal option:first").val()).trigger('change');
                })
            })
            //#endregion



        })

        //#region 更換搜尋條件(日,日區間,月,年)
        function changeType(type, e) {
            searchType = type;
            if ($(".btn-change-searchType").hasClass("btn-success")) {
                $(".btn-change-searchType").removeClass("btn-success").addClass("btn-secondary");
            }
            document.getElementById("DateGettextdiv").style.display = "none";//隱藏
            document.getElementById("DateGet").style.display = "";//隱藏
            //$('#DateGet').datepicker("destroy");
            //$('#DateGet').removeClass('hasDatepicker');
            $(e).removeClass("btn-secondary").addClass("btn-success");
            switch (type) {
                case 0: $('#DateGet').prop({ 'type': 'date' });
                    $(".btn-change-quickSearch1").html("今天");
                    $(".btn-change-quickSearch2").html("昨天");
                    var today = new Date().toISOString().substring(0, 10);
                    $('#DateGet').val(today);
                    break;
                case 1: $('#DateGet').prop({ 'type': 'text' });
                    
                    //#region Date-Picker
                    datepicker = $('#DateGettext').daterangepicker({
                        autoUpdateInput: false,
                        locale: { format: 'YYYY/MM/DD' },
                        opens: 'left'
                    });

                    $('#DateGettext').on('apply.daterangepicker', function (ev, picker) {
                        $(this).val(picker.startDate.format('YYYY/MM/DD') + ' - ' + picker.endDate.format('YYYY/MM/DD'));
                        $(this).trigger('change');
                    });

                    $('#DateGettext').on('cancel.daterangepicker', function (ev, picker) {
                        $(this).val('');
                        $(this).trigger('change');
                    });
                    //#endregion

                    $(".btn-change-quickSearch1").html("近7天");
                    $(".btn-change-quickSearch2").html("近30天");
                    //#region 預設近7天
                    var today = new Date();
                    var dateLimit = new Date(new Date().setDate(today.getDate() - 7));
                    var today_format = today.toISOString().slice(0, 10).replace(/-/g, "/");
                    var dateLimit_format = dateLimit.toISOString().slice(0, 10).replace(/-/g, "/");
                    datepicker.data('daterangepicker').setStartDate(dateLimit_format);
                    datepicker.data('daterangepicker').setEndDate(today_format);
                    document.getElementById("DateGettextdiv").style.display = "";//隱藏
                    document.getElementById("DateGet").style.display = "none";//隱藏
                    //#endregion
                    $('#DateGettext').val(dateLimit_format + ' - ' + today_format);
                    
                    break;
                case 2: $('#DateGet').prop({ 'type': 'month' });
                    $(".btn-change-quickSearch1").html("本月");
                    $(".btn-change-quickSearch2").html("上個月");
                    var now_month = new Date().toISOString().substring(0, 7);
                    $('#DateGet').val(now_month);
                    break;
                case 3: 
                    $(".btn-change-quickSearch1").html("今年");
                    $(".btn-change-quickSearch2").html("去年");
                    var now_year = new Date().toISOString().substring(0, 4);
                    $('#DateGet').prop({ 'type': 'number', 'min': 1900, 'max': now_year, 'step': 1 });
                    $('#DateGet').val(now_year);
                    break;
            }
        }
        //#endregion

        //#region 更換搜尋條件(日,日區間,月,年)
        function quickSearch(day)
        {
            switch (searchType)
            {
                case 0: 
                    if (day == 0) {
                        var today = new Date().toISOString().substring(0, 10);
                        $('#DateGet').val(today);
                    } else {
                        var dateLimit = new Date(new Date().setDate(new Date().getDate() - 1)).toISOString().substring(0, 10);
                        $('#DateGet').val(dateLimit);
                    }
                break;
                case 1: 
                    if (day == 0) {
                        //#region 預設近7天
                        var today = new Date();
                        var dateLimit = new Date(new Date().setDate(today.getDate() - 7));
                        var today_format = today.toISOString().slice(0, 10).replace(/-/g, "/");
                        var dateLimit_format = dateLimit.toISOString().slice(0, 10).replace(/-/g, "/");
                        datepicker.data('daterangepicker').setStartDate(dateLimit_format);
                        datepicker.data('daterangepicker').setEndDate(today_format);
                        //#endregion
                        $('#DateGettext').val(dateLimit_format + ' - ' + today_format);
                    } else {
                        //#region 預設近7天
                        var today = new Date();
                        var dateLimit = new Date(new Date().setDate(today.getDate() - 30));
                        var today_format = today.toISOString().slice(0, 10).replace(/-/g, "/");
                        var dateLimit_format = dateLimit.toISOString().slice(0, 10).replace(/-/g, "/");
                        datepicker.data('daterangepicker').setStartDate(dateLimit_format);
                        datepicker.data('daterangepicker').setEndDate(today_format);
                        //#endregion
                        $('#DateGettext').val(dateLimit_format + ' - ' + today_format);
                    }
                break;
                case 2: 
                    if (day == 0) {
                        var now_month = new Date().toISOString().substring(0, 7);
                        $('#DateGet').val(now_month);
                    } else {
                        var dateLimit = new Date(new Date().setMonth(new Date().getMonth() - 1)).toISOString().substring(0, 7);
                        $('#DateGet').val(dateLimit);
                    }
                break;
                case 3: 
                    if (day == 0) {
                        var now_year = new Date().toISOString().substring(0, 4);
                        $('#DateGet').val(now_year);
                    } else {
                        var dateLimit = new Date(new Date().setFullYear(new Date().getFullYear() - 1)).toISOString().substring(0, 4);
                        $('#DateGet').val(dateLimit);
                    }
                break;
            }
        }
        //#endregion



    </script>
}