$(document).ready(function () {
    loadDataTable();

    $('#bar_area').change(function () {
        $('#myTable').DataTable().ajax.reload();
    });

    function loadDataTable() {
        var dataTables = {
            init: function init() {

                this.bindUIActions();
            },
            bindUIActions: function bindUIActions() {

                // event handlers
                this.table = this.handleDataTables();

                
                // add buttons
                this.table.buttons().container().appendTo('#dt-buttons').unwrap();
            },
            handleDataTables: function handleDataTables() {
                //$('#myTable').append("<tfoot><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tfoot>");
                return $('#myTable').DataTable({
                    dom: '<\'text-muted\'Bif>\n        <\'table-responsive\'trl>\n        <\'mt-4\'p>',
                    lengthChange: false,
                    lengthMenu: [[25, 50, 100, 350, -1], [25, 50, 100, 350, "All"]],
                    pageLength: 350,
                    paging: false,
                    buttons: [
                        //{
                        //    text: '休假設定',
                        //    action: function (e, dt, node, config) {
                        //        vacationBtnFun();

                        //    }
                        //},
                        //{
                        //    text: '新增公司行號',
                        //    action: function (e, dt, node, config) {
                        //        addBtnFun();

                        //    }
                        //}
                        'excel', 'pdf'
                    ],
                    language: {
                        paginate: {
                            previous: '<i class="fa fa-lg fa-angle-left"></i>',
                            next: '<i class="fa fa-lg fa-angle-right"></i>'
                        },
                        buttons: {
                            copyTitle: 'Data copied',
                            copyKeys: 'Use your keyboard or menu to select the copy command'
                        }
                    },
                    autoWidth: false,
                    ajax: {
                        url: '/BackEndApi/rank',
                        type: 'POST',
                        data: function (d) {

                            Object.assign(d, {
                                bar_area: $('#bar_area').val()
                            });

                            return d;
                        },
                        dataSrc: 'data'
                    },
                    rowId: 'bar_uid',
                    deferRender: true,
                    initComplete: function () {
                        $('#myTable').on('click', 'a', function () {
                            buttonClick(this);
                        });

                        $('#myTable').on('click', 'input[name="selectedRow[]"]', function () {
                            checkboxClick(this);
                        });
                    },
                    info: false,
                    search: "搜尋:",
                    searching: false,
                    columns: [{ data: 'num', className: 'align-middle text-right', orderable: false, searchable: false }, { data: 'bar_name', className: 'align-middle text-left', orderable: false, searchable: false }, { data: 'num', className: 'align-middle text-right', orderable: false, searchable: false }, { data: 'uni_num', className: 'align-middle text-right', orderable: false, searchable: false }],
                    columnDefs: [
                        {
                            targets: 0,
                            data: 'bar_name',
                            render: function (data, type, row, meta) {
                                return meta.row + meta.settings._iDisplayStart + 1;
                            }
                        }
                    ]
                    

                });
            },
            handleSearchRecords: function handleSearchRecords() {
                var self = this;

                $('#table-search, #filterBy').on('keyup change focus', function (e) {
                    var filterBy = $('#filterBy').val();
                    var hasFilter = filterBy !== '';
                    var value = $('#table-search').val();

                    self.table.search('').columns().search('').draw();

                    if (hasFilter) {
                        self.table.columns(filterBy).search(value).draw();
                    } else {
                        self.table.search(value).draw();
                    }

                });
            }
        }

        dataTables.init();
    }
});