var SelectaDisaster;
var SelectaBuild;
var SelectaType = 2;//2:全選 1:演習 0:正式
var datepicker;
var EmergencyEventTable;
var EmergencyItemTable;
var SelectEvent;
$(function () {
    //#region Date-Picker
    datepicker = $('#date-range').daterangepicker({
        autoUpdateInput: false,
        locale: {
            format: 'YYYY/MM/DD',
            cancelLabel: '取消',
            applyLabel:'確定'
        },

        opens: 'left'
    }, function (start, end, label) {

    });

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

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


    //#endregion
    var today = new Date();
    var dateLimit = new Date(new Date().setDate(today.getDate() - 30));
    var today_format = today.toISOString().slice(0, 10).replace(/-/g, "/");
    var dateLimit_format = dateLimit.toISOString().slice(0, 10).replace(/-/g, "/");
    datepicker.data('daterangepicker').setStartDate(dateLimit_format);
    datepicker.data('daterangepicker').setEndDate(today_format);

    $('#date-range').val(dateLimit_format + ' - ' + today_format);

    // EmergencyEventTable = $("#emergency_event_table").DataTable({
    //     "order": [[5, "desc"]],
    //     "columns": [
    //         {
    //             "data": "emergency_event_guid",
    //             "render": function (data, type, row, meta) {
    //                 return meta.row + 1;
    //             },
    //         },
    //         {
    //             "data": "building_name"
    //         },
    //         {
    //             "data": "disaster_name"
    //         },
    //         {
    //             "data": "device_name"
    //         },
    //         {
    //             "data": "type"
    //         },
    //         {
    //             "data": "created_at"
    //         }
    //     ],
    //     'createdRow': function (row, data, dataIndex) {
    //         $(row).attr('guid', data.emergency_event_guid);
    //         $(row).attr('type', data.type);
    //         $(row).attr('device', data.device_name);
    //     },
    //     "ajax": {
    //         "url": "/EmergencyRecord/EmergencyRecordTable",
    //         "type": "POST",
    //         "data": function (d) {
    //             d.selectaDisaster = SelectaDisaster,
    //             d.selectaBuild = SelectaBuild,
    //             d.selectaType = SelectaType,
    //             d.dateranger = $('#date-range').val()
    //         },
    //         "dataSrc": function (rel) {
    //             if (rel.code == "9999") {
    //                 toast_error(rel.msg);
    //                 return;
    //             }
    //             data = rel.data.data;
    //             if (data == null || data.length == 0) {

    //                 this.data = [];
    //             }

    //             $.each(this.data,function(index, val) {
    //                 if (val.type == 0) {
    //                     val.type = "正式";
    //                 } else {
    //                     val.type = "演習";
    //                 }
    //             })
    //             return data;
    //         }
    //     }
    // });

    // EmergencyItemTable = $('#emergency_item_table').DataTable({
    //     "order": [[4, "desc"]],
    //     "columns": [
    //         {
    //             "data": "big_setting"
    //         },
    //         {
    //             "data": "step_setting"
    //         },
    //         {
    //             "data": "finished"
    //         },
    //         {
    //             "data": "reason"
    //         },
    //         {
    //             "data": "updated_at"
    //         }
    //     ],
    //     'createdRow': function (row, data, dataIndex) {
    //         $(row).attr('guid', data.emergency_item_guid);
    //     },
    //     "ajax": {
    //         "url": "/EmergencyRecord/EmergencyItemTable",
    //         "type": "POST",
    //         "data": function (d) {
    //             d.event_guid = SelectEvent
    //         },
    //         "dataSrc": function (rel) {
    //             if (rel.code == "9999") {
    //                 toast_error(rel.msg);
    //                 return;
    //             }
    //             data = rel.data.data;
    //             if (data == null || data.length == 0) {

    //                 this.data = [];
    //             }
    //             $.each(this.data, function (index, val) {
    //                 if (val.finished == 0) {
    //                     val.finished = "未執行";
    //                 }
    //                 else if (val.finished == 1)
    //                 {
    //                     val.type = "完成";
    //                 }
    //                 else
    //                 {
    //                     val.type = "不執行";
    //                 }
    //             })
    //             return data;
    //         }
    //     }
    // });

    GetDisasterList();
    GetBuild();
})

