layui.define(["element","laytpl" ,"jquery"], function (exports) { // 定义一个模块，依赖element、laytpl和jquery
    var element = layui.element, // 获取layui的element模块
        $ = layui.$, // 获取layui的jQuery模块
        laytpl = layui.laytpl, // 获取layui的模板引擎模块
        layer = layui.layer; // 获取layui的弹出层模块

    var miniMenu = { // 定义miniMenu对象


            render: function (options) { // 定义渲染函数
                options.menuList = options.menuList || []; // 如果未传入menuList，则默认为空数组
                options.multiModule = options.multiModule || false; // 如果未传入multiModule，则默认为false
                options.menuChildOpen = options.menuChildOpen || false; // 如果未传入menuChildOpen，则默认为false
                if (options.multiModule) { // 如果开启多模块
                    miniMenu.renderMultiModule(options.menuList, options.menuChildOpen); // 调用多模块渲染函数
                } else { // 否则
                    miniMenu.renderSingleModule(options.menuList, options.menuChildOpen); // 调用单模块渲染函数
                }
                miniMenu.listen(); // 监听事件
            },


            renderSingleModule: function (menuList, menuChildOpen) { // 定义单模块渲染函数
                menuList = menuList || []; // 如果未传入menuList，则默认为空数组
                var leftMenuHtml = '', // 初始化左侧菜单HTML字符串
                    childOpenClass = '', // 初始化子菜单打开类名
                    leftMenuCheckDefault = 'layui-this'; // 设置默认选中样式类名
                var me = this ; // 保存当前上下文
                if (menuChildOpen) childOpenClass = ' layui-nav-itemed'; // 如果需要展开子菜单，添加对应的类名
                leftMenuHtml = this.renderLeftMenu(menuList,{ childOpenClass:childOpenClass }) ; // 渲染左侧菜单HTML
                $('.layui-layout-body').addClass('layuimini-single-module'); // 给布局主体添加单模块标识类名
                $('.layuimini-header-menu').remove(); // 移除头部菜单
                $('.layuimini-menu-left').html(leftMenuHtml); // 将渲染好的左侧菜单HTML插入到左侧菜单容器中

                element.init(); // 初始化layui元素
            },

            compileMenu: function(menu,isSub){
                // 定义菜单HTML模板，使用laytpl语法进行条件渲染
                var menuHtml = '<li {{#if( d.menu){ }}  data-menu="{{d.menu}}" {{#}}} class="layui-nav-item menu-li {{d.childOpenClass}} {{d.className}}"  {{#if( d.id){ }}  id="{{d.id}}" {{#}}}> <a {{#if( d.href){ }} layuimini-href="{{d.href}}" {{#}}} {{#if( d.target){ }}  target="{{d.target}}" {{#}}} href="javascript:;">{{#if( d.icon){ }}  <i class="{{d.icon}}"></i> {{#}}} <span class="layui-left-nav">{{d.title}}</span></a>  {{# if(d.children){}} {{d.children}} {{#}}} </li>' ;

                // 如果isSub为true，则使用不同的HTML模板
                if(isSub){
                    menuHtml = '<dd class="menu-dd {{d.childOpenClass}} {{ d.className }}"> <a href="javascript:;"  {{#if( d.menu){ }}  data-menu="{{d.menu}}" {{#}}} {{#if( d.id){ }}  id="{{d.id}}" {{#}}} {{#if(( !d.child || !d.child.length ) && d.href){ }} layuimini-href="{{d.href}}" {{#}}} {{#if( d.target){ }}  target="{{d.target}}" {{#}}}> {{#if( d.icon){ }}  <i class="{{d.icon}}"></i> {{#}}} <span class="layui-left-nav"> {{d.title}}</span></a> {{# if(d.children){}} {{d.children}} {{#}}}</dd>'
                }

                // 使用laytpl渲染菜单HTML模板并返回结果
                return laytpl(menuHtml).render(menu);
            },

            compileMenuContainer :function(menu,isSub){
                // 定义菜单容器的HTML模板，使用laytpl语法进行条件渲染
                var wrapperHtml = '<ul class="layui-nav layui-nav-tree layui-left-nav-tree {{d.className}}" id="{{d.id}}">{{d.children}}</ul>' ;

                // 如果isSub为true，则使用不同的HTML模板
                if(isSub){
                    wrapperHtml = '<dl class="layui-nav-child ">{{d.children}}</dl>' ;
                }

                // 如果菜单没有子项，则返回空字符串
                if(!menu.children){
                    return "";
                }

                // 使用laytpl渲染菜单容器的HTML模板并返回结果
                return laytpl(wrapperHtml).render(menu);
            },

            each:function(list,callback){ // 定义一个遍历函数，接收列表和回调函数作为参数
                var _list = []; // 初始化一个空数组用于存储处理后的结果
                for(var i = 0 ,length = list.length ; i<length ;i++ ){ // 遍历传入的列表
                    _list[i] = callback(i,list[i]) ; // 对每个元素执行回调函数，并将结果存入新数组
                }
                return _list ; // 返回处理后的数组
            },
            renderChildrenMenu:function(menuList,options){ // 定义渲染子菜单的函数，接收菜单列表和选项作为参数
                var me = this ; // 保存当前上下文的引用
                menuList = menuList || [] ; // 如果未传入菜单列表，则使用空数组
                var html = this.each(menuList,function (idx,menu) { // 遍历菜单列表
                    if(menu.child && menu.child.length){ // 如果当前菜单有子菜单
                        menu.children = me.renderChildrenMenu(menu.child,{ childOpenClass: options.childOpenClass || '' }); // 递归调用自身渲染子菜单
                    }
                    menu.className = "" ; // 清空菜单的类名
                    menu.childOpenClass = options.childOpenClass || '' // 设置子菜单打开时的类名
                    return me.compileMenu(menu,true) // 编译当前菜单并返回HTML字符串
                }).join(""); // 将所有生成的HTML字符串连接成一个字符串
                return me.compileMenuContainer({ children:html },true) // 将生成的HTML字符串包装在容器中并返回
            },
            renderLeftMenu :function(leftMenus,options){ // 定义渲染左侧菜单的函数，接收左侧菜单列表和选项作为参数
                options = options || {}; // 如果未传入选项，则使用空对象
                var me = this ; // 保存当前上下文的引用
                var leftMenusHtml =  me.each(leftMenus || [],function (idx,leftMenu) { // 遍历左侧菜单列表
                    var children = me.renderChildrenMenu(leftMenu.child, { childOpenClass:options.childOpenClass }); // 渲染子菜单
                    var leftMenuHtml = me.compileMenu({ // 编译当前左侧菜单
                        href:leftMenu.href, // 设置链接地址
                        target:leftMenu.target, // 设置链接目标
                        childOpenClass:options.childOpenClass, // 设置子菜单打开时的类名
                        icon:leftMenu.icon, // 设置图标
                        title:leftMenu.title, // 设置标题
                        children:children // 设置子菜单
                    });
                    return leftMenuHtml ; // 返回编译后的HTML字符串
                }).join(""); // 将所有生成的HTML字符串连接成一个字符串

                leftMenusHtml = me.compileMenuContainer({
                    id: options.parentMenuId, // 设置菜单容器的ID为options对象中的parentMenuId属性值
                    className: options.leftMenuCheckDefault, // 设置菜单容器的类名为options对象中的leftMenuCheckDefault属性值
                    children: leftMenusHtml // 将当前leftMenusHtml作为子元素传递给compileMenuContainer方法
                }) ;
                return leftMenusHtml ; // 返回处理后的leftMenusHtml
            },

            renderrenderMultiModule: function (menuList, menuChildOpen) {
                menuList = menuList || []; // 如果menuList未定义或为空，则初始化为空数组
                var me = this; // 保存当前上下文的引用
                var headerMenuHtml = '', // 初始化顶部菜单HTML字符串
                    headerMobileMenuHtml = '', // 初始化移动端顶部菜单HTML字符串
                    leftMenuHtml = '', // 初始化左侧菜单HTML字符串
                    leftMenuCheckDefault = 'layui-this', // 设置左侧菜单默认选中样式
                    childOpenClass = '', // 初始化子菜单打开类名
                    headerMenuCheckDefault = 'layui-this'; // 设置顶部菜单默认选中样式

                if (menuChildOpen) childOpenClass = ' layui-nav-itemed'; // 如果需要展开子菜单，添加相应的类名
                var headerMenuHtml = this.each(menuList, function (index, val) { // 遍历菜单列表进行顶部菜单渲染
                    var menu = 'multi_module_' + index; // 生成菜单ID
                    var id = menu + "HeaderId"; // 生成头部菜单ID
                    var topMenuItemHtml = ""; // 初始化顶部菜单项HTML字符串
                    topMenuItemHtml = me.compileMenu({
                        className: headerMenuCheckDefault, // 设置菜单项的类名
                        menu: menu, // 设置菜单ID
                        id: id, // 设置菜单项ID
                        title: val.title, // 设置菜单标题
                        href: "", // 设置链接地址（此处为空）
                        target: "", // 设置目标窗口（此处为空）
                        children: "" // 设置子菜单（此处为空）
                    });
                    leftMenuHtml += me.renderLeftMenu(val.child, { // 渲染左侧菜单并追加到leftMenuHtml
                        parentMenuId: menu, // 传递父菜单ID
                        childOpenClass: childOpenClass, // 传递子菜单打开类名
                        leftMenuCheckDefault: leftMenuCheckDefault // 传递左侧菜单默认选中样式
                    });
                    headerMobileMenuHtml += me.compileMenu({ id: id, menu: menu, id: id, icon: val.icon, title: val.title }, true); // 渲染移动端顶部菜单并追加到headerMobileMenuHtml
                    headerMenuCheckDefault = ""; // 清空顶部菜单默认选中样式
                    leftMenuCheckDefault = "layui-hide"; // 设置左侧菜单默认隐藏样式
                    return topMenuItemHtml; // 返回顶部菜单项HTML字符串
                }).join(""); // 将所有顶部菜单项HTML字符串连接成一个字符串
                $('.layui-layout-body').addClass('layuimini-multi-module'); // 给布局主体添加多模块标识类名
                $('.layuimini-menu-header-pc').html(headerMenuHtml); // 将顶部菜单HTML添加到电脑端头部菜单容器中
                $('.layuimini-menu-left').html(leftMenuHtml); // 将左侧菜单HTML添加到左侧菜单容器中
                $('.layuimini-menu-header-mobile').html(headerMobileMenuHtml); // 将移动端顶部菜单HTML添加到移动端头部菜单容器中
                element.init(); // 初始化Layui元素
            }  },


        listlisten: function () {
        // 监听点击事件，当点击具有data-menu属性的元素时触发
        $('body').on('click', '[data-menu]', function () {
            // 显示加载动画，设置shade为false，持续时间为2秒
            var loading = layer.load(0, {shade: false, time: 2 * 1000});
            // 获取被点击元素的data-menu属性值，即菜单ID
            var menuId = $(this).attr('data-menu');
            // header部分：移除当前选中的菜单项的高亮样式
            $(".layuimini-header-menu .layui-nav-item.layui-this").removeClass('layui-this');
            // 将被点击的菜单项设置为高亮状态
            $(this).addClass('layui-this');
            // left部分：隐藏所有菜单项
            $(".layuimini-menu-left .layui-nav.layui-nav-tree.layui-this").addClass('layui-hide');
            // 移除隐藏状态下的菜单项的高亮样式
            $(".layuimini-menu-left .layui-nav.layui-nav-tree.layui-this.layui-hide").removeClass('layui-this');
            // 显示被点击的菜单项对应的内容区域
            $("#" + menuId).removeClass('layui-hide');
            // 将被点击的菜单项设置为高亮状态
            $("#" + menuId).addClass('layui-this');
            // 关闭加载动画
            layer.close(loading);
        });
        $('body').on('click', '.layuimini-site-mobile', function () { // 当点击类名为'layuimini-site-mobile'的元素时触发事件
            var loading = layer.load(0, {shade: false, time: 2 * 1000}); // 显示加载层，无遮罩，持续2秒
            var isShow = $('.layuimini-tool [data-side-fold]').attr('data-side-fold'); // 获取'data-side-fold'属性的值
            if (isShow == 1) { // 如果当前状态为展开
                $('.layuimini-tool [data-side-fold]').attr('data-side-fold', 0); // 设置'data-side-fold'属性为0（缩放）
                $('.layuimini-tool [data-side-fold]').attr('class', 'fa fa-indent'); // 更改图标为缩进图标
                $('.layui-layout-body').removeClass('layuimini-all'); // 移除全屏样式
                $('.layui-layout-body').addClass('layuimini-mini'); // 添加缩放样式
            } else { // 如果当前状态为缩放
                $('.layuimini-tool [data-side-fold]').attr('data-side-fold', 1); // 设置'data-side-fold'属性为1（正常）
                $('.layuimini-tool [data-side-fold]').attr('class', 'fa fa-outdent'); // 更改图标为正常图标
                $('.layui-layout-body').removeClass('layuimini-mini'); // 移除缩放样式
                $('.layui-layout-body').addClass('layuimini-all'); // 添加全屏样式
                layer.close(window.openTips); // 关闭提示层
            }
            element.init(); // 重新初始化元素
            layer.close(loading); // 关闭加载层
        });

        $('body').on('click', '[data-side-fold]', function () { // 当点击具有'data-side-fold'属性的元素时触发事件
            var loading = layer.load(0, {shade: false, time: 2 * 1000}); // 显示加载层，无遮罩，持续2秒
            var isShow = $('.layuimini-tool [data-side-fold]').attr('data-side-fold'); // 获取'data-side-fold'属性的值
            if (isShow == 1) { // 如果当前状态为展开
                $('.layuimini-tool [data-side-fold]').attr('data-side-fold', 0); // 设置'data-side-fold'属性为0（缩放）
                $('.layuimini-tool [data-side-fold]').attr('class', 'fa fa-indent'); // 更改图标为缩进图标
                $('.layui-layout-body').removeClass('layuimini-all'); // 移除全屏样式
                $('.layui-layout-body').addClass('layuimini-mini'); // 添加缩放样式
                // $(".menu-li").each(function (idx,el) {
                //     $(el).addClass("hidden-sub-menu"); // 隐藏子菜单项
                // });
            } else { // 如果当前状态为缩放
                $('.layuimini-tool [data-side-fold]').attr('data-side-fold', 1); // 设置'data-side-fold'属性为1（正常）
                $('.layuimini-tool [data-side-fold]').attr('class', 'fa fa-outdent'); // 更改图标为正常图标
                $('.layui-layout-body').removeClass('layuimini-mini'); // 移除缩放样式
                $('.layui-layout-body').addClass('layuimini-all'); // 添加全屏样式
                // $(".menu-li").each(function (idx,el) {
                //     $(el).removeClass("hidden-sub-menu"); // 显示子菜单项
                // });
                layer.close(window.openTips); // 关闭提示层
            }
            element.init(); // 重新初始化元素
            layer.close(loading); // 关闭加载层
        });
        $('body').on('click', '.layuimini-header-menu.layuimini-mobile-show dd', function () { // 当点击具有特定类名的dd元素时触发事件
            var loading = layer.load(0, {shade: false, time: 2 * 1000}); // 显示加载动画，持续时间为2秒
            var check = $('.layuimini-tool [data-side-fold]').attr('data-side-fold'); // 获取具有data-side-fold属性的元素的data-side-fold属性值
            if(check === "1"){ // 如果data-side-fold属性值为"1"
                $('.layuimini-site-mobile').trigger("click"); // 触发layuimini-site-mobile元素的点击事件
                element.init(); // 重新初始化element模块
            }
            layer.close(loading); // 关闭加载动画
        });
    },

};

exports("miniMenu", miniMenu); // 导出miniMenu模块
});