@{
    ViewData["MainNum"] = "6";
    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>
<!-- Your main content goes below here: -->
<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 px-3">
                        <div class="pr-3">
                            <div class="btn-group btn-group-md">
                                <button type="button" class="btn btn-success waves-effect waves-themed" onclick="ChangeType(9)" id="button9">全部</button>
                                <button type="button" class="btn btn-secondary waves-effect waves-themed" onclick="ChangeType(1)" id="button1">巡檢</button>
                                <button type="button" class="btn btn-secondary waves-effect waves-themed" onclick="ChangeType(0)" id="button0">清洗</button>
                            </div>
                        </div>
                    </div>

                    <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 d-flex justify-content-end px-3">
                        <button type="button" class="btn btn-info waves-effect waves-themed mb-3 mr-2" onClick="saveToExcel();">
                            <span class="fal fa-file-excel mr-1"></span>
                            匯出
                        </button>
                        <a href="javascript:;" class="btn btn-success waves-effect waves-themed mb-3 mr-2" data-toggle="modal" data-target="#Operation-modal" onclick="AddOperationPlan()">
                            <span class="fal fa-plus mr-1"></span>
                            計劃
                        </a>
                    </div>
                    <div class="frame-wrap">
                        <table id="OperationPlan_table" class="table table-bordered table-hover m-0 text-center">
                            <thead class="thead-themed">
                                <tr>
                                    <th>計劃單號</th>
                                    <th>項目</th>
                                    <th>電站</th>
                                    <th>排程週期</th>
                                    <th>每次預期/天</th>
                                    <th>開始時間</th>
                                    <th>email 通知</th>
                                    <th>建立人</th>
                                    <th>建立時間</th>
                                    <th>功能</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                        <table id="NoView" style="display:none">
                            <thead class="thead-themed">
                                <tr>
                                    <th>計劃單號</th>
                                    <th>項目</th>
                                    <th>電站</th>
                                    <th>排程週期</th>
                                    <th>每次預期/天</th>
                                    <th>開始時間</th>
                                    <th>email 通知</th>
                                    <th>建立人</th>
                                    <th>建立時間</th>
                                </tr>
                            </thead>
                            <tbody id="NoViewbody">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="Operation-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    新增/修改 定期計劃
                </h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"><i class="fal fa-times"></i></span>
                </button>
            </div>
            <div class="modal-body">
                <form class="operation-form" id="Operation-form">
                    <div class="row mb-3">
                        <div class="col-lg-7">
                            <div class="form-group">
                                <label class="form-label" for="operation_powerStationselect_modal">電站名</label>
                                <select class="form-control" id="operation_powerStationselect_modal">
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-5">
                            <div class="form-group">
                                <label class="form-label" for="operation_type_modal">項目</label>
                                <select class="form-control" id="operation_type_modal">
                                    <option value="0">清洗</option>
                                    <option value="1">巡檢</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-lg-7">
                            <div class="form-group">
                                <div class="row d-flex justify-content-start align-items-center">
                                    <div class="col-4">自動排程　每</div>
                                    <div class="col">
                                        <input type="number" id="operation_scheduleNum_modal" class="form-control">
                                    </div>
                                    <div class="col">
                                        <select class="form-control" id="operation_scheduleType_modal" width="70" style="width: 70px">
                                            <option value="0">天</option>
                                            <option value="1">週</option>
                                            <option value="2">月</option>
                                            <option value="3">季</option>
                                            <option value="4">年</option>
                                        </select>
                                    </div>
                                    <div class="col">安排一次</div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row d-flex justify-content-start align-items-center">
                                    <div class="col-3">每次預期</div>
                                    <div class="col">
                                        <input type="number" id="operation_workDay_modal" class="form-control">
                                    </div>
                                    <div class="col">天內完成</div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row d-flex justify-content-start align-items-center">
                                    <div class="col-3">開始時間</div>
                                    <div class="col-5">
                                        <input type="date" id="operation_startTime_modal" class="form-control" placeholder="2000-01-01">
                                    </div>
                                    <div class="col">~<span id="operation_endTime_modal"></span></div>

                                </div>
                            </div>
                        </div>
                        <div class="col-lg-5">
                            <div class="form-group">
                                <label class="form-label" for="operation_description_modal">描述</label>
                                <textarea class="form-control" id="operation_description_modal" rows="5"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-lg-7">
                            <div class="form-group">
                                <label class="form-label" for="operation_emailType_modal">email提醒</label>
                                <select class="form-control" id="operation_emailType_modal">
                                    <option value="0">當天</option>
                                    <option value="1">前1天</option>
                                    <option value="2">前2天</option>
                                    <option value="3">前3天</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="SaveOperationPlan()">確定</button>
            </div>
        </div>
    </div>
</div>


@section Scripts{


    <script>
        var selected_id = 0;
        var type = 9;//全部,清洗,巡檢
        var ids = new Array(0);//當前選擇縣市
        var powerids = new Array(0);//當前選擇電站
        var Allids = new Array(0);//全部縣市
        var Allpowerids = new Array(0);//全部電站

        //#region Array.Remove
        Array.prototype.remove = function (val) {
            var index = this.indexOf(val);
            if (index > -1) {
                this.splice(index, 1);
            }
        }; 
        //#endregion

        $(function () {

            //#region 電站下拉式選單select_option
            //var url_operation_select_option = "/Operation/GetPowerStationSelectOption";
            //$.get(url_operation_select_option, function (rel) {
            //    if (rel.code != "0000") {
            //        toast_error(rel.data.msg);
            //        return;
            //    }

            //    $("#operation_powerStationselect_modal").empty();
            //    $.each(rel.data, function (index, val) {
            //        $("#operation_powerStationselect_modal").append($("<option />").val(val.value).text(val.text));
            //    });

            //});
            ////#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) {
                        $("#operation_powerStationselect_modal").empty();
                        $.each(rel.data, function (index, val) {
                            $("#operation_powerStationselect_modal").append($("<option />").val(val.id).text(val.name));
                        });
                        $('#CheckPowerStation').append("<div class='col-2 mb-2 custom-control custom-checkbox custom-control-inline' id='station_" + val.id + "' > ");
                        $('#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));
                    });
                    OperationPlanTable.ajax.reload();
                })
            })
            //#endregion

            //#region 定時計畫列表 DataTable
            OperationPlanTable = $("#OperationPlan_table").DataTable({
                "pageLength": 20,
                "paging": true,
                "lengthChange": false,
                "searching": false,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "responsive": true,
                "order": [[9, "desc"]],
                "columns": [{
                    "data": "planId"
                }, {
                    "data": "typeName"
                }, {
                    "data": "powerStationName"
                }, {
                    "data": "schedule"
                }, {
                    "data": "workDay"
                }, {
                    "data": "startTimeString"
                }, {
                    "data": "emailTypeName"
                }, {
                    "data": "createdPerson"
                }, {
                    "data": "createTimeString"
                }, {
                    "data": "function"
                }],
                "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": ": 降冪排列"
                    }
                },
                'createdRow': function (row, data, dataIndex) {
                    $(row).attr('data-id', data.id);
                },
                "ajax": {
                    "url": "/Operation/OperationPlanTable",
                    "type": "POST",
                    "data": function (d) {
                        d.id = powerids,
/*                            d.id = [1],*/
                        d.type = type
                    },
                    "dataSrc": function (rel) {
                        if (rel.data.code == "9999") {
                            toast_error(rel.data.msg);
                            return;
                        }
                        data = rel.data.data;
                        if (data == null || data.length == 0) {
                            this.data = [];
                        }
                        return data;
                    }
                }
            });
            //#endregion
        })

        //#region 縣市全選
        function Allcity()
        {
            var Newpowerids = new Array(0);
            ids = [];
            $.each(Allids, function (index, val) {
                var cityid = 'cityID_' + val;
                document.getElementById(cityid).setAttribute("class", 'btn btn-success waves-effect waves-themed ml-2');
                ids.push(val);
            });
            var send_data = {
                cityid: ids
            }
            var Nurl = "/PowerStation/GetSolarByCity";
            $.post(Nurl, send_data, function (rel) {
                if (rel.code != "0000") {
                    toast_error(rel.msg);
                    return;
                }
                $('#CheckPowerStation').empty();
                Allpowerids = [];
                $.each(rel.data, function (index, val) {
                    if (powerids.includes(String(val.id))) {
                        $('#CheckPowerStation').append("<div class='col-2 mb-2 custom-control custom-checkbox custom-control-inline' id='station_" + val.id + "' > ");
                        $('#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>");
                        Newpowerids.push(String(val.id));
                    }
                    else {
                        $('#CheckPowerStation').append("<div class='col-2 mb-2 custom-control custom-checkbox custom-control-inline' id='station_" + val.id + "' > ");
                        $('#station_' + val.id).append("<input type='checkbox' class='custom-control-input' id='check_" + val.id + "'>");
                        $('#station_' + val.id).append("<label class='custom-control-label' for='check_" + val.id + "'>" + val.name + "</label>");
                    }
                    Allpowerids.push(String(val.id));
                });
                powerids = [];
                powerids = Newpowerids;
            })
            OperationPlanTable.ajax.reload();
        }
        //#endregion

        //#region 電站全選
        function Allpowerstation() {
            powerids = [];
            $.each(Allpowerids, function (index,val) {
                $('#check_' + val).prop("checked", true);
                powerids.push(val);
            })
            OperationPlanTable.ajax.reload();
        }
        //#endregion

        //#region 選擇縣市
        $('#city').on("click", "button", function () {
            var clickid = $(this).attr('id');
            var classid = clickid.split("_");
            var Newpowerids = new Array(0);
            var value = document.getElementById(clickid).className;
            ids.sort(function (a, b) {
                return a - b;
            });
            var send_data = {
                cityid: ids
            }
            if (value == 'btn btn-outline-success waves-effect waves-themed ml-2') {  //選擇
                document.getElementById(clickid).setAttribute("class", 'btn btn-success waves-effect waves-themed ml-2');
                ids.push(classid[1]);
            }
            else { //取消
                document.getElementById(clickid).setAttribute("class", 'btn btn-outline-success waves-effect waves-themed ml-2');
                ids.remove(classid[1]);
            }
            ids.sort();
            var Nurl = "/PowerStation/GetSolarByCity";
            $.post(Nurl, send_data, function (rel) {
                if (rel.code != "0000") {
                    toast_error(rel.msg);
                    return;
                }
                $('#CheckPowerStation').empty();
                Allpowerids = [];
                $.each(rel.data, function (index, val) {
                    if (powerids.includes(String(val.id))) {
                        $('#CheckPowerStation').append("<div class='col-2 mb-2 custom-control custom-checkbox custom-control-inline' id='station_" + val.id + "' > ");
                        $('#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>");
                        Newpowerids.push(String(val.id));
                    }
                    else
                    {
                        $('#CheckPowerStation').append("<div class='col-2 mb-2 custom-control custom-checkbox custom-control-inline' id='station_" + val.id + "' > ");
                        $('#station_' + val.id).append("<input type='checkbox' class='custom-control-input' id='check_" + val.id + "'>");
                        $('#station_' + val.id).append("<label class='custom-control-label' for='check_" + val.id + "'>" + val.name + "</label>");
                    }
                    Allpowerids.push(String(val.id));
                });
                powerids = [];
                powerids = Newpowerids;
            })
            OperationPlanTable.ajax.reload();
        })
        //#endregion

        //#region 選擇電站checkbox
        $('#CheckPowerStation').on("click", "input", function () {
            var clickid = $(this).attr('id');
            var classid = clickid.split("_");
            var job = document.getElementById(clickid);
            if (job.checked == true) {
                powerids.push(classid[1]);            }
            else
            {
                powerids.remove(classid[1]);
            }
            OperationPlanTable.ajax.reload();
        })

        //#endregion

        //#region 更改項目
        function ChangeType(Num) {
            type = Num;
            OperationPlanTable.ajax.reload();
            if (Num == 9)
            {
                document.getElementById("button9").setAttribute("class", "btn btn-success waves-effect waves-themed");
                document.getElementById("button1").setAttribute("class", "btn btn-secondary waves-effect waves-themed");
                document.getElementById("button0").setAttribute("class", "btn btn-secondary waves-effect waves-themed");
            }
            else if (Num == 1)
            {
                document.getElementById("button1").setAttribute("class", "btn btn-success waves-effect waves-themed");
                document.getElementById("button9").setAttribute("class", "btn btn-secondary waves-effect waves-themed");
                document.getElementById("button0").setAttribute("class", "btn btn-secondary waves-effect waves-themed");
            }
            else if(Num == 0)
            {
                document.getElementById("button0").setAttribute("class", "btn btn-success waves-effect waves-themed");
                document.getElementById("button1").setAttribute("class", "btn btn-secondary waves-effect waves-themed");
                document.getElementById("button9").setAttribute("class", "btn btn-secondary waves-effect waves-themed");
            }
        }
        //#endregion

        //#region 新增計畫基本資料
        function AddOperationPlan() {

            selected_id = 0;
            $("#Operation-modal .modal-title").html("定時計劃 - 新增");
            $("#Operation-form").trigger("reset");
            $("#Operation-modal").modal();
        }
        //#endregion

        //#region 結束時間顯示
        $('#operation_startTime_modal').change(function () {
            var dat = new Date($('#operation_startTime_modal').val());
            var day = new Date(dat.setDate(dat.getDate() + Number($('#operation_workDay_modal').val()) - 1)).toISOString().split("T");
            document.getElementById("operation_endTime_modal").innerHTML = day[0];
        });
        //#endregion

        //#region 儲存定時計畫資料
        function SaveOperationPlan() {
            var url = "/Operation/SaveOperationPlan";

            var send_data = {
                id: selected_id,
                PowerStationId: $("#operation_powerStationselect_modal").val(),
                Type: $("#operation_type_modal").val(),
                ScheduleNum: $("#operation_scheduleNum_modal").val(),
                ScheduleType: $("#operation_scheduleType_modal").val(),
                WorkDay: $('#operation_workDay_modal').val(),
                StartTime: $("#operation_startTime_modal").val(),
                EndTime: document.getElementById("operation_endTime_modal").innerHTML,
                Description: $("#operation_description_modal").val(),
                EmailType: $('#operation_emailType_modal').val()
            }

            $.post(url, send_data, function (rel) {
                if (rel.code != "0000") {
                    toast_error(rel.msg);
                    return;
                }
                toast_ok(rel.msg);
                OperationPlanTable.ajax.reload();
                $('#Operation-modal').modal('hide');
            }, 'json');
        }
        //#endregion

        //#region 刪除定時計畫資料
        $('#OperationPlan_table').on("click", "button.del-btn", function () {

            selected_id = $(this).parents('tr').attr('data-id');
            Swal.fire(
                {
                    title: "刪除",
                    text: "你確定是否刪除此筆資料?",
                    type: "warning",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: "是",
                    cancelButtonText: "否"
                }).then(function (result) {
                    if (result.value) {
                        //取得單一系統管理員
                        var url = "/Operation/DeleteOneOperationPlan/";
                        var send_data = {
                            Id: selected_id
                        }
                        $.post(url, send_data, function (rel) {
                            if (rel.code == "9999") {
                                toast_error(rel.msg);
                                return;
                            }
                            toast_ok(rel.msg);
                            OperationPlanTable.ajax.reload();
                        }, 'json');
                    }
                });
        });
        //#endregion

        //#region 取一筆定時計畫
        $('#OperationPlan_table').on("click", "button.edit-btn", function () {
            $("#Operation-modal .modal-title").html("定時計劃 - 編輯");

            selected_id = $(this).parents('tr').attr('data-id');

            //取得單一異常設定資料
            var url = "/Operation/GetOneOperationPlan/";

            var send_data = {
                id: selected_id
            }


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

                $("#operation_powerStationselect_modal").val(rel.data.powerStationId);
                $("#operation_type_modal").val(rel.data.type);
                $("#operation_scheduleNum_modal").val(rel.data.scheduleNum);
                $("#operation_scheduleType_modal").val(rel.data.scheduleType);
                $("#operation_workDay_modal").val(rel.data.workDay);
                var start = rel.data.startTime.split(' ');
                $("#operation_startTime_modal").val(start[0]);
                $("#operation_description_modal").val(rel.data.description);
                $("#operation_emailType_modal").val(rel.data.emailType);

                var dat = new Date(start);
                var day = new Date(dat.setDate(dat.getDate() + Number(rel.data.workDay))).toISOString().split("T");
                document.getElementById("operation_endTime_modal").innerHTML = day[0];

                $("#Operation-modal").modal();
            }, 'json');

        });
        //#endregion

        //#region 儲存Excel
        function saveToExcel() {

            var url = "/Operation/OperationPlanTable";
            var send_data = {
                id: [1, 2]
            };
            $.post(url, send_data, function (rel) {
                if (rel.data.code != "0000") {
                    toast_error(rel.msg);
                    return;
                }
                $('#NoViewbody').empty();
                for (var i = 0; i < rel.data.data.length; i++)
                {
                    

                    var name = "<td>" + String(rel.data.data[i].planId) + "</td>" + "<td>" + rel.data.data[i].typeName + "</td>" + "<td>" + rel.data.data[i].powerStationName + "</td>"
                        + "<td>" + rel.data.data[i].schedule + "</td>" + "<td>" + rel.data.data[i].workDay + "</td>" + "<td>" + rel.data.data[i].startTimeString + "</td>" +
                        "<td>" + rel.data.data[i].emailTypeName + "</td>" + "<td>" + rel.data.data[i].createdPerson + "</td>" + "<td>" + rel.data.data[i].createTimeString + "</td>";
                    $('#NoViewbody').append("<tr>" + name + "</tr>");

                    //$('#NoViewbody').append("<td>" + rel.data.data[i].planId + "</td>");
                    //$('#NoViewbody').append("<td>" + rel.data.data[i].typeName + "</td>");
                    //$('#NoViewbody').append("<td>" + rel.data.data[i].powerStationName + "</td>");

                    //$('#NoViewbody').append("<td>" + rel.data.data[i].schedule + "</td>");
                    //$('#NoViewbody').append("<td>" + rel.data.data[i].workDay + "</td>");
                    //$('#NoViewbody').append("<td>" + rel.data.data[i].startTimeString + "</td>");

                    //$('#NoViewbody').append("<td>" + rel.data.data[i].emailTypeName + "</td>");
                    //$('#NoViewbody').append("<td>" + rel.data.data[i].createdPerson + "</td>");
                    //$('#NoViewbody').append("<td>" + rel.data.data[i].createTimeString + "</td>");
                }

                $("#NoView").table2excel({
                    // 匯出的Excel文件的名稱
                    name: "Excel Document Name",
                    // Excel檔案的名稱
                    filename: "test",
                    //檔案字尾名
                    fileext: ".xls",
                });
            }, 'json');

            
        }
        //#endregion

    </script>

}