layui.define(['jquery', 'layer'], function (exports){  // 定义一个模块，依赖 'jquery' 和 'layer'
    var $ = layui.jquery;  // 使用 layui 的 jQuery
    var chekedArr = {};  // 初始化一个空对象用于存储选中的过滤项

    var layfilter = {  // 定义 layfilter 对象
        render:function(options){  // 渲染过滤组件的方法
            var url = options.url;  // 获取传入的 url 地址
            var flag = true;  // 初始化标志位，用于控制是否继续渲染

            // 如果传入了 url，则从该地址获取数据
            if(url){
                $.getJSON(url, options.where, function(res){  // 通过 GET 请求获取 JSON 数据
                    if(res.code == 0){  // 如果返回的 code 为 0，表示成功
                        var data = res.data;  // 获取返回的数据
                        flase = true;  // 设置标志位为 true
                        layfilter.init(options, data);  // 调用 init 方法，传入选项和数据进行初始化
                    }else{
                        layer.msg(res.msg || '查询过滤组件数据异常', {icon: 2});  // 显示错误信息
                        flag = false;  // 如果失败，设置 flag 为 false
                    }
                });
            }
            if(!flag){  // 如果 flag 为 false，直接返回，不执行后续操作
                return;
            }
        },
        init:function(options, dataSource){  // 初始化过滤组件的方法
            var elem = options.elem;  // 获取传入的元素
            var $dom = $(elem);  // 获取该元素的 jQuery 对象
            var itemWidth = options.itemWidth;  // 获取项的宽度
            var arr = {};  // 初始化一个空对象，用于存储选中的项
            var $table = $('<table class="filterTable"></table>');  // 创建一个新的表格元素

            // 遍历数据源，生成每一行
            for(var i = 0; i < dataSource.length; i++){
                var $tr = $('<tr></tr>');  // 创建表格行
                var $td1 = $('<td class="item-title">' + dataSource[i].title + ':</td>');  // 创建第一列（标题）
                var $td2 = $('<td class="items"></td>');  // 创建第二列（选项列表）
                var type = dataSource[i].type;  // 获取当前项的类型
                if(!type){  // 如果没有设置类型，默认为 'radio'
                    console.warn('第' + (i + 1) + '个元素的类型[type]为空设为默认值[radio]');
                    type = 'radio';
                }
                var $ul = $('<ul class="layfilter-ul" type="'+type+'" name="'+dataSource[i].name+'"></ul>');  // 创建列表元素

                // 如果传入了项宽度，则根据索引设置宽度，否则默认为 80
                var width = itemWidth && itemWidth.length > 0 ? (itemWidth.length > i ? itemWidth[i] : itemWidth[itemWidth.length - 1]) : 80;
                arr[dataSource[i].name] = [];  // 初始化存储选中的项的数组

                // 遍历当前项的数据，生成每一个选项
                for(var j = 0; j < dataSource[i].data.length; j++){
                    var item = dataSource[i].data;
                    var className = 'layfilter-item';  // 默认项的类名

                    // 如果该项已被选中，则添加选中类
                    if(item[j].checked && item[j].checked == 'true'){
                        className = "layfilter-item layfilter-item-checked";
                        arr[dataSource[i].name].push({name: item[j].name, value: item[j].value});  // 将选中的项添加到选中数组
                    }

                    // 判断该项是否被禁用
                    if(item[j].disabled && item[j].disabled == 'true'){
                        // 如果禁用，添加禁用样式
                        $ul.append('<li value="'+item[j].value+'" style="width:'+width+'px;height: 28px;line-height: 28px;" class="'+className+'"><a disabled="disabled" class="layui-disabled">'+item[j].name+'</a></li>');
                    }else{
                        // 如果未禁用，正常添加项
                        $ul.append('<li value="'+item[j].value+'" style="width:'+width+'px;height: 28px;line-height: 28px;" class="'+className+'"><a>'+item[j].name+'</a></li>');
                    }
                }

                // 将列表添加到第二列，并将整行添加到表格中
                $td2.append($ul);
                $tr.append($td1).append($td2);
                $table.append($tr);
            }

            $dom.append($table);  // 将表格添加到指定的 DOM 元素中
            chekedArr = arr;  // 更新选中的项

            // 注册点击事件，处理项的选中与取消选中
            $('.filterTable tr td li a').bind('click', function(){
                if($(this).attr('disabled')){  // 如果该项禁用，返回不做处理
                    return;
                }

                var itemType = $(this).parent().parent().attr('type');  // 获取当前项的类型
                var name =  $(this).parent().parent().attr('name');  // 获取当前项的名称

                // 如果该项已被选中，取消选中
                if($(this).parent().hasClass('layfilter-item-checked')){
                    $(this).parent().removeClass('layfilter-item-checked');  // 移除选中类
                    var obj = chekedArr[name] || [];
                    for(var i = 0; i < obj.length; i++){
                        if(obj[i].value == $(this).parent().attr('value')){
                            obj.splice(i, 1);  // 从选中项中移除
                            break;
                        }
                    }
                    chekedArr[name] = obj;  // 更新选中的项
                }else{
                    if(itemType && ('checbox' == itemType || 'radio' == itemType)){
                        // 如果是单选或多选，处理选中状态
                        if('radio' == itemType){
                            var objs = $(this).parent().siblings();  // 获取同一组的其他项
                            chekedArr[name] = [];  // 清空选中的项
                            for(var i = 0; i < objs.length; i++){
                                objs.eq(i).removeClass('layfilter-item-checked');  // 取消选中其他项
                            }
                        }
                        var obj = chekedArr[name] || [];
                        obj.push({name: $(this).text(), value: $(this).parent().attr('value')});  // 添加选中的项
                        chekedArr[name] = obj;  // 更新选中的项
                        $(this).parent().addClass('layfilter-item-checked');  // 设置当前项为选中状态
                    }else{
                        console.error('复选或单选类型为空？');  // 如果类型为空，输出错误
                    }
                }
            });
        },
        getValue:function(callback){  // 获取选中的值，并通过回调函数返回
            var obj = getCheckData();  // 获取选中的数据
            callback.call(this, obj);  // 调用回调函数并传入选中的数据
        },
        on:function(filter, callback){  // 监听事件，当过滤器触发时调用回调函数
            var f = filter.substring(0, filter.indexOf('('));  // 获取事件类型（如 'click'）
            var e = filter.substring(filter.indexOf('(') + 1, filter.length - 1);  // 获取过滤器的名称
            if(typeof callback === "function"){  // 如果回调是函数
                $("[lay-filter='" + e + "']").on(f, function(){  // 为指定的元素绑定事件
                    var obj = getCheckData();  // 获取选中的数据
                    callback.call(this, obj);  // 调用回调函数并传入选中的数据
                });
            }else{
                console.error('传入的参数不是一个函数');  // 如果回调不是函数，输出错误
            }
        }
    };

    layui.link(layui.cache.base + 'layfilter/layfilter.css');  // 引入样式文件

    // 获取选中的数据并格式化为 JSON 对象
    function getCheckData(){
        var valueJson = {};  // 存储值的对象
        var nameJson = {};  // 存储名称的对象
        for(var name in chekedArr){  // 遍历选中的项
            var json = chekedArr[name];
            var values = '';
            var names = '';
            for(var i = 0; i < json.length; i++){
                if(i != json.length - 1){
                    values += json[i].value + ",";  // 拼接值
                    names += json[i].name + ",";  // 拼接名称
                }else{
                    values += json[i].value;  // 最后一个项不加逗号
                    names += json[i].name;
                }
            }
            valueJson[name] = values;  // 存储值
            nameJson[name] = names;  // 存储名称
        }
        return {values: valueJson, names: nameJson};  // 返回格式化后的数据
    }

    exports('layfilter', layfilter);  // 输出 layfilter 模块
});