function EmergencyEventTable() {
    $('#emergency_event_tablediv').empty();
    var html = `<table id="emergency_event_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>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>`;
    $('#emergency_event_tablediv').append(html);



    var url = baseApiUrl + "api/EmergencyRecord/EmergencyRecordTable";
    var send_data = {
        selectaDisaster : SelectaDisaster,
        selectaBuild : SelectaBuild,
        selectaType : SelectaType,
        dateranger : $('#date-range').val()
    };
    $.ajax({
        method: "post",
        url: url,
        data: send_data,
        async: false,
        dataType: 'json',
        success: function (rel) {
            if (rel.code == "9999") {
                console.log(rel.msg);
                return;
            }
            var data = rel.data;
            if (data == null || data.length == 0) {
                data = [];
            }

            $.each(data,function(index, val) {
                if (val.type == 0) {
                    val.type = "正式";
                } else {
                    val.type = "演習";
                }
            })
            console.log(data);

            //var newda = new Array(0);
            var html = '';
            data.forEach(function(element,i){
                html += '<tr guid="'+element.emergency_event_guid+'" type="'+element.type+'" device="'+element.device_name+'">';
                html += '<td>'+(i+1)+'</td>';
                html += '<td>'+element.building_name+'</td>';
                html += '<td>'+element.disaster_name+'</td>';
                if(element.device_name == null)
                {
                    html += '<td>'+""+'</td>';    
                }else
                {
                    html += '<td>'+element.device_name+'</td>';    
                }
                
                html += '<td>'+element.type+'</td>';
                html += '<td>'+element.created_at+'</td>';
                html += '</tr>'
                // var newoneda = new Array(0);
                // newoneda.push(element.groupingName);
                // newoneda.push(element.full_name);
                // newoneda.push(element.departmentName);
                // newoneda.push(element.phone);
                // newoneda.push(element.lineid);
                // newoneda.push(element.email);
                // newda.push(newoneda);
            })
            $('#emergency_event_table').find('tbody').append(html);
            var emergency_event_table = new simpleDatatables.DataTable('#emergency_event_table', {
                searchable: false,
                perPage: 10,
                columns: [{
                    select: 5,
                    sort: "desc",
                }],
                // data: {
                //     "data": newda
                // }
            });
            $('#emergency_event_tablediv').parent().parent().find('.dataTable-top').empty();
        },
        error: function (xhr, textStatus, thrownError) {
            alert(textStatus);
        }
    });
}

function EmergencyItemTable() {
    $('#emergency_item_tablediv').empty();
    var html = `<table id="emergency_item_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>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>`;
    $('#emergency_item_tablediv').append(html);

    var url = baseApiUrl + "api/EmergencyRecord/EmergencyItemTable";

    var send_data = {
        event_guid : SelectEvent
    };
    console.log(send_data);
    $.ajax({
        method: "post",
        url: url,
        data: send_data,
        async: false,
        dataType: 'json',
        success: function (rel) {
            if (rel.code == "9999") {
                toast_error(rel.msg);
                return;
            }
            var data = rel.data;
            if (data == null || data.length == 0) {

                data = [];
            }
            
            $.each(data, function (index, val) {
                if (val.finished == 0) {
                    val.finished = "未執行";
                }
                else if (val.finished == 1)
                {
                    val.finished = "完成";
                }
                else
                {
                    val.finished = "不執行";
                }

                if(val.reason == null)
                {
                    val.reason = "";
                }
                if (val.updated_at == "0001-01-01 00:00:00") {
                    val.updated_at = "";
                }
            })
            //console.log(data);

            var html = '';
            data.forEach(function(element,i){
                html += '<tr>';
                html += '<td>'+element.step_setting+'</td>';
                html += '<td>'+element.big_setting+'</td>';
                html += '<td>'+element.finished+'</td>';
                html += '<td>'+element.reason+'</td>';
                html += '<td>'+element.updated_at+'</td>';
                html += '</tr>'
            })
            $('#emergency_item_table').find('tbody').append(html);
            var emergency_event_table = new simpleDatatables.DataTable('#emergency_item_table', {
                searchable: false,
                perPage: 10,
                columns: [{
                    select: 4,
                    sort: "desc",
                }],
                // data: {
                //     "data": newda
                // }
            });
            $('#emergency_item_tablediv').parent().parent().find('.dataTable-top').empty();
        },
        error: function (xhr, textStatus, thrownError) {
            alert(textStatus);
        }
    });
    
}



