layui.define(['layer', 'carousel'], function (exports) {
    var $ = layui.jquery;
    var layer = layui.layer;
    var carousel = layui.carousel;

    // 添加步骤条dom节点
    var renderDom = function (elem, stepItems, postion) {
        var stepDiv = '<div class="lay-step" style="display:none">';
        for (var i = 0; i < stepItems.length; i++) {
            stepDiv += '<div class="step-item">';
            // 线
            if (i < (stepItems.length - 1)) {
                if (i < postion) {
                    stepDiv += '<div class="step-item-tail"><i class="step-item-tail-done"></i></div>';
                } else {
                    stepDiv += '<div class="step-item-tail"><i class=""></i></div>';
                }
            }

            // 数字
            var number = stepItems[i].number;
            if (!number) {
                number = i + 1;
            }
            if (i == postion) {
                stepDiv += '<div class="step-item-head step-item-head-active step' + number+'"><i class="layui-icon">' + number + '</i></div>';
            } else if (i < postion) {
                stepDiv += '<div class="step-item-head step' + number +'"><i class="layui-icon layui-icon-ok"></i></div>';
            } else {
                stepDiv += '<div class="step-item-head  step' + number +'"><i class="layui-icon">' + number + '</i></div>';
            }

            // 标题和描述
            var title = stepItems[i].title;
            var desc = stepItems[i].desc;
            if (title || desc) {
                stepDiv += '<div class="step-item-main hidden-xs">';
                if (title) {
                    stepDiv += '<div class="step-item-main-title step' + number + '" style="cursor: pointer;" >' + title + '</div>';
                }
                if (desc) {
                    stepDiv += '<div class="step-item-main-desc">' + desc + '</div>';
                }
                stepDiv += '</div>';
            }
            stepDiv += '</div>';
        }
        stepDiv += '</div>';

        $(elem).prepend(stepDiv);
        //各节点自动跳转
        layui.$('.step1').on('click', function () {
            step.setpindex('#stepForm', 1);
            layui.$('.lay-step').css("display", "none");
            layui.$('.layui-card-body').css("padding-top", "20px");
        });
        layui.$('.step2').on('click', function () {
            step.setpindex('#stepForm', 2);
            layui.$('.lay-step').css("display", "none");
            layui.$('.layui-card-body').css("padding-top", "0px");
        });
        layui.$('.step3').on('click', function () {
            step.setpindex('#stepForm', 3);
            layui.$('.lay-step').css("display", "none");
            layui.$('.layui-card-body').css("padding-top", "20px");
        });
        layui.$('.step4').on('click', function () {
            step.setpindex('#stepForm', 4);
            layui.$('.lay-step').css("display", "none");
            layui.$('.layui-card-body').css("padding-top", "20px");
        });
        layui.$('.step5').on('click', function () {
            step.setpindex('#stepForm', 5);
            layui.$('.lay-step').css("display", "none");
            layui.$('.layui-card-body').css("padding-top", "20px");
        });
        layui.$('.step6').on('click', function () {
            step.setpindex('#stepForm', 6);
            layui.$('.lay-step').css("display", "none");
            layui.$('.layui-card-body').css("padding-top", "20px");
        });
        // 计算每一个条目的宽度
        var bfb = 100 / stepItems.length;
        $('.step-item').css('width', bfb + '%');
    };

    var step = {
        // 渲染步骤条
        render: function (param) {
            param.indicator = 'none';  // 不显示指示器inside（容器内部）   outside（容器外部）      none（不显示）
            param.arrow = 'always';  // 始终显示箭头
            param.autoplay = false;  // 关闭自动播放
            if (!param.stepWidth) {
                param.stepWidth = '95%';
            }

            // 渲染轮播图
            carousel.render(param);

            // 渲染步骤条
            var stepItems = param.stepItems;
            renderDom(param.elem, stepItems, 0);
            $('.lay-step').css('width', param.stepWidth);

            //监听轮播切换事件
            carousel.on('change(' + param.filter + ')', function (obj) {
                $(param.elem).find('.lay-step').remove();
                renderDom(param.elem, stepItems, obj.index);
                $('.lay-step').css('width', param.stepWidth);
            });

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

            // 去掉轮播图的背景颜色
            $(param.elem).css('background-color', 'transparent');
        },
        // 下一步
        next: function (elem,indexok) {
            $(elem).find('.layui-carousel-arrow[lay-type=add]').trigger('click');
            if (indexok == 2) {
                layui.$('.lay-step').css("display", "none");
                layui.$('.layui-card-body').css("padding-top", "0px");
            }
        },
        // 上一步
        pre: function (elem,indexok) {
            $(elem).find('.layui-carousel-arrow[lay-type=sub]').trigger('click');
            if (indexok == 2) {
                layui.$('.lay-step').css("display", "none");
                layui.$('.layui-card-body').css("padding-top", "0px");
            }
        }
        ,
        //跳转到某一步
        setpindex: function (elem, indexok) {
            $(elem).find('.layui-carousel-ind li:nth-child(' + indexok + ')').trigger('click');
            layui.$('.lay-step').css("display", "none");
        }
    };
    layui.link('/webconfig/step-lay/step.css');
    exports('step', step);
});
