@{
    ViewData["MainNum"] = "6";
    ViewData["SubNum"] = "2";
    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 id="panel-5" class="panel">
    <div class="panel-container show">
        <div class="panel-content">
            <div class="row mb-3 d-flex justify-content-start 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(0)" id="button0">全部</button>
                        <button type="button" class="btn btn-secondary waves-effect waves-themed" onclick="ChangeType(3)" id="button3">維修</button>
                        <button type="button" class="btn btn-secondary waves-effect waves-themed" onclick="ChangeType(2)" id="button2">巡檢</button>
                        <button type="button" class="btn btn-secondary waves-effect waves-themed" onclick="ChangeType(1)" id="button1">清洗</button>
                    </div>
                </div>
                <div class="pr-3">
                    <button type="button" class="btn btn-secondary waves-effect waves-themed" onclick="ChangeDate30()">近30天</button>
                </div>
                <div class="pr-3">
                    <div class="form-group">
                        <input class="form-control" id="date-range" type="text" name="date" value="">
                    </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="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="ExportExcel()">
                    <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" onclick="AddRecode()">
                    <span class="fal fa-plus mr-1"></span>
                    維修單
                </a>
            </div>
            <div class="frame-wrap">
                <table id="operation_recode_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>本次作業預計</th>
                            <th>檔案</th>
                            <th>完成時間</th>
                            @if (ViewBag.myUser.Role.Layer != (int)RoleLayerEnum.CompanyUser)
                            {
                                <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>本次作業預計</th>
                            <th>檔案</th>
                            <th>完成時間</th>
                        </tr>
                    </thead>
                    <tbody id="NoViewbody">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="recode-form-modal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    <span class="main-title"></span><span class="sub-title"></span>
                </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 id="recode-form">
                    <div class="row mb-3">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="form-label" for="power_station_select_modal">電站</label>
                                <select class="form-control" id="power_station_select_modal">
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="form-label" for="work_time_modal">作業日期</label>
                                <input class="form-control" id="work_time_modal" type="date" name="work_time_modal" />
                            </div>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="form-label" for="example-select">狀態</label>
                                <div>
                                    <div class="custom-control custom-radio custom-control-inline">
                                        <input type="radio" class="custom-control-input ml-auto" id="status_none_complete" name="status_modal" value="0" />
                                        <label class="custom-control-label" for="status_none_complete">未完成</label>
                                    </div>
                                    <div class="custom-control custom-radio custom-control-inline">
                                        <input type="radio" class="custom-control-input ml-auto" id="status_complete" name="status_modal" value="1" />
                                        <label class="custom-control-label" for="status_complete">完成</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="form-label" for="work_person_select_modal">執行人員</label>
                                <select class="form-control" id="work_person_select_modal">
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row mb-3 fix-div">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <div class="form-group">
                                    <label class="form-label" for="error_code_modal">異常編號</label>
                                    <input class="form-control" id="error_code_modal" type="text" name="error_code_modal" />
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="form-label" for="fix_do_modal">維修項目</label>
                                <input class="form-control" id="fix_do_modal" type="text" name="fix_do_modal" />
                            </div>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label class="form-label" for="notice_textarea_modal">巡檢注意事項</label>
                                <textarea class="form-control" id="notice_textarea_modal" rows="5"></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label class="form-label" for="description_textarea_modal">結果描述</label>
                                <textarea class="form-control" id="description_textarea_modal" rows="5"></textarea>
                            </div>
                        </div>
                    </div>
                </form>
                <div class="row align-items-center">
                    <div class="col-2">
                        <p>檔案上傳</p>
                    </div>
                    <div id="recode_files_div" class="col-10">
                        <div class="row px-3 mb-3 d-flex justify-content-start align-items-center img-zoom-div">

                        </div>
                    </div>
                </div>
                <div class="row px-3">
                    <form id="recode-file-form" class="dropzone needsclick dz-clickable col-12" style="min-height: 7rem;">
                        @*<div class="fallback">
                                <input type="file" multiple />
                            </div>*@
                        <div class="dz-message needsclick">
                            <i class="fal fa-cloud-upload text-muted mb-3"></i> <br>
                            <span class="text-uppercase">將圖片拖曳至這裡或點擊選擇圖片.</span>
                            <br>
                            <span class="fs-sm text-muted">僅供預覽，並未實際上傳。</span>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="save-recode-btn" onclick="SaveRecode()">確定</button>
            </div>
        </div>
    </div>
</div>

@section Scripts{
    <script>
        var operationRecodeTable;
        var selected_id = 0; var selected_work_type = -1;
        var recode;
        var countOperationRecodeFile = 0;
        var recodeFileDropzone;
        var ids = new Array(0);//當前選擇縣市
        var powerids = new Array(0);//當前選擇電站
        var Allids = new Array(0);//全部縣市
        var Allpowerids = new Array(0);//全部電站
        var Type = 0; // 項目
        var datepicker;

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

        $(function () {
            //#region Date Picker
            datepicker = $('#date-range').daterangepicker({
                autoUpdateInput: false,
                locale: { format: 'YYYY/MM/DD' },
                opens: 'left'
            }, function (start, end, label) {
                @*console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));*@
            });

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

            $('#date-range').on('cancel.daterangepicker', function (ev, picker) {
                $(this).val('');
                $(this).trigger('change');
            });

            //#endregion

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

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

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

                    operationRecodeTable.ajax.reload();
                })
            })
            //#endregion

            //#region 切換電站時，載入該電站運維人員
            $("#power_station_select_modal").change(function () {

                //查詢該電站的運維人員
                var url_power_station_operation_personnel = "/PowerStation/GetOperationPersonnelSelectOptionList";

                send_data = {
                    PowerStationId: $(this).val()
                }

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

                    $("#work_person_select_modal").empty();
                    if (rel.data.length > 0) {

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

                        if (recode != null || recode != undefined) {
                            $("#work_person_select_modal").val(recode.workPersonId);
                        }
                    }
                });
            });
            //#endregion

            //#region 運維作業記錄 DataTable
            operationRecodeTable = $("#operation_recode_table").DataTable({
                "pageLength": 20,
                "paging": true,
                "lengthChange": false,
                "searching": false,
                "ordering": false,
                "info": true,
                "autoWidth": false,
                "responsive": true,
                @*"order": [[5, "desc"]],*@
                "columns": [{
                    "data": "powerStationName"
                }, {
                    "data": "formId"
                }, {
                    "data": "workTypeText"
                }, {
                    "data": "fixDo"
                }, {
                    "data": "statusText"
                }, {
                    "data": "workPersonName"
                }, {
                    "data": "operationPredict"
                }, {
                    "data": "recodeFiles"
                }, {
                    "data": "finishTime"
                }, {
                    "data": null,
                    "defaultContent": '<button class="btn btn-danger del-btn">刪除</button>'
                }],
                "columnDefs": [{
                    'targets': 7,
                    'searchable': false,
                    'orderable': false,
                    'className': 'dt-body-center img-zoom-div',
                    'createdCell': function (td, cellData, rowData, row, col) {
                        $(td).empty();
                        $(td).append('<div class="row"></div>');

                        if (cellData != null) {
                            cellData.forEach(function (value, index) {
                                CreateRecodeFileBox($(td).children(".row"), value, false);
                            });
                        }
                    }
                }, {
                    'targets': 9,
                    'visible': @(ViewBag.myUser.Role.Layer == (int)RoleLayerEnum.CompanyUser ? "false" : "true")
                }],
                "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);
                    $(row).attr('data-work-type', data.workType);
                },
                "ajax": {
                    "url": "/Operation/OperationRecodeList",
                    "type": "POST",
                    "data": function (d) {
                        d.PowerStationIds = powerids;
                        d.WorkType = Type;
                        d.Range = $('#date-range').val();
                    },
                    "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 ChangeType(type)
        {
            Type = type;
            for (var i = 0; i < 4; i++)
            {
                var name = "button" + i;
                document.getElementById(name).setAttribute("class", "btn btn-secondary waves-effect waves-themed");
            }
            document.getElementById("button" + type).setAttribute("class", "btn btn-success waves-effect waves-themed");
            operationRecodeTable.ajax.reload();

        }
        //#endregion

        //#region 改變日期
        $('#date-range').on('change', function () {
            operationRecodeTable.ajax.reload();
        });
        //#endregion

        //#region 新增維修單
        function AddRecode() {
            selected_id = 0;
            $("#recode-form-modal .modal-title .main-title").html("維修單");
            $("#recode-form-modal .modal-title .sub-title").html("");
            $("#power_station_select_modal").attr("disabled", false);
            $(".fix-div").show();
            $("#recode-form").trigger("reset");

            $("#recode-form-modal").modal();
        }
        //#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;
            })
            operationRecodeTable.ajax.reload();
        }
        //#endregion

        //#region 電站全選
        function Allpowerstation() {
            powerids = [];
            $.each(Allpowerids, function (index, val) {
                $('#check_' + val).prop("checked", true);
                powerids.push(val);
            })
            operationRecodeTable.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;
            })
            operationRecodeTable.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]);
            }
            operationRecodeTable.ajax.reload();
        })

        //#endregion

         //#region 點擊圖片放大
        $('#operation_recode_table').on("click", "img.img-zoom", function () {
            var _this = $(this);//將當前的pimg元素作為_this傳入函式
            imgShow("#img-zoom-outer-div", "#innerdiv", "#bigimg", _this);
        });
        //#endregion

        //#region 編輯表單內容
        $('#operation_recode_table').on("click", "a.edit-btn", function () {

            work_type = $(this).parents('tr').attr('data-work-type');

            if (work_type == 0) {
                $("#recode-form-modal .modal-title .main-title").html("清洗單 - ");
            } else if (work_type == 1) {
                $("#recode-form-modal .modal-title .main-title").html("巡檢單 - ");
            } else {
                $("#recode-form-modal .modal-title .main-title").html("維修單 - ");
            }

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

            //取得單一記錄表單
            var url = "/Operation/GetOneOperationRecode/";

            var send_data = {
                id: selected_id
            }

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

                recode = rel.data;

                countOperationRecodeFile = recode.recodeFiles.length;

                $("#recode-form-modal .modal-title .sub-title").html(recode.powerStationName);

                $("#power_station_select_modal").val(recode.powerStationId).trigger('change');
                $("#power_station_select_modal").attr("disabled", true);

                $("#work_time_modal").val(recode.workTime);
                var status = -1;
                if (recode.status == 0 || recode.status == 2) {
                    status = 0;
                } else if (recode.status == 1 || recode.status == 3) {
                    status = 1;
                }
                $("input[name=status_modal][value='" + status + "']").prop('checked', true); //狀態
                $('#work_person_select_modal').val(recode.workPersonId);
                if (work_type != 2) {
                    $(".fix-div").hide();
                } else {
                    $(".fix-div").show();
                    $("#error_code_modal").val(recode.errorCode);
                    $("#fix_do_modal").val(recode.fixDo);
                }
                $("#notice_textarea_modal").val(recode.notice);
                $("#description_textarea_modal").val(recode.description);

                var str = "";

                RecodeFileBox = $("#recode_files_div > .row");
                RecodeFileBox.empty();
                recode.recodeFiles.forEach(function (value, index) {
                    CreateRecodeFileBox(RecodeFileBox, value, true);
                });

                $("#recode-form-modal").modal();
            }, 'json');
        });
        //#endregion


        //#region 表單驗證
        $("#recode-form").validate({
            rules: {
            },
        });
        //#endregion

        //#region 儲存表單資料
        function SaveRecode() {

            if ($("#recode-form").valid()) {
                var url = "/Operation/SaveOperationRecode";

                var formData = new FormData();

                formData.append("Id", selected_id);
                formData.append("PowerStationId", $("#power_station_select_modal").val());
                formData.append("WorkType", selected_work_type);
                formData.append("ErrorCode", $("#error_code_modal").val());
                formData.append("FixDo", $("#fix_do_modal").val());
                formData.append("Status", $("input[name=status_modal]:checked").val());
                formData.append("WorkPersonId", $("#work_person_select_modal").val());
                formData.append("WorkTime", $("#work_time_modal").val());
                formData.append("Notice", $("#notice_textarea_modal").val());
                formData.append("Description", $("#description_textarea_modal").val());

                $.ajax({
                    type: "POST",
                    url: url,
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (rel) {
                        if (rel.code != "0000") {
                            toast_error(rel.msg);
                            return;
                        }

                        var myDropzone = Dropzone.forElement("#recode-file-form");

                        if (myDropzone.files.length > 0) {

                            myDropzone.processQueue();

                            myDropzone.on("successmultiple", function (file, rel) {
                                if (rel.code != "0000") {
                                    toast_error(rel.msg);
                                    return;
                                }

                                toast_ok(rel.msg);
                                $('#recode-form-modal').modal('hide');
                                recodeFileDropzone.removeAllFiles();

                                operationRecodeTable.ajax.reload();
                            });
                        } else {
                            $('#recode-form-modal').modal('hide');
                            myDropzone.removeAllFiles();

                            operationRecodeTable.ajax.reload();
                        }
                    }
                });
            }
        }
        //#endregion

        //#region 刪除公司
        $('#operation_recode_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/DeleteOneOperationRecode/";
                        var send_data = {
                            Id: selected_id
                        }
                        $.post(url, send_data, function (rel) {
                            if (rel.code == "9999") {
                                toast_error(rel.msg);
                                return;
                            }
                            else if (rel.code == "9998") {
                                toast_error(rel.msg);
                                return;
                            }

                            toast_ok(rel.msg);
                            operationRecodeTable.ajax.reload();
                        }, 'json');
                    }
                });
        });
        //#endregion

        //#region 取得電站選單資料 (未使用)
        function GetPowerStation() {
            var url_power_station_select_option = "/Operation/GetPowerStationSelectOption";
            $.get(url_power_station_select_option, function (rel) {
                if (rel.code != "0000") {
                    toast_error(rel.msg);
                    return;
                }

                $("#power_station_select_modal").empty();

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

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

        //#region 表單檔案資料
        Dropzone.autoDiscover = false;
        recodeFileDropzone = new Dropzone("#recode-file-form", {
            url: "/Operation/SaveOperationRecodeFile",
            acceptedFiles: "image/*, application/pdf,.doc,.docx,.xls,.xlsx",
            autoProcessQueue: false,
            parallelUploads: 5,
            maxFiles: 5,
            addRemoveLinks: true,
            uploadMultiple: true,
            dictRemoveFile: "移除",
            init: function (e) {

                var myDropzone = this;

                myDropzone.on("sending", function (file, xhr, data) {
                    if ((countOperationRecodeFile + myDropzone.files.length) > 5) {
                        toast_warning("檔案總數量不可超過 5 張");
                        myDropzone.removeFile(file);
                        return;
                    } else {

                        data.append("Id", selected_id);
                        data.append("RecodeFiles", file);

                    }
                });

            }
        });
        //#endregion

        //#region 產生檔案html
        function CreateRecodeFileBox(dom, value, show_del_btn) {
            var str = "";
            str += '<div class="col-auto  px-0 py-2 mx-2">';
            var split = value.fileName.split(".");
            var excel_format = ["xls", "xlsx"];
            var word_format = ["doc", "docx"];
            if (split[split.length - 1].toLowerCase() == "pdf") {
                str += '<a href="' + value.fileName + '" class="btn btn-info waves-effect waves-themed mb-3 mr-2" download><i class="fal fa-file-pdf" style="font-size: 1.5em; line-height: 2;"></i></a>';
            } else if (excel_format.indexOf(split[split.length - 1].toLowerCase()) > -1) {
                str += '<a href="' + value.fileName + '" class="btn btn-info waves-effect waves-themed mb-3 mr-2" download><i class="fal fa-file-excel" style="font-size: 1.5em; line-height: 2;"></i></a>';
            } else if (word_format.indexOf(split[split.length - 1].toLowerCase()) > -1) {
                str += '<a href="' + value.fileName + '" class="btn btn-info waves-effect waves-themed mb-3 mr-2" download><i class="fal fa-file-word" style="font-size: 1.5em; line-height: 2;"></i></a>';
            } else {
                str += '<img src="' + value.fileName + '" class="img-zoom" width="100%" />';
            }

            if (show_del_btn) {
                str += '<a href="javascript:;" class="del-operation-recode-file-btn" data-id="' + value.id + '">';
                str += '<span class="badge border border-light rounded-pill bg-danger-500 position-absolute pos-top pos-right"><i class="fal fa-times"></i></span>';
                str += '</a>';
            }

            str += '</div>';
            dom.append(str);
        }
        //#endregion

        //#region 刪除檔案
        $('#recode_files_div').on("click", "a.del-operation-recode-file-btn", function () {

            var selectedFileId = $(this).attr("data-id");

            var div = $(this).parents(".col-auto");

            Swal.fire({
                title: "刪除",
                text: "你確定是否刪除此筆資料?",
                type: "warning",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: "是",
                cancelButtonText: "否"
            }).then(function (result) {
                if (result.value) {

                    var url = "/Operation/DeleteOperationRecodeFile";

                    var send_data = {
                        ReocdeId: selected_id,
                        SelectedId: selectedFileId
                    }

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

                        toast_ok(rel.msg);
                        div.remove();
                    }, 'json');
                }
            });
        });
        //#endregion

        //#region 匯出excel
        function ExportExcel() {
            var url = "/Operation/ExportOperationRecodeExcel";
            var send_data = {
                CityIds: [3],
                PowerStationIds: [1]
            };
            $.post(url, send_data, function (rel) {
                if (rel.code != "0000") {
                    toast_error(rel.msg);
                    return;
                }
                $('#NoViewbody').empty();

                var str = "";
                rel.data.forEach(function (value, index) {
                    str += "<tr>" +
                        "<td>" + value.powerStationName + "</td>" +
                        "<td>" + value.formId + "</td>" +
                        "<td>" + value.workTypeText + "</td>" +
                        "<td>" + value.fixDo + "</td>" +
                        "<td>" + value.statusText + "</td>" +
                        "<td>" + value.workPersonName + "</td>" +
                        "<td>" + value.operationPredict + "</td>";

                        str += "<td>";
                        if (value.hyperLinks != undefined || value.hyperLinks != null) {
                            value.hyperLinks.forEach(function (value2, index) {
                                str += value2 + "<br>";
                            });
                        }
                        str += "</td>";

                        str += "<td>";
                        if (value.finishTime != undefined || value.finishTime != null || value.finishTime != "") {
                            //value.hyperLinks.forEach(function (value3, index) {
                            //    str += value3;
                            //});
                            str += value.finishTime ;
                        }
                        str += "</td>";

                        str += "</tr>";
                });

                $('#NoViewbody').append(str);

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

        //#region 查詢近30天
        function ChangeDate30() {
            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);

            $('#date-range').val(dateLimit_format + ' - ' + today_format);
            $('#date-range').trigger('change');
        }
        //#endregion
    </script>
}