//取得所有災難別
function GetDisasterList() {
    var url = baseApiUrl + "api/DisasterList";
    var send_data = {};
    $.ajax({
        method: "post",
        url: url,
        data: send_data,
        async: false,
        dataType: 'json',
        success: function (rel) {
            if (rel.code != "0000") {
                if (rel.code == "9999") {
                    toast_error(rel.msg);
                }
                return;
            }
            else {
                $('#Disasterlist').empty();
                var Disasterstr = "";
                $.each(rel.data, function (index, val) {
                    if (index == 0) {
                        Disasterstr += '<button type="button" class="btn btn-success waves-effect waves-themed" onclick = "SelectDisaster(' + val.value + ',this)"> ' + val.name + '</button>';
                    }
                    else {
                        Disasterstr += '<button type="button" class="btn btn-secondary waves-effect waves-themed" onclick = "SelectDisaster(' + val.value + ',this)">' + val.name + '</button>';
                    }
                });
                $('#Disasterlist').append(Disasterstr);
                $('#Disasterlist').find('.btn-success').trigger('click');
                return;
            }
        },
        error: function (xhr, textStatus, thrownError) {
            alert(textStatus);
        }
    });
}

//取得所有棟別
function GetBuild() {
    var url = baseApiUrl + "api/EmergencyRecord/BuildInfoList";
    var send_data = {};
    $.ajax({
        method: "post",
        url: url,
        data: send_data,
        async: false,
        dataType: 'json',
        success: function (rel) {
            if (rel.code != "0000") {
                if (rel.code == "9999") {
                    console.log(rel.msg);
                }
                return;
            }
            else {
                $('#buildlist').empty();
                var buildstr = "";
                //console.log(rel);
                $.each(rel.data, function (index, val) {
                    $('#build_menu_building_modal').append($("<option />").val(val.value).text(val.name));
                    if (index == 0) {
                        SelectBuild = val.value;
                        buildstr += '<button type="button" class="btn btn-success waves-effect waves-themed" onclick="SelectBulid(\'' + val.value + '\' ,this)">' + val.name + '</button>';
                    }
                    else {
                        buildstr += '<button type="button" class="btn btn-secondary waves-effect waves-themed" onclick="SelectBulid(\'' + val.value + '\',this)" >' + val.name + '</button>';
                    }
                });
                $('#buildlist').append(buildstr);
                $('#buildlist').find('.btn-success').trigger('click');
    
                //GetMainlistByBuild(SelectBuild);
                return;
            }
        },
        error: function (xhr, textStatus, thrownError) {
            alert(textStatus);
        }
    });
}

//選擇災難類別
function SelectDisaster(Disaster, e) {
    SelectaDisaster = Disaster;
    if ($("#Disasterlist").find('.btn').hasClass("btn-success")) {
        $("#Disasterlist").find('.btn').removeClass("btn-success").addClass("btn-secondary");
    }
    $(e).removeClass("btn-secondary").addClass("btn-success");
    reloadeventTable();
}

//選擇棟別
function SelectBulid(build, e) {
    SelectaBuild = build;
    if ($("#buildlist").find('.btn').hasClass("btn-success")) {
        $("#buildlist").find('.btn').removeClass("btn-success").addClass("btn-secondary");
    }
    $(e).removeClass("btn-secondary").addClass("btn-success");
    reloadeventTable();
}

//選擇類別(正式 or 演習)
function SelectType(type, e) {
    SelectaType = type
    if ($("#Typelist").find('.btn').hasClass("btn-success")) {
        $("#Typelist").find('.btn').removeClass("btn-success").addClass("btn-secondary");
    }
    $(e).removeClass("btn-secondary").addClass("btn-success");
    reloadeventTable();
}

//查詢近30天
function ChangeDate30() {
    var today = new Date();
    var dateLimit = new Date(new Date().setDate(today.getDate() - 30));

    var today_format = today.toISOString().slice(0, 10).replace(/-/g, "/");
    var dateLimit_format = dateLimit.toISOString().slice(0, 10).replace(/-/g, "/");

    datepicker.data('daterangepicker').setStartDate(dateLimit_format);
    datepicker.data('daterangepicker').setEndDate(today_format);

    $('#date-range').val(dateLimit_format + ' - ' + today_format);
    $('#date-range').trigger('change');
}

//改變日期
$('#date-range').on('change', function () {
    reloadeventTable();
});

//點選Event
$('#emergency_event_tablediv').on("click", "#emergency_event_table tbody>tr", function () {
    $(this).parents().find('tr').css('background-color', '#fff');
    $(this).css('background-color', '#67B4AC');
    SelectEvent = $(this).attr('guid');
    $('#emergencyitem').find('.card-title').html("事件明細" + "-" + $(this).attr('type') + "-" + $(this).attr('device'));
    EmergencyItemTable();
    $('#emergencyitem').show();
})

//重新執行EventTable
function reloadeventTable() {
    EmergencyEventTable(); 
    $('#emergencyitem').hide();
}