(function () {
    var grid = null;

    /** 初始化 */
    var init = function () {
        grid = GridStack.init({
            // 一行高度
            cellHeight: 80,
            // 间距
            margin: 5,
            minRow: 8,
            acceptWidgets: true,
            float: true,
        });
        GridStack.setupDragIn('#components-panel > .component-item', undefined, [
            { w: 12, h: 2 },
            { w: 2, h: 1 },
        ]);
        console.log(grid, 'grid实例');

        var initData = [
            // {
            //     x: 0,
            //     y: 0,
            //     w: 2,
            //     h: 2,
            //     content: 'item 1',
            //     data: {
            //         name: 'item 1',
            //     },
            // },
            // {
            //     x: 2,
            //     y: 3,
            //     w: 3,
            //     content: 'item 2',
            //     data: {
            //         name: 'item 2',
            //     },
            // },
        ];
        // grid.load(initData);

        grid.engine.nodes.forEach((item) => {
            item.el.addEventListener('click', () => {
                console.log(item);
            });
        });

        grid.on('added', function (_event, itemArray) {
            console.log(itemArray, '这里触发了添加了added事件');
            itemArray.forEach((item) => {
                item.el.addEventListener('click', () => {
                    console.log(item);
                });
            });
        });
    };

    $('.global-save-button').click(function () {
        grid.addWidget({ w: 2, content: 'item 1' });
        console.log(grid.save());
        console.log(grid);
    });

    /** 执行方法 */
    $(function () {
        init();
    });
})();