@{
    ViewData["MainNum"] = "2";
    ViewData["SubNum"] = "2";
    ViewData["Title"] = "設備管理";
}

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

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

                <div class="border bg-light rounded-top">
                    <div class="form-group p-2 m-0 rounded-top">
                        <input type="text" class="form-control form-control-lg shadow-inset-2 m-0" id="js_list_accordion_filter" placeholder="">
                    </div>
                    <div id="js_list_accordion" class="accordion accordion-hover accordion-clean js-list-filter">
                    </div>
                    <span class="filter-message js-filter-message"></span>
                </div>
            </div>
        </div>
        <div class="col-auto px-0">
            <a href="javascript:;" id="collapse" data-target=".sidebar" data-toggle="collapse" class="btn btn-default btn-xs btn-icon waves-effect waves-themed" style="border-radius: 0;" aria-expanded="true">
                <span class="collapsed-reveal"><i class="fal fa-angle-left fa-lg py-3"></i></span>
                <span class="collapsed-hidden"><i class="fal fa-angle-right fa-lg py-3"></i></span>
            </a>
        </div>

        <main class="col px-5 pl-md-2 main">
            <ol class="breadcrumb page-breadcrumb">
                <li class="breadcrumb-item"><a href="javascript:void(0);">首頁</a></li>
                <li class="breadcrumb-item">設備管理</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-crosshairs"></i> <span id="select-main-system-name"></span> - <span id="select-sub-system-name"></span>
                </h1>
            </div>

            <div class="row">
                <div class="col-xl-12">
                    <div id="panel-5" class="panel">
                        <div class="panel-container show">
                            <div class="panel-content">
                                <div class="mb-5 d-flex align-items-center justify-content-start ">
                                    <span class="mr-2" style="font-size:18px">樓層</span>
                                    <div class="floor-panel-wrap">
                                    </div>
                                </div>

                                <div class="mb-5">
                                    <div class="card p-3 w-100">
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="row mb-2">
                                                    <h3 class="mr-2">當前模式：</h3>
                                                    <h3 class="font-weight-bolder mr-2" id="floor-map-mode-text">檢視模式</h3>
                                                    @*<div class="edit-mode" id="floor-map-edit-mode-btn-wrap" style="display:none">
                                                            <button type="button" class="btn btn-secondary waves-effect waves-themed" onclick="CancelFloorMapEdit()">取消</button>
                                                            <button type="button" class="btn btn-primary waves-effect waves-themed" onclick="SaveFloorMapEdit()">確定</button>
                                                        </div>*@
                                                </div>
                                            </div>
                                            <div class="col-12 mb-2" id="floor_map" style="height : 50vh!important;">
                                            </div>
                                            <div class="col-12">
                                                <div class="edit-mode" id="floor-map-edit-mode-btn-wrap" style="display:none">
                                                    <button type="button" class="btn btn-secondary waves-effect waves-themed" onclick="CancelFloorMapEdit()">取消</button>
                                                    <button type="button" class="btn btn-primary waves-effect waves-themed" onclick="SaveFloorMapEdit()">確定</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-5">
                                    <div class="card p-3 w-100">
                                        <div class="card-header d-flex align-items-center flex-wrap">
                                            <div class="card-title">
                                                設備基本資料
                                            </div>
                                            <div class="ml-auto">
                                               @*隱藏新增按鈕
                                               <a href="javascript:;" class="btn btn-success waves-effect waves-themed" id="addDevice-btn" onclick="AddDevice()"><span class="fal fa-plus mr-1"></span>新增設備</a>*@
                                                <a href="javascript:;" class="btn btn-primary waves-effect waves-themed" id="device-master-list-btn" style="display:none"><span class="fal fa-plus mr-1"></span>分電盤</a>
                                            </div>
                                        </div>
                                        <div class="card-body row">
                                            <div class="col-12">
                                                <!-- datatable start -->
                                                <table id="device_info_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>
                                                            <th>防災類別</th>
                                                            <th>功能</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-5">
                                    <div class="card p-3 w-100">
                                        <div class="card-header d-flex align-items-center flex-wrap">
                                            <div class="card-title">
                                                設備種類設定
                                            </div>
                                        </div>
                                        <div class="card-body row">
                                            <div class="col-12">
                                                <!-- datatable start -->
                                                <table id="device_kind_table" class="table table-bordered table-hover m-0 text-center">
                                                    <thead class="thead-themed">
                                                        <tr>
                                                            <th>序</th>
                                                            <th>設備機型</th>
                                                            <th>設備icon</th>
                                                            <th>正常狀態</th>
                                                            <th>關機狀態</th>
                                                            <th>異常狀態</th>
                                                            <th>功能</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>

<!-- Modal 設備基本資料(新增) -->
<div class="modal fade" id="device-info-add-modal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered modal-xl" 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">
                <div class="row mb-3 align-items-center justify-content-start">
                    <div class="col-12">
                        <div class="row mb-2 align-items-center justify-content-start">
                            <span class="col-1">棟別</span>
                            <div class="col-11 row">
                                <div id="import-temp-building-tag-list" class="col-12">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="row mb-2 align-items-center justify-content-start">
                            <span class="col-1">系統別</span>
                            <div class="col-11 row align-items-start">
                                <div id="import-temp-system-tag-list" class="col-12">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="row mb-2 align-items-center justify-content-start">
                            <span class="col-1">樓層</span>
                            <div class="col-11 row align-items-start">
                                <div id="import-temp-floor-tag-list" class="col-12">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="row mb-2 d-flex align-items-center justify-content-start">
                            <span class="col-1">設備種類</span>
                            <div class="col-11 row align-items-start">
                                <div id="import-temp-name-tag-list" class="col-12">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 row">
                        <div class="col-12">
                            <!-- datatable start -->
                            <table id="device_import_check_temp_table" class="table table-bordered table-hover m-0 text-center">
                                <thead class="thead-themed">
                                    <tr>
                                        <th>
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="select-all-device-number">
                                                <label class="custom-control-label" for="select-all-device-number">全選</label>
                                            </div>
                                        </th>
                                        <th>序</th>
                                        <th>設備編號</th>
                                        <th>設備名稱</th>
                                        <th>防災類別</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </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-device-add-btn" onclick="SaveDeviceAdd()">確定</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /.Modal 設備基本資料(新增) -->
<!-- Modal 設備基本資料(修改) -->
<div class="modal fade" id="device-info-edit-modal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered" 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="device-info-edit-form" id="device-info-edit-form">
                    <div class="row">
                        <div class="form-group col-6">
                            <label class="form-label" for="device_building_name_modal">棟別</label><br>
                            <span id="device_building_name_modal" class="fw-900"></span>
                        </div>
                        <div class="form-group col-6">
                            <label class="form-label" for="system_main_code_modal">系統大類</label><br>
                            <span id="device_main_system_name_modal" class="fw-900"></span>
                        </div>
                        <div class="form-group col-6">
                            <label class="form-label" for="system_main_code_modal">系統小類</label><br>
                            <span id="device_sub_system_name_modal" class="fw-900"></span>
                        </div>
                        <div class="form-group col-6">
                            <label class="form-label" for="system_main_code_modal">樓層</label><br>
                            <span id="device_floor_name_modal" class="fw-900"></span>
                        </div>
                        <div class="form-group col-12">
                            <label class="form-label" for="device_number_modal"><span class="text-danger">*</span>設備編號</label><br>
                            <span id="device_number_modal" class="fw-900"></span>
                        </div>
                        <div class="form-group col-12">
                            <label class="form-label" for="device_name_modal"><span class="text-danger">*</span>設備名稱</label>
                            <input type="text" id="device_name_modal" name="device_name_modal" class="form-control">
                        </div>
                        <div class="form-group col-12" id="device-coordinate-wrap">
                            <label class="form-label" for="device_coordinate_modal"><span class="text-danger">*</span>地圖座標</label>
                            <div class="row">
                                <div class="col-6">
                                    <label class="form-label" for="device_coordinate_x_modal">x：</label>
                                    <input type="number" step="0.001" id="device_coordinate_x_modal" name="device_coordinate_x_modal" class="form-control">
                                </div>
                                <div class="col-6">
                                    <label class="form-label" for="device_coordinate_y_modal">y：</label>
                                    <input type="number" step="0.001" id="device_coordinate_y_modal" name="device_coordinate_y_modal" class="form-control">
                                </div>
                            </div>
                        </div>
                        <div class="form-group col-12">
                            <label class="form-label" for="device_disaster_modal">防災類別</label>
                            <div class="row ml-2 mr-1" id="disaster_check">

                            </div>
                        </div>
                        <div class="form-group col-8" id="device-ip-wrap">
                            <label class="form-label" for="device_ip_modal">設備IP</label>
                            <input type="text" id="device_ip_modal" name="device_ip_modal" class="form-control">
                        </div>
                        <div class="form-group col-4" id="device-port-wrap">
                            <label class="form-label" for="device_port_modal">設備Port</label>
                            <input type="text" id="device_port_modal" name="device_port_modal" class="form-control">
                        </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="SaveDeviceInfoEdit()">確定</button>
            </div>
        </div>
    </div>
