$(function () {
    'use strict';

    $('.js-basic-example').DataTable();

    //Exportable table
    $('.js-exportable').DataTable({
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    });

    /* Formatting function for row details - modify as you need */
    function format(d) {
        // `d` is the original data object for the row
        return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
            '<tr>' +
            '<td>Full name:</td>' +
            '<td>' + d.name + '</td>' +
            '</tr>' +
            '<tr>' +
            '<td>Extension number:</td>' +
            '<td>' + d.extn + '</td>' +
            '</tr>' +
            '<tr>' +
            '<td>Extra info:</td>' +
            '<td>And any further details here (images etc)...</td>' +
            '</tr>' +
            '</table>';
    }

    $(document).ready(function () {
        var table = $('#example').DataTable({
            "ajax": "assets/data/objects.txt",
            "columns": [
                {
                    "className": 'details-control',
                    "orderable": false,
                    "data": null,
                    "defaultContent": ''
                },
                {"data": "name"},
                {"data": "position"},
                {"data": "office"},
                {"data": "salary"}
            ],
            "order": [[1, 'asc']]
        });

        // Add event listener for opening and closing details
        $('#example tbody').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = table.row(tr);

            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            } else {
                // Open this row
                row.child(format(row.data())).show();
                tr.addClass('shown');
            }
        });
    });

    // Add row into table
    var addRowTable = {
        options: {
            addButton: "#addToTable",
            table: "#addrowExample",
            dialog: {}
        },
        initialize: function () {
            this.setVars().build().events()
        },
        setVars: function () {
            return this.$table = $(this.options.table), this.$addButton = $(this.options.addButton), this.dialog = {}, this.dialog.$wrapper = $(this.options.dialog.wrapper), this.dialog.$cancel = $(this.options.dialog.cancelButton), this.dialog.$confirm = $(this.options.dialog.confirmButton), this
        },
        build: function () {
            return this.datatable = this.$table.DataTable({
                language: {
                    "sProcessing": "处理中...",
                    "sLengthMenu": "显示 _MENU_ 项结果",
                    "sZeroRecords": "没有匹配结果",
                    "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                    "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                    "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                    "sInfoPostFix": "",
                    "sSearch": "搜索:",
                    "sUrl": "",
                    "sEmptyTable": "表中数据为空",
                    "sLoadingRecords": "载入中...",
                    "sInfoThousands": ",",
                    "oPaginate": {
                        "sFirst": "首页",
                        "sPrevious": "上页",
                        "sNext": "下页",
                        "sLast": "末页"
                    },
                    "oAria": {
                        "sSortAscending": ": 以升序排列此列",
                        "sSortDescending": ": 以降序排列此列"
                    }
                },
                ajax: {
                    "url": $("#PageContext").val() + "/backstage_tag/page",
                    "type": "POST",
                    dataFilter: function(data){
                        console.log("==========",data);
                        // return data;
                        var json = jQuery.parseJSON( data );
                        json.recordsTotal = json.total;
                        json.recordsFiltered = json.total;
                        // json.data = json.list;
                        //
                        // return JSON.stringify( json ); // return JSON string
                    }
                },
                columns: [
                    {"data": "name"},
                    {"data": "position"},
                    {"data": "office"},
                    {"data": null}//salary
                ],
                order: [[1, 'asc']],

                columnDefs: [{
                    //   指定第四列，从0开始，0表示第一列，1表示第二列……
                    targets: 3,
                    sClass: "actions",
                    bSortable: !1,
                    render: function (data, type, row, meta) {
                        return '<button class="btn btn-sm btn-icon on-editing m-r-5 button-save" data-toggle="tooltip" data-original-title="Save" hidden><i class="icon-drawer" aria-hidden="true"></i></button>' +
                            '<button class="btn btn-sm btn-icon on-editing button-discard" data-toggle="tooltip" data-original-title="Discard" hidden><i class="icon-close" aria-hidden="true"></i></button>' +
                            '<button class="btn btn-sm btn-icon on-default m-r-5 button-edit" data-toggle="tooltip" data-original-title="Edit"><i class="icon-pencil" aria-hidden="true"></i></button>' +
                            '<button class="btn btn-sm btn-icon on-default button-remove" data-toggle="tooltip" data-original-title="Remove"><i class="icon-trash" aria-hidden="true"></i></button>'
                    }
                }],
                // aoColumns: [null, null, null, {
                //     bSortable: !1
                // }],
            }), window.dt = this.datatable, this
        },
        events: function () {
            var object = this;
            return this.$table.on("click", "button.button-save", function (e) {
                e.preventDefault(), object.rowSave($(this).closest("tr"))
            }).on("click", "button.button-discard", function (e) {
                e.preventDefault(), object.rowCancel($(this).closest("tr"))
            }).on("click", "button.button-edit", function (e) {
                e.preventDefault(), object.rowEdit($(this).closest("tr"))
            }).on("click", "button.button-remove", function (e) {
                e.preventDefault();
                var $row = $(this).closest("tr");
                swal({
                    title: "Are you sure?",
                    text: "You will not be able to recover this imaginary file!",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#dc3545",
                    confirmButtonText: "Yes, delete it!",
                    closeOnConfirm: false
                }, function () {
                    object.rowRemove($row)
                    swal("Deleted!", "Your imaginary file has been deleted.", "success");
                });
            }), this.$addButton.on("click", function (e) {
                e.preventDefault(), object.rowAdd()
            }), this.dialog.$cancel.on("click", function (e) {
                e.preventDefault(), $.magnificPopup.close()
            }), this
        },
        rowAdd: function () {
            this.$addButton.attr({
                disabled: "disabled"
            });
            var actions, data, $row;
            actions =
                [
                    '<button class="btn btn-sm btn-icon btn-pure btn-default on-editing button-save" data-toggle="tooltip" data-original-title="Save" hidden><i class="icon-drawer" aria-hidden="true"></i></button>',
                    '<button class="btn btn-sm btn-icon btn-pure btn-default on-editing button-discard" data-toggle="tooltip" data-original-title="Discard" hidden><i class="icon-close" aria-hidden="true"></i></button>',
                    '<button class="btn btn-sm btn-icon btn-pure btn-default on-default button-edit" data-toggle="tooltip" data-original-title="Edit"><i class="icon-pencil" aria-hidden="true"></i></button>',
                    '<button class="btn btn-sm btn-icon btn-pure btn-default on-default button-remove" data-toggle="tooltip" data-original-title="Remove"><i class="icon-trash" aria-hidden="true"></i></button>'
                ].join(" "),
                data = this.datatable.row.add(["", "", "", actions]),
                ($row = this.datatable.row(data[0]).nodes().to$()).addClass("adding").find("td:last").addClass("actions"),
                this.rowEdit($row), this.datatable.order([0, "asc"]).draw()
        },
        rowCancel: function ($row) {
            var $actions, data;
            $row.hasClass("adding") ? this.rowRemove($row) : (($actions = $row.find("td.actions")).find(".button-discard").tooltip("hide"), $actions.get(0) && this.rowSetActionsDefault($row), data = this.datatable.row($row.get(0)).data(), this.datatable.row($row.get(0)).data(data), this.handleTooltip($row), this.datatable.draw())
        },
        rowEdit: function ($row) {

            var data, object = this;
            data = this.datatable.row($row.get(0)).data(), $row.children("td").each(function (i) {
                var $this = $(this);
                console.log("123===",data,i);
                $this.hasClass("actions") ?
                    object.rowSetActionsEditing($row) :
                    $this.html('<input type="text" class="form-control input-block" value="' + data[i] + '"/>')
            })
        },
        rowSave: function ($row) {
            var $actions, object = this,
                values = [];
            $row.hasClass("adding") && (this.$addButton.removeAttr("disabled"), $row.removeClass("adding")), values = $row.find("td").map(function () {
                var $this = $(this);
                return $this.hasClass("actions") ? (object.rowSetActionsDefault($row), object.datatable.cell(this).data()) : $.trim($this.find("input").val())
            }), ($actions = $row.find("td.actions")).find(".button-save").tooltip("hide"), $actions.get(0) && this.rowSetActionsDefault($row), this.datatable.row($row.get(0)).data(values), this.handleTooltip($row), this.datatable.draw()
        },
        rowRemove: function ($row) {
            $row.hasClass("adding") && this.$addButton.removeAttr("disabled"), this.datatable.row($row.get(0)).remove().draw()
        },
        rowSetActionsEditing: function ($row) {
            $row.find(".on-editing").removeAttr("hidden"), $row.find(".on-default").attr("hidden", !0)
        },
        rowSetActionsDefault: function ($row) {
            $row.find(".on-editing").attr("hidden", !0), $row.find(".on-default").removeAttr("hidden")
        },
        handleTooltip: function ($row) {
            $row.find('[data-toggle="tooltip"]').tooltip()
        }
    };

    $(function () {
        addRowTable.initialize()
    })
});