@{
    ViewData["MainNum"] = "2";
    ViewData["SubNum"] = "1";
    ViewData["Title"] = "設備資料匯入";
}

<ol class="breadcrumb page-breadcrumb">
    <li class="breadcrumb-item"><a href="javascript:void(0);">首頁</a></li>
    <li class="breadcrumb-item">設備管理</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="row">
    <div class="col-xl-12">
        <div id="panel-5" class="panel">
            <div class="panel-container show">
                <div class="panel-content">
                    <ul class="nav nav-tabs" id="tabs" role="tablist">
                        <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#tab-import" role="tab"><span class="hidden-sm-down">資料匯入</span></a></li>
                        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-check" role="tab"><span class="hidden-sm-down">資料檢核</span></a></li>
                    </ul>
                    <div class="tab-content p-3">
                        <div class="tab-pane fade show active" id="tab-import" role="tabpanel" aria-labelledby="tab-import">
                            @Html.Partial("_RawDataImport")
                        </div>

                        <div class="tab-pane fade" id="tab-check" role="tabpanel" aria-labelledby="tab-check">
                            @Html.Partial("_RawDataCheck")
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        var rawDataImportTable, rawDataCheckTable;
        var deviceCheckFilterList;
        var selectedDeviceCheckFilter = {};

        //#region 資料匯入分頁
        //#region 資料匯入 document ready
        $(function () {
            //#region 資料匯入 DataTable
            rawDataImportTable = $("#rawDataImport_table").DataTable({
                "columns": [
                    {
                        "data": null,
                        "render": function (data, type, row, meta) {
                            return meta.row + 1;
                        }
                    },
                    {
                        "data": "device_number"
                    },
                    {
                        "data": "device_result"
                    },
                    {
                        "data": "created_at"
                    },
                ],
                //"order": [[2, "desc"]],
                "ajax": {
                    "url": "/DeviceImport/RawDataList",
                    "type": "POST",
                    "dataSrc": function (rel) {
                        if (rel.code == "9999") {
                            toast_error(rel.msg);
                            return;
                        }

                        data = rel.data;

                        if (data == null || data.length == 0) {
                            this.data = [];
                        }

                        return data;
                    }
                }
            });
            //#endregion
        });
        //#endregion

        //#region 資料匯入驗證
        var ImportFileValidate = $("#import-file-form").validate({
            rules: {
                import_file_input: {
                    accept: ".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                },
            }
        });
        //#endregion

        //#region 上傳設備檔案
        function preImportRawDataFile() {
            var input_file = document.getElementById('import_file_input');
            input_file.outerHTML = input_file.outerHTML;
            $('#import_file_input').click();
        }

        function importRawDataFile() {
            import_files = $('#import_file_input')[0].files;
            if (import_files.length <= 0) {
                return;
            }

            if ($("#import-file-form").valid()) {
                Swal.fire(
                    {
                        title: "設備檔案匯入",
                        text: "匯入檔案會將舊有資料完全移除，你確定是否要匯入?",
                        type: "warning",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: "是",
                        cancelButtonText: "否"
                    }).then(function (result) {
                        if (result.value) {
                            var url = "/DeviceImport/ImportRawDataFile";
                            var formData = new FormData();

                            if (import_files.length > 0) {

                                Array.from(import_files).forEach(function (item, index) {
                                    formData.append("import_files", item)
                                });
                            }
                            $("#import-file-btn").html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>').attr("disabled", true);
                            rawDataImportTable.clear().draw();

                            $.ajax({
                                type: "POST",
                                url: url,
                                data: formData,
                                cache: false,
                                contentType: false,
                                processData: false,
                                success: function (rel) {
                                    if (rel.code != "0000") {
                                        if (rel.code == "9999") {
                                            toast_error(rel.msg);
                                        }
                                        else {
                                            toast_warning(rel.msg);
                                            rawDataImportTable.ajax.reload(null, false);
                                        }
                                        $("#import-file-btn").html('<span class="fal fa-plus mr-1"></span>設備檔案匯入').attr("disabled", false);
                                        return;
                                    }
                                    else {
                                        toast_ok(rel.msg);
                                        $("#import-file-btn").html('<span class="fal fa-plus mr-1"></span>設備檔案匯入').attr("disabled", false);
                                        rawDataImportTable.ajax.reload(null, false);
                                        GetRawDataCheckFilter();
                                        return;
                                    }
                                },
                            });
                        }
                    });
            }
        }
        //#endregion
        //#endregion

        //#region 資料檢核分頁
        //#region 資料檢核 document ready
        $(function () {
            //預設載入上方選單列表
            GetRawDataCheckFilter();

            //#region 資料檢核 DataTable
            rawDataCheckTable = $("#rawDataCheck_table").DataTable({
                "columns": [
                    {
                        "data": null,
                        "render": function (data, type, row, meta) {
                            return meta.row + 1;
                        }
                    },
                    {
                        "data": "check_temp_device_number",
                        "createdCell": function (td, cellData, rowData, row, col) {
                            if (rowData && rowData.compare_device_number != 0) {
                                $(td).css('color', 'red');
                            }
                        },
                    },
                    {
                        "data": "check_temp_device_system_category_layer3_key",
                        "createdCell": function (td, cellData, rowData, row, col) {
                            if (rowData && rowData.compare_system_category_layer3 != 0) {
                                $(td).css('color', 'red');
                            }
                        },
                        "render": function (data, type, row, meta) {
                            if (row) {
                                var value = row.check_temp_device_system_category_layer3 ? row.check_temp_device_system_category_layer3 : "";
                                var key = row.check_temp_device_system_category_layer3_key ? row.check_temp_device_system_category_layer3_key : "";

                                return value + " " + key
                            }
                        }
                    },
                    {
                        "data": "check_temp_disaster_key",
                        "createdCell": function (td, cellData, rowData, row, col) {
                            if (rowData && rowData.compare_device_disaster != 0) {
                                $(td).css('color', 'red');
                            }
                        },
                        "render": function (data, type, row, meta) {
                            if (row) {
                                var key = row.check_temp_disaster_key ? row.check_temp_disaster_key : "";

                                return key;
                            }
                            else {
                                return '';
                            }
                        }
                    },
                    {
                        "data": "device_number",
                        "createdCell": function (td, cellData, rowData, row, col) {
                            if (rowData && rowData.compare_device_number != 0) {
                                $(td).css('color', 'red');
                            }
                        },
                    },
                    {
                        "data": "device_system_category_layer3_key",
                        "createdCell": function (td, cellData, rowData, row, col) {
                            if (rowData && rowData.compare_system_category_layer3 != 0) {
                                $(td).css('color', 'red');
                            }
                        },
                        "render": function (data, type, row, meta) {
                            if (row) {
                                var value = row.device_system_category_layer3 ? row.device_system_category_layer3 : "";
                                var key = row.device_system_category_layer3_key ? row.device_system_category_layer3_key : "";

                                return value + " " + key
                            }
                        }
                    },
                    {
                        "data": "device_disaster_type_text",
                        "createdCell": function (td, cellData, rowData, row, col) {
                            if (rowData && rowData.compare_device_disaster != 0) {
                                $(td).css('color', 'red');
                            }
                        },
                    },
                    {
                        "data": "device_coordinate"
                    },
                ],
                //"order": [[2, "desc"]],
                "ajax": {
                    "url": "/DeviceImport/DeviceCheckTableList",
                    "type": "POST",
                    "data": function (d) {
                        d.Building_tag = selectedDeviceCheckFilter.building_tag ? selectedDeviceCheckFilter.building_tag : "";
                        d.System_tag = selectedDeviceCheckFilter.system_tag ? selectedDeviceCheckFilter.system_tag : "";
                        d.System_category = selectedDeviceCheckFilter.system_category ? selectedDeviceCheckFilter.system_category : "";
                        d.Abnormal = selectedDeviceCheckFilter.abnormal ? selectedDeviceCheckFilter.abnormal : "all";
                    },
                    "dataSrc": function (rel) {
                        if (rel.code == "9999") {
                            toast_error(rel.msg);
                            return;
                        }
                        $("#abnormal-amount").html(rel.data.deviceCheckAmount)

                        if (rel.data.deviceCheckAmount == 0) {
                            $("#btn-replace").prop("disabled", false);
                        } else {
                            $("#btn-replace").prop("disabled", true);
                        }
                        data = rel.data.deviceCheckTableList;

                        if (data == null || data.length == 0) {
                            this.data = [];
                        }

                        return data;
                    }
                }
            });
            //#endregion 資料檢核 DataTable


        });
        //#endregion 資料檢核 document ready

        //#region 取得上方搜尋過濾選單
        function GetRawDataCheckFilter() {
            var url = "/DeviceImport/GetRawDataCheckFilter";

            $.post(url, null, function (rel) {
                if (rel.code != "0000") {
                    if (rel.code == "9999") {
                        toast_error(rel.msg);
                    }
                    else {
                        toast_warning(rel.msg);
                    }
                    return;
                }
                else {
                    console.log(rel.data);

                    deviceCheckFilterList = rel.data;

                    $("#building-tag-list").empty();

                    var html = '';

                    deviceCheckFilterList.forEach(function (building_tag_item, building_tag_index) {
                        html += `
                                                            <div class="btn-group mr-2 btn-building-tag-group">
                                                                <button type="button" class="btn btn-secondary waves-effect waves-themed mb-2 btn-building-tag" data-building-tag="${building_tag_item.building_tag}" onclick="ChangeDeviceCheckFilterPanel('${building_tag_item.building_tag}')">${building_tag_item.building_tag}</button>
                                                                <button type="button" class="btn btn-secondary mb-2 btn-building-tag" data-building-tag="${building_tag_item.building_tag}" onclick="return false;">${building_tag_item.building_amount}</button>
                                                            </div>
                                                            `;
                    });

                    $('#building-tag-list').append(html);

                    $('#building-tag-list > .btn-building-tag-group').first().children().first().trigger('click');

                    return;
                }

            }, 'json');
        }
        //#endregion 取得上方搜尋過濾選單

        function ChangeDeviceCheckFilterPanel(building_tag, system_tag = "", system_category = "") {
            if (building_tag == undefined && building_tag == null || building_tag == "") {
                toast_warning("請先選擇區域");
                return;
            }

            if ($(".btn-building-tag").hasClass("btn-success")) {
                $(".btn-building-tag").removeClass("btn-success").addClass("btn-secondary");
            }

            $(".btn-building-tag").each(function (index, item) {
                var tag = $(item).attr("data-building-tag");
                if (tag == building_tag) {
                    $(item).removeClass("btn-secondary").addClass("btn-success");
                }
            });

            //選擇的棟別
            selectedDeviceCheckFilter.building_tag = building_tag;

            //系統別 全選
            $('#system-tag-all-warp').empty()
            if ("all" == system_tag) {
                $('#system-tag-all-warp').append(`<button type="button" class="btn btn-success waves-effect waves-theme mb-2" id="btn-system-tag-all" onclick="ChangeDeviceCheckFilterPanel('${building_tag}', 'all')">全選</button>`);
                selectedDeviceCheckFilter.system_tag = system_tag;
            } else {
                $('#system-tag-all-warp').append(`<button type="button" class="btn btn-secondary waves-effect waves-theme mb-2" id="btn-system-tag-all" onclick="ChangeDeviceCheckFilterPanel('${building_tag}', 'all')">全選</button>`);
            }

            //系統別 個別選單
            $('#system-tag-list').empty();
            deviceCheckFilterList.forEach(function (building_item, building_item_index) {
                if (building_item.building_tag == building_tag) {
                    var system_html = '';

                    building_item.system_tags.forEach(function (system_item, system_item_index) {
                        if (system_item.system_tag == system_tag && "all" != system_tag) {
                            system_html += `<button type="button" class="btn btn-success waves-effect waves-themed mr-2 mb-2" onclick="ChangeDeviceCheckFilterPanel('${building_item.building_tag}', '${system_item.system_tag}')">${system_item.system_tag}</button>`
                            //選擇的系統別
                            selectedDeviceCheckFilter.system_tag = system_tag;
                        }
                        else {
                            system_html += `<button type="button" class="btn btn-secondary waves-effect waves-themed mr-2 mb-2" onclick="ChangeDeviceCheckFilterPanel('${building_item.building_tag}', '${system_item.system_tag}')">${system_item.system_tag}</button>`
                        }
                    });

                    $('#system-tag-list').append(system_html);

                    if (system_tag == '') {
                        $('#system-tag-list').children().first().trigger('click');
                        return;
                    } else {

                        //設備分類 全選
                        $('#system-category-all-warp').empty()
                        if ("all" == system_category) {
                            $('#system-category-all-warp').append(`<button type="button" class="btn btn-success waves-effect waves-theme mb-2" id="btn-system-category-all" onclick="ChangeDeviceCheckFilterPanel('${building_tag}', '${system_tag}', 'all')">全選</button>`);
                            selectedDeviceCheckFilter.system_category = system_category;
                        } else {
                            $('#system-category-all-warp').append(`<button type="button" class="btn btn-secondary waves-effect waves-theme mb-2" id="btn-system-category-all" onclick="ChangeDeviceCheckFilterPanel('${building_tag}', '${system_tag}', 'all')">全選</button>`);
                        }

                        $('#system-category-list').empty();
                        building_item.system_tags.forEach(function (system_item, system_item_index) {
                            if (system_item.system_tag == system_tag) {
                                var system_category_html = '';

                                system_item.system_categories.forEach(function (system_category_item, system_category_item_index) {
                                    if (system_category_item == system_category && "all" != system_category) {
                                        system_category_html += `<button type="button" class="btn btn-success waves-effect waves-themed mr-2 mb-2" onclick="ChangeDeviceCheckFilterPanel('${building_item.building_tag}', '${system_item.system_tag}', '${system_category_item}')">${system_category_item}</button>`
                                        //選擇的設備種類
                                        selectedDeviceCheckFilter.system_category = system_category;
                                    }
                                    else {
                                        system_category_html += `<button type="button" class="btn btn-secondary waves-effect waves-themed mr-2 mb-2" onclick="ChangeDeviceCheckFilterPanel('${building_item.building_tag}', '${system_item.system_tag}', '${system_category_item}')">${system_category_item}</button>`
                                    }
                                });

                                $('#system-category-list').append(system_category_html);

                            } else if ("all" == system_tag) { //系統別 為全選的時候
                                var system_category_html = '';
                                system_item.system_categories.forEach(function (system_category_item, system_category_item_index) {
                                    if (system_category_item == system_category && "all" != system_category) {
                                        system_category_html += `<button type="button" class="btn btn-success waves-effect waves-themed mr-2 mb-2" onclick="ChangeDeviceCheckFilterPanel('${building_item.building_tag}', '${system_tag}', '${system_category_item}')">${system_category_item}</button>`
                                        //選擇的設備種類
                                        selectedDeviceCheckFilter.system_category = system_category;
                                    }
                                    else {
                                        system_category_html += `<button type="button" class="btn btn-secondary waves-effect waves-themed mr-2 mb-2" onclick="ChangeDeviceCheckFilterPanel('${building_item.building_tag}', '${system_tag}', '${system_category_item}')">${system_category_item}</button>`
                                    }

                                });
                                $('#system-category-list').append(system_category_html);
                            }
                        });

                        if (system_category == '') {
                            $('#system-category-list').children().first().trigger('click');
                            return;
                        }
                        else {
                            //預設異常分類全選
                            if (selectedDeviceCheckFilter.abnormal == undefined || selectedDeviceCheckFilter.abnormal == "") {
                                ChangeRawDeviceCheckTable(3, "all")
                            }
                        }
                    }
                }
            });
        }

        function ChangeRawDeviceCheckTable(target_filter, abnormal = "all") {
            switch (target_filter) {
                case 1: //系統別
                    selectedDeviceCheckFilter.system_tag = "all";
                    break;
                case 2: //設備分類
                    selectedDeviceCheckFilter.system_category = "all";
                    break;
                case 3: //異常分類
                    selectedDeviceCheckFilter.abnormal = abnormal;

                    if ("abnormal" == abnormal) {
                        ChangeDeviceCheckFilterPanel(selectedDeviceCheckFilter.building_tag, "all", "all")
                    }

                    if ($(".btn-abnormal-tag").hasClass("btn-success")) {
                        $(".btn-abnormal-tag").removeClass("btn-success").addClass("btn-secondary");
                    }

                    $(".btn-abnormal-tag").each(function (index, item) {
                        var tag = $(item).attr("data-abnormal-tag");
                        if (tag == abnormal) {
                            $(item).removeClass("btn-secondary").addClass("btn-success");
                        }
                    });

                    break;
            }

            if ($('#btn-check').attr('data-auto-first') == "true") {
                //第一次自動點擊檢核
                $('#btn-check').attr('data-auto-first', "false");
                rawDataCheckTable.ajax.reload(null, false);
            }
        }

        //#region 重整資料檢核表
        function ReloadRawDataCheckTable() {
            rawDataCheckTable.ajax.reload(null, false);
        }
        //#endregion重整資料檢核表

        //#region 資料取代
        function DataCheckReplace() {
            Swal.fire(
                {
                    title: "資料取代",
                    text: "資料將會取代當前設備資訊，確定是否要取代?",
                    type: "warning",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: "是",
                    cancelButtonText: "否"
                }).then(function (result) {
                    if (result.value) {
                        var url = "/DeviceImport/DeviceCheckReplace";

                        $.post(url, selectedDeviceCheckFilter, function (rel) {
                            if (rel.code != "0000") {
                                if (rel.code == "9999") {
                                    toast_error(rel.msg);
                                }
                                else {
                                    toast_warning(rel.msg);
                                }
                                return;
                            }
                            else {
                                toast_ok(rel.msg);
                                ReloadRawDataCheckTable();
                            }

                        }, 'json');
                    }
                });
        }
            //#endregion 資料取代
            //#endregion 資料檢核分頁
    </script>
}