</div>
<!-- /.Modal 設備基本資料(修改) -->
<!-- Modal 設備種類資料 -->
<div class="modal fade" id="device-kind-modal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered modal-xl" 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="device-kind-form" id="device-kind-form">
                    <div class="row">
                        <div class="form-group col-12">
                            <label class="form-label" for="device_kind_name_modal">設備機型</label><br>
                            <span id="device_kind_name_modal" class="fw-900"></span>
                        </div>
                        <div class="form-group col-12">
                            <label class="form-label" for="device_image_modal">設備icon</label>
                            <input type="file" id="device_image_modal" name="device_image_modal" class="form-control" accept="image/*">
                        </div>
                        <div class="form-group col-12">
                            <div class="row">
                                <div class="col-2 d-flex justify-content-center align-items-center">
                                    <div class="form-group">
                                        <label class="form-label">燈號 1</label>
                                    </div>
                                </div>
                                <div class="col row">
                                    <div class="form-group col">
                                        <label class="form-label" for="device_normal_text_modal">顯示文字</label>
                                        <input type="text" id="device_normal_text_modal" name="device_normal_text_modal" class="form-control" placeholder="正常/開機/運作中" maxlength="50" />
                                    </div>
                                    <div class="form-group col">
                                        <label class="form-label" for="device_normal_point_name_modal">點位名稱</label>
                                        <select class="form-control" id="device_normal_point_name_modal">
                                        </select>
                                    </div>
                                    <div class="form-group col">
                                        <label class="form-label" for="device_normal_point_col_modal">點位欄位</label>
                                        <select class="form-control" id="device_normal_point_col_modal" disabled>
                                            <option value="" selected disabled>未選擇</option>
                                            <option value="Facets_key">Facets_key</option>
                                        </select>
                                    </div>
                                    <div class="form-group col">
                                        <label class="form-label" for="device_normal_point_value_modal">點位值</label>
                                        <select class="form-control" id="device_normal_point_value_modal" disabled>
                                            <option value="" selected disabled>未選擇</option>
                                            <option value="trueText">trueText</option>
                                            <option value="falseText">falseText</option>
                                        </select>
                                    </div>
                                    <div class="form-group col">
                                        <label class="form-label" for="device_normal_color_modal">燈號</label>
                                        <input type="text" id="device_normal_color_modal" name="device_normal_color_modal" class="form-control" placeholder="#123456" maxlength="7" />
                                    </div>
                                    <div class="form-group col d-flex align-items-center" style="display: none !important">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" id="device_normal_flashing_modal" name="device_normal_flashing_modal" class="custom-control-input" value="1">
                                            <label class="custom-control-label" for="device_normal_flashing_modal">是否閃爍</label>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="row">
                                <div class="col-2 d-flex justify-content-center align-items-center">
                                    <div class="form-group">
                                        <label class="form-label">燈號 2</label>
                                    </div>
                                </div>
                                <div class="col row">
                                    <div class="form-group col">
                                        <label class="form-label" for="device_close_text_modal">顯示文字</label>
                                        <input type="text" id="device_close_text_modal" name="device_close_text_modal" class="form-control" placeholder="關機/非運作" maxlength="50" />
                                    </div>
                                    <div class="form-group col">
                                        <label class="form-label" for="device_close_point_name_modal">點位名稱</label>
                                        <select class="form-control" id="device_close_point_name_modal">
                                        </select>
                                    </div>
                                    <div class="form-group col">
                                        <label class="form-label" for="device_close_point_col_modal">點位欄位</label>
                                        <select class="form-control" id="device_close_point_col_modal" disabled>
                                            <option value="" selected disabled>未選擇</option>
                                            <option value="Facets_key">Facets_key</option>
                                        </select>
                                    </div>
                                    <div class="form-group col">
                                        <label class="form-label" for="device_close_point_value_modal">點位值</label>
                                        <select class="form-control" id="device_close_point_value_modal" disabled>
                                            <option value="" selected disabled>未選擇</option>
                                            <option value="trueText">trueText</option>
                                            <option value="falseText">falseText</option>
                                        </select>
                                    </div>
                                    <div class="form-group col">
                                        <label class="form-label" for="device_close_color_modal">燈號</label>
                                        <input type="text" id="device_close_color_modal" name="device_close_color_modal" class="form-control" placeholder="#123456" maxlength="7" />
                                    </div>
                                    <div class="form-group col d-flex align-items-center" style="display:none !important">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" id="device_close_flashing_modal" name="device_close_flashing_modal" class="custom-control-input" value="1">
                                            <label class="custom-control-label" for="device_close_flashing_modal">是否閃爍</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-12">
                                    <div class="row">
                                        <div class="col-2 d-flex justify-content-center align-items-center">
                                            <div class="form-group">
                                                <label class="form-label">異常燈號</label>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="row">
                                                <div class="form-group col">
                                                    <label class="form-label" for="device_error_text_modal">顯示文字</label>
                                                    <input type="text" id="device_error_text_modal" name="device_error_text_modal" class="form-control" placeholder="異常" maxlength="50" />
                                                </div>
                                                <div class="form-group col">
                                                    <label class="form-label" for="device_error_point_name_modal">點位名稱</label>
                                                    <select class="form-control" id="device_error_point_name_modal">
                                                    </select>
                                                </div>
                                                <div class="form-group col">
                                                    <label class="form-label" for="device_error_point_col_modal">點位欄位</label>
                                                    <select class="form-control" id="device_error_point_col_modal" disabled>
                                                        <option value="" selected disabled>未選擇</option>
                                                        <option value="Facets_key">Facets_key</option>
                                                    </select>
                                                </div>
                                                <div class="form-group col">
                                                    <label class="form-label" for="device_error_point_value_modal">點位值</label>
                                                    <select class="form-control" id="device_error_point_value_modal" disabled>
                                                        <option value="" selected disabled>未選擇</option>
                                                        <option value="trueText">trueText</option>
                                                        <option value="falseText">falseText</option>
                                                    </select>
                                                </div>
                                                <div class="form-group col">
                                                    <label class="form-label" for="device_error_color_modal">燈號</label>
                                                    <input type="text" id="device_error_color_modal" name="device_error_color_modal" class="form-control" placeholder="#123456" maxlength="7" />
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="form-group col d-flex flex-column justify-content-center">
                                                    <div class="custom-control custom-checkbox">
                                                        <input type="checkbox" id="device_error_flashing_modal" name="device_error_flashing_modal" class="custom-control-input" value="1">
                                                        <label class="custom-control-label" for="device_error_flashing_modal">是否閃爍</label>
                                                    </div>
                                                    <div class="custom-control custom-checkbox" style="display:none">
                                                        <input type="checkbox" id="device_error_independent_modal" name="device_error_independent_modal" class="custom-control-input" value="1">
                                                        <label class="custom-control-label" for="device_error_independent_modal">是否獨立顯示</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </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" id="save-device-kind-btn" onclick="SaveDeviceKind()">確定</button>
            </div>
        </div>
    </div>
</div>
<!-- /.Modal 設備種類資料 -->
<!-- Modal 設備子節點資料 -->
<div class="modal fade" id="device-node-modal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered" 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="device-node-form" id="device-node-form">
                    <div class="row">
                        <div class="form-group col-12">
                            <label class="form-label" for="device_node_name_modal"><span class="text-danger">*</span>設備子節點名稱</label><br>
                            <input type="text" id="device_node_name_modal" name="device_node_name_modal" class="form-control">
                        </div>
                        <div class="form-group col-12">
                            <label class="form-label" for="device_node_coordinate_modal"><span class="text-danger">*</span>地圖座標</label>
                            <div class="row">
                                <div class="col-6">
                                    <label class="form-label" for="device_node_coordinate_x_modal">x：</label>
                                    <input type="number" step="0.001" id="device_node_coordinate_x_modal" name="device_node_coordinate_x_modal" class="form-control">
                                </div>
                                <div class="col-6">
                                    <label class="form-label" for="device_node_coordinate_y_modal">y：</label>
                                    <input type="number" step="0.001" id="device_node_coordinate_y_modal" name="device_node_coordinate_y_modal" class="form-control">
                                </div>
                            </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="SaveDeviceNode()">確定</button>
            </div>
        </div>
    </div>
</div>
<!-- /.Modal 設備子節點資料 -->
<!-- Modal 設備Master list -->
<div class="modal fade" id="device-master-list-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">
                    分電盤列表
                </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">
                <table id="device_master_table" class="table table-bordered table-hover m-0 text-center">
                    <thead class="thead-themed">
                        <tr>
                            <th>序</th>
                            <th>分電盤編號</th>
                            <th>分電盤名稱</th>
                            <th>分電盤icon</th>
                            <th>功能</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<!-- /.Modal 設備Master list -->
<!-- Modal 編輯 設備Master -->
<div class="modal fade" id="device-master-edit-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">
                    編輯分電盤
                </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="device-master-form" id="device-master-form">
                    <div class="row">
                        <div class="form-group col-12">
                            <label class="form-label" for="device_master_number_modal">分電盤編號</label><br>
                            <span id="device_master_number_modal" class="fw-900"></span>
                        </div>
                        <div class="form-group col-12">
                            <label class="form-label" for="device_master_full_name_modal">分電盤名稱</label>
                            <input type="text" id="device_master_full_name_modal" name="device_master_full_name_modal" class="form-control">
                        </div>
                        <div class="form-group col-12">
                            <label class="form-label" for="device_master_icon_modal">設備icon</label>
                            <input type="file" id="device_master_icon_modal" name="device_master_icon_modal" class="form-control" accept="image/*">
                        </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" id="save-device-master-btn" onclick="SaveDeviceMaster()">確定</button>
            </div>
        </div>
    </div>
</div>
<!-- /.Modal 編輯 設備Master -->


@section Scripts {
    <script src="~/js/echarts.min.js"></script>
    <script>
        var buildingCollapses;
        var selected_building_menu = {}, selected_floor_tag;
        var chartDom, myChart, option,
            floor_map_mode = "view", //平面圖當前模式
            selected_temp_device, //被選擇要修改的設備
            temp_device_on_floor_map = [] //暫存在地圖上新的位置;
        var currentData = [];
        var deviceInfoTable, selected_device_guid;
        var deviceImportCheckTempTable,
            deviceImportCheckTempFilterList = [],
            selected_building_tag = "",
            selected_system_tag = "",
            selected_floor_tag = "",
            selected_name_tag = "";
        var selected_device_node_guid;
        var selected_device_parents_collapses = [];
        var deviceKindTable,
            selected_device_kind_guid,
            selected_device_building_tag,
            selected_device_system_tag,
            selected_device_floor_tag,
            selected_device_name_tag;
        var deviceMasterTable,
            selected_device_master_guid;
        $(function () {
            $('#collapse').trigger("click");

            //預設載入左方選單列表
            GetBuildingMenuCollapse("");

            //修改左方選單列表查詢條件
            $("#js_list_accordion_filter").change(function (e) {
                GetBuildingMenuCollapse($(this).val());
            });

            chartDom = document.getElementById("floor_map");
            myChart = echarts.init(chartDom, null, { width: 'auto', });

            $('.sidebar').on("shown.bs.collapse", function () {
                setTimeout(function () {
                    myChart.resize();
                }, 500);
            });

            $('.sidebar').on("hidden.bs.collapse", function () {
                setTimeout(function () {
                    myChart.resize();
                }, 500);
            });

            //#region 設備基本資料DataTable
            deviceInfoTable = $("#device_info_table").DataTable({
                "pageLength": 20,
                "columns": [
                    {
                        "className": 'dt-control',
                        "orderable": false,
                        "data": null,
                        "defaultContent": '<i class="fal fa-plus"></i>'
                    },
                    {
                        "data": null,
                        "render": function (data, type, row, meta) {
                            return meta.row + 1;
                        }
                    },
                    {
                        "data": "building_full_name"
                    },
                    {
                        "data": "main_system_full_name"
                    },
                    {
                        "data": "sub_system_full_name"
                    },
                    {
                        "data": "floor_full_name"
                    },
                    {
                        "data": "device_number"
                    },
                    {
                        "data": "device_full_name"
                    },
                    {
                        "data": "device_coordinate"
                    },
                    {
                        "data": "device_disaster_type_text"
                    },
                    {
                        "data": null,
                        "createdCell": function (td, cellData, rowData, row, col) {
                            $(td).empty();
                            @*if (rowData != null && (rowData.device_name_tag == "L1" || rowData.device_name_tag == "L2")) {
                                $(td).html(`
                                        <button class="btn btn-primary edit-btn">修改</button>
                                        <button class="btn btn-info add-device-node-btn">加入子節點</button>
                                        <button class="btn btn-danger del-btn">刪除</button>`)
                            } else {
                                $(td).html(`<button class="btn btn-primary edit-btn">修改</button> <button class="btn btn-danger del-btn">刪除</button>`)
                            }*@
                            // 隱藏刪除按鈕
                            if (rowData != null && (rowData.device_name_tag == "L1" || rowData.device_name_tag == "L2")) {
                                $(td).html(`
                                                <button class="btn btn-primary edit-btn">修改</button>
                                                <button class="btn btn-info add-device-node-btn">加入子節點</button>`)
                            } else {
                                $(td).html(`<button class="btn btn-primary edit-btn">修改</button>`)
                            }

                        },
                        @*"defaultContent": '<button class="btn btn-primary edit-btn">修改</button> <button class="btn btn-danger del-btn">刪除</button>'*@
                    }
                ],
                "order": [[1, "asc"]],
                'createdRow': function (row, data, dataIndex) {
                    $(row).attr('id', "tr_" + data.device_guid);
                    $(row).attr('data-guid', data.device_guid);
                },
                "columnDefs": [
                    {
                        'targets': 0,
                        'searchable': false,
                        'visible': false
                    },
                    {
                        'targets': 8,
                        'searchable': false,
                        'className': 'dt-body-center',
                        'createdCell': function (td, cellData, rowData, row, col) {
                            $(td).empty();

                            if (cellData != null) {
                                var coordinate = cellData.split(',')

                                $(td).append(`<span>x：${parseFloat(coordinate[0])}, y：${parseFloat(coordinate[1])}</span><br>`);
                                $(td).append(`<a href="javascript:void(0)" class="device-coordinate-btn">修改座標</a>`);
                            } else {
                                $(td).append('<button class="btn btn-primary device-coordinate-btn">定位座標</button>');
                            }
                        }
                    }
                ],
                //"order": [[2, "desc"]],
                "ajax": {
                    "url": "/DeviceManage/DeviceTableList",
                    "type": "POST",
                    "data": function (d) {
                    d.building_tag = selected_building_menu.building_tag ? selected_building_menu.building_tag : "";
                        d.device_system_tag = selected_building_menu.main_system ? selected_building_menu.main_system.main_system_tag : "";
                        d.device_name_tag = selected_building_menu.main_system ? selected_building_menu.main_system.sub_system ? selected_building_menu.main_system.sub_system.sub_system_tag : "" : "";
                        d.device_floor_tag = selected_floor_tag ? selected_floor_tag : "";
                    },
                    "dataSrc": function (rel) {
                        if (rel.code == "9999") {
                            toast_error(rel.msg);
                            return;
                        }

                        currentData = rel.data;

                        currentData = $.map(currentData, function (item) {

                        if (item.device_name_tag == "L1" || item.device_name_tag == "L2") {
                                //照明設備
                                $("#device-master-list-btn").show();
                                deviceInfoTable.column(0).visible(true); //點擊顯示子節點
                                deviceInfoTable.column(8).visible(false); //設備座標
                            } else {
                                $("#device-master-list-btn").hide();
                                deviceInfoTable.column(0).visible(false);  //點擊顯示子節點
                                deviceInfoTable.column(8).visible(true); //設備座標
                            }


                            item.selected = false;
                            if (item.device_coordinate != undefined && item.device_coordinate != null) {
                                var coordinate = item.device_coordinate.split(',')
                                item.value = [
                                    parseFloat(coordinate[0]),
                                    parseFloat(coordinate[1])
                                ]
                            }

                            if (item.device_nodes != undefined && item.device_nodes != null && item.device_nodes.length > 0) {
                                $.map(item.device_nodes, function (item_node) {
                                    item_node.selected = false;
                                    if (item_node.device_node_coordinate != undefined && item_node.device_node_coordinate != null) {
                                        var node_coordinate = item_node.device_node_coordinate.split(',')
                                        item_node.value = [
                                            parseFloat(node_coordinate[0]),
                                            parseFloat(node_coordinate[1])
                                        ]
                                    }
                                });
                            }

                            return item;
                        });

                        if (currentData == null || currentData.length == 0) {
                            this.currentData = [];
                        }
                        if (myChart.getOption() && myChart.getOption().geo && myChart.getOption().geo.length > 0) {
                            resetData();
                        }

                        return currentData;
                    }
                }
            });
            //#endregion

            deviceInfoTable.on('draw', function () {
                $.each(selected_device_parents_collapses, function (i, id) {
                    var tr = $(`#${id}`)
                    var row = deviceInfoTable.row(tr);
                    if (!row.child.isShown()) {
                        $(`#${id}`).find("td.dt-control").trigger('click');
                    }

                });
            });

            //#region 編輯設備
            $('#device_info_table').on("click", "button.edit-btn", function () {

                selected_device_guid = $(this).parents('tr').attr('data-guid');

                //取得災害類別
                var url_disaster = "/DeviceManage/GetDisasterList";
                $.post(url_disaster, null, function (rel) {
                    if (rel.code != "0000") {
                        if (rel.code == "9999") {
                            toast_error(rel.msg);
                        }
                        else {
                            toast_warning(rel.msg);
                        }
                        return;
                    }
                    else {

                        var checkbox = "";
                        $('#disaster_check').empty();
                        $.each(rel.data, function (index, val) {
                            checkbox += '<div class="col-3 mb-2 custom-control custom-checkbox align-content-center">';
                            checkbox += '<input type="checkbox" class="custom-control-input" name="selectDisaster[]"  id="' + val.system_value + '" value="' + val.system_value + '" />';
                            checkbox += '<label class="custom-control-label" for="' + val.system_value + '">' + val.system_key + '</label>';
                            checkbox += '</div>';
                        });
                        $('#disaster_check').append(checkbox);

                        //取得單一設備基本資料
                        var url = "/DeviceManage/GetOneDevice";

                        var send_data = {
                            guid: selected_device_guid
                        }

                        $.post(url, send_data, function (rel) {
                            console.log(rel);

                            if (rel.code != "0000") {
                                if (rel.code == "9999") {
                                    toast_error(rel.msg);
                                }
                                else {
                                    toast_warning(rel.msg);
                                }
                                return;
                            }
                            else {
                                $("#device_building_name_modal").html(rel.data.building_full_name);
                                $("#device_main_system_name_modal").html(rel.data.main_system_full_name);
                                $("#device_sub_system_name_modal").html(rel.data.sub_system_full_name);
                                $("#device_floor_name_modal").html(rel.data.floor_full_name);
                                $("#device_number_modal").html(rel.data.device_number);

                                $("#device_name_modal").val(rel.data.device_full_name);

                                if (rel.data.device_system_category_layer3 == "L1" || rel.data.device_system_category_layer3 == "L2") {
                                    $("#device-coordinate-wrap").hide();
                                } else {
                                    $("#device-coordinate-wrap").show();

                                    if (rel.data.device_coordinate != undefined && rel.data.device_coordinate != null) {
                                        var coordinate = rel.data.device_coordinate.split(',')

                                        $("#device_coordinate_x_modal").val(coordinate[0]);
                                        $("#device_coordinate_y_modal").val(coordinate[1]);
                                    } else {
                                        $("#device_coordinate_x_modal").val("");
                                        $("#device_coordinate_y_modal").val("");
                                    }
                                }

                                rel.data.device_disasters.forEach(function (item, index) {
                                    $(`input[name="selectDisaster[]"][value="${item.device_system_value}"]`).prop("checked", true)
                                });

                                if (rel.data.device_system_category_layer3 != "C") {
                                    $("#device-ip-wrap").hide();
                                    $("#device-port-wrap").hide();
                                }
                                else {
                                    $("#device-ip-wrap").show();
                                    $("#device-port-wrap").show();

                                    $("#device_ip_modal").val(rel.data.device_ip);
                                    $("#device_port_modal").val(rel.data.device_port);
                                }

                                $("#device-info-edit-modal").modal();
                            }
                        }, 'json');
                    }
                });
            });
            //#endregion

            //#region 刪除設備
            $('#device_info_table').on("click", "button.del-btn", function () {

                selected_device_guid = $(this).parents('tr').attr('data-guid');

                Swal.fire(
                    {
                        title: "刪除",
                        text: "你確定是否刪除此筆資料?",
                        type: "warning",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: "是",
                        cancelButtonText: "否"
                    }).then(function (result) {
                        if (result.value) {
                            var url = "/DeviceManage/DeleteOneDevice";
                            var send_data = {
                                Guid: selected_device_guid
                            }
                            $.post(url, send_data, 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);
                                    deviceInfoTable.ajax.reload(null, false);
                                    return;
                                }

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

            //#region 編輯設備定位座標
            $('#device_info_table').on("click", ".device-coordinate-btn", function () {

                if ($(this).attr("disabled")) {
                    return;
                }

                selected_device_guid = $(this).parents('tr').attr('data-guid');
                var index = currentData.findIndex(function (item) { return item.device_guid === selected_device_guid });

                currentData[index].selected = true;

                selected_temp_device = currentData[index];

                ChangeFloorMapMode("edit");
            });
            //#endregion

            //#region 編輯設備防災類別
            $('#disaster_check').on("click", 'input[type="checkbox"]', function () {

                var checked = $(this).val();

                //console.log($('#disaster_check').find('input:checkbox:checked').length)
                if ($('#disaster_check').find('input:checkbox:checked').length != 0) {
                    $('input[name="selectDisaster[]"]').prop('checked', false);
                    $('input[name="selectDisaster[]"]').map(function (index, item) {
                        var item_value = $(item).val();

                        if (item_value == checked) {
                            $(item).prop('checked', true)
                        }
                    });
                }


                
            });
            //#endregion

            //#region 設備Master DataTable
            deviceMasterTable = $("#device_master_table").DataTable({
                "columns": [
                    {
                        "data": null,
                        "render": function (data, type, row, meta) {
                            return meta.row + 1;
                        }
                    },
                    {
                        "data": "device_master_number",
                        "render": function (data, type, row, meta) {
                            if (data != undefined && data != null && data != "") {
                                return data;
                            } else {
                                return row.device_building_tag + "_" + row.device_name_tag;
                            }
                        }
                    },
                    {
                        "data": "device_master_full_name"
                    },
                    {
                        "data": "device_master_icon",
                        "render": function (data, type, row, meta) {
                            if (row.device_master_icon == undefined || row.device_master_icon == null || row.device_master_icon == '') {
                                return "";
                            }
                            var html = `<img src="/upload/device_icon/${row.device_master_icon}" style="margin: auto; width:30px;">
                                        </img>`;
                            return html;
                        }
                    },
                    {
                        "data": null,
                        "defaultContent": '<button class="btn btn-primary edit-btn">修改</button>'
                    }
                ],
                'createdRow': function (row, data, dataIndex) {
                    $(row).attr('data-guid', data.device_master_guid);
                    $(row).attr('data-device-building-tag', data.device_building_tag);
                    $(row).attr('data-device-name-tag', data.device_name_tag);
                },
                //"order": [[2, "desc"]],
                "ajax": {
                    "url": "/DeviceManage/GetDeviceMasterTableList",
                    "type": "POST",
                    "data": function (d) {
                        d.Building_tag = selected_building_menu.building_tag ? selected_building_menu.building_tag : "";
                        d.Main_system_tag = selected_building_menu.main_system ? selected_building_menu.main_system.main_system_tag : "";
                        d.Sub_system_tag = selected_building_menu.main_system ? selected_building_menu.main_system.sub_system ? selected_building_menu.main_system.sub_system.sub_system_tag : "" : "";
                        d.Floor_tag = selected_floor_tag ? selected_floor_tag : "";
                    },
                    "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

            //#region 分電盤按鈕
            $("#device-master-list-btn").click(function (e) {
                e.preventDefault();

                var selectedBuilding_tag = selected_building_menu.building_tag ? selected_building_menu.building_tag : "";
                var selectedMain_system_tag = selected_building_menu.main_system ? selected_building_menu.main_system.main_system_tag : "";
                var selectedSub_system_tag = selected_building_menu.main_system ? selected_building_menu.main_system.sub_system ? selected_building_menu.main_system.sub_system.sub_system_tag : "" : "";
                var selectedFloor_tag = selected_floor_tag ? selected_floor_tag : "";
                if (selectedBuilding_tag == '' || selectedMain_system_tag == '' || selectedSub_system_tag == '' || selectedFloor_tag == '') {
                    toast_warning("請先選擇系統類別及樓層。");
                    return;
                }

                //取得設備master列表
                deviceMasterTable.ajax.reload(null, false);
                $("#device-master-list-modal").modal();
            });
            //#endregion

            //#region 編輯設備master
            $('#device_master_table').on("click", "button.edit-btn", function () {

                selected_device_master_guid = $(this).parents('tr').attr('data-guid');
                selected_device_building_tag = $(this).parents('tr').attr('data-device-building-tag');
                selected_device_system_tag = "";
                selected_device_floor_tag = "";
                selected_device_name_tag = $(this).parents('tr').attr('data-device-name-tag');
                selected_device_master_number_txt = $(this).parents('tr')[0].children[1].innerText

                //取得單一設備基本資料
                var url = "/DeviceManage/GetOneDeviceMaster";

                var send_data = {
                    guid: selected_device_master_guid
                }

                $.post(url, send_data, function (rel) {
                    if (rel.code != "0000") {
                        if (rel.code == "9999") {
                            toast_error(rel.msg);
                        }
                        else {
                            toast_warning(rel.msg);
                        }
                        return;
                    }
                    else {
                        $("#device_master_number_modal").html(selected_device_master_number_txt);
                        if (rel.data != undefined && rel.data != null) {
                            $("#device_master_full_name_modal").val(rel.data.device_master_full_name);
                        }

                        $("#device-master-edit-modal").modal();
                    }
                }, 'json');
            });
            //#endregion

            //#region 展開子節點列表
            $('#device_info_table').on("click", "td.dt-control", function () {

                var tr = $(this).closest('tr');
                var row = deviceInfoTable.row(tr);

                var index = $.inArray(tr.attr('id'), selected_device_parents_collapses)

                if (row.child.isShown()) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                    tr.find("td").first().html(`<i class="fal fa-plus"></i>`);

                    selected_device_parents_collapses.splice(index, 1);
                }
                else {
                    // Open this row
                    console.log(row.data());
                    row.child(DeviceNodeFormat(row.data().device_nodes)).show();
                    tr.addClass('shown');
                    tr.find("td").first().html(`<i class="fal fa-minus"></i>`);

                    if (index < 0) {
                        selected_device_parents_collapses.push(tr.attr('id'))
                    }

                }
            });
            //#endregion

            //#region 子節點表格樣式
            function DeviceNodeFormat(device_nodes) {
                var tbody_content = "";

                device_nodes.forEach(function (item, index) {
                    var coordinate_html = "";
                    if (item.device_node_coordinate != null) {
                        var coordinate = item.device_node_coordinate.split(',')
                        coordinate_html += `<span>x：${parseFloat(coordinate[0])}, y：${parseFloat(coordinate[1])}</span><br>
                                        <a href="javascript:void(0)" class="device-node-coordinate-btn">修改座標</a>`;
                    } else {
                        coordinate_html += `<button class="btn btn-primary device-node-coordinate-btn">定位座標</button>`;
                    }

                    tbody_content += `
                                        <tr data-device-node-guid="${item.device_node_guid}" data-device-guid="${item.device_guid}">
                                            <td>
                                                ${index + 1}
                                            </td>
                                            <td>
                                                ${item.device_node_full_name}
                                            </td>
                                            <td>
                                                ${coordinate_html}
                                            </td>
                                            <td>
                                                <button class="btn btn-primary edit-node-btn">修改</button>
                                                <button class="btn btn-danger del-node-btn">刪除</button>
                                            </td>
                                        </tr>
                                    `;
                }); 

                var html = "";
                html = `<table class="table table-bordered table-hover m-0 text-center device-node-table">
                            <thead class="thead-themed">
                                <tr>
                                    <th>序</th>
                                    <th>名稱</th>
                                    <th>座標</th>
                                    <th>功能</th>
                                </tr>
                            </thead>
                            <tbody>
                                ${tbody_content}
                            </tbody>
                        </table>`;

                return html;
            }
            //#endregion

            //#region 加入子節點
            $('#device_info_table').on("click", "button.add-device-node-btn", function () {

                selected_device_guid = $(this).parents('tr').attr('data-guid');
                selected_device_node_guid = "";

                $("#device-node-form").trigger("reset");
                $("#device-node-modal").modal();
            });
            //#endregion

            //#region 編輯子節點
            $('#device_info_table').on("click", ".device-node-table button.edit-node-btn", function () {

                selected_device_node_guid = $(this).parents('tr').attr('data-device-node-guid');
                selected_device_guid = $(this).parents('tr').attr('data-device-guid');

                //取得單一設備子節點資料
                var url = "/DeviceManage/GetOneDeviceNode";

                var send_data = {
                    guid: selected_device_node_guid
                }

                $.post(url, send_data, function (rel) {
                    if (rel.code != "0000") {
                        if (rel.code == "9999") {
                            toast_error(rel.msg);
                        }
                        else {
                            toast_warning(rel.msg);
                        }
                        return;
                    }
                    else {
                        $("#device_node_name_modal").val(rel.data.device_node_full_name);

                        if (rel.data.device_node_coordinate != undefined && rel.data.device_node_coordinate != null) {
                            var coordinate = rel.data.device_node_coordinate.split(',')

                            $("#device_node_coordinate_x_modal").val(coordinate[0]);
                            $("#device_node_coordinate_y_modal").val(coordinate[1]);
                        } else {
                            $("#device_node_coordinate_x_modal").val("");
                            $("#device_node_coordinate_y_modal").val("");
                        }

                        $("#device-node-modal").modal();
                    }
                }, 'json');
            });
            //#endregion

            //#region 編輯子節點定位座標
            $('#device_info_table').on("click", ".device-node-table .device-node-coordinate-btn", function () {

                if ($(this).attr("disabled")) {
                    return;
                }

                selected_device_guid = $(this).parents('tr').attr('data-device-guid');
                selected_device_node_guid = $(this).parents('tr').attr('data-device-node-guid');
                var index = currentData.findIndex(function (item) { return item.device_guid === selected_device_guid });

                var node_index = currentData[index].device_nodes.findIndex(function (item) { return item.device_node_guid === selected_device_node_guid });

                selected_temp_device = currentData[index].device_nodes[node_index];

                ChangeFloorMapMode("edit");
            });
            //#endregion

            //#region 刪除子節點
            $('#device_info_table').on("click", ".device-node-table button.del-node-btn", function () {

                selected_device_node_guid = $(this).parents('tr').attr('data-device-node-guid');

                Swal.fire(
                    {
                        title: "刪除",
                        text: "你確定是否刪除此筆資料?",
                        type: "warning",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: "是",
                        cancelButtonText: "否"
                    }).then(function (result) {
                        if (result.value) {
                            var url = "/DeviceManage/DeleteOneDeviceNode";
                            var send_data = {
                                Guid: selected_device_node_guid
                            }
                            $.post(url, send_data, 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);
                                    deviceInfoTable.ajax.reload(null, false);
                                    return;
                                }

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

            //#region 設備種類DataTable
            deviceKindTable = $("#device_kind_table").DataTable({
                "columns": [
                    {
                        "data": null,
                        "render": function (data, type, row, meta) {
                            return meta.row + 1;
                        }
                    },
                    {
                        "data": null,
                        "render": function (data, type, row, meta) {
                            return data.device_system_tag == "S" && data.device_name_tag == "C" ? data.device_model_tag : data.device_name_tag;
                        }
                    },
                    {
                        "data": "device_image",
                        "render": function (data, type, row, meta) {
                            if (row.device_image == undefined || row.device_image == null || row.device_image == '') {
                                return "";
                            }
                            var file_names = row.device_image.split(".");
                            var html = `<img src="/upload/device_icon/${row.device_image}" style="margin: auto; width:45px; height: auto">
                                        </img>`;
                            return html;
                        }
                    },
                    {
                        "data": "device_normal_color",
                        "render": function (data, type, row, meta) {

                            var device_normal_text = row.device_normal_text ? row.device_normal_text : "";
                            var device_normal_point_name = row.device_normal_point_name ? row.device_normal_point_name : "";
                            var device_normal_point_col = row.device_normal_point_col ? row.device_normal_point_col : "";
                            var device_normal_point_value = row.device_normal_point_value ? row.device_normal_point_value : "";
                            var device_normal_color = row.device_normal_color ? row.device_normal_color : "";
                            var flashing = row.device_normal_flashing == 1 ? "是" : "否";

                            var full_point_arr = [];
                            if (device_normal_point_name != "") {
                                full_point_arr.push(device_normal_point_name)
                            }
                            if (device_normal_point_col != "") {
                                full_point_arr.push(device_normal_point_col)
                            }
                            if (device_normal_point_value != "") {
                                full_point_arr.push(device_normal_point_value)
                            }

                            var html = `
                                        <div class="row">
                                            <label class="col-12">${device_normal_text}</label>
                                        </div>
                                        <div class="row">
                                            <label class="col-12">${full_point_arr.join("-")}</label>
                                        </div>
                                        <div class="row">
                                            <div style="width: 30px;height: 30px; margin:auto; border-radius: 50%;background-color: ${device_normal_color}"></div>
                                        </div>
                                        @*<div class="row">
                                            <label class="col-8">是否閃爍：</label>
                                            <label class="col-4">${flashing}</label>
                                        </div>*@
                                        `;
                            return html;
                        }
                    },
                    {
                        "data": "device_close_color",
                        "render": function (data, type, row, meta) {

                            var device_close_text = row.device_close_text ? row.device_close_text : "";
                            var device_close_point_name = row.device_close_point_name ? row.device_close_point_name : "";
                            var device_close_point_col = row.device_close_point_col ? row.device_close_point_col : "";
                            var device_close_point_value = row.device_close_point_value ? row.device_close_point_value : "";
                            var device_close_color = row.device_close_color ? row.device_close_color : "";
                            var flashing = row.device_normal_flashing == 1 ? "是" : "否";

                            var full_point_arr = [];
                            if (device_close_point_name != "") {
                                full_point_arr.push(device_close_point_name)
                            }
                            if (device_close_point_col != "") {
                                full_point_arr.push(device_close_point_col)
                            }
                            if (device_close_point_value != "") {
                                full_point_arr.push(device_close_point_value)
                            }

                            var html = `
                                        <div class="row">
                                            <label class="col-12">${device_close_text}</label>
                                        </div>
                                        <div class="row">
                                            <label class="col-12">${full_point_arr.join("-")}</label>
                                        </div>
                                        <div class="row">
                                            <div style="width: 30px;height: 30px; margin:auto; border-radius: 50%;background-color: ${device_close_color}"></div>
                                        </div>
                                        @*<div class="row">
                                            <label class="col-8">是否閃爍：</label>
                                            <label class="col-4">${flashing}</label>
                                        </div>*@
                                        `;
                            return html;
                        }
                    },
                    {
                        "data": "device_error_color",
                        "render": function (data, type, row, meta) {

                            var device_error_text = row.device_error_text ? row.device_error_text : "";
                            var device_error_point_name = row.device_error_point_name ? row.device_error_point_name : "";
                            var device_error_point_col = row.device_error_point_col ? row.device_error_point_col : "";
                            var device_error_point_value = row.device_error_point_value ? row.device_error_point_value : "";
                            var device_error_color = row.device_error_color ? row.device_error_color : "";
                            var flashing = row.device_error_flashing == 1 ? "是" : "否";
                            var independent = row.device_error_independent == 1 ? "是" : "否";

                            var full_point_arr = [];
                            if (device_error_point_name != "") {
                                full_point_arr.push(device_error_point_name)
                            }
                            if (device_error_point_col != "") {
                                full_point_arr.push(device_error_point_col)
                            }
                            if (device_error_point_value != "") {
                                full_point_arr.push(device_error_point_value)
                            }

                            var html = `
                                        <div class="row">
                                            <label class="col-12">${device_error_text}</label>
                                        </div>
                                        <div class="row">
                                            <label class="col-12">${full_point_arr.join("-")}</label>
                                        </div>
                                        <div class="row">
                                            <div style="width: 30px;height: 30px; margin:auto; border-radius: 50%;background-color: ${device_error_color}"></div>
                                        </div>
                                        <div class="row">
                                            <label class="col-8">是否閃爍：</label>
                                            <label class="col-4">${flashing}</label>
                                        </div>
                                        @*<div class="row">
                                            <label class="col-8">是否獨立顯示：</label>
                                            <label class="col-4">${independent}</label>
                                        </div>*@
                                        `;
                            return html;
                        }
                    },
                    {
                        "data": null,
                        "defaultContent": '<button class="btn btn-primary edit-btn">修改</button>'
                    }
                ],
                'createdRow': function (row, data, dataIndex) {
                    $(row).attr('data-guid', data.device_kind_guid);
                    $(row).attr('data-device-building-tag', data.device_building_tag);
                    $(row).attr('data-device-system-tag', data.device_system_tag);
                    $(row).attr('data-device-floor-tag', data.device_floor_tag);
                    $(row).attr('data-device-name-tag', data.device_name_tag);
                },
                //"order": [[2, "desc"]],
                "ajax": {
                    "url": "/DeviceManage/DeviceKindTableList",
                    "type": "POST",
                    "data": function (d) {
                        d.building_tag = selected_building_menu.building_tag ? selected_building_menu.building_tag : "";
                        d.device_system_tag = selected_building_menu.main_system ? selected_building_menu.main_system.main_system_tag : "";
                        d.device_name_tag = selected_building_menu.main_system ? selected_building_menu.main_system.sub_system ? selected_building_menu.main_system.sub_system.sub_system_tag : "" : "";
                        //d.Floor_tag = selected_floor_tag ? selected_floor_tag : "";
                    },
                    "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

            //#region 編輯設備種類
            $('#device_kind_table').on("click", "button.edit-btn", function () {

                selected_device_kind_guid = $(this).parents('tr').attr('data-guid');
                selected_device_building_tag = $(this).parents('tr').attr('data-device-building-tag');
                selected_device_system_tag = $(this).parents('tr').attr('data-device-system-tag');
                selected_device_floor_tag = $(this).parents('tr').attr('data-device-floor-tag');
                selected_device_name_tag = $(this).parents('tr').attr('data-device-name-tag');
                selected_device_name_tag_txt = $(this).parents('tr')[0].children[1].innerText

                //取得單一設備基本資料
                var url = "/DeviceManage/GetOneDeviceKind";

                var send_data = {
                    guid: selected_device_kind_guid
                }

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

                        //取得單一設備基本資料
                        var selectedSub_system_tag = selected_building_menu.main_system ? selected_building_menu.main_system.sub_system ? selected_building_menu.main_system.sub_system.sub_system_tag : "" : "";
                        var url = "/DeviceManage/GetDeviceItem";
                        var send_data = {
                            sub_system_tag: selectedSub_system_tag,
                            building_tag: selected_device_building_tag
                        }

                        $.post(url, send_data, function (rel) {
                            if (rel.code != "0000") {
                                if (rel.code == "9999") {
                                    toast_error(rel.msg);
                                }
                                else {
                                    toast_warning(rel.msg);
                                }
                                return;
                            }
                            else {
                                $('#device_image_modal').val("");

                                $("#device_normal_point_name_modal").empty();
                                $("#device_close_point_name_modal").empty();
                                $("#device_error_point_name_modal").empty();
                                $("#device_normal_point_name_modal").append($("<option />").val("").text("未選擇"));
                                $("#device_close_point_name_modal").append($("<option />").val("").text("未選擇"));
                                $("#device_error_point_name_modal").append($("<option />").val("").text("未選擇"));
                                $.each(rel.data, function (index, val) {
                                    $("#device_normal_point_name_modal").append($("<option />").val(val.id).text(val.points));
                                    $("#device_close_point_name_modal").append($("<option />").val(val.id).text(val.points));
                                    $("#device_error_point_name_modal").append($("<option />").val(val.id).text(val.points));
                                });


                                $("#device_kind_name_modal").html(selected_device_name_tag_txt);
                                if (device_kind_data != null) {
                                    $("#device_normal_text_modal").val(device_kind_data.device_normal_text ? device_kind_data.device_normal_text : "");

                                    var normal_point_name = device_kind_data.device_normal_point_guid ? device_kind_data.device_normal_point_guid : "";
                                    var normal_point_col = device_kind_data.device_normal_point_col ? device_kind_data.device_normal_point_col : "";
                                    var normal_point_value = device_kind_data.device_normal_point_value ? device_kind_data.device_normal_point_value : "";

                                    $("#device_normal_point_name_modal").val(normal_point_name);
                                    $("#device_normal_point_col_modal").val(normal_point_col);
                                    $("#device_normal_point_value_modal").val(normal_point_value);
                                    if (normal_point_name != undefined && normal_point_name != null) {
                                        var normal_point_text = $("#device_normal_point_name_modal option:selected").text();
                                        if (normal_point_name == "" || normal_point_text == "ER") {
                                            $("#device_normal_point_col_modal").val("").attr("disabled", true);
                                            $("#device_normal_point_value_modal").val("").attr("disabled", true);
                                        } else {
                                            $("#device_normal_point_col_modal").val(normal_point_col).attr("disabled", false);
                                            $("#device_normal_point_value_modal").val(normal_point_value).attr("disabled", false);
                                        }
                                    } else {
                                        $("#device_normal_point_col_modal").val("").attr("disabled", true);
                                        $("#device_normal_point_value_modal").val("").attr("disabled", true);
                                    }

                                    $("#device_normal_color_modal").val(device_kind_data.device_normal_color ? device_kind_data.device_normal_color : "");

                                    if (device_kind_data.device_name_tag != undefined && device_kind_data.device_name_tag != null && device_kind_data.device_normal_flashing == 1) {
                                        $("#device_normal_flashing_modal").prop("checked", true);
                                    }
                                    else {
                                        $("#device_normal_flashing_modal").prop("checked", false);
                                    }

                                    $("#device_close_text_modal").val(device_kind_data.device_close_text ? device_kind_data.device_close_text : "");

                                    var close_point_name = device_kind_data.device_close_point_guid ? device_kind_data.device_close_point_guid : "";
                                    var close_point_col = device_kind_data.device_close_point_col ? device_kind_data.device_close_point_col : "";
                                    var close_point_value = device_kind_data.device_close_point_value ? device_kind_data.device_close_point_value : "";

                                    $("#device_close_point_name_modal").val(close_point_name);
                                    $("#device_close_point_col_modal").val(close_point_col);
                                    $("#device_close_point_value_modal").val(close_point_value);
                                    if (close_point_name != undefined && close_point_name != null) {
                                        var close_point_text = $("#device_close_point_name_modal option:selected").text();
                                        if (close_point_name == "" || close_point_text == "ER") {
                                            $("#device_close_point_col_modal").val("").attr("disabled", true);
                                            $("#device_close_point_value_modal").val("").attr("disabled", true);
                                        } else {
                                            $("#device_close_point_col_modal").val(close_point_col).attr("disabled", false);
                                            $("#device_close_point_value_modal").val(close_point_value).attr("disabled", false);
                                        }
                                    } else {
                                        $("#device_close_point_col_modal").val("").attr("disabled", true);
                                        $("#device_close_point_value_modal").val("").attr("disabled", true);
                                    }

                                    $("#device_close_color_modal").val(device_kind_data.device_close_color ? device_kind_data.device_close_color : "");

                                    if (device_kind_data.device_name_tag != undefined && device_kind_data.device_name_tag != null && device_kind_data.device_close_flashing == 1) {
                                        $("#device_close_flashing_modal").prop("checked", true);
                                    }
                                    else {
                                        $("#device_close_flashing_modal").prop("checked", false);
                                    }

                                    $("#device_error_text_modal").val(device_kind_data.device_error_text ? device_kind_data.device_error_text : "");

                                    var error_point_name = device_kind_data.device_error_point_guid ? device_kind_data.device_error_point_guid : "";
                                    var error_point_col = device_kind_data.device_error_point_col ? device_kind_data.device_error_point_col : "";
                                    var error_point_value = device_kind_data.device_error_point_value ? device_kind_data.device_error_point_value : "";
                                    $("#device_error_point_name_modal").val(error_point_name);
                                    $("#device_error_point_col_modal").val(error_point_col);
                                    $("#device_error_point_value_modal").val(error_point_value);
                                    if (error_point_name != undefined && error_point_name != null) {
                                        var error_point_text = $("#device_error_point_name_modal option:selected").text();
                                        if (error_point_name == "" || error_point_text == "ER") {
                                            $("#device_error_point_col_modal").val("").attr("disabled", true);
                                            $("#device_error_point_value_modal").val("").attr("disabled", true);
                                        } else {
                                            $("#device_error_point_col_modal").val(error_point_col).attr("disabled", false);
                                            $("#device_error_point_value_modal").val(error_point_value).attr("disabled", false);
                                        }
                                    } else {
                                        $("#device_error_point_col_modal").val("").attr("disabled", true);
                                        $("#device_error_point_value_modal").val("").attr("disabled", true);
                                    }

                                    $("#device_error_color_modal").val(device_kind_data.device_error_color ? device_kind_data.device_error_color : "");

                                    if (device_kind_data.device_name_tag != undefined && device_kind_data.device_name_tag != null && device_kind_data.device_error_flashing == 1) {
                                        $("#device_error_flashing_modal").prop("checked", true);
                                    }
                                    else {
                                        $("#device_error_flashing_modal").prop("checked", false);
                                    }

                                    if (device_kind_data.device_name_tag != undefined && device_kind_data.device_name_tag != null && device_kind_data.device_error_independent == 1) {
                                        $("#device_error_independent_modal").prop("checked", true);
                                    }
                                    else {
                                        $("#device_error_independent_modal").prop("checked", false);
                                    }
                                }
                                else {
                                    //Reset Form
                                    $('#device_image_modal').val("");
                                    $('#device_normal_text_modal').val("");
                                    $('#device_normal_point_name_modal').val("");
                                    $('#device_normal_point_col_modal').val("");
                                    $('#device_normal_point_value_modal').val("");
                                    $('#device_normal_color_modal').val("");
                                    $('#device_normal_flashing_modal').prop("checked", false);

                                    $('#device_close_text_modal').val("");
                                    $('#device_close_point_name_modal').val("");
                                    $('#device_close_point_col_modal').val("");
                                    $('#device_close_point_value_modal').val("");
                                    $('#device_close_color_modal').val("");
                                    $('#device_close_flashing_modal').prop("checked", false);

                                    $('#device_error_text_modal').val("");
                                    $('#device_error_point_name_modal').val("");
                                    $('#device_error_point_col_modal').val("");
                                    $('#device_error_point_value_modal').val("");
                                    $('#device_error_color_modal').val("");
                                    $('#device_error_flashing_modal').prop("checked", false);
                                    $('#device_error_independent_modal').prop("checked", false);
                                }

                                $("#device-kind-modal").modal();
                            }
                        }, 'json')
                    }
                }, 'json');
            });
            //#endregion

            //#region 設備種類燈號判別
            $("#device_normal_point_name_modal").change(function () {
                var point_name_value = $(this).val();
                var point_name_text = $(this).find("option:selected").text();

                if (point_name_value == "" || point_name_text == "ER") {
                    $("#device_normal_point_col_modal").val("").attr("disabled", true);
                    $("#device_normal_point_value_modal").val("").attr("disabled", true);
                } else if (point_name_text != "ER") {
                    $("#device_normal_point_col_modal").attr("disabled", false);
                    $("#device_normal_point_value_modal").attr("disabled", false);
                    $("#device_close_point_name_modal").val(point_name_value).trigger("change");
                }
            });

            $("#device_close_point_name_modal").change(function () {
                var point_name_value = $(this).val();
                var point_name_text = $(this).find("option:selected").text();

                if (point_name_value == "" || point_name_text == "ER") {
                    $("#device_close_point_col_modal").val("").attr("disabled", true);
                    $("#device_close_point_value_modal").val("").attr("disabled", true);
                } else if (point_name_text != "ER") {
                    $("#device_close_point_col_modal").attr("disabled", false);
                    $("#device_close_point_value_modal").attr("disabled", false);
                    $("#device_normal_point_name_modal").val(point_name_value).trigger("change");
                }
            });

            $("#device_error_point_name_modal").change(function () {
                var point_name_value = $(this).val()
                var point_name_text = $(this).find("option:selected").text();

                if (point_name_value == "" || point_name_text == "ER") {
                    $("#device_error_point_col_modal").val("").attr("disabled", true);
                    $("#device_error_point_value_modal").val("").attr("disabled", true);
                } else if (point_name_text != "ER") {
                    $("#device_error_point_col_modal").attr("disabled", false);
                    $("#device_error_point_value_modal").attr("disabled", false);
                }
            });
            //#endregion

            //#region 新增設備基本資料DataTable
            deviceImportCheckTempTable = $("#device_import_check_temp_table").DataTable({
                "pageLength": 20,
                "columns": [
                    {
                        "data": null,
                    },
                    {
                        "data": null,
                        "render": function (data, type, row, meta) {
                            return meta.row + 1;
                        }
                    },
                    {
                        "data": "device_number"
                    },
                    {
                        "data": null,
                        "render": function (data, type, row, meta) {
                            return row.device_name_tag + '_' + row.device_serial_tag;
                        }
                    },
                    {
                        "data": "device_disaster_type_text",
                    },
                ],
                "columnDefs": [{
                    'targets': 0,
                    'searchable': false,
                    'orderable': false,
                    'className': 'dt-body-center',
                    'render': function (data, type, full, meta) {
                        var check_html = "";
                        check_html += `<div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="${data.device_number}" name="selectedDevice[]" value="${data.device_number}" data-system-category="${data.device_system_category_layer3}" data-device-disaster="${data.device_disasters}" />
                                            <label class="custom-control-label" for="${data.device_number}"/>
                                       </div>`;
                        return check_html;
                    }
                }],
                "order": [[1, "asc"]],
                "ajax": {
                    "url": "/DeviceManage/DeviceImportCheckTempTableList",
                    "type": "POST",
                    "data": function (d) {
                        d.Device_building_tag = selected_building_tag ? selected_building_tag : "";
                        d.Device_system_tag = selected_system_tag ? selected_system_tag : "";
                        d.Device_floor_tag = selected_floor_tag ? selected_floor_tag : "";
                        d.Device_name_tag = selected_name_tag ? selected_name_tag : "";
                    },
                    "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

            //#region 新增設備基本資料全選
            $("#select-all-device-number").change(function () {

                var rows = deviceImportCheckTempTable.rows({ 'search': 'applied' }).nodes();

                if (this.checked) {
                    $('input[type="checkbox"]', rows).prop('checked', this.checked);
                } else {
                    $('input[type="checkbox"]', rows).prop('checked', this.checked);
                }
            });
            //#endregion
        });

        //#region 建置左側選單列表
        function GetBuildingMenuCollapse(filter) {
            var url = "/DeviceManage/GetBuildingMenuCollapse";

            var send_data = {
                Filter: filter
            }

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

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

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

                    var html = '';

                    buildingCollapses.forEach(function (buildingCollapse, buildingCollapse_index) {
                        html += `
                                    <div class="card border-top-left-radius-0 border-top-right-radius-0">
                                        <div class="card-header">
                                            <a href="javascript:void(0);" class="card-title collapsed" data-toggle="collapse" data-target="#js_list_accordion-${buildingCollapse_index}" aria-expanded="false" data-filter-tags="settings">
                                                <i class="fal fa-globe width-2 fs-xl"></i>
                                                ${buildingCollapse.full_name}
                                                <span class="ml-auto">
                                                    <span class="collapsed-reveal">
                                                        <i class="fal fa-chevron-up fs-xl"></i>
                                                    </span>
                                                    <span class="collapsed-hidden">
                                                        <i class="fal fa-chevron-down fs-xl"></i>
                                                    </span>
                                                </span>
                                            </a>
                                        </div>
                                        <div id="js_list_accordion-${buildingCollapse_index}" class="collapse" data-parent="#js_list_accordion" style="">`;

                        buildingCollapse.main_systems.forEach(function (main_system, main_system_index) {
                            html += `
                                            <div id="cp-${main_system_index}" class="card py-3">
                                                <div class="card-header pl-4 pr-3 d-flex justify-content-between">
                                                    <a href="javascript:;" class="" data-toggle="collapse" data-target="#cp-${main_system_index} > .card-body" aria-expanded="true">
                                                        <span class="collapsed-hidden"><h4 class="font-weight-bold"><i class="fal fa-charging-station"></i> ${main_system.full_name}　<i class="fal fa-chevron-down fs-xl"></i></h4></span>
                                                        <span class="collapsed-reveal"><h4 class="font-weight-bold"><i class="fal fa-charging-station"></i> ${main_system.full_name}　<i class="fal fa-chevron-up fs-xl"></i></h4></span>
                                                    </a>
                                                </div>
                                                <div class="card-body p-0 collapse show">
                                                    <div class="p-0">
                                                        <ul class="list-group list-group-flush">
                                        `;

                            main_system.sub_systems.forEach(function (sub_system, sub_Systems_index) {
                                html += `
                                                            <li class="list-group-item pr-0 d-flex justify-content-between">
                                                                <a href="javascript:;" onclick="ChangeFloorPanel(this)"
                                                                            data-building-tag="${buildingCollapse.building_tag}"
                                                                    data-main-system-tag="${main_system.main_system_tag}"
                                                                    data-sub-system-tag="${sub_system.sub_system_tag}">
                                                                    ${sub_system.full_name}
                                                                </a>
                                                            </li>`;
                            });

                            html += `
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>`;
                        });

                        html += `   </div>
                                    </div>`;
                    });

                    $('#js_list_accordion').append(html);

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

                    return;
                }

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

        //#region 變更樓層的控制面板
        function ChangeFloorPanel(dom) {

            var selected_target = {
                "building_tag": $(dom).attr("data-building-tag") ? $(dom).attr("data-building-tag") : "",
                "main_system_tag": $(dom).attr("data-main-system-tag") ? $(dom).attr("data-main-system-tag") : "",
                "sub_system_tag": $(dom).attr("data-sub-system-tag") ? $(dom).attr("data-sub-system-tag") : "",
            }

            buildingCollapses.forEach(function (building_item, building_index) {
                if (building_item.building_tag == selected_target.building_tag) {
                    selected_building_menu.building_tag = building_item.building_tag;
                    selected_building_menu.main_system = {};

                    building_item.main_systems.forEach(function (main_system_item, main_system_index) {
                        if (main_system_item.main_system_tag == selected_target.main_system_tag) {
                            selected_building_menu.main_system.main_system_tag = main_system_item.main_system_tag
                            selected_building_menu.main_system.sub_system = {};

                            $("#select-main-system-name").html(main_system_item.full_name);

                            main_system_item.sub_systems.forEach(function (sub_system_item, sub_system_index) {
                                if (sub_system_item.sub_system_tag == selected_target.sub_system_tag) {
                                    selected_building_menu.main_system.sub_system.sub_system_tag = sub_system_item.sub_system_tag
                                    selected_building_menu.main_system.sub_system.floors = sub_system_item.floors;

                                    $("#select-sub-system-name").html(sub_system_item.full_name);

                                    //匯入floor panel
                                    $(".floor-panel-wrap").empty();
                                    sub_system_item.floors.forEach(function (floor_item, floor_index) {
                                        $(".floor-panel-wrap").append(`<button type="button" class="btn btn-secondary waves-effect waves-themed mr-2 mb-2 btn-floor" onclick="ChangeDevicePanel(this)" data-floor-guid="${floor_item.floor_tag}">${floor_item.full_name}</button>`)
                                    });
                                }
                            });
                        }
                    });
                }
            });

            $(".btn-floor").first().click();
        }
        //#endregion

        //#region 變更平面圖與設備的控制面板
        function ChangeDevicePanel(dom) {

            selected_floor_tag = $(dom).attr("data-floor-guid") ? $(dom).attr("data-floor-guid") : ""

            var current_floor = selected_building_menu.main_system.sub_system.floors.filter(function (item) {
                return item.floor_tag == selected_floor_tag
            })[0];

            $.each($(".btn-floor"), function (index, item) {
                if ($(item).hasClass("btn-success")) {
                    $(item).removeClass("btn-success");
                    $(item).addClass("btn-secondary");
                }
            });

            $(dom).hasClass("btn-secondary") ? $(dom).removeClass("btn-secondary").addClass("btn-success") : $(dom).addClass("btn-success");

            deviceInfoTable.ajax.reload(null, false);
            deviceKindTable.ajax.reload(null, false);

            ChangeFloorMapMode("");

            //#region 平面圖設定
            myChart.clear();
            $.get(`/upload/floor_map/${current_floor.floor_map_name}.svg`, function (svg) {

                if (svg == undefined || svg == null) {
                    return;
                }

                echarts.registerMap('floor_svg', { svg: svg });

                option = {
                    // animationDurationUpdate: 1500,
                    tooltip: {
                        formatter: function (params) {
                            if (params.data.device_node_guid != undefined && params.data.device_node_guid != null && params.data.device_node_guid != "") {
                                return `名稱：${params.data.device_node_full_name}<br>
                                    Guid：${params.data.device_node_guid}`
                            }
                            else {
                                return `名稱：${params.data.device_full_name}<br>
                                    Guid：${params.data.device_guid}`
                            }
                        }
                    },
                    toolbox: { //工具欄
                        show: false
                    },
                    geo: {
                        map: 'floor_svg',
                        roam: true,
                        scaleLimit: {  //限制放大縮小倍數
                            max: 32,
                            min: 2.5
                        },
                        layoutSize: '100%',
                        layoutCenter: ['50%', '50%'],
                        zoom: 2.5,
                        silent: true
                    },
                    series: [
                        {   //不管有無被選擇(圓點)
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            geoIndex: 0,
                            symbol: 'circle',
                            symbolSize: 10,
                            symbolOffset: [10, 10],
                            label: {
                                show: false
                            },
                            data: currentData,
                            z: 2
                        },
                        {   //未選擇的設備(icon)
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            geoIndex: 0,
                            symbolSize: 30,
                            label: {
                                formatter: '{b}',
                                position: 'bottom',
                                show: true,
                                backgroundColor: 'orange'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '20',
                                    fontWeight: 'bold',
                                    color: 'yellow'
                                }
                            },
                            selectedMode: 'single',
                            data: null,
                            z: 1
                        },
                        {   //被選擇的設備(icon)
                            type: 'effectScatter',
                            coordinateSystem: 'geo',
                            geoIndex: 0,
                            showEffectOn: 'render',
                            symbolSize: 30,
                            label: {
                                formatter: '{b}',
                                position: 'bottom',
                                show: true,
                                backgroundColor: 'orange'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '20',
                                    fontWeight: 'bold',
                                    color: 'yellow'
                                }
                            },
                            selectedMode: 'single',
                            data: null,
                            z: 1
                        },
                        {   //編輯模式底下的設備(圓點，只會有一個)
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            geoIndex: 0,
                            symbol: 'circle',
                            symbolSize: 10,
                            symbolOffset: [10, 10],
                            label: {
                                show: false
                            },
                            data: currentData,
                            z: 2
                        },
                        {   //編輯模式底下的設備(icon，只會有一個)
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            geoIndex: 0,
                            symbolSize: 30,
                            label: {
                                formatter: '{b}',
                                position: 'bottom',
                                show: true,
                                backgroundColor: 'orange'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '20',
                                    fontWeight: 'bold',
                                    color: 'yellow'
                                }
                            },
                            data: null,
                            z: 1
                        },
                    ],
                };

                myChart.setOption(option);

                myChart.getZr().on('click', function (params) {
                    console.log("click", params);
                    var pixelPoint = [params.offsetX, params.offsetY];
                    var dataPoint = myChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
                    console.log(dataPoint);

                    if (floor_map_mode == "edit") {

                        temp_device_on_floor_map = [{
                            device_guid: selected_temp_device.device_guid,
                            device_full_name: selected_temp_device.device_full_name,
                            device_node_guid: selected_temp_device.device_node_guid ? selected_temp_device.device_node_guid : null,
                            device_node_full_name: selected_temp_device.device_node_full_name ? selected_temp_device.device_node_full_name : null,
                            status: selected_temp_device.status,
                            value: dataPoint
                        }];

                        resetData();
                    }


                    // currentData.push([dataPoint[0], dataPoint[1], 1]);
                    // myChart.setOption(option);
                });

                myChart.on('selectchanged', function (params) {
                    @*var pixelPoint = [params.offsetX, params.offsetY];
                    var dataPoint = myChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);*@
                    console.log("selectchanged", params);
                    // currentData.push([dataPoint[0], dataPoint[1], 1]);
                    // myChart.setOption(option);

                    currentData = $.map(currentData, function (item) {
                        item.selected = false;
                        return item;
                    });

                    if (params.selected.length > 0) {
                        currentData[params.selected[0].seriesIndex - 1].selected = true;
                    }

                    resetData();
                });

                // myChart.getZr().on('mousewheel', function (params) {
                //     console.log(params)
                // })
                myChart.on('georoam', function (params) {
                    @*console.log("myChart", myChart)*@
                    @*console.log("myChart canvas Width Height", [myChart.getWidth(), myChart.getHeight()]);*@
                    @*console.log("params", params)
                    console.log("geo", myChart.getOption().geo[0])*@
                    var zoom = myChart.getOption().geo[0].zoom;

                    if (zoom <= 2.5) {
                        ResetFloorMap();
                        myChart.setOption({
                            geo: {
                                roam: 'scale'
                            },
                        });
                    } else {
                        myChart.setOption({
                            geo: {
                                roam: true
                            },
                        });
                    }

                    resetData();
                });
            })
            .fail(function () {
                toast_warning("查無該樓層地圖")
                myChart.clear();
            });
            //#endregion
        }
        //#endregion

        //#region 重設平面圖設備資料
        function resetData() {
            const scatter_symbol_unselect_convertData = function (data) { //不管有無被選擇(圓點)
                let res = [], temp = [];

                data.forEach(function (item, index) {
                    //如果有子節點，則只針對子節點操作
                    if (item.device_nodes != undefined && item.device_nodes != null && item.device_nodes.length > 0) {
                        item.device_nodes.forEach(function (item_node, item_node_index) {
                            temp.push(item_node);
                        });
                    } else {
                        temp.push(item)
                    }
                });

                temp.map(function (item) {

                    var obj = {
                        device_guid: item.device_guid,
                        device_full_name: item.device_full_name ? item.device_full_name : null,
                        device_node_guid: item.device_node_guid ? item.device_node_guid : null,
                        device_node_full_name: item.device_node_full_name ? item.device_node_full_name : null,
                        status: item.status,
                        value: item.value
                    }

                    obj.itemStyle = { 'color': "#0000FF" };
                    res.push(obj);

                });

                return res;
            }

            const scatter_icon_unselect_convertData = function (data) { //未選擇的設備(icon)
                let res = [], temp = [];

                data.forEach(function (item, index) {
                    //如果有子節點，則只針對子節點操作
                    if (item.device_nodes != undefined && item.device_nodes != null && item.device_nodes.length > 0) {
                        item.device_nodes.forEach(function (item_node, item_node_index) {
                            if (item_node.selected != undefined && item_node.selected != null && item_node.selected == false) {
                                //添加父節點相關資訊
                                item_node.device_image_url = item.device_image_url;
                                temp.push(item_node);
                            }
                        });
                    } else {
                        if (item.selected == false) {
                            temp.push(item)
                        }
                    }
                });

                temp.map(function (item) {

                    var obj = {
                        device_guid: item.device_guid,
                        device_full_name: item.device_full_name ? item.device_full_name : null,
                        device_node_guid: item.device_node_guid ? item.device_node_guid : null,
                        device_node_full_name: item.device_node_full_name ? item.device_node_full_name : null,
                        symbol: 'image://' + item.device_image_url,
                        status: item.status,
                        value: item.value
                    }

                    obj.itemStyle = { 'color': "#0000FF" };
                    res.push(obj);
                });

                return res;
            }

            const effectScatter_icon_selected_convertData = function (data) { //被選擇的設備(icon)
                let res = [], temp = [];

                data.forEach(function (item, index) {
                    //如果有子節點，則只針對子節點操作
                    if (item.device_nodes != undefined && item.device_nodes != null && item.device_nodes.length > 0) {
                        item.device_nodes.forEach(function (item_node, item_node_index) {
                            if (item_node.selected != undefined && item_node.selected != null && item_node.selected == true) {
                                //添加父節點相關資訊
                                item_node.device_image_url = item.device_image_url;
                                temp.push(item_node);
                            }
                        });
                    } else {
                        if (item.selected == true) {
                            temp.push(item)
                        }
                    }
                });

                temp.map(function (item) {

                    var obj = {
                        device_guid: item.device_guid,
                        device_full_name: item.device_full_name ? item.device_full_name : null,
                        device_node_guid: item.device_node_guid ? item.device_node_guid : null,
                        device_node_full_name: item.device_node_full_name ? item.device_node_full_name : null,
                        symbol: 'image://' + item.device_image_url,
                        status: item.status,
                        value: item.value
                    }

                    obj.itemStyle = { 'color': "#0000FF" };
                    res.push(obj);
                });

                return res;
            }

            const scatter_symbol_temp_device = function (data) { //編輯模式底下的設備(圓點，只會有一個)
                let res = [];
                data.map(function (item) {

                    var obj = {
                        device_guid: item.device_guid,
                        device_full_name: item.device_full_name,
                        status: item.status,
                        value: item.value
                    }

                    switch (item.status) {
                        case 0:
                            obj.itemStyle = { 'color': item.device_close_color };
                            break;
                        case 1:
                            obj.itemStyle = { 'color': item.device_normal_color };
                            break;
                        case 2:
                            obj.itemStyle = { 'color': item.device_error_color };
                            break;
                    }

                    res.push(obj);
                });

                return res;
            }

            const effectScatter_utemp_device = function (data) {
                let res = [];

                data.map(function (item) {

                    var obj = {
                        device_guid: item.device_guid,
                        device_full_name: item.device_full_name,
                        status: item.status,
                        symbol: 'image://' + item.device_image_url,
                        value: item.value
                    }

                    res.push(obj);
                });

                return res;
            }

            if (!myChart.getOption()) {
                return;
            }


            var zoom = 0
            if (myChart.getOption().geo && myChart.getOption().geo.length > 0) {
                zoom = myChart.getOption().geo[0].zoom;
            }

            if (zoom <= 8) {

                myChart.setOption({
                    series: [{
                        symbolOffset: [0, 0],
                        data: scatter_symbol_unselect_convertData(currentData)
                    }, {
                        data: []
                    }, {
                        data: []
                    }, {
                        data: scatter_symbol_temp_device(temp_device_on_floor_map)
                    }, {
                        data: []
                    }]
                });
            } else {

                myChart.setOption({
                    series: [{
                        symbolOffset: [10, 10],
                        data: scatter_symbol_unselect_convertData(currentData)
                    }, {
                        data: scatter_icon_unselect_convertData(currentData),
                    }, {
                        data: effectScatter_icon_selected_convertData(currentData),
                    }, {
                        symbolOffset: [10, 10],
                        data: scatter_symbol_temp_device(temp_device_on_floor_map)
                    }, {
                        data: effectScatter_utemp_device(temp_device_on_floor_map),
                    }]
                });
            }
        }
        //#endregion

        //#region 重製平面圖
        function ResetFloorMap() {
            myChart.clear();
            myChart.setOption(option);
            resetData();
        }
        //#endregion

        //#region 變更平面圖模式
        function ChangeFloorMapMode(mode = "") {
            floor_map_mode = mode;
            switch (floor_map_mode) {
                case 'edit':
                    $('#floor-map-mode-text').html("編輯模式");
                    $('#floor-map-edit-mode-btn-wrap').show();
                    $('#device_info_table .device-coordinate-btn').attr("disabled", true);
                    break;
                case 'view':
                    $('#floor-map-mode-text').html("檢視模式");
                    $('#floor-map-edit-mode-btn-wrap').hide();
                    $('#device_info_table .device-coordinate-btn').attr("disabled", false);
                    break;
            }
        }
        //#endregion

        //#region 取消編輯平面圖模式
        function CancelFloorMapEdit() {
            temp_device_on_floor_map = [];

            var index = currentData.findIndex(function (item) { return item.device_guid === selected_temp_device.device_guid });

            currentData[index].selected = false;

            if (selected_temp_device.device_node_guid != undefined && selected_temp_device.device_node_guid != null && selected_temp_device.device_node_guid != "") {
                var node_index = currentData[index].device_nodes.findIndex(function (item) { return item.device_node_guid === selected_temp_device.device_node_guid });

                currentData[index].device_nodes[node_index].selected = false;
            }

            selected_temp_device = {}; //清空

            resetData();
            ChangeFloorMapMode("view");
        }
        //#endregion

        //#region 儲存編輯平面圖模式
        function SaveFloorMapEdit() {
            var new_coordinate = temp_device_on_floor_map[0].value;

            coordinate = new_coordinate[0].toFixed(3).toString() + "," + new_coordinate[1].toFixed(3).toString();

            var index = currentData.findIndex(function (item) { return item.device_guid === selected_temp_device.device_guid });

            var url = "/DeviceManage/SaveDeviceCoordinate";

            var send_data = {
                Device_guid: selected_temp_device.device_guid,
                Device_node_guid: selected_temp_device.device_node_guid,
                Coordinate: coordinate
            }

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

                    temp_device_on_floor_map = [];
                    deviceInfoTable.ajax.reload(null, false);
                    ChangeFloorMapMode("view");
                    return;
                }
            }, 'json')
        }
        //#endregion

        //#region 新增設備
        function AddDevice() {

            var selectedBuilding_tag = selected_building_menu.building_tag ? selected_building_menu.building_tag : "";
            var selectedMain_system_tag = selected_building_menu.main_system ? selected_building_menu.main_system.main_system_tag : "";
            var selectedSub_system_tag = selected_building_menu.main_system ? selected_building_menu.main_system.sub_system ? selected_building_menu.main_system.sub_system.sub_system_tag : "" : "";
            var selectedFloor_tag = selected_floor_tag ? selected_floor_tag : "";
            if (selectedBuilding_tag == '' || selectedMain_system_tag == '' || selectedSub_system_tag == '' || selectedFloor_tag == '') {
                toast_warning("請先選擇系統類別及樓層。");
                return;
            }


            //取得上方選單過濾列表
            var url = "/DeviceManage/GetDeviceImportCheckTempFilter";

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

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

                    var html = '';

                    deviceImportCheckTempFilterList.forEach(function (building_item, building_tag_index) {
                        html += `<button type="button" class="btn btn-secondary waves-effect waves-themed mr-2 btn-building-tag" onclick="ChangeDeviceImportPanel('${building_item.device_building_tag}')">${building_item.device_building_tag}</button>`
                    });

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

                    $('#import-temp-building-tag-list').children().first().trigger('click');

                    $("#device-info-add-modal").modal();

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

        //#region 變更新增設備基本資料modal的過濾條件
        function ChangeDeviceImportPanel(building_tag, system_tag = "", floor_tag = "") {
            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) {
                if ($(item).text() == building_tag) {
                    $(item).removeClass("btn-secondary").addClass("btn-success");
                }
            });

            $('#import-temp-system-tag-list').empty();
            deviceImportCheckTempFilterList.forEach(function (building_item, building_item_index) {
                if (building_item.device_building_tag == building_tag) {
                    var system_html = '';

                    building_item.device_system_tags.forEach(function (system_item, system_item_index) {
                        if (system_item.device_system_tag == system_tag) {
                            system_html += `<button type="button" class="btn btn-success waves-effect waves-themed mr-2 mb-2" onclick="ChangeDeviceImportPanel('${building_item.device_building_tag}', '${system_item.device_system_tag}')">${system_item.device_system_tag}</button>`
                        }
                        else {
                            system_html += `<button type="button" class="btn btn-secondary waves-effect waves-themed mr-2 mb-2" onclick="ChangeDeviceImportPanel('${building_item.device_building_tag}', '${system_item.device_system_tag}')">${system_item.device_system_tag}</button>`
                        }
                    });

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

                    if (system_tag == '') {
                        $('#import-temp-system-tag-list').children().first().trigger('click');
                        return;
                    } else {
                        $('#import-temp-floor-tag-list').empty();
                        building_item.device_system_tags.forEach(function (system_item, system_item_index) {
                            if (system_item.device_system_tag == system_tag) {
                                var floor_html = '';

                                system_item.device_floor_tags.forEach(function (floor_item, floor_item_index) {
                                    if (floor_item.device_floor_tag == floor_tag) {
                                        floor_html += `<button type="button" class="btn btn-success waves-effect waves-themed mr-2 mb-2" onclick="ChangeDeviceImportPanel('${building_item.device_building_tag}', '${system_item.device_system_tag}', '${floor_item.device_floor_tag}')">${floor_item.device_floor_tag}</button>`
                                    }
                                    else {
                                        floor_html += `<button type="button" class="btn btn-secondary waves-effect waves-themed mr-2 mb-2" onclick="ChangeDeviceImportPanel('${building_item.device_building_tag}', '${system_item.device_system_tag}', '${floor_item.device_floor_tag}')">${floor_item.device_floor_tag}</button>`
                                    }
                                });

                                $('#import-temp-floor-tag-list').append(floor_html);

                                if (floor_tag == '') {
                                    $('#import-temp-floor-tag-list').children().first().trigger('click');
                                    return;
                                } else {
                                    $('#import-temp-name-tag-list').empty();
                                    system_item.device_floor_tags.forEach(function (floor_item, floor_item_index) {
                                        if (floor_item.device_floor_tag == floor_tag) {
                                            var name_html = '';
                                            floor_item.device_name_tags.forEach(function (name_item, name_item_index) {
                                                name_html += `<button type="button" class="btn btn-secondary waves-effect waves-themed mr-2 mb-2 btn-name-tag"
                                                                onclick="ChangeDeviceImportCheckTempTable(
                                                                    '${building_item.device_building_tag}',
                                                                    '${system_item.device_system_tag}',
                                                                    '${floor_item.device_floor_tag}',
                                                                    '${name_item}')">${name_item}</button>`;
                                            });

                                            $('#import-temp-name-tag-list').append(name_html);
                                        }
                                    });

                                    $('#import-temp-name-tag-list').children().first().trigger('click');
                                }
                            }
                        });
                    }
                }
            });
        }
        //#endregion

        //#region 變更新增設備基本資料modal的列表
        function ChangeDeviceImportCheckTempTable(building_tag = "", system_tag = "", floor_tag = "", name_tag = "") {
            if ($(".btn-name-tag").hasClass("btn-success")) {
                $(".btn-name-tag").removeClass("btn-success").addClass("btn-secondary");
            }

            $(".btn-name-tag").each(function (index, item) {
                if ($(item).text() == name_tag) {
                    $(item).removeClass("btn-secondary").addClass("btn-success");
                }
            });

            selected_building_tag = building_tag;
            selected_system_tag = system_tag;
            selected_floor_tag = floor_tag;
            selected_name_tag = name_tag;

            deviceImportCheckTempTable.ajax.reload(null, false);
        }
        //#endregion

        //#region 設備儲存(透過新增按鈕)
        function SaveDeviceAdd() {

            var selectedBuilding_tag = selected_building_menu.building_tag ? selected_building_menu.building_tag : "";
            var selectedMain_system_tag = selected_building_menu.main_system ? selected_building_menu.main_system.main_system_tag : "";
            var selectedSub_system_tag = selected_building_menu.main_system ? selected_building_menu.main_system.sub_system ? selected_building_menu.main_system.sub_system.sub_system_tag : "" : "";
            var selectedFloor_tag = selected_floor_tag ? selected_floor_tag : "";
            if (selectedBuilding_tag == '' || selectedMain_system_tag == '' || selectedSub_system_tag == '' || selectedFloor_tag == '')
            {
                toast_warning("請先選擇系統類別及樓層。");
                return;
            }

            var rows = deviceImportCheckTempTable.rows({ 'search': 'applied' }).nodes();
            //取得被選擇的設備
            var selectedDevices = $("input[name='selectedDevice[]']:checked", rows).map(function () {
                var system_category = $(this).attr('data-system-category');
                var device_disasters = $(this).attr('data-device-disaster');
                return {
                    Device_number: $(this).val(),
                    Device_system_category_layer3: system_category,
                    Device_disasters: device_disasters
                };
            }).get();

            if (selectedDevices.length <= 0) {
                toast_warning("請選擇欲加入設備。");
                return;
            }

            var json_selectedDevices = JSON.stringify(selectedDevices);
            var blob = new Blob([json_selectedDevices],
                { type: "text/plain;charset=utf-8" });

            var url = "/DeviceManage/SaveDeviceInfoAdd";

            @*var send_data = {
                Building_tag: selectedBuilding_tag,
                Main_system_tag: selectedMain_system_tag,
                Sub_system_tag: selectedSub_system_tag,
                Floor_tag: selectedFloor_tag,
                SelectedDevices: selectedDevices
            }

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

                toast_ok(rel.msg);
                $("#device-info-add-modal").modal('hide');

                deviceInfoTable.ajax.reload();
                deviceKindTable.ajax.reload(null, false);
            }, 'json');*@

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


            var formData = new FormData();
            formData.append("Building_tag", selectedBuilding_tag);
            formData.append("Main_system_tag", selectedMain_system_tag);
            formData.append("Sub_system_tag", selectedSub_system_tag);
            formData.append("Floor_tag", selectedFloor_tag);
            formData.append("SelectedDevicesFile", blob);

            $.ajax({
                type: "POST",
                url: url,
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function (rel) {
                    $("#save-device-add-btn").html('確定').attr("disabled", false);
                    if (rel.code != "0000") {
                        toast_error(rel.msg);
                        return;
                    }

                    toast_ok(rel.msg);
                    $("#device-info-add-modal").modal('hide');

                    deviceInfoTable.ajax.reload();
                    deviceKindTable.ajax.reload(null, false);
                },
                fail: function (jqXHR, textStatus, errorThrown) {
                    $("#save-device-add-btn").html('確定').attr("disabled", false);
                }
            });
        }
        //#endregion

        //#region 設備基本資料表單驗證
        var DeviceInfoValidate = $("#device-info-edit-form").validate({
            rules: {
                device_name_modal: {
                    // required: true,
                    maxlength: 50,
                    filterspace: true
                },
                device_ip_modal: {
                    regex: /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/
                },
                device_port_modal: {
                    number: true
                }
            },
            messages: {
                device_ip_modal: {
                    regex: "請輸入正確的設備IP"
                }
            }
        });
        //#endregion



        //#region 設備儲存(透過修改按鈕)
        function SaveDeviceInfoEdit() {
            if ($("#device-info-edit-form").valid()) {

                var select_disasters = $("input[name='selectDisaster[]']:checked").map(function () {
                    return $(this).val();
                }).get();

                var url = "/DeviceManage/SaveDeviceInfoEdit";
                var send_data = {
                    Device_guid: selected_device_guid,
                    Full_name: $("#device_name_modal").val(),
                    Device_coordinate_x: $("#device_coordinate_x_modal").val(),
                    Device_coordinate_y: $("#device_coordinate_y_modal").val(),
                    Device_disasters: select_disasters,
                    Device_ip: $("#device_ip_modal").val(),
                    Device_port: $("#device_port_modal").val(),
                }

                $.post(url, send_data, 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);
                        deviceInfoTable.ajax.reload(null, false);
                        $("#device-info-edit-modal").modal('hide');
                        return;
                    }
                }, 'json');
            }
        }
        //#endregion

        //#region 設備子節點表單驗證
        var DeviceNodeValidate = $("#device-node-form").validate({
            rules: {
                device_node_name_modal: {
                    required: true,
                    maxlength: 50,
                    filterspace: true
                },
            }
        });
        //#endregion

        //#region 設備子節點儲存
        function SaveDeviceNode() {
            if ($("#device-node-form").valid()) {

                var url = "/DeviceManage/SaveDeviceNode";
                var send_data = {
                    Device_guid: selected_device_guid,
                    Device_node_guid: selected_device_node_guid,
                    Full_name: $("#device_node_name_modal").val(),
                    Device_node_coordinate_x: $("#device_node_coordinate_x_modal").val(),
                    Device_node_coordinate_y: $("#device_node_coordinate_y_modal").val(),
                }

                $.post(url, send_data, 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);
                        deviceInfoTable.ajax.reload(null, false);

                        @*Object.keys(selected_device_parents_collapses).forEach(key => {
                            var tr = selected_device_parents_collapses[key];
                            var row = deviceInfoTable.row(tr);

                            if (row.child.isShown()) {
                                // This row is already open - close it
                                row.child.hide();
                                tr.removeClass('shown');
                                tr.find("td").first().html(`<i class="fal fa-plus"></i>`);
                            }
                            else {
                                // Open this row
                                console.log(row.data());
                                row.child(DeviceNodeFormat(row.data().device_nodes)).show();
                                tr.addClass('shown');
                                tr.find("td").first().html(`<i class="fal fa-minus"></i>`);
                            }
                        });*@

                        $("#device-node-modal").modal("hide");
                        return;
                    }
                }, 'json');
            }
        }
        //#endregion

        //#region 設備種類表單驗證
        var DeviceKindValidate = $("#device-kind-form").validate({
            rules: {
                device_image_modal: {
                    accept: "image/*"
                },
                device_normal_text_modal: {
                    // required: true,
                    maxlength: 7,
                    filterspace: true
                },
                device_normal_color_modal: {
                    // required: true,
                    maxlength: 7,
                    filterspace: true
                },
                device_close_color_modal: {
                    // required: true,
                    maxlength: 7,
                    filterspace: true
                },
                device_error_color_modal: {
                    // required: true,
                    maxlength: 7,
                    filterspace: true
                },
            }
        });
        //#endregion

        //#region 設備種類儲存
        function SaveDeviceKind() {
            if ($("#device_normal_point_name_modal").val() != ""
                && $("#device_normal_point_name_modal option:selected").text() != "ER"
                && $("#device_close_point_name_modal").val() != ""
                && $("#device_close_point_name_modal option:selected").text() != "ER"
                && $("#device_normal_point_name_modal").val() != $("#device_close_point_name_modal").val()) {
                toast_warning("點位名稱設定需相同");
                return;
            }

            if ($("#device_normal_point_value_modal").val() == $("#device_close_point_value_modal").val()) {
                toast_warning("點位值設定重複，請修改");
                return;
            }

            if ($("#device-kind-form").valid()) {

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


                var url = "/DeviceManage/SaveDeviceKind";

                var formData = new FormData();

                formData.append("Device_kind_guid", selected_device_kind_guid);
                formData.append("Device_building_tag", selected_device_building_tag);
                formData.append("Device_system_tag", selected_device_system_tag);
                formData.append("Device_floor_tag", selected_device_floor_tag);
                formData.append("Device_name_tag", selected_device_name_tag);

                formData.append("Device_normal_text", $("#device_normal_text_modal").val());
                if ($("#device_normal_point_name_modal").val() != null && $("#device_normal_point_name_modal").val() != "") {
                    formData.append("Device_normal_point_guid", $("#device_normal_point_name_modal").val());

                    if ($("#device_normal_point_col_modal").val() != null && $("#device_normal_point_col_modal").val() != "") {
                        formData.append("Device_normal_point_col", $("#device_normal_point_col_modal").val());
                    }
                    if ($("#device_normal_point_value_modal").val() != null && $("#device_normal_point_value_modal").val() !="") {
                        formData.append("Device_normal_point_value", $("#device_normal_point_value_modal").val());
                    }
                }

                formData.append("Device_normal_color", $("#device_normal_color_modal").val());
                formData.append("Device_normal_flashing", $("#device_normal_flashing_modal:checked").val());

                formData.append("Device_close_text", $("#device_close_text_modal").val());
                if ($("#device_close_point_name_modal").val() != null && $("#device_close_point_name_modal").val() != "") {
                    formData.append("Device_close_point_guid", $("#device_close_point_name_modal").val());
                    if ($("#device_close_point_col_modal").val() != null && $("#device_close_point_col_modal").val() != "") {
                        formData.append("Device_close_point_col", $("#device_close_point_col_modal").val());
                    }
                    if ($("#device_close_point_value_modal").val() != null && $("#device_close_point_value_modal").val() != "") {
                        formData.append("Device_close_point_value", $("#device_close_point_value_modal").val());
                    }
                }
                formData.append("Device_close_color", $("#device_close_color_modal").val());
                formData.append("Device_close_flashing", $("#device_close_flashing_modal:checked").val());

                formData.append("Device_error_text", $("#device_error_text_modal").val());
                if ($("#device_error_point_name_modal").val() != null && $("#device_error_point_name_modal").val() != "") {
                    formData.append("Device_error_point_guid", $("#device_error_point_name_modal").val());
                    if ($("#device_error_point_col_modal").val() != null && $("#device_error_point_col_modal").val() != "") {
                        formData.append("Device_error_point_col", $("#device_error_point_col_modal").val());
                    }
                    if ($("#device_error_point_value_modal").val() != null && $("#device_error_point_value_modal").val() != "") {
                        formData.append("Device_error_point_value", $("#device_error_point_value_modal").val());
                    }
                }
                formData.append("Device_error_color", $("#device_error_color_modal").val());
                formData.append("Device_error_flashing", $("#device_error_flashing_modal:checked").val());
                formData.append("Device_error_independent", $("#device_error_independent_modal:checked").val());

                @*formData.append("Device_close_color", $("#device_close_color_modal").val());
                formData.append("Device_error_color", $("#device_error_color_modal").val());
                formData.append("Device_flashing", $("#device_normal_flashing_modal:checked").val());*@

                imgs = $('#device_image_modal')[0].files
                if (imgs.length > 0) {

                    var file_names = imgs[0].name.split(".")

                    formData.append("Device_image_file", imgs[0])
                    formData.append("InitDeviceName", imgs[0].name);
                }

                $.ajax({
                    type: "POST",
                    url: url,
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (rel) {
                        $("#save-device-kind-btn").html('確定').attr("disabled", false);
                        if (rel.code != "0000") {
                            if (rel.code == "9999") {
                                toast_error(rel.msg);
                            }
                            else {
                                toast_warning(rel.msg);
                            }
                            return;
                        }
                        else {
                            toast_ok(rel.msg);
                            deviceKindTable.ajax.reload(null, false);
                            $("#device-kind-modal").modal('hide');
                            return;
                        }
                    },
                    fail: function (jqXHR, textStatus, errorThrown) {
                        $("#save-device-kind-btn").html('確定').attr("disabled", false);
                    }
                });
            }
        }
        //#endregion

        //#region 設備Master表單驗證
        var DeviceMasterValidate = $("#device-master-form").validate({
            rules: {
                device_master_icon_modal: {
                    accept: "image/*"
                },
                device_master_full_name_modal: {
                    // required: true,
                    filterspace: true
                }
            }
        });
        //#endregion

        //#region 設備Master儲存
        function SaveDeviceMaster() {

            if ($("#device-master-form").valid()) {

                var url = "/DeviceManage/SaveDeviceMaster";

                var formData = new FormData();

                formData.append("Device_master_guid", selected_device_master_guid);
                formData.append("Device_building_tag", selected_device_building_tag);
                formData.append("Device_name_tag", selected_device_name_tag);
                formData.append("Device_master_full_name", $("#device_master_full_name_modal").val());


                imgs = $('#device_master_icon_modal')[0].files
                if (imgs.length > 0) {
                    formData.append("Device_master_icon_file", imgs[0])
                }

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

                $.ajax({
                    type: "POST",
                    url: url,
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (rel) {
                        $("#save-device-master-btn").html('確定').attr("disabled", false);
                        if (rel.code != "0000") {
                            if (rel.code == "9999") {
                                toast_error(rel.msg);
                            }
                            else {
                                toast_warning(rel.msg);
                            }
                            return;
                        }
                        else {
                            toast_ok(rel.msg);
                            deviceMasterTable.ajax.reload(null, false);
                            $("#device-master-edit-modal").modal('hide');
                            return;
                        }
                    },
                    fail: function (jqXHR, textStatus, errorThrown) {
                        $("#save-device-master-btn").html('確定').attr("disabled", false);
                    }
                });
            }
        }
        //#endregion

    </script>
}