@{
    ViewData["MainNum"] = "4";
    ViewData["SubNum"] = "3";
    ViewData["Title"] = "電站發電收入";
}
@using SolarPower.Models.Role
@model RoleLayerEnum

<div class="container-fluid">
    <div class="row flex-nowrap wrapper">
        <div class="col-md-2 col-1 pl-0 pr-0 collapse width border-right sidebar vh-100">

            <div class="list-group border-0 card text-center text-md-left" id="sidebar">

                <div class="border bg-light rounded-top">
                    <div class="form-group p-2 m-0 rounded-top">
                        <input type="text" class="form-control form-control-lg shadow-inset-2 m-0" id="js_list_accordion_filter" placeholder="">
                    </div>
                    <div id="js_list_accordion" class="accordion accordion-hover accordion-clean js-list-filter">
                        <div class="card border-top-left-radius-0 border-top-right-radius-0">
                            <div class="card-header">
                                <a href="javascript:void(0);" class="card-title collapsed" data-toggle="collapse" data-target="#js_list_accordion-a" aria-expanded="true" data-filter-tags="settings">
                                    <i class="fal fa-globe width-2 fs-xl"></i>
                                    新北市
                                    <span class="ml-auto">
                                        <span class="collapsed-reveal">
                                            <i class="fal fa-chevron-up fs-xl"></i>
                                        </span>
                                        <span class="collapsed-hidden">
                                            <i class="fal fa-chevron-down fs-xl"></i>
                                        </span>
                                    </span>
                                </a>
                            </div>
                            <div id="js_list_accordion-a" class="collapse" data-parent="#js_list_accordion" style="">
                                <div class="card-body">
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item">
                                            <div class="d-flex justify-content-between">
                                                <h4 class="font-weight-bold"><i class="fal fa-charging-station"></i> 新竹交大站</h4>
                                                <div class="">
                                                    <input type="checkbox" class="" id="defaultUnchecked">
                                                </div>
                                            </div>
                                            <ul class="list-group list-group-flush">
                                                <li class="list-group-item pr-0 d-flex justify-content-between">
                                                    <a href="#"><i class="fal fa-tachometer-alt-slow"></i> 電錶 R001</a>
                                                    <div class="">
                                                        <input type="checkbox" class="" id="defaultUnchecked">
                                                    </div>
                                                </li>
                                                <li class="list-group-item pr-0 d-flex justify-content-between">
                                                    <a href="#"><i class="fal fa-sun"></i> 日照計 R002</a>
                                                    <div class="">
                                                        <input type="checkbox" class="" id="defaultUnchecked">
                                                    </div>
                                                </li>
                                                <li class="list-group-item pr-0 d-flex justify-content-between">
                                                    <a href="#"><i class="fal fa-thermometer-half"></i> 環境溫度計 R003</a>
                                                    <div class="">
                                                        <input type="checkbox" class="" id="defaultUnchecked">
                                                    </div>
                                                </li>
                                                <li class="list-group-item pr-0 d-flex justify-content-between">
                                                    <a href="#"><i class="fal fa-wind"></i> 風速計 R002</a>
                                                    <div class="">
                                                        <input type="checkbox" class="" id="defaultUnchecked">
                                                    </div>
                                                </li>
                                                <li class="list-group-item pr-0 d-flex justify-content-between">
                                                    <a href="#"><i class="fal fa-sun-dust"></i> 落塵計 R002</a>
                                                    <div class="">
                                                        <input type="checkbox" class="" id="defaultUnchecked">
                                                    </div>
                                                </li>
                                                <li class="list-group-item pr-0 d-flex justify-content-between">
                                                    <a href="#"><i class="fal fa-tint"></i> 濕度計 R002</a>
                                                    <div class="">
                                                        <input type="checkbox" class="" id="defaultUnchecked">
                                                    </div>
                                                </li>
                                                <li class="list-group-item pr-0 d-flex justify-content-between">
                                                    <a href="#"><i class="fal fa-server"></i> 逆變器 R002</a>
                                                    <div class="">
                                                        <input type="checkbox" class="" id="defaultUnchecked">
                                                    </div>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="list-group-item">
                                            <div class="d-flex justify-content-between">
                                                <h4 class="font-weight-bold"><i class="fal fa-charging-station"></i> 新竹動物園站</h4>
                                                <div class="">
                                                    <input type="checkbox" class="" id="defaultUnchecked">
                                                </div>
                                            </div>
                                        <li class="list-group-item">
                                            <div class="d-flex justify-content-between">
                                                <h4 class="font-weight-bold"><i class="fal fa-charging-station"></i> 新竹火車站</h4>
                                                <div class="">
                                                    <input type="checkbox" class="" id="defaultUnchecked">
                                                </div>
                                            </div>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <a href="javascript:void(0);" class="card-title collapsed" data-toggle="collapse" data-target="#js_list_accordion-b" aria-expanded="false" data-filter-tags="merge">
                                    <i class="fal fa-globe width-2 fs-xl"></i>
                                    台南市
                                    <span class="ml-auto">
                                        <span class="collapsed-reveal">
                                            <i class="fal fa-chevron-up fs-xl"></i>
                                        </span>
                                        <span class="collapsed-hidden">
                                            <i class="fal fa-chevron-down fs-xl"></i>
                                        </span>
                                    </span>
                                </a>
                            </div>
                            <div id="js_list_accordion-b" class="collapse" data-parent="#js_list_accordion">
                                <div class="card-body">
                                    放台南市list
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <a href="javascript:void(0);" class="card-title collapsed" data-toggle="collapse" data-target="#js_list_accordion-c" aria-expanded="false" data-filter-tags="backup">
                                    <i class="fal fa-globe width-2 fs-xl"></i>
                                    屏東縣
                                    <span class="ml-auto">
                                        <span class="collapsed-reveal">
                                            <i class="fal fa-chevron-up fs-xl"></i>
                                        </span>
                                        <span class="collapsed-hidden">
                                            <i class="fal fa-chevron-down fs-xl"></i>
                                        </span>
                                    </span>
                                </a>
                            </div>
                            <div id="js_list_accordion-c" class="collapse" data-parent="#js_list_accordion">
                                <div class="card-body">
                                    <ul class="list-group">
                                        <li class="list-group-item">
                                            <span data-filter-tags="reports file">Reports</span>
                                        </li>
                                        <li class="list-group-item">
                                            <span data-filter-tags="analytics graphs">Analytics</span>
                                        </li>
                                        <li class="list-group-item">
                                            <span data-filter-tags="export download">Export</span>
                                        </li>
                                        <li class="list-group-item">
                                            <span data-filter-tags="storage">Storage</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <span class="filter-message js-filter-message"></span>
                </div>
            </div>
        </div>
        <div class="col-auto px-0">
            <a href="javascript:;" id="collapse" data-target=".sidebar" data-toggle="collapse" class="btn btn-default btn-xs btn-icon waves-effect waves-themed" style="border-radius: 0;" aria-expanded="true">
                <span class="collapsed-reveal"><i class="fal fa-angle-left fa-lg py-3"></i></span>
                <span class="collapsed-hidden"><i class="fal fa-angle-right fa-lg py-3"></i></span>
            </a>
        </div>

        <main class="col px-5 pl-md-2 main">
            <div class="subheader">
                <h1 class="subheader-title">
                    <i class="subheader-icon fal fa-file-chart-line"></i> @ViewData["Title"]
                </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="mb-3 d-flex justify-content-start">
                                    <div class="pr-3">
                                        <div class="btn-group btn-group-md">
                                            <button type="button" class="btn btn-secondary waves-effect waves-themed btn-change-searchType" onclick="changeType(0, this)">月</button>
                                            <button type="button" class="btn btn-secondary waves-effect waves-themed btn-change-searchType" onclick="changeType(1, this)">年</button>
                                        </div>
                                    </div>
                                    <div class="pr-3">
                                        <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="month" class="form-control" id="DateGet" />
                                        </div>
                                    </div>
                                    <div class="pr-3">
                                        <button type="button" class="btn btn-primary waves-effect waves-themed ml-1">查詢</button>
                                    </div>
                                    <div class="pr-3">
                                        <button type="button" class="btn btn-primary waves-effect waves-themed"><span class="fal fa-file-excel mr-1"></span> 匯出</button>
                                    </div>
                                </div>

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

            <div id="panel-5" class="panel">
                <div class="panel-container show">
                    <div class="panel-content">
                        <div class="row mb-5">
                            <div class="col-md-12 d-flex overflow-auto justify-content-end">
                                <table class="table table-bordered text-center" style="width: 80.02%">
                                    <thead>
                                        <tr>
                                            <th class="bg-warning-100" colspan="3">預估值 CBA</th>
                                            <th class="bg-info-100" colspan="2">監控系統</th>
                                            <th class="bg-success-100" colspan="2">台電售電記錄</th>
                                            <th class="bg-primary-50" colspan="5">平均發電度數小計<br>(/kW)</th>
                                        </tr>
                                        <tr>
                                            <th style="width: 6.66%">發電效能</th>
                                            <th style="width: 6.66%">總發電量(度數)</th>
                                            <th style="width: 6.66%">總售電收入(NT$)</th>
                                            <th style="width: 6.66%">總發電量(度數)</th>
                                            <th style="width: 6.66%">總售電收入(NT$)</th>
                                            <th style="width: 6.66%">總發電量(度數)</th>
                                            <th style="width: 6.66%">總售電收入(NT$)</th>
                                            <th style="width: 6.66%">CBA</th>
                                            <th style="width: 6.66%">監控系統</th>
                                            <th style="width: 6.66%">v.s CBA</th>
                                            <th style="width: 6.66%">Actual</th>
                                            <th style="width: 6.66%">v.s CBA</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                            <div class="col-md-12 overflow-auto">
                                <table class="table table-bordered text-center w-100">
                                    <thead>
                                        <tr>
                                            <th class="bg-primary-50" style="width: 6.66%">起日</th>
                                            <th class="bg-primary-50" style="width: 6.66%">起訖</th>
                                            <th class="bg-primary-50" style="width: 6.66%">天數</th>
                                            <th class="bg-warning-100" style="width: 6.66%">發電效能</th>
                                            <th class="bg-warning-100" style="width: 6.66%">總發電量(度數)</th>
                                            <th class="bg-warning-100" style="width: 6.66%">總售電收入(NT$)</th>
                                            <th class="bg-info-100" style="width: 6.66%">總發電量(度數)</th>
                                            <th class="bg-info-100" style="width: 6.66%">總售電收入(NT$)</th>
                                            <th class="bg-success-100" style="width: 6.66%">總發電量(度數)</th>
                                            <th class="bg-success-100" style="width: 6.66%">總售電收入(NT$)</th>
                                            <th class="bg-primary-50" colspan="5">平均發電度數明細<br>(/kW/日)</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </main>
    </div>
</div>
@section Scripts{
    <script>

        var selecterd_powerstationId = [];
        $(function () {
            $('#collapse').trigger("click");
            //#region 載入左邊選單列表
            GetPowerStationCollapse("");
            //#endregion
        })


        //#region 左邊的搜索欄位
        //function myfunc(div) {
        //    var className = div.getAttribute("class");
        //    if (className == "fal fa-angle-left fa-lg py-3") {
        //        div.className = "fal fa-angle-right fa-lg py-3";
        //    }
        //    else {
        //        div.className = "fal fa-angle-left fa-lg py-3";
        //    }
        //}

        $("#js_list_accordion_filter").change(function (e) {
            GetPowerStationCollapse($(this).val());
        });

        $('#js_list_accordion').on("change", 'input[name="selectedInverterLayer2[]"]', function (event) {
            var getstation =
            {
                name: $(this).attr('valuename'),
                value: this.value
            }

            if (this.checked) {
                selecterd_powerstationId.push(getstation);
            } else {
                var a = selecterd_powerstationId.filter(function (n, i) {

                    if (n.name === getstation.name && n.value === getstation.value) {
                        selecterd_powerstationId.splice(i, 1);
                    }

                });
            }

            $('#PowerStationId_modal').empty();
            $("#PowerStationId_modal").attr("disabled", false);
            $.each(selecterd_powerstationId, function (index, val) {
                $("#PowerStationId_modal").append($("<option />").val(parseInt(val.value)).text(val.name));
            });
            if (selecterd_powerstationId.length == 0) {
                $("#PowerStationId_modal").append($("<option />").val(0).text("請先選擇電站"));
                $("#PowerStationId_modal").attr("disabled", true);
            }


            console.log(selecterd_powerstationId);
        });


        function GetPowerStationCollapse(filter) {
            var url = "/StationReport/GetPowerStationNameList"

            var send_data = {
                Filter: filter
            }

            $.post(url, send_data, function (rel) {
                if (rel.code != "0000") {
                    toast_error(rel.data.msg);
                    return;
                }

                var inverterCollapse = rel.data;



                $('#js_list_accordion').empty();

                if (inverterCollapse.length <= 0) {
                    $('#js_list_accordion').append("<div>查無結果</div>");
                }

                var str = "";

                Object.keys(inverterCollapse).map(function (key, index) {
                    str += '<div class="card border-top-left-radius-0 border-top-right-radius-0" id="templateCard">' +
                        '<div class="card-header">' +
                        '<a href="javascript:void(0);" class="card-title collapsed" data-toggle="collapse" data-target="#js_list_accordion-' + index + '" aria-expanded="false" data-filter-tags="settings">' +
                        '<i class="fal fa-globe width-2 fs-xl"></i>' +
                        '<span class="city-name">' + key + '</span>' +
                        '<span class="ml-auto">' +
                        '<span class="collapsed-reveal"><i class="fal fa-chevron-up fs-xl"></i></span>' +
                        '<span class="collapsed-hidden"><i class="fal fa-chevron-down fs-xl"></i></span>' +
                        '</span>' +
                        '</a>' +
                        '</div>' +
                        '<div id="js_list_accordion-' + index + '" class="collapse" data-parent="#js_list_accordion-' + index + '" style="">' +
                        '<div class="card-body">' +
                        '<ul class="list-group list-group-flush">';
                    $.each(inverterCollapse[key], function (index, inverter) {
                        var getstation =
                        {
                            name: inverter.powerStationName,
                            value: String(inverter.powerStationId)
                        }
                        var on = false;
                        var a = selecterd_powerstationId.find(function (n, i) {
                            if (n.name === getstation.name && n.value === getstation.value) {
                                on = true;
                            }
                        });
                        if (on == true) {
                            str += '<li class="list-group-item">' +
                                '<div class="d-flex justify-content-between">' +
                                '<h4 class="font-weight-bold"><i class="fal fa-charging-station"></i> ' + inverter.powerStationName + '</h4>' +
                                '<div class="">' +
                                '<input type="checkbox" class="" name="selectedInverterLayer2[]" value="' + inverter.powerStationId + '" valueName ="' + inverter.powerStationName + '" checked>' +
                                '</div>' +
                                '</div>' +
                                '</li>';
                        }
                        else {
                            str += '<li class="list-group-item">' +
                                '<div class="d-flex justify-content-between">' +
                                '<h4 class="font-weight-bold"><i class="fal fa-charging-station"></i> ' + inverter.powerStationName + '</h4>' +
                                '<div class="">' +
                                '<input type="checkbox" class="" name="selectedInverterLayer2[]" value="' + inverter.powerStationId + '" valueName ="' + inverter.powerStationName + '">' +
                                '</div>' +
                                '</div>' +
                                '</li>';
                        }
                    });

                    str += '</ul>';
                    str += '</div>';
                    str += '</div>';

                });

                $('#js_list_accordion').append(str);
                $('#js_list_accordion').find('.card').first().addClass(" border-top-left-radius-0 border-top-right-radius-0");

                $('input[name="selectedInverterLayer2[]"]').each(function () {
                    if ($.inArray(this.value, selecterd_powerstationId) > -1) {
                        $(this).prop('checked', true);
                    }
                });
                $("#js_list_accordion .collapse").collapse('show');


            }, 'json');
        }
        //#endregion

        //#region 更換搜尋條件(日,日區間,月,年)
        function changeType(type, e) {
            searchType = type;
            if ($(".btn-change-searchType").hasClass("btn-success")) {
                $(".btn-change-searchType").removeClass("btn-success").addClass("btn-secondary");
            }
            $(e).removeClass("btn-secondary").addClass("btn-success");
            switch (type) {
                case 0: $('#DateGet').prop({ 'type': 'month' });
                    $(".btn-change-quickSearch1").html("上月");
                    $(".btn-change-quickSearch2").html("上上月");
                    var dateLimit = new Date(new Date().setMonth(new Date().getMonth() - 1)).toISOString().substring(0, 7);
                    $('#DateGet').val(dateLimit);
                    break;
                case 1:
                    var year = new Date(new Date().setFullYear(new Date().getFullYear() - 1)).toISOString().substring(0, 4);
                    $('#DateGet').prop({ 'type': 'number', 'min': 1900, 'max': dateLimit, 'step': 1 });
                    $(".btn-change-quickSearch1").html("去年");
                    $(".btn-change-quickSearch2").html("前年");
                    $('#DateGet').val(year);
                    break;
            }

        }
        //#endregion

    </script>
}