@{
    ViewData["MainNum"] = "3";
    ViewData["SubNum"] = "3";
    ViewData["Title"] = "逆變器交叉分析";
}

<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 overflow-auto">

            <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>
                    <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">
            <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>
            <div class="subheader">
                <h1 class="subheader-title">
                    <i class="subheader-icon fal fa-crosshairs"></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-5 d-flex justify-content-start">
                                    <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="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>
                                            <button type="button" class="btn btn-secondary waves-effect waves-themed btn-change-searchType" id="Group1" onclick="changeType(1,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 class="pr-3">
                                        <button type="button" class="btn btn-secondary waves-effect waves-themed " id="btn-analysis-inverter" onclick="GetAnalysisInverter()">查詢</button>
                                    </div>
                                </div>

                                <div class="mb-5">
                                    <div class="card p-3 w-100">
                                        <div class="row mb-5 d-flex justify-content-end">
                                            <div class="pr-3">
                                                <div class="btn-group" id="js-demo-nesting" role="group" aria-label="Button group with nested dropdown">
                                                    <div class="btn-group" role="group">
                                                        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">選擇比較欄位</button>
                                                        <ul class="dropdown-menu" id="compare-dropdown-menu" style="width:10vw;overflow-x:hidden; max-height:50vh">
                                                            @*<li><a href="javascript:void(0)" class="dropdown-item" data-value="option1" tabIndex="-1">日照度<input type="checkbox" class="float-right" name="compare_col[]" value="Irradiance" /></a></li>
                                                                <li><a href="javascript:void(0)" class="dropdown-item" data-value="option2" tabIndex="-1">直流功率 (KW)<input type="checkbox" class="float-right" name="compare_col[]" value="DCKW" /></a></li>
                                                                <li><a href="javascript:void(0)" class="dropdown-item" data-value="option3" tabIndex="-1">輸出功率 (KW)<input type="checkbox" class="float-right" name="compare_col[]" value="ACKW" /></a></li>
                                                                <li><a href="javascript:void(0)" class="dropdown-item" data-value="option4" tabIndex="-1">直流電壓1 (V)<input type="checkbox" class="float-right" name="compare_col[]" value="DC1V" /></a></li>
                                                                <li><a href="javascript:void(0)" class="dropdown-item" data-value="option5" tabIndex="-1">直流電流1 (A)<input type="checkbox" class="float-right" name="compare_col[]" value="DC1A" /></a></li>
                                                                <li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">直流功率1 (KW)<input type="checkbox" class="float-right" name="compare_col[]" value="DC1KW" /></a></li>
                                                                <li><a href="javascript:void(0)" class="dropdown-item" data-value="option4" tabIndex="-1">直流電壓2 (V)<input type="checkbox" class="float-right" name="compare_col[]" value="DC2V" /></a></li>
                                                                <li><a href="javascript:void(0)" class="dropdown-item" data-value="option5" tabIndex="-1">直流電流2 (A)<input type="checkbox" class="float-right" name="compare_col[]" value="DC2A" /></a></li>
                                                                <li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">直流功率2 (KW)<input type="checkbox" class="float-right" name="compare_col[]" value="DC2KW" /></a></li>
                                                                <li><a href="javascript:void(0)" class="dropdown-item" data-value="option4" tabIndex="-1">直流電壓3 (V)<input type="checkbox" class="float-right" name="compare_col[]" value="DC3V" /></a></li>
                                                                <li><a href="javascript:void(0)" class="dropdown-item" data-value="option5" tabIndex="-1">直流電流3 (A)<input type="checkbox" class="float-right" name="compare_col[]" value="DC3A" /></a></li>
                                                                <li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">直流功率3 (KW)<input type="checkbox" class="float-right" name="compare_col[]" value="DC3KW" /></a></li>
                                                                <li><a href="javascript:void(0)" class="dropdown-item" data-value="option4" tabIndex="-1">直流電壓4 (V)<input type="checkbox" class="float-right" name="compare_col[]" value="DC4V" /></a></li>
                                                                <li><a href="javascript:void(0)" class="dropdown-item" data-value="option5" tabIndex="-1">直流電流4 (A)<input type="checkbox" class="float-right" name="compare_col[]" value="DC4A" /></a></li>
                                                                <li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">直流功率4 (KW)<input type="checkbox" class="float-right" name="compare_col[]" value="DC4KW" /></a></li>
                                                                <li><a href="javascript:void(0)" class="dropdown-item" data-value="option4" tabIndex="-1">直流電壓5 (V)<input type="checkbox" class="float-right" name="compare_col[]" value="DC5V" /></a></li>
                                                                <li><a href="javascript:void(0)" class="dropdown-item" data-value="option5" tabIndex="-1">直流電流5 (A)<input type="checkbox" class="float-right" name="compare_col[]" value="DC5A" /></a></li>
                                                                <li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">直流功率5 (KW)<input type="checkbox" class="float-right" name="compare_col[]" value="DC5KW" /></a></li>
                                                                <li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">交流電壓A (V)<input type="checkbox" class="float-right" name="compare_col[]" value="AC1V" /></a></li>
                                                                <li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">交流電壓B (V)<input type="checkbox" class="float-right" name="compare_col[]" value="AC2V" /></a></li>
                                                                <li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">交流電壓C (V)<input type="checkbox" class="float-right" name="compare_col[]" value="AC3V" /></a></li>
                                                                <li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">交流電流A (A)<input type="checkbox" class="float-right" name="compare_col[]" value="AC1A" /></a></li>
                                                                <li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">交流電流B (A)<input type="checkbox" class="float-right" name="compare_col[]" value="AC2A" /></a></li>
                                                                <li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">交流電流C (A)<input type="checkbox" class="float-right" name="compare_col[]" value="AC3A" /></a></li>
                                                                <li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">PR<input type="checkbox" class="float-right" name="compare_col[]" value="PR" /></a></li>
                                                                <li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">RA1 (%)<input type="checkbox" class="float-right" name="compare_col[]" value="RA1" /></a></li>
                                                                <li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">RA2 (%)<input type="checkbox" class="float-right" name="compare_col[]" value="RA2" /></a></li>
                                                                <li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">RA3 (%)<input type="checkbox" class="float-right" name="compare_col[]" value="RA3" /></a></li>
                                                                <li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">RA4 (%)<input type="checkbox" class="float-right" name="compare_col[]" value="RA4" /></a></li>
                                                                <li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">RA5 (%)<input type="checkbox" class="float-right" name="compare_col[]" value="RA5" /></a></li>*@
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            @*<div class="pr-3">
                                                    <div class="btn-group" id="js-demo-nesting" role="group" aria-label="Button group with nested dropdown">
                                                        <div class="btn-group" role="group">
                                                            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">下載　</button>
                                                            <div class="dropdown-menu">
                                                                <a class="dropdown-item" href="javascript:void(0)">2021 四月</a>
                                                                <a class="dropdown-item" href="javascript:void(0)">2021 三月</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="pr-3">
                                                    <button type="button" class="btn btn-secondary waves-effect waves-themed"><i class="fal fa-expand fs-md"></i></button>
                                                </div>*@

                                        </div>
                                        <figure class="highcharts-figure">
                                            <div id="container"></div>

                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>

@section Scripts{
    <script>
        var searchType = 0;//搜尋條件(日,日區間,月,年)
        var datepicker;
        var timerange;//選取時間
        var selected_inverter = [];
        var selected_YAxis = [];
        var analysisInverter;
        var myXAxis = []; var myYAxis = []; var mySeries = [];
        var chart;
        var default_compare_col = [];
        var current_compare_col = [];
        var Single_day_compare_col = [
            { key: "Irradiance", title: "日照度", default: true },
            { key: "DCKW", title: "直流功率 (KW)", default: false },
            { key: "ACKW", title: "輸出功率 (KW)", default: true },
            { key: "DC1V", title: "直流電壓1 (V)", default: false },
            { key: "DC1A", title: "直流電流1 (A)", default: false  },
            { key: "DC1KW", title: "直流功率1 (KW)", default: false  },
            { key: "DC2V", title: "直流電壓2 (V)", default: false },
            { key: "DC2A", title: "直流電流2 (A)", default: false },
            { key: "DC2KW", title: "直流功率2 (KW)", default: false },
            { key: "DC3V", title: "直流電壓3 (V)", default: false },
            { key: "DC3A", title: "直流電流3 (A)", default: false },
            { key: "DC3KW", title: "直流功率3 (KW)", default: false },
            { key: "DC4V", title: "直流電壓4 (V)", default: false },
            { key: "DC4A", title: "直流電流4 (A)", default: false },
            { key: "DC4KW", title: "直流功率4 (KW)", default: false },
            { key: "DC5V", title: "直流電壓5 (V)", default: false },
            { key: "DC5A", title: "直流電流5 (A)", default: false },
            { key: "DC5KW", title: "直流功率5 (KW)", default: false },
            { key: "AC1V", title: "交流電壓A (V)", default: false },
            { key: "AC2V", title: "交流電壓B (V)", default: false },
            { key: "AC3V", title: "交流電壓C (V)", default: false },
            { key: "AC1A", title: "交流電流A (A)", default: false },
            { key: "AC2A", title: "交流電流B (A)", default: false },
            { key: "AC3A", title: "交流電流C (A)", default: false },
            { key: "PR", title: "PR", default: true },
            { key: "RA1", title: "RA1 (%)", default: false },
            { key: "RA2", title: "RA2 (%)", default: false },
            { key: "RA3", title: "RA3 (%)", default: false },
            { key: "RA4", title: "RA4 (%)", default: false },
            { key: "RA5", title: "RA5 (%)", default: false }
        ]
        var Range_compare_col = [
            { key: "Irradiance", title: "日照度", default: true },
            { key: "KWH", title: "KWH", default: true },
            { key: "TodayKWH", title: "TodayKWH", default: false },
            { key: "TotalKWH", title: "TotalKWH", default: false },
            { key: "PR", title: "PR", default: true },
            { key: "RA1", title: "RA1 (%)", default: false },
            { key: "RA2", title: "RA2 (%)", default: false },
            { key: "RA3", title: "RA3 (%)", default: false },
            { key: "RA4", title: "RA4 (%)", default: false },
            { key: "RA5", title: "RA5 (%)", default: false }
        ]

        $(function () {
            $('#collapse').trigger("click");

            //#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');
            timerange = $('#DateGet').val();
            //#endregion

            //#region 載入左邊選單列表
            GetPowerStationCollapse("");
            //#endregion


            PushSpecifyCurrentCompareCol(Single_day_compare_col);
        })

        @*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";
            }
        }*@

        //#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 = "";//隱藏
            $(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);

                    PushSpecifyCurrentCompareCol(Single_day_compare_col);
                    break;
                case 1:

                    //#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);

                    PushSpecifyCurrentCompareCol(Range_compare_col);

                    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);

                    PushSpecifyCurrentCompareCol(Range_compare_col);

                    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);

                    PushSpecifyCurrentCompareCol(Range_compare_col);

                    break;
            }
            if (type == 1) {
                timerange = $('#DateGettext').val();
            }
            else {
                timerange = $('#DateGet').val();
            }
        }
        //#endregion

        //#region 快速填入條件(EX.今昨天)
        function quickSearch(day) {
            switch (searchType) {
                case 0:
                    if (day == 0) {
                        var today = new Date().toISOString().substring(0, 10);
                        $('#DateGet').val(today).trigger('change');
                    } else {
                        var dateLimit = new Date(new Date().setDate(new Date().getDate() - 1)).toISOString().substring(0, 10);
                        $('#DateGet').val(dateLimit).trigger('change');
                    }
                    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).trigger('change');
                    } else {
                        //#region 預設近30天
                        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).trigger('change');
                    }
                    break;
                case 2:
                    if (day == 0) {
                        var now_month = new Date().toISOString().substring(0, 7);
                        $('#DateGet').val(now_month).trigger('change');
                    } else {
                        var dateLimit = new Date(new Date().setMonth(new Date().getMonth() - 1)).toISOString().substring(0, 7);
                        $('#DateGet').val(dateLimit).trigger('change');
                    }
                    break;
                case 3:
                    if (day == 0) {
                        var now_year = new Date().toISOString().substring(0, 4);
                        $('#DateGet').val(now_year).trigger('change');
                    } else {
                        var dateLimit = new Date(new Date().setFullYear(new Date().getFullYear() - 1)).toISOString().substring(0, 4);
                        $('#DateGet').val(dateLimit).trigger('change');
                    }
                    break;
            }
        }
        //#endregion

        //#region 更換input
        $('#DateGet').on('change', function () {
            timerange = $('#DateGet').val();
        });
        //#endregion

        //#region 更換inputtext
        $('#DateGettext').on('change', function () {
            timerange = $('#DateGettext').val();
        });
        //#endregion

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

        $('#js_list_accordion').on("change", 'input[name="selectedInverterId[]"]', function (event) {
            var powerStationId = $(this).attr('data-power-station-id');

            if (this.checked) {
                if ($.map(selected_inverter, function (item, index) { return item.InverterId }).indexOf(this.value) < 0) {
                    selected_inverter.push({ 'powerStationId': powerStationId, 'InverterId': this.value });
                }
            } else {
                var result = $.map(selected_inverter, function (item, index) { return item.InverterId }).indexOf(this.value)
                if (result > -1) {
                    selected_inverter.splice(result, 1);
                }
            }
        });

        $('#js_list_accordion').on("change", 'input[name="selectedInverterLayer2[]"]', function (event) {
            if (this.checked) {
                $(this).parents(".selected_group").find('input[name="selectedInverterId[]"]').prop("checked", true).trigger("change");
            } else {
                $(this).parents(".selected_group").find('input[name="selectedInverterId[]"]').prop("checked", false).trigger("change");
            }
        });

        $('#compare-dropdown-menu').on('change', 'input[name="compare_col[]"]', function (e) {
            if (this.checked) {
                if ($.inArray($(this).val(), default_compare_col) == -1) {
                    default_compare_col.push($(this).val());
                }
            } else {
                if ($.inArray($(this).val(), default_compare_col) > -1) {
                    default_compare_col.splice($.inArray($(this).val(), default_compare_col), 1);
                }
            }

            ReloadHighCharts();
        });

        function GetPowerStationCollapse(filter) {
            var url = "/AnalysisInverter/GetInverterCollapse"

            var send_data = {
                Filter: filter
            }

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

                var inverterCollapse = rel.data;

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

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

                var str = "";

                Object.keys(inverterCollapse).map(function (key, index1) {
                    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-' + index1 + '" 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-' + index1 + '" class="collapse" data-parent="#js_list_accordion" style="">';
                        Object.keys(inverterCollapse[key]).map(function (powerStationkey, index2) {
                            str += '<div id="cp-' + index1 + '-' + index2 + '" class="card py-3 selected_group">' +
                                '<div class="card-header pl-4 pr-3 d-flex justify-content-start">' +
                                '<div class="mr-3">' +
                                '<input type="checkbox" class="" name="selectedInverterLayer2[]" >' +
                                '</div>' +
                                '<a href="javascript:;" class="" data-toggle="collapse" data-target="#cp-' + index1 + '-' + index2 + ' > .card-body" aria-expanded="true">' +
                                '<span class="collapsed-hidden"><h5 class="font-weight-bold mb-0">' + powerStationkey + '<i class="fal fa-chevron-down fs-xl ml-2"></i></h5></span>' +
                                '<span class="collapsed-reveal"><h5 class="font-weight-bold mb-0">' + powerStationkey + '<i class="fal fa-chevron-up fs-xl ml-2"></i></h5></span>' +
                                '</a>' +
                                '</div>' +
                                '<div class="card-body p-0 collapse show">' +
                                '<div class="p-0">' +
                                '<ul class="list-group list-group-flush">';
                        $.each(inverterCollapse[key][powerStationkey], function (index, inverter) {
                            str += '<li class="list-group-item pr-0 d-flex justify-content-start">' +
                                '<div class=""><input type="checkbox" class="mr-2" name="selectedInverterId[]" data-power-station-id="' + inverter.powerStationId + '" value="' + inverter.inverterId + '">' + '</div>' +
                                '<a href="javascript:void(0)">' + inverter.inverterName + '</a>' +
                            '</li>';
                        });
                            str += '</ul>';
                            str += '</div>';
                            str += '</div>';
                            str += '</div>';
                    });

                    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");

                @*if (selected_inverter.length <= 0) {
                    $('input[name="selectedInverterId[]"]').first().trigger("click");
                }*@

                $('input[name="selectedInverterId[]"]').each(function () {
                    if ($.inArray(this.value, selected_inverter) > -1) {
                        $(this).prop('checked', true);
                    }
                });

                $("#js_list_accordion .collapse").collapse('show');

            }, 'json');
        }

        //#region 加入已勾選的設備所要顯示得比較欄位
        function PushSpecifyCurrentCompareCol(compare_col) {

            default_compare_col = []; current_compare_col = [];
            $.each(compare_col, function (index, item) {
                if (!current_compare_col.some(x => x.key == item.key)) {
                    item.count = 1;
                    current_compare_col.push(item);
                } else {
                    current_compare_col.find(function (obj, index) {
                        if (obj.key == item.key) {
                            current_compare_col[index].count += 1;
                        }
                    });
                }

                if (item.default) {
                    default_compare_col.push(item.key);
                }
            });

            console.log("default_compare_col", default_compare_col);

            ChangeCompareSelectOption();
        }
        //#endregion

        function ChangeCompareSelectOption() {
            $("#compare-dropdown-menu").empty();
            var str = "";
            $.each(current_compare_col, function (index, item) {
                str += '<li><a href="javascript:void(0)" class="dropdown-item" tabIndex="-1">' + item.title + '<input type="checkbox" class="float-right" name="compare_col[]" value="' + item.key + '" /></a></li>'
            });
            $("#compare-dropdown-menu").append(str);

            $('input[name="compare_col[]"]').each(function () {
                if ($.inArray(this.value, default_compare_col) > -1) {
                    $(this).prop('checked', true);
                }
            });
        }

        function GetAnalysisInverter() {

            var date;
            if (searchType != 1) {
                date = $('#DateGet').val();
            } else {
                date = $('#DateGettext').val();
            }

            var url = "/AnalysisInverter/GetAnalysisByInverterIds";

            var send_data = {
                SearchType: searchType,
                SelectedDate: date,
                InverterIdInfos: selected_inverter
            }

            if (selected_inverter.length <= 0) {
                toast_warning("請至少選擇一逆變器設備");
                return;
            }

            $("#btn-analysis-inverter").html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>').attr("disabled", true);

            $.post(url, send_data, function (rel) {
                if (rel.code != "0000") {
                    toast_error(rel.msg);
                    $("#btn-analysis-inverter").html('查詢').attr("disabled", false);
                    return;
                }

                analysisInverter = rel.data;

                $('input[name="compare_col[]"]').each(function () {
                    if ($.inArray(this.value, default_compare_col) > -1) {
                        $(this).prop('checked', true).trigger('change');
                    }
                });

                ReloadHighCharts();
                $("#btn-analysis-inverter").html('查詢').attr("disabled", false);
            }, 'json');
        }

        function ReloadHighCharts() {

            if (analysisInverter == undefined) {
                return;
            }

            //彙整出 有被選擇的 要顯示的覽位
            selected_YAxis = default_compare_col.filter(obj1 => current_compare_col.some(obj2 => obj1 == obj2.key));

            myYAxis = []; mySeries = [];

            myXAxis = analysisInverter.xAxis

            Object.keys(analysisInverter.multipleYaxes).map(function (key, index) {

                if (selected_YAxis.indexOf(key) > -1) {
                    var yAxis = {
                        title: {
                            text: analysisInverter.multipleYaxes[key],
                        },
                        id: key,
                        opposite: myYAxis.length > 0 ? true : false,
                        showEmpty: false
                    }

                    myYAxis.push(yAxis);
                }
            });

            analysisInverter.series.map(function (item, index) {
                if (selected_YAxis.indexOf(item.yaxesKey) > -1) {
                    var ser = {
                        type: 'spline',
                        name: item.name,
                        data: item.values,
                        yAxis: item.yaxesKey,
                    }

                    mySeries.push(ser);
                }
            });

            if (chart) {
                chart.destroy();
            }

            if (myYAxis != undefined && myXAxis != undefined && mySeries != undefined) {
                chart = new Highcharts.Chart({
                    lang: {    //匯出相關中文名稱配置
                        printChart: '列印圖表',
                        downloadJPEG: '下載JPEG檔案',
                        downloadPDF: '下載PDF檔案',
                        downloadPNG: '下載PNG檔案',
                        downloadSVG: '下載SVG檔案',
                        downloadCSV: '下載CSV檔案',
                        downloadXLS: '下載XLS檔案',
                        viewData: '檢視資料表格',
                        viewFullscreen: '全屏檢視'
                    },
                    chart: {
                        renderTo: 'container',
                        height: 600,
                        animation: false
                    },
                    title: {
                        text: '交叉分析圖表'
                    },
                    tooltip: {
                        formatter: function () {
                            return '<b>' + this.series.name + '</b><br>' +
                                '<span>' + this.x + '</span><br>' +
                                '<b style = "color:rgb(103, 180, 172);" >' + this.point.y + '</b>';
                        }
                    },
                    xAxis: {
                        categories: myXAxis,
                        labels: {
                            step: 1,
                            formatter: function () {
                                if (searchType == 0) {
                                    var aa = this.value.substr(-2);
                                    if (aa == "00") {
                                        return '<span>' + this.value + '</span>';
                                    } else {
                                        return '<span style="display:none">' + this.value + '</span>';
                                    }
                                } else {
                                    return this.value
                                }
                            }
                        }
                    },
                    yAxis: myYAxis,

                    series: mySeries,
                });
            }
        }
    </script>
}