(function () {
    let grid = null;
    let currentComponent = null;

    // 生成唯一id
    var generateUniqueId = function () {
        const timestamp = Date.now().toString(36);
        const randomNum = Math.random().toString(36).substring(2);
        return timestamp + randomNum;
    };

    /** 初始化 */
    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,
                type: 'banner',
                name: '我是轮播图',
                fontSize: 14,
                color: '#fff',
                background: 'red',
                detail: '',
                icon: 'fa-link',
                link: '',
            },
            { 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) => {
            handleAddComponent(item);
        });

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

    // 处理添加组件之后的操作
    var handleAddComponent = (component) => {
        component.id = `${component.type}_${generateUniqueId()}`;
        setComponentView(component);
        component.el.addEventListener('click', () => {
            console.log('点击组件', component);
            if (currentComponent && currentComponent.id === component.id) {
                return;
            }
            currentComponent = component;
            // 右侧显示组件属性列表
            if (!$('#props-panel').find('form').hasClass('show')) {
                $('#props-panel').find('.wait-box').addClass('hidden');
                $('#props-panel').find('form').attr('class', 'show');
            }
            // 将当前选中组件的属性显示在右侧列表中
            setCurrentComponentProps(currentComponent);
        });
    };

    //将当前选中组件的属性显示在右侧列表中
    var setCurrentComponentProps = function (component) {
        const form = $('#props-panel').find('form');
        form.find('#name').val(component.name);
        form.find('#background').val(component.background);
        form.find('#fontSize').val(component.fontSize);
        form.find('#color').val(component.color);
        form.find('#icon').val(component.icon);
        form.find('#detail').val(component.detail);
        form.find('#link').val(component.link);
    };

    // 设置当前传递组件的视图展示
    var setComponentView = function (component) {
        const el = $(component.el);
        // 设置名称
        if (component.name) {
            el.find('span').text(component.name);
        }
        // 设置背景颜色
        if (component.background) {
            el.find('.grid-stack-item-content').css('background', component.background);
        }
        // 设置文字大小和颜色
        if (component.fontSize) {
            el.find('span').css('font-size', component.fontSize + 'px');
        }
        if (component.color) {
            el.find('span').css('color', component.color);
        }
        // 设置图标
        if (component.icon) {
            el.find('i').attr('class', `fas ${component.icon}`);
        }
    };

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

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