layui.define(['layer', 'carousel'], function (exports) {
    // 引入 jQuery 模块
    var $ = layui.jquery;
    // 引入 layer 模块
    var layer = layui.layer;
    // 引入 carousel 模块
    var carousel = layui.carousel;

    // 添加步骤条dom节点
    var renderDom = function (elem, stepItems, postion) {
        // 初始化步骤条的 HTML 字符串
        var stepDiv = '<div class="lay-step">';
        // 遍历步骤项数组，生成每个步骤项的 HTML
        for (var i = 0; i < stepItems.length; i++) {
            // 为每个步骤项添加一个包含类名 "step-item" 的 div 标签
            stepDiv += '<div class="step-item">';
            // 线
            // 检查当前索引是否小于步骤项数组的最后一个索引
            if (i < (stepItems.length - 1)) {
                // 如果当前索引小于目标位置
                if (i < postion) {
                    // 添加已完成的步骤项尾部HTML代码
                    stepDiv += '<div class="step-item-tail"><i class="step-item-tail-done"></i></div>';
                } else {
                    // 添加未完成的步骤项尾部HTML代码
                    stepDiv += '<div class="step-item-tail"><i class=""></i></div>';
                }
            }

            // 数字
            // 获取当前步骤的编号
            var number = stepItems[i].number;
            
            // 如果当前步骤没有编号，则使用默认编号（步骤索引加1）
            if (!number) {
                number = i + 1;
            }
            
            // 根据当前步骤的位置生成相应的HTML代码
            if (i == postion) {
                // 如果当前步骤是活动步骤，添加活动状态的样式
                stepDiv += '<div class="step-item-head step-item-head-active"><i class="layui-icon">' + number + '</i></div>';
            } else if (i < postion) {
                // 如果当前步骤在活动步骤之前，添加已完成状态的样式
                stepDiv += '<div class="step-item-head"><i class="layui-icon layui-icon-ok"></i></div>';
            } else {
                // 如果当前步骤在活动步骤之后，添加未完成状态的样式
                stepDiv += '<div class="step-item-head "><i class="layui-icon">' + number + '</i></div>';
            }

        // 获取当前步骤的标题和描述
        var title = stepItems[i].title;
        var desc = stepItems[i].desc;
        
        // 如果标题或描述存在，则创建包含标题和描述的HTML结构
        if (title || desc) {
            stepDiv += '<div class="step-item-main">';
            
            // 如果标题存在，添加标题的HTML结构
            if (title) {
                stepDiv += '<div class="step-item-main-title">' + title + '</div>';
            }
            
            // 如果描述存在，添加描述的HTML结构
            if (desc) {
                stepDiv += '<div class="step-item-main-desc">' + desc + '</div>';
            }
            
            stepDiv += '</div>';
        }
        
        // 关闭当前步骤的div标签
        stepDiv += '</div>';
    }
    
    // 关闭所有步骤的容器div标签
    stepDiv += '</div>';

    // 将生成的HTML插入到指定的元素中
    $(elem).prepend(stepDiv);

    // 计算每一个条目的宽度，使其平均分布
    var bfb = 100 / stepItems.length;
    $('.step-item').css('width', bfb + '%');
};

    var step = {
            // 渲染步骤条
            render: function (param) {
                param.indicator = 'none';  // 不显示指示器
                param.arrow = 'always';  // 始终显示箭头
                param.autoplay = false;  // 关闭自动播放
                if (!param.stepWidth) {
                    param.stepWidth = '400px';  // 如果未设置步骤条宽度，则默认为400px
                }
    
                // 渲染轮播图
                carousel.render(param);
    
                // 渲染步骤条
                var stepItems = param.stepItems;
                renderDom(param.elem, stepItems, 0);  // 初始渲染步骤条DOM元素
                $('.lay-step').css('width', param.stepWidth);  // 设置步骤条的宽度
    
                //监听轮播切换事件
                carousel.on('change(' + param.filter + ')', function (obj) {
                    $(param.elem).find('.lay-step').remove();  // 移除旧的步骤条DOM元素
                    renderDom(param.elem, stepItems, obj.index);  // 根据当前索引重新渲染步骤条DOM元素
                    $('.lay-step').css('width', param.stepWidth);  // 设置步骤条的宽度
                });

    // 隐藏左右箭头按钮
            $(param.elem).find('.layui-carousel-arrow').css('display', 'none');

            // 去掉轮播图的背景颜色
            $(param.elem).css('background-color', 'transparent');
        },
        // 下一步
        next: function (elem) {
            // 触发点击事件，使轮播图切换到下一张
            $(elem).find('.layui-carousel-arrow[lay-type=add]').trigger('click');
        },
        // 上一步
        pre: function (elem) {
            // 触发点击事件，使轮播图切换到上一张
            $(elem).find('.layui-carousel-arrow[lay-type=sub]').trigger('click');
        }
    };

    // 加载外部CSS文件
    layui.link(layui.cache.base + 'step-lay/step.css');

    // 导出模块
    exports('step', step);
});