const emitter = mitt();


/**
 * jsonui
 * @type {{}}
 */
var jsonui = {};

/**
 * jsonui-解析器
 * @type {{}}
 */
jsonui.parser = {};

/**
 * jsonui-解析器-json操作
 * @type {{contain: jsonui.parser.json.contain, isObject: (function(*): boolean), merge: (function(*=, *=): {}), count: (function(*): number), isString: jsonui.parser.json.isString}}
 */
jsonui.parser.json = {
    /**
     * 查询json中是否出现值(仅一维)
     * @param arr
     * @param value
     * @returns {boolean}
     */
    contain: function (arr = [], value = "") {
        for (let index in arr) {
            if (arr[index] === value) {
                return true;
            }
        }
        return false;
    },
    /**
     * 判断是否是json字符串
     * @param str
     * @returns {boolean}
     */
    isString: function (str) {
        if (typeof str == "string") {
            try {
                var obj = JSON.parse(str);
                if (typeof obj == "object" && obj) {
                    return true;
                } else {
                    return false;
                }
            } catch (e) {
                return false;
            }
        }
        return false;
    },
    /**
     * 判断是否是json对象
     * @param data
     * @returns {boolean}
     */
    isObject: function (data) {
        return typeof (data) == "object";
    },
    /**
     * 统计json总数
     * 解决除[]json外，{}json无法使用length属性问题
     * @param json
     * @returns {number}
     */
    count: function (json) {
        var count = 0;
        for (var i in json) {
            count++;
        }
        return count;
    },
    /**
     * 合并json
     * 也可用于删除json唯一内存，前提是后一个参数json要有数据
     * 用此方法删除内存可以解决json里面带有函数的问题，如果用转字符串的方式删除内存，则会遗漏函数
     * @param obj
     * @param obj1
     * @returns {{}}
     */
    merge: function (obj = {}, obj1 = {}) {
        for (var i in obj1) {
            obj[i] = obj1[i];
        }
        return obj;
    }
};

/**
 * jsonui-解析器-api
 * @type {{ajax: jsonui.parser.api.ajax}}
 */
jsonui.parser.api = {
    /**
     * ajax
     * @param param
     */
    ajax: function (param = {}) {
        //合并参数
        param = jsonui.parser.json.merge({
            url: "",
            method: "GET",
            headers: {},
            data: {},
            dataType: "json",
            timeout: 60000,
            success: function (result) {
            },
            error: function (msg) {
                layer.msg(msg);
            }
        }, param);

        //console.log("API接口",param.url);

        //网络请求
        var result = layui.jquery.ajax({
            type: param.method,
            url: param.url,
            data: param.data,
            headers: param.headers,
            async: true,
            cache: false,
            dataType: "text",
            timeout: param.timeout,
            success: function (result) {
                //解析JSON
                if (param.dataType == "json") {
                    //如果不是json字符串
                    if (!jsonui.parser.json.isString(result)) {
                        param.error("不是json");
                        return false;
                    }
                    //转换为json对象
                    result = JSON.parse(result);

                    //判断json必须的字段
                    if (!result.hasOwnProperty("code") || !result.hasOwnProperty("msg")) {
                        param.error("json缺少必须字段");
                        return false;
                    }

                    //如果code中报错
                    if (result.code != 0) {
                        if([10000,10001,10002,10003].indexOf(result.code)>=0){
                            window.location.href = '/';
                        }
                        else{
                            param.error("错误码：" + result.code + "；描述：" + result.msg);
                        }
                        return false;
                    }
                } else {
                    //未定义的预期返回格式
                    //比如text等格式，需要原样返回
                }
                param.success(result);
            },
            error: function (data, status, e) {
                param.error(data.statusText);
            }
        });
    }
};

/**
 * jsonui-解析器-工具
 * @type {{getModule: jsonui.parser.tool.getModule, getUrl: (function(): string), getQuery: jsonui.parser.tool.getQuery, createCss: jsonui.parser.tool.createCss, createTpl: jsonui.parser.tool.createTpl}}
 */
jsonui.parser.tool = {
    /**
     * 获取jsonui所在地址
     * @returns {string}
     */
    getUrl: function () {
        let url = document.currentScript.src;
        let url_arr = url.split("/");
        url = "";
        layui.each(url_arr, function (index, item) {
            if (index < url_arr.length - 1) {
                url += item + "/";
            }
        });
        return url;
    },
    /**
     * 获取url参数
     * @param variable
     * @returns {string}
     */
    getQuery: function (variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return "";
    },
    /**
     * 获取元素最近的上层module
     * @param elem 元素
     * @param module_name module名称(为空直接取距离最近的module)
     * @returns {{}}
     */
    getModule: function (elem, module_name = "") {
        //module标准四元素：name,data,index,elem
        let module = {};
        module.elem = false;
        //获取当前元素的上层所有module
        let modules = elem.parents(".jsonui-module");
        let modules_arr = [];
        //如果当前元素就是module
        if (elem.attr("class") == "jsonui-module") {
            modules_arr.push(elem);
        }
        //console.log(modules_arr);
        //循环上层module
        layui.each(modules, function (index, item) {
            modules_arr.push(modules.eq(index));
        });
        //查找module
        layui.each(modules_arr, function (index, item) {
            if (module.elem === false) {
                //直接取最近的module
                if (!module_name) {
                    module.elem = item;
                }
                //根据指定的module名称取最近的module
                else {
                    let this_index_arr = item.attr("index").split(",");
                    let this_module_name = this_index_arr[this_index_arr.length - 1];
                    if (this_module_name == module_name) {
                        module.elem = item;
                    }
                }
            }
        });

        //如果没查找到module
        if (module.elem === false) {
            return false;
        }

        //获取module位置
        module.index = "";
        let parent_indexs = module.elem.parents("[index]");
        for (let index = parent_indexs.length - 1; index >= 0; index--) {
            let item = parent_indexs.eq(index);
            module.index += item.attr("index") + ",";
        }
        module.index += module.elem.attr("index");

        //获取module数据
        let index_arr = module.index.split(",");
        module.data = jsonui;
        module.name = "";
        layui.each(index_arr, function (index, item) {
            //console.log(index, item,module.data[item]);
            module.data = module.data[item];
            module.name = item;
        });

        return module;
    },
    /**
     * 获取随机数
     * @param n
     * @returns {string}
     */
    getRand: function (n) {
        var rnd = "";
        for (var i = 0; i < n; i++)
            rnd += Math.floor(Math.random() * 10);
        return rnd;
    },
    /**
     * 创建css
     * @param content
     */
    createCss: function (content) {
        layui.jquery("#jsonui-style style").append(content);
    },
    /**
     * 创建tpl
     * @param content
     */
    createTpl: function (content) {
        layui.jquery("#jsonui-tpl").append(content);
    },
    /**
     * 动态加载js文件
     * @param url
     * @returns {Promise<unknown>}
     */
    loadScript: function (url) {
        return new Promise((resolve, reject) => {
            // 1. 已经加载过，直接返回成功
            if (document.querySelector(`script[src="${url}"]`)) {
                resolve('JS 已加载');
                return;
            }

            // 2. 创建 script 标签
            const script = document.createElement('script');
            script.src = url;
            script.type = 'text/javascript';

            // 3. 加载成功
            script.onload = () => {
                resolve();
            };

            // 4. 加载失败
            script.onerror = (err) => {
                reject(new Error('JS 加载失败'));
            };

            // 5. 插入页面
            document.body.appendChild(script);
        });
    }
};


/**
 * jsonui-解析器-配置
 * @type {{grid: [string, string, string], edition: string, gridDom: [string, string], url: string}}
 */
jsonui.parser.config = {
    url: jsonui.parser.tool.getUrl(),
    edition: "2.0.0",
    grid: ["result", "row", "col"],
    gridDom: ["row", "col"],
};

/**
 * jsonui-解析器-打开
 * @type {{init: jsonui.parser.open.init, w: {}, go: jsonui.parser.open.go}}
 */
jsonui.parser.open = {
    /**
     * 窗口参数
     */
    w: {},
    /**
     * 初始化函数
     * @param w
     */
    init: function (w = {}) {
        this.w = w;
        layui.jquery(function () {
            layui.use(["laytpl"], function () {
                jsonui.parser.open.go();
            });
        });
    },
    /**
     * go
     * @param w
     */
    go: function () {
        let w = this.w;
        //删除唯一内存
        w = JSON.parse(JSON.stringify(w));
        //缺省target
        w.target = (w.hasOwnProperty("target")) ? w.target : "load";
        switch (w.target) {
            case "load":
                //直接使用数据
                if (jsonui.parser.json.isObject(w.content)) {
                    //渲染
                    jsonui.parser.render.init(w.content);
                }
                //api接口
                else {
                    jsonui.parser.api.ajax({
                        url: w.content,
                        success: function (result) {
                            //渲染
                            jsonui.parser.render.init(result);
                        }
                    });
                }
                break;
            case "self":
                //跳转打开
                w.content = window.location.pathname + "?content=" + encodeURIComponent(w.content);
                window.location.href = w.content;
                break;
            case "blank":
                //新窗口打开
                layui.msg("暂不支持blank");
                break;
            case "window":
                //弹窗打开
                if (w.type == 2) {
                    w.content = window.location.pathname + "?content=" + encodeURIComponent(w.content);
                }
                layer.open(w);
                break;
            default:
                layer.msg("target error");
                break;
        }
    }
};

/**
 * jsonui-解析器-渲染
 * @type {{useModule: [], findModule: jsonui.parser.render.findModule, init: jsonui.parser.render.init, createBasicDom: jsonui.parser.render.createBasicDom, renderModule: {init: jsonui.parser.render.renderModule.init, initModule: []}}}
 */
jsonui.parser.render = {

    //使用模块
    useModule: [],

    /**
     * 初始化渲染
     * @param content
     */
    init: function (content = {}) {

        //console.time("open");

        //舍弃非解析器以外的对象
        jsonui = {
            parser: jsonui.parser
        };
        //合并json
        jsonui = jsonui.parser.json.merge(jsonui, content);

        //初始化使用模块
        jsonui.parser.render.useModule = [];

        //创建基础dom
        jsonui.parser.render.createBasicDom();

        //发现模块
        jsonui.parser.render.findModule({
            data: jsonui,
            elem: layui.jquery("#jsonui"),
        });

        //渲染模块
        jsonui.parser.render.renderModule.init();
    },

    /**
     * 创建基础dom
     */
    createBasicDom: function () {
        //创建jsonui元素
        if (!layui.jquery("#jsonui").size()) {
            layui.jquery("body").append("<div id=\"jsonui\"></div>");
        }
        //创建style元素
        if (!layui.jquery("#jsonui-style").size()) {
            layui.jquery("#jsonui").after("<div id=\"jsonui-style\"><style type=\"text/css\">#jsonui{}.layui-row{margin-left:0 !important;margin-right:0 !important;}.layui-row > *:first-child{padding-left:0;}.layui-row > *:last-child{padding-right:0;}</style></div>");
        }
        //创建tpl元素
        if (!layui.jquery("#jsonui-tpl").size()) {
            layui.jquery("#jsonui").after("<div id=\"jsonui-tpl\"></div>");
        }

        //清空jsonui元素
        layui.jquery("#jsonui").html("");
    },


    /**
     * 发现模块
     * 同时此函数也提供给创建模块dom使用
     * @param param 参数
     */
    findModule: function (param = {}) {
        //合并参数
        param = jsonui.parser.json.merge({
            data: [], //发现数据源
            index: "", //数据索引
            elem: false, //元素对象(模块填充到此元素)
            isFind: true //是否需要发现模块
        }, param);

        //循环
        layui.each(param.data, function (index, item) {

            //如果item不是json对象
            if (!jsonui.parser.json.isObject(item)) {
                //直接跳过
                return false;
            }

            //遇到模块
            if (index == "module" && param.isFind === true) {
                layui.each(item, function (index1, item1) {
                    //console.log("1——发现模块：" + index1 + ":" + jsonui.parser.render.useModule.length);

                    //新的index索引
                    let new_data_index = param.index;
                    new_data_index += (new_data_index) ? "," : "";
                    new_data_index += "module," + index1;
                    //属性组
                    let attrs = " index=\"" + new_data_index + "\" name=\""+index1+"\" class=\"jsonui-module\"";
                    //如果有模块头信息
                    if (item1.hasOwnProperty("header")) {
                        if (item1.header.hasOwnProperty("elem")) {
                            attrs += " elem=\"" + item1.header.elem + "\"";
                        }
                        if (item1.header.hasOwnProperty("display") && item1.header.display === false) {
                            attrs += " style=\"display:none;\"";
                        }
                    }
                    //创建元素
                    param.elem.append("<div" + attrs + "></div>");

                    //添加使用模块
                    jsonui.parser.render.useModule.push({
                        "name": index1,
                        "data": item1,
                        "index": new_data_index,
                        "elem": param.elem.children(".jsonui-module[index=\"" + new_data_index + "\"]"),
                    });
                });
            }
            //遇到栅格
            else if (Number.isInteger(index) || jsonui.parser.json.contain(jsonui.parser.config.grid, index)) {
                //新的index索引
                let new_data_index = param.index;
                new_data_index += (new_data_index) ? "," : "";
                new_data_index += index;

                //新元素(默认为当前元素)
                let new_elem = param.elem;
                //创建新元素
                if (jsonui.parser.json.contain(jsonui.parser.config.gridDom, index)) {
                    //名称
                    let name = "div[index=\"" + new_data_index + "\"]";
                    //属性组
                    let attrs = " index=\"" + new_data_index + "\"";
                    //class
                    let class_value = " class=\"layui-" + index;
                    //如果有属性
                    if (item.hasOwnProperty("attr")) {
                        //style
                        let style_value = "";
                        switch (index) {
                            case "row":
                                layui.each(item.attr, function (index1, item1) {
                                    switch (index1) {
                                        case "space":
                                            class_value += " layui-col-space" + item1;
                                            break;
                                        default:
                                            break;
                                    }
                                });
                                break;
                            case "col":
                                layui.each(item.attr, function (index1, item1) {

                                    switch (index1) {
                                        case "xs":
                                            class_value += " layui-col-xs" + item1;
                                            break;
                                        case "sm":
                                            class_value += " layui-col-sm" + item1;
                                            break;
                                        case "md":
                                            class_value += " layui-col-md" + item1;
                                            break;
                                        case "xsOffset":
                                            class_value += " layui-col-xs-offset" + item1;
                                            break;
                                        case "smOffset":
                                            class_value += " layui-col-sm-offset" + item1;
                                            break;
                                        case "mdOffset":
                                            class_value += " layui-col-md-offset" + item1;
                                            break;
                                        case "xsStyle":
                                            style_value += "#jsonui " + name + "{" + item1 + "}";
                                            break;
                                        case "smStyle":
                                            style_value += "@media screen and (min-width:768px){#jsonui " + name + "{" + item1 + "}" + "}";
                                            break;
                                        case "mdStyle":
                                            //获取css名称
                                            let css_name = jsonui.parser.tool.getRand(10);
                                            attrs += " css_name=\"" + css_name + "\"";
                                            css_name = name + "[css_name=\"" + css_name + "\"]";
                                            style_value += "@media screen and (min-width:992px){#jsonui " + css_name + "{" + item1 + "}" + "}";
                                            break;
                                        default:
                                            break;
                                    }
                                });
                                break;
                            default:
                                break;
                        }
                        //set style
                        if (style_value) {
                            layui.jquery("#jsonui-style style").append(style_value);
                        }
                    }
                    class_value += "\"";
                    attrs += class_value;

                    //创建元素
                    param.elem.append("<div" + attrs + "></div>");
                    //选中元素
                    new_elem = param.elem.children(name);
                    //清空index索引
                    new_data_index = "";
                }
                //继续发现模块
                jsonui.parser.render.findModule({
                    data: item,
                    index: new_data_index,
                    elem: new_elem,
                });
            }
        });
    },

    /**
     * 渲染模块
     */
    renderModule: {

        //初始化过的模块
        initModule: [],

        //初始化
        init: function () {

            //调用的模块函数：
            //1、init,初始化模块,生命周期开始时,每个模块调用一次,同模块不会重复调用
            //2、render,渲染模块,每次渲染模块就会调用一次,使用相同模块会调用多次
            //3、success,渲染模块完成,所有模块渲染完成后，会将已渲染的模块按渲染顺序调用一次success函数
            //4、setValue,模块设置默认值,模块放在form模块下级时,当form模块触发了success函数，会将form模块的所有下级模块按顺序调用一次setValue函数
            console.log("你好");
            //循环发现的模块
            layui.each(jsonui.parser.render.useModule, function (index, item) {
                //初始化模块
                if (!jsonui.parser.json.contain(jsonui.parser.render.renderModule.initModule, item.name)) {
                    console.log("2————————初始化模块：" + item.name + ":" + index);
                    //推到初始化过的模块(每个模块不管用了多少次都只初始化一次)
                    jsonui.parser.render.renderModule.initModule.push(item.name);
                    //调用模块init函数
                    //console.log(item.name);
                    if (jsonui.parser.module[item.name].hasOwnProperty("init")) {
                        jsonui.parser.module[item.name].init();
                    }
                }
                //渲染模块
                if (!item.hasOwnProperty("renderCallStatus")) {
                    //console.log("3————————————————渲染模块：" + item.name + ":" + index);
                    //调用模块render函数
                    if (jsonui.parser.module[item.name].hasOwnProperty("render")) {
                        jsonui.parser.module[item.name].render(item);
                    }
                    //console.log("4————————————————————————————————渲染模块完成：" + item.name + ":" + index);
                }
            });

            //console.log("所有模块渲染完成，确认完毕，发现模块数量：" + jsonui.parser.render.useModule.length + "，发现模块如下：");
            //console.log(JSON.parse(JSON.stringify(jsonui.parser.render.useModule)));

            //循环发现的模块
            layui.each(jsonui.parser.render.useModule, function (index, item) {
                //调用模块success函数
                if (jsonui.parser.module[item.name].hasOwnProperty("success")) {
                    jsonui.parser.module[item.name].success(item);
                }
            });

            //console.log(jsonui);
            //console.timeEnd("open");
        }
    }
};

/**
 * jsonui-解析器-模块
 * 渲染方式：jsonui.parser.module.名称.render
 * @type {{}}
 */
jsonui.parser.module = {}


/**
 * jsonui-解析器-事件
 * @type {{init: jsonui.parser.event.init, re: jsonui.parser.event.re, action: {setModuleHeader: jsonui.parser.event.action.setModuleHeader, window: jsonui.parser.event.action.window, close: jsonui.parser.event.action.close, tableRender: jsonui.parser.event.action.tableRender}}}
 */
jsonui.parser.event = {
    //初始化
    init: function (param = {}) {
        layui.each(param, function (index, item) {
            jsonui.parser.event.re(item);
        });
    },
    //递归事件到达页面
    re: function (param = {}, level = 0) {
        //寻找层级方法：
        //1、递归递加向上找，缺点：如果向上找完了，级别不够预设的，就会在最顶级执行，正在使用
        //2、每打开一个窗口时记录层级，需要向上找时判断页面的层级，尚未发现缺点
        //页面层级到达时
        if (param.level == level || param.level == -1) {

            //如果事件有动作
            if (param.hasOwnProperty("action")) {
                //循环动作
                layui.each(param.action, function (index, item) {
                    console.log("执行：" + param.level + "层级；动作：" + index + "；页面链接：" + window.location.href);
                    //执行动作
                    jsonui.parser.event.action[index](param.level, item);
                });
            }
            //执行一次就终止
            return true;
        }

        //向上层级
        level++;
        //继续访问父窗口
        window.parent.jsonui.parser.event.re(param, level);
    },
    //动作
    action: {
        /**
         * 关闭窗口
         * @param level
         * @param param
         */
        close: function (level, param = {}) {
            let window_obj = (level === -1) ? window.top : window.parent;
            window_obj.layer.close(window_obj.layer.getFrameIndex(window.name));
        },
        /**
         * 打开页面
         * @param level
         * @param param
         */
        window: function (level, param = {}) {
            let window_obj = (level === -1) ? window.top : window;
            window_obj.jsonui.parser.open.init(param);
        },
        /**
         * 刷新页面
         * @param level
         * @param param
         */
        renovate: function (level, param = {}) {
            window.location.href = window.location.href;
        },
        /**
         * 设置模块头信息
         * @param level
         * @param param
         */
        setModuleHeader: function (level, param = {}) {
            let window_obj = (level === -1) ? window.top : window;
            layui.each(window_obj.jsonui.parser.render.useModule, function (index, item) {
                if (!item.data.hasOwnProperty("header") || !item.data.header.hasOwnProperty("elem")) {
                    return false;
                }
                if (item.data.header.elem == param.elem) {
                    if (param.hasOwnProperty("display")) {
                        let elem = layui.jquery(".jsonui-module[elem=\"" + param.elem + "\"]");
                        if (param.display == true) {
                            elem.css("display", "block");
                        } else {
                            elem.css("display", "none");
                        }
                    }
                }
            });
        },
        /**
         * 数据表格重载
         * @param level
         * @param param
         */
        tableRender: function (level, param = {}) {
            let window_obj = (level === -1) ? window.top : window;
            window_obj.table_display_render(param.elem);
        },
    }
};


/**
 * exports jsonui
 */
layui.define(function (exports) {
    exports('jsonui', jsonui);
});

jsonui.parser.module.adminBox = {
    init: function () {
        jsonui.parser.tool.createCss(`
.admin-box{}
.admin-box-left{background: #fff;position: fixed;z-index: 1;left: 0;top: 0;width: 210px;height: 100%;-webkit-box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);overflow-y: auto;}
.admin-box-left-switch{position: absolute;z-index: 1;margin: 10px 0 0 220px;cursor: pointer;}
.admin-box-left-switch i{display:block;margin:3px 0 0 0;width:20px;height:2px;background:#ccc;border-radius:2px;}
.admin-box-left-switch:hover i{background:#383838;}
.admin-box-body{padding:0 0 0 210px;}
        `);
        jsonui.parser.tool.createTpl(`
<script type="text/html" id="tpl-adminBox">

<div class="admin-box">
    <div class="admin-box-left"></div>
    <div class="admin-box-left-switch"><i></i><i></i><i></i><i></i></div>
    <div class="admin-box-body"></div>
</div>

</script>
        `);
    },
    render: function (module) {
        layui.use(["laytpl"], function () {
            layui.laytpl(layui.jquery("#tpl-adminBox").html()).render(module.data, function (html) {
                module.elem.html(html);
                if(module.data.hasOwnProperty("content")){
                    if(module.data.content.hasOwnProperty("left")){
                        //发现模块
                        jsonui.parser.render.findModule({
                            data: module.data.content.left,
                            index: "content,left",
                            elem: module.elem.children(".admin-box").children(".admin-box-left")
                        });
                    }
                    if(module.data.content.hasOwnProperty("body")){
                        //发现模块
                        jsonui.parser.render.findModule({
                            data: module.data.content.body,
                            index: "content,body",
                            elem: module.elem.children(".admin-box").children(".admin-box-body")
                        });
                    }
                }
            });
        });
    }
};

jsonui.parser.module.albumBrowse = {
    init: function () {
        jsonui.parser.tool.createCss(`
.jsonui_albumBrowse{display:table;width:100%;}
.jsonui_albumBrowse li{float:left;margin:10px 10px 0 0;border: 1px solid #eee;padding:10px;}
.jsonui_albumBrowse li img{min-width:60px;min-height:60px;}
        `);
        jsonui.parser.tool.createTpl(`
<script type="text/html" id="tpl-albumBrowse">
    <div class="jsonui_albumBrowse" id="{{d.id}}">
         {{#
            let this_style = "";
            if(d.hasOwnProperty("width")){
                this_style += "width:"+d.width+"px;";
            }
            if(d.hasOwnProperty("height")){
                this_style += "height:"+d.height+"px;";
            }
            layui.each(d.data, function(index, item){ 
         }}
         <li>
            <img 
            layer-pid="{{index}}"
            layer-src="{{item.url}}"
            
            {{# if(d.hasOwnProperty("thumbnail")){ }}
            src="{{item.thumbnail}}" 
            {{# }else{ }}
            src="{{item.url}}" 
            {{# } }}
            
            {{# if(d.hasOwnProperty("title")){ }}
            alt="{{item.title}}"
            {{# } }}
            
            style="{{this_style}}"
             />
         </li>
         {{# }); }}
    </div>
</script>
        `);
    },
    render: function (module) {
        emitter.on('set-value-by', (values) => {
            this.methods.setValue(values, module);
        });
    },

    methods: {
        setValue(values, module) {
            if (module.data.name !== undefined) {
                layui.use(["laytpl"], function () {
                    let d = module.data;
                    d.id = "jsonui_albumBrowse_" + jsonui.parser.tool.getRand(10);
                    d.data = values[module.data.name];

                    layui.laytpl(layui.jquery("#tpl-albumBrowse").html()).render(d, function (html) {
                        module.elem.html(html);
                        layer.photos({
                            photos: '#' + d.id,
                            anim: 5
                        });
                    });
                });
            }
        }
    },
};

jsonui.parser.module.blockQuote = {

    init: function () {

        jsonui.parser.tool.createCss(`
.layui-elem-quote{
    margin:0;
}
        `);
        jsonui.parser.tool.createTpl(`
<script type="text/html" id="tpl-blockQuote">
    {{# 
        let attr_class = "layui-elem-quote";
        if(d.hasOwnProperty("attr") && d.attr.hasOwnProperty("nm")){
            attr_class += " layui-quote-nm";
        }
    }}
    <blockquote class="{{attr_class}}">{{# if(d.hasOwnProperty("content")){ }}{{-d.content}}{{# } }}</blockquote>
</script>
        `);

    },

    render: function (module) {
        layui.use(["laytpl"], function () {
            layui.laytpl(layui.jquery("#tpl-blockQuote").html()).render(module.data, function (html) {
                module.elem.html(html);
                //更新elem
                module.elem = module.elem.children("blockquote");


                //发现模块
                jsonui.parser.render.findModule({
                    data: module.data,
                    index: module.index,
                    elem: module.elem
                });
            });
        });
    }


};

jsonui.parser.module.button = {

    init:function (){
        jsonui.parser.tool.createCss(`
.module-form{
    padding:15px;
}
.layui-btn-lime{
    display: inline-block;
    margin: 0 15px 0 0;
    border: 1px solid #006eff;
    background: #d9ecff;
    border-radius: 3px;
    padding: 0 10px;
    min-width:80px;
    height: 32px;
    line-height: 30px;
    text-align: center;
    font-size: 15px;
    color: #0052D9;
}
.layui-btn-lime:hover{
    color: #fff;
    background: #0052D9;
}
.layui-btn-lime-reset{
    background-image: linear-gradient(to bottom,#fcfcfc, #f0f0f0);
}
        `);
        jsonui.parser.tool.createTpl(`
<script type="text/html" id="tpl-button">
    {{# if(d.filter=="submit"){ }}
    <button type="submit" class="layui-btn layui-btn-lime" lay-filter="form_botton" lay-submit="">{{d.title}}</button>
    {{# } else if(d.filter=="search"){ }}
    <button type="submit" class="layui-btn layui-btn-lime" lay-filter="form_botton" lay-submit="">{{d.title}}</button>
    {{# } else if(d.filter=="reset"){ }}
    <button type="reset" class="layui-btn layui-btn-lime layui-btn-lime-reset" lay-filter="form_botton" lay-submit="">
        {{d.title}}
    </button>
    {{# } else{ }}
    <button type="button" class="layui-btn layui-btn-lime layui-btn-lime-reset">{{d.title}}</button>
    {{# } }}
</script>
        `);
    },

    render: function (module) {
        layui.use(["laytpl"], function () {
            layui.laytpl(layui.jquery("#tpl-button").html()).render(module.data, function (html) {
                module.elem.html(html);
            });
        });
    },
    success: function (module) {
        layui.use(["form"], function () {
            layui.form.on("submit(form_botton)", function (data) {
                //取得按钮模块
                let botton_module = jsonui.parser.tool.getModule(layui.jquery(data.elem));
                console.log('取得按钮模块',botton_module,data);

                switch (botton_module.data.filter) {
                    case "submit":
                        //表单提交
                        form_display_submit(botton_module.data, data.field);
                        break;
                    case "search":
                        //搜索提交
                        form_display_search(botton_module.data, data.field);
                        break;
                    case "reset":
                        //重置
                        if (confirm("确定" + botton_module.data.title + "吗？")) {
                            //表单中如果有非layui组件需要在这里手动重置
                            //调用重置函数
                            //允许重置
                            return true;
                        }
                        break;
                    default:
                        alert("filter error");
                        break;
                }
                return false;
            });
        });
    }
};





/**
 * 表单-过滤空数据
 * 避免空数据提交到接口
 * @param data
 * @returns {{}}
 */
function form_display_filter_null(data) {
    var new_data = {};
    for (var i in data) {
        if (data[i].length > 0) {
            new_data[i] = data[i];
        }
    }
    return new_data;
}

/**
 * 表单-提交
 * @param button 按钮数据
 * @param data 用户输入的表单数据
 */
function form_display_submit(button, data) {

    //表单-过滤空数据
    data = form_display_filter_null(data);

    let index = layer.load(1, {shade: [0.1, "#fff"]});
    jsonui.parser.api.ajax(jsonui.parser.json.merge({
        url: "",
        method: "POST",
        data: data,
        success: function (result) {
            layer.close(index);

            let index1 = layer.alert(result.msg, {
                time: 2*1000,
                success: function(layero, index){
                    let timeNum = this.time/1000, setText = function(start){
                        layer.title('<span class="layui-font-red">'+ (start ? timeNum : --timeNum) + '</span> 秒后自动关闭', index);
                    };
                    setText(!0);
                    this.timer = setInterval(setText, 1000);
                    if(timeNum <= 0) clearInterval(this.timer);
                },
                end: function(){
                    clearInterval(this.timer);
                    //表单提交后-事件
                    jsonui.parser.event.init(button.successAfter);
                }
            }, function () {
                layer.close(index1);

                //表单提交后-事件
                jsonui.parser.event.init(button.successAfter);
            });

        },
        error: function (msg) {
            layer.close(index);
            layer.msg(msg);
        }
    }, button));
}

/**
 * 表单-搜索提交
 * @param button 按钮json数据
 * @param data 用户输入的表单数据
 * @returns {boolean}
 */
function form_display_search(button, data) {

    //表单-过滤空数据
    data = form_display_filter_null(data);

    if(typeof table_display_param==="undefined"){
        layer.msg("未发现数据表格");
        return false;
    }

    //找到搜索按钮属性elem指定的数据表格
    layui.each(table_display_param,function(index,item){
        if(item.elem==button.elem){
            //删除唯一内存
            item = JSON.parse(JSON.stringify(item));
            //合并参数
            item.where = jsonui.parser.json.merge(item.where, data);

            //创建表格
            table_display_create(item,item.moduleIndex);
        }
    });
}

jsonui.parser.module.checkbox = {

    init: function () {
        jsonui.parser.tool.createCss(`
.jsonui_checkbox{
    
}
.jsonui_checkbox ul{
    display:table;
}
.jsonui_checkbox ul li{
    margin-top:9px;
}
.jsonui_checkbox ul li[model="1"]{
    float:left;
}
.jsonui_checkbox ul li a{
    display:table;
    cursor:pointer;
}
.jsonui_checkbox ul li a span{
    position: absolute;
    width: 16px;
    height: 16px;
    line-height:16px;
    line-height: 16px;
    border: 1px solid #d2d2d2;
    font-size: 12px;
    border-radius: 2px;
    background-color: #fff;
    text-align: center;
}
.jsonui_checkbox ul li a:hover span{
    border-color: #0052D9;
}
.jsonui_checkbox ul li a b{
    display:block;
    font-weight: normal;
    padding-right: 15px;
    line-height: 18px;
    color: #666;
    padding-left:24px;
    font-size: 14px;
}
.jsonui_checkbox ul li a[disabled="true"]{
    cursor: not-allowed;
    opacity:0.5;
}
.jsonui_checkbox ul li a[disabled="true"]:hover span{
    border-color: #d2d2d2;
}
.jsonui_checkbox ul li a span.layui-icon-ok{
    border-color: #0052D9;
    background:#0052D9;
    color: #fff;
}
        `);
        jsonui.parser.tool.createTpl(`
<script type="text/html" id="tpl-checkbox">
    <div class="jsonui_checkbox">
        <input type="hidden" name="{{d.name}}" />
        <ul>
            {{# layui.each(d.options, function(index, item){ }}            
            <li model="{{d.model??1}}">
                <a value="{{item.value}}" {{# if(item.hasOwnProperty("disabled")){ }}disabled="true"{{# } }}  {{# if(item.hasOwnProperty("readonly")){ }}readonly="true"{{# } }} >
                    <span class="layui-icon layui-anim"></span>
                    <b>{{-item.label?item.label:(item.title?item.title:'')}}</b>
                </a>
            </li>
            {{# }); }}
        </ul>
    </div>
</script>
        `);

        //点击
        layui.jquery(document).delegate(".jsonui_checkbox li a", 'click', function (e) {
            let disabled = layui.jquery(this).attr("disabled");
            let readonly = layui.jquery(this).attr("readonly");
            if (disabled || readonly) {
                return false;
            }

            //获取module
            let module = jsonui.parser.tool.getModule(layui.jquery(this));

            //用户点击的选项值
            let value = layui.jquery(this).attr("value");
            //旧选项值
            let checkbox_value = layui.jquery(this).parent().parent().siblings("input").val().split(",");
            //是否旧数据选中（默认未选中）
            let is_exist = false;
            //新选项值
            let new_checkbox_value = [];
            //计算点击后的新选项值
            layui.each(checkbox_value, function (index, item) {
                if (value == item) {
                    is_exist = true;
                    return false;
                }
                if (item.length) {
                    new_checkbox_value.push(item);
                }
            });
            if (is_exist === false) {
                new_checkbox_value.push(value);
            }

            //如果当前选项被选中
            if (is_exist === false) {
                //获取点击的选项json对象
                let option = false;
                layui.each(module.data.options, function (index, item) {
                    if (value == item.value) {
                        option = item;
                    }
                });
                //如果有共存选项
                if (option && option.hasOwnProperty("coe")) {

                    let coe_checkbox_value = [];
                    //option.coe = option.coe.split(",");
                    //console.log(new_checkbox_value);
                    //console.log(option.coe.split(","));
                    //循环新选项值
                    layui.each(new_checkbox_value, function (index, item) {

                        //只有自己选项和共存选项可以被选中
                        if (value == item || jsonui.parser.json.contain(option.coe.split(","), item)) {
                            coe_checkbox_value.push(item);
                        }
                    });
                    new_checkbox_value = coe_checkbox_value;
                }
            }

            new_checkbox_value = new_checkbox_value.toString();
            //设置input值
            layui.jquery(this).parent().parent().siblings("input").val(new_checkbox_value);
            //复选框读取
            checkbox_read(module, new_checkbox_value);
        });
    },

    render: function (module) {
        let _this = this;
        layui.use(["laytpl"], function () {
            layui.laytpl(layui.jquery("#tpl-checkbox").html()).render(module.data, function (html) {
                module.elem.html(html);
                emitter.on('set-value-by', (values) => {
                    _this.methods.setValue(values, module);
                });
            });
        });
    },

    methods: {
        setValue(values, module) {
            if (module.data.name !== undefined) {
                module.elem.find('input:hidden').eq(0).val(values[module.data.name] ?? '');
                checkbox_read(module, values[module.data.name ?? '']);
            }
        }
    },

};


/**
 * 复选框读取
 * @param module
 * @param value
 */
function checkbox_read(module, value) {
    let elem = module.elem.find(".jsonui_checkbox");
    value = value ? value.toString() : '';
    let value_arr = value.split(",");
    let elem_lis = elem.children("ul").children("li");
    layui.each(elem_lis, function (index, item) {
        let self_elem = elem_lis.eq(index);
        let self_value = self_elem.children("a").attr("value");
        let self_icon = self_elem.children("a").children("span.layui-icon");
        if (jsonui.parser.json.contain(value_arr, self_value)) {
            self_icon.addClass("layui-icon-ok").addClass("layui-anim-scalesmall-spring");
        } else {
            self_icon.removeClass("layui-icon-ok").removeClass("layui-anim-scalesmall-spring");
        }
    });
    //复选框事件
    checkbox_after(module, value);
}

/**
 * 复选框事件
 * @param module
 * @param value
 */
function checkbox_after(module, value) {
    value = value ? value.toString() : '';
    let value_arr = value.split(",");
    //选中后事件
    let success_after = [];
    //取消后事件
    let error_after = [];
    //循环所有选项
    layui.each(module.data.options, function (index, item) {
        //是否选中
        let is_checked = false;
        for (let index1 in value_arr) {
            let item1 = value_arr[index1];
            if (item.value == item1) {
                is_checked = true;
                break;
            }
        }
        //已选中
        if (is_checked === true) {
            if (item.hasOwnProperty("successAfter") && !jsonui.parser.json.contain(success_after, item.successAfter)) {
                success_after.push(item.successAfter);
            }
        }
        //未选中
        else {
            if (item.hasOwnProperty("errorAfter") && !jsonui.parser.json.contain(error_after, item.errorAfter)) {
                error_after.push(item.errorAfter);
            }
        }
    });
    //console.log(success_after);
    //console.log(error_after);


    layui.each(error_after, function (index, item) {
        jsonui.parser.event.init(item);
    });
    layui.each(success_after, function (index, item) {
        jsonui.parser.event.init(item);
    });
}

jsonui.parser.module.code = {

    //code状态
    layuiUseCodeStatus: false,

    init: function () {

        //更新code状态
        jsonui.parser.module.code.layuiUseCodeStatus = false;

        jsonui.parser.tool.createCss(`
pre{
    background: #f7f7f7;
    color:#484848;
    padding:8px 15px;
    border-radius: 4px;
    line-height:20px;
        overflow-y: auto;
}
        `);
        jsonui.parser.tool.createTpl(`
<script type="text/html" id="tpl-code">
    <pre 
        {{# if(d.hasOwnProperty("attr") && d.attr.hasOwnProperty("height")){ }}
            lay-height="{{d.attr.height}}"
        {{# } }}
    >{{# if(d.hasOwnProperty("content")){ }}{{d.content}}{{# } }}</pre>
</script>
        `);

    },

    render: function (module) {
        layui.use(["laytpl"], function () {
            layui.laytpl(layui.jquery("#tpl-code").html()).render(module.data, function (html) {
                module.elem.html(html);
            });
        });
    },

    success: function (module) {
        //实例化layui code
        if (jsonui.parser.module.code.layuiUseCodeStatus === false) {
            layui.use('code', function () {
                layui.code();
                //更新code状态
                jsonui.parser.module.code.layuiUseCodeStatus = true;
            });
        }
    }

};

jsonui.parser.module.date = {

    init: function () {
        jsonui.parser.tool.createCss(`
.layui-input[disabled="true"]{
    background: #f6f6f6;
    cursor: not-allowed;
}
        `);
        jsonui.parser.tool.createTpl(`
<script type="text/html" id="tpl-date">
    <input
         type="text"
         name="{{d.name}}"
            {{# if(d.hasOwnProperty("placeholder")){ }}
                placeholder="{{d.placeholder}}"
                
    {{# } }}
    {{# if(d.hasOwnProperty("disabled")){ }}
    disabled="true"
    {{# } }}
    
    readonly="{{d.readonly??true}}"

    class="layui-input"
    uniqid="{{d.uniqid}}"
    />
</script>
        `);
    },

    render: function (module) {
        let _this = this;
        layui.use(["laytpl", "laydate"], function () {
            //唯一id
            module.data.uniqid = "jsonui-date-" + Number(Math.random().toString().substr(3, 10) + Date.now()).toString(36);
            layui.laytpl(layui.jquery("#tpl-date").html()).render(module.data, function (html) {
                module.elem.html(html);
                emitter.on('set-value-by', (values) => {
                    _this.methods.setValue(values, module);
                });
                //默认参数
                let param = jsonui.parser.json.merge({
                    elem: "input[uniqid=\"" + module.data.uniqid + "\""
                }, module.data);
                layui.laydate.render(param);
            });
        });
    },

    methods: {
        setValue(values, module) {
            if (module.data.name !== undefined) {
                module.elem.children('input:text').eq(0).val(values[module.data.name] ?? '');
            }
        }
    },

};

jsonui.parser.module.fieldSet = {

    init: function () {

        jsonui.parser.tool.createCss(`
.layui-elem-field,.layui-field-title{
    margin:0;
}
        `);
        jsonui.parser.tool.createTpl(`
<script type="text/html" id="tpl-fieldSet">
    {{# 
        let attr_class = "layui-elem-field";
        if(d.hasOwnProperty("attr") && !d.attr.hasOwnProperty("box")){
            attr_class += " layui-field-title";
        }
    }}
    <fieldset class="{{attr_class}}">
      <legend>{{d.attr.title}}</legend>
      <div class="layui-field-box">{{# if(d.hasOwnProperty("content")){ }}{{d.content}}{{# } }}</div>
    </fieldset>
</script>
        `);

    },

    render: function (module) {
        layui.use(["laytpl"], function () {
            layui.laytpl(layui.jquery("#tpl-fieldSet").html()).render(module.data, function (html) {
                module.elem.html(html);
                //更新elem
                module.elem = module.elem.children("fieldSet").children(".layui-field-box");

                //发现模块
                jsonui.parser.render.findModule({
                    data: module.data,
                    elem: module.elem
                });
            });
        });
    }

};

jsonui.parser.module.form = {


    init: function () {
        jsonui.parser.tool.createCss(`
.module-form{
    padding: 15px 15px 0 15px !important;
    display: table;
    width: calc(100% - 30px);
}
        `);
        jsonui.parser.tool.createTpl(`
<script type="text/html" id="tpl-form">
    <form class="layui-form module-form" 
    {{# 
        if(d.hasOwnProperty("attr") && d.attr.hasOwnProperty("styleType")){
    }}
        {{# 
            if(d.attr.styleType=="lime"){
        }}
            style="background: #fff;border: 0px solid #eee;"
        {{# 
            } 
        }}
    {{# 
        } 
    }}
    ></form>
</script>
        `);
    },

    render: function (module) {
        layui.use(["laytpl"], function () {
            layui.laytpl(layui.jquery("#tpl-form").html()).render(module.data, function (html) {
                module.elem.html(html);
                //更新elem
                module.elem = module.elem.children("form");
                //设置表单filter
                module.elem.attr("lay-filter", module.index);

                //发现模块
                jsonui.parser.render.findModule({
                    data: module.data,
                    elem: module.elem
                });
            });
        });
    },

    success: function (module) {
        layui.use(["form"], function () {
            //更新layui表单组件的渲染(也可以在每个模块中更新渲染，不过在此更新效率更高)
            //20231203发现在此处更新渲染会同时更新到下面的vue组件,vue组件中带checkbox时会被替换,暂时取消此处渲染，应该在每个组件进行局部渲染
            layui.form.render();

            //如果有表单默认值
            if (module.data.hasOwnProperty("attr") && module.data.attr.hasOwnProperty("values")) {
                //直接使用数据
                if (jsonui.parser.json.isObject(module.data.attr.values)) {
                    set_form_values(module.data.attr.values);
                }
                //api接口
                else {
                    let index = layer.load(1, {shade: [0.1, "#fff"]});
                    jsonui.parser.api.ajax({
                        url: module.data.attr.values,
                        success: function (result) {
                            layer.close(index);
                            set_form_values(result.result);
                        },
                        error: function(msg){
                            layer.close(index);
                            layer.msg(msg);
                        }
                    });
                }
            }
        });

        /**
         * 设置表单默认值
         * @param values
         */
        function set_form_values(values = []) {

            //设置表单默认数据
            //layui.form.val(module.index, values);

            //广播获取默认值事件
            emitter.emit('set-value-by',values);
            console.log('广播成功');



            //废弃(已用广播替代)
            //设置自定义模块的默认数据
            // let sub_modules_index = module.elem.find(".jsonui-module");
            // console.log(sub_modules_index);
            // layui.each(sub_modules_index, function (index, item) {
            //     console.log("设置默认值",index);
            //     //获取module
            //     let sub_module = jsonui.parser.tool.getModule(sub_modules_index.eq(index));
            //     console.log(sub_module);
            //     //调用setValue函数
            //     if (jsonui.parser.module[sub_module.name].hasOwnProperty("setValue")) {
            //         //console.log("5————————————————————————————————————————————————————————————————设置模块默认值：" + sub_module.name);
            //         jsonui.parser.module[sub_module.name].setValue(sub_module, values);
            //     }
            // });
        }
    }
};

/**
 * 间隔槽
 * @type {{init: jsonui.parser.module.hr.init, render: jsonui.parser.module.hr.render}}
 */
jsonui.parser.module.gap = {

    init: function () {

        jsonui.parser.tool.createCss(`
.jsonui-gap{
    display:table;
    width:100%;
}
        `);
        jsonui.parser.tool.createTpl(`
<script type="text/html" id="tpl-gap">
    {{# 
        let param_color = "#fff";
        if(d.hasOwnProperty("color")){
            param_color = d.color;
        }
        let param_height = "20px";
        if(d.hasOwnProperty("height")){
            param_height = d.height;
        }
    }}
    <div class="jsonui-gap" style="background:{{param_color}};height:{{param_height}};"></div>
</script>
        `);

    },

    render: function (module) {
        layui.use(["laytpl"], function () {
            layui.laytpl(layui.jquery("#tpl-gap").html()).render(module.data, function (html) {
                module.elem.html(html);
            });
        });
    }

};

jsonui.parser.module.hr = {

    init: function () {

        jsonui.parser.tool.createCss(`
.layui-border-white{
    border-color: #ffffff !important;
    color: #ffffff !important;
}
        `);
        jsonui.parser.tool.createTpl(`
<script type="text/html" id="tpl-hr">
    {{# 
        let attr_class = "";
        if(d.hasOwnProperty("color")){
            attr_class += "layui-border-"+d.color;
        }
    }}
    <hr class="{{attr_class}}">
</script>
        `);

    },

    render: function (module) {
        layui.use(["laytpl"], function () {
            layui.laytpl(layui.jquery("#tpl-hr").html()).render(module.data, function (html) {
                module.elem.html(html);
            });
        });
    }

};

jsonui.parser.module.html = {
    init:function (){
        jsonui.parser.tool.createCss(`

        `);
        jsonui.parser.tool.createTpl(`
<script type="text/html" id="tpl-html">
{{#
    if(d.hasOwnProperty("attr")){ 
        if(d.attr.hasOwnProperty("content")){
             
}}
{{-d.attr.content}}
{{#
        }
    }
}}
</script>
        `);
    },

    render: function (module) {
        layui.use(["laytpl"], function () {
            layui.laytpl(layui.jquery("#tpl-html").html()).render(module.data, function (html) {
                module.elem.html(html);

                //如果有接力棒
                if(module.data.hasOwnProperty("attr")){
                    if(module.data.attr.hasOwnProperty("baton")){
                        //更新elem
                        module.elem = module.elem.find(module.data.attr.baton);

                        //发现模块
                        jsonui.parser.render.findModule({
                            data: module.data,
                            elem: module.elem
                        });
                    }
                }
            });
        });
    }
};

jsonui.parser.module.image = {
    render: function (module) {
        module.elem.html("<img src=\"" + module.data.url + "\" style=\"" + module.data.style + "\" />");
    }
};

jsonui.parser.module.imageUpload = {

    init:function (){
        jsonui.parser.tool.createCss(`
/*图片上传*/
.layui-upload-drag{
    cursor:default;
}
.jsonui_image{
    width:196px;
}
.jsonui_image .j_upload{
    cursor: pointer;
}
.jsonui_image .j_view{
    background: #fcfcfc;
    height: 120px;
    overflow: hidden;
}
.jsonui_image .j_view_table{
    display:table;
    max-width:100%;
    height: 120px;
}
.jsonui_image .j_view_content{
    display: table-cell;
    vertical-align: middle;
}
.jsonui_image .j_view_content img{
    max-width:100%;
    max-height:100%;
}
.jsonui_image .j_fun{
    height:28px;
    text-align: left;
}
.jsonui_image .j_browse,.jsonui_image .j_delete{
    display: inline-block;
    margin-right:8px;
    line-height: 28px;
    text-align: center;
    font-size: 13px;
    cursor: pointer;
    color:#666;
}
.jsonui_image .j_browse:hover,.jsonui_image .j_delete:hover{
    color: #409eff;
}
        `);
        jsonui.parser.tool.createTpl(`
<script type="text/html" id="tpl-imageUpload">
    <div class="jsonui_image layui-upload-drag" name="{{d.name}}">
        <div class="j_upload">
            <i class="layui-icon"></i>
            <p>点击上传，或将文件拖拽到此处</p>
        </div>
    </div>
</script>
        `);
    },

    render: function (module) {
        let _this = this;
        layui.use(["laytpl"], function () {
            layui.laytpl(layui.jquery("#tpl-imageUpload").html()).render(module.data, function (html) {
                module.elem.html(html);
                emitter.on('set-value-by', (values) => {
                    _this.methods.setValue(values, module);
                });
            });
        });
    },
    success: function (module) {
        //拖拽上传
        layui.upload.render({
            elem: ".jsonui_image[name='"+module.data.name+"'] .j_upload",
            url: module.data.url,
            done: function (result) {
                layer.msg(result.msg);
                image_read(module.elem, result);
            }
        });
    },

    methods: {
        setValue(values,module) {
            if(values.hasOwnProperty(module.data.name)){
                image_read(module.elem, {result: {url: values[module.data.name]}});
            }
        }
    },
};



/**
 * 图片读取
 * @param module_elem
 * @param result
 */
function image_read(module_elem, result = {}) {
    let elem = module_elem.find(".jsonui_image");
    let name = elem.attr("name");
    //移除元素
    if (elem.children(".j_content").size()) {
        elem.children(".j_content").remove();
    }
    //创建元素
    elem.append("<div class=\"j_content\"><hr><div class=\"j_view\"><div class=\"j_view_table\"><div class=\"j_view_content\"><img src=\"" + result.result.url + "\"><input type=\"hidden\" name=\"" + name + "\" value=\"" + result.result.url + "\" /></div></div></div><div class=\"j_fun\"><div class=\"j_browse layui-icon layui-icon-picture\">浏览</div><div class=\"j_delete layui-icon layui-icon-delete\">移除</div></div></div>");
}

//浏览图片
layui.jquery(document).delegate(".jsonui_image .j_browse", 'click', function (e) {
    let url = layui.jquery(this).parent().siblings(".j_view").find("img").attr("src");
    layer.photos({
        photos: {
            "title": "浏览图片",
            "id": 1,
            "start": 0,
            "data": [
                {
                    "alt": "",
                    "pid": 1,
                    "src": url,
                    "thumb": url
                }
            ]
        },
        anim: 5
    });
});

//移除图片
layui.jquery(document).delegate(".jsonui_image .j_delete", 'click', function (e) {
    if (confirm("确定移除吗？")) {
        layui.jquery(this).parent().parent().remove();
    }
});

jsonui.parser.module.input = {

    init: function () {
        jsonui.parser.tool.createCss(`
.layui-input[disabled="true"]{
    background: #f6f6f6;
    cursor: not-allowed;
}
        `);
        jsonui.parser.tool.createTpl(`
<script type="text/html" id="tpl-input">
    <input
         type="text"
         name="{{d.name}}"
            {{# if(d.hasOwnProperty("placeholder")){ }}
                placeholder="{{d.placeholder}}"
    {{# } }}
    {{# if(d.hasOwnProperty("disabled") && d.disabled===true){ }}
    disabled="true"
    {{# } }}
    {{# if(d.hasOwnProperty("readonly")){ }}
    readonly="true"
    {{# } }}
    class="layui-input"
    />
</script>
        `);
    },

    render: function (module) {
        let _this = this;
        layui.use(["laytpl"], function () {
            layui.laytpl(layui.jquery("#tpl-input").html()).render(module.data, function (html) {
                module.elem.html(html);
                emitter.on('set-value-by', (values) => {
                    _this.methods.setValue(values, module);
                });
            });
        });
    },

    methods: {
        setValue(values, module) {
            if (module.data.name !== undefined) {
                module.elem.children('input:text').eq(0).val(values[module.data.name] ?? '');
            }
        }
    },

};

jsonui.parser.module.item = {
    init:function (){
        jsonui.parser.tool.createCss(`
.layui-form-item{
    margin-bottom: 0;
    padding-bottom: 15px;
}
.layui-form-label.j_required::before{
    display: inline-block;
    margin-right: 4px;
    color: #f5222d;
    font-size: 14px;
    font-family: SimSun,sans-serif;
    line-height: 1;
    content: "*";
}
.layui-form-label.j_colon::after {
    content: ":";
    position: relative;
    top: -.5px;
    margin: 0 0px 0 2px;
}
@media screen and (max-width:450px) {
 .layui-form-item .layui-form-label {
  white-space: break-spaces;
 }
}
@media screen and (min-width:903px) {
 .layui-form-item .layui-form-label {
  width:120px;
 }
 .layui-form-item .layui-input-block {
  margin-left:150px;
 }
}
        `);
        jsonui.parser.tool.createTpl(`
<script type="text/html" id="tpl-item">
    <div class="layui-form-item">
        {{# if(d.hasOwnProperty("attr")){ 
            let attr_class = "layui-form-label";
            if(d.attr.hasOwnProperty("required")){
                attr_class += " j_required";
            }
            if(d.attr.hasOwnProperty("colon")){
                attr_class += " j_colon";
            }
        }}
        <label class="{{attr_class}}">{{-d.attr.title}}</label>
        {{# } }}
        <div class="layui-input-block"></div>
    </div>
</script>
        `);
    },

    render: function (module) {
        layui.use(["laytpl"], function () {
            layui.laytpl(layui.jquery("#tpl-item").html()).render(module.data, function (html) {
                module.elem.html(html);
                //更新elem
                module.elem = module.elem.children(".layui-form-item").children(".layui-input-block");

                //发现模块
                jsonui.parser.render.findModule({
                    data: module.data,
                    elem: module.elem
                });
            });
        });
    }
};

jsonui.parser.module.linkage = {

    init: function () {
        jsonui.parser.tool.createCss(`

/*联动选择*/
.jsonui_linkage{

}
.jsonui_linkage .j_title{

}
.jsonui_linkage .j_title input{
    cursor: pointer;
}
.jsonui_linkage .j_select{
    display:none;
    position: absolute;
    z-index: 999;
    width: 400px;
    margin-top:10px;
    border: 1px solid #eee;
    border-radius: 4px;
    background-color: #fff;
    -webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.jsonui_linkage .j_select[select="1"]{
    display:block;
}
.jsonui_linkage[history_value] .j_select[select="1"]{
    display:none;
}
.jsonui_linkage .j_select_tab{
    min-height: 42px;
    background: #f0f0f0;
    display:table;
    width:100%;
    border-radius: 4px 4px 0 0;
}
.jsonui_linkage .j_select_tab span{
    display: block;
    float: left;
    line-height: 42px;
    padding: 0 20px;
    border-right: 1px solid #eee;
    cursor: pointer;
}
.jsonui_linkage .j_select_tab span.on{
    height: 42px;
    background: #fff;
    color: #0052D9;
}
.jsonui_linkage .j_select_tab span.on:first-child{
    border-radius: 4px 0 0 0;
}
.jsonui_linkage .j_select_content{
    max-height: 135px;
    margin-top:-1px;
    border-top: 1px solid #eee;
    overflow: auto;
}
.jsonui_linkage .j_select_content li{
    padding: 10px;
}
.jsonui_linkage .j_select_content li .j_load,.jsonui_linkage .j_select_content li .j_error{
    display:none;
    min-height: 115px;
}
.jsonui_linkage .j_select_content li .j_load{
    background: url("../../layui-v2.6.8/layui/css/modules/layer/default/loading-2.gif") no-repeat center center;
}
.jsonui_linkage .j_select_content li .j_error{
    line-height: 20px;
    color:#ccc;
}
.jsonui_linkage .j_select_content li .j_values{
    display:none;
}
.jsonui_linkage .j_select_content li .j_values .option{
    display: inline-block;
    color: #4D4D4D;
    padding: 0 10px;
    line-height: 30px;
    border-radius: 4px;
    cursor: pointer;
}
.jsonui_linkage .j_select_content li .j_values .option.on{
    background: #0052D9;
    color: #fff;
}
.jsonui_linkage .j_select_content li[status="0"] .j_load{
    display:block;
}
.jsonui_linkage .j_select_content li[status="1"] .j_values{
    display:block;
}
.jsonui_linkage .j_select_content li[status="2"] .j_error{
    display:block;
}
.jsonui_linkage .j_select_fun{
    border-top: 1px solid #eee;
    height:40px;
    padding:0 15px;
    text-align: right;
}
.jsonui_linkage .j_cancel,.jsonui_linkage .j_confirm{
    display:inline-block;
    cursor: pointer;
    padding:4px 15px;
    line-height: 20px;
    margin:6px 0 0 7px;
    border-radius: 2px;
}
.jsonui_linkage .j_cancel{
    border: 1px solid #eee;
    padding:3px 14px;
}
.jsonui_linkage .j_confirm{
    background: #0052D9;
    color: #fff;
}
        `);
        jsonui.parser.tool.createTpl(`
<script type="text/html" id="tpl-linkage">
    <div class="jsonui_linkage" url="{{d.url}}" min_level="{{d.minLevel}}" max_level="{{d.maxLevel}}">
        <div class="j_title">
            <input type="text" placeholder="请选择" readonly="true" class="layui-input" />
            <input type="hidden" name="{{d.name}}" />
        </div>
    </div>
</script>
        `);
    },

    render: function (module) {
        let _this = this;
        layui.use(["laytpl"], function () {
            layui.laytpl(layui.jquery("#tpl-linkage").html()).render(module.data, function (html) {
                module.elem.html(html);
                emitter.on('set-value-by', (values) => {
                    _this.methods.setValue(values, module);
                });
            });
        });
    },

    methods: {
        setValue(values, module) {
            if (module.data.name !== undefined) {
                if(values[module.data.name]!==undefined){
                    module.elem.find('input:text').eq(0).val('加载中');
                    module.elem.find('input:hidden').eq(0).val(values[module.data.name] ?? '');
                    linkage_read(module.elem, values[module.data.name ?? '']);
                }
            }
        }
    },
};


/**
 * 联动菜单读取
 * @param module_elem
 * @param value
 */
function linkage_read(module_elem, value) {
    let elem = module_elem.find(".jsonui_linkage");
    elem.attr("history_value", value);
    elem.find("input[type=\"text\"]").trigger("focus");
}


//展开联动选择
layui.jquery(document).delegate(".jsonui_linkage .j_title input", 'focus', function (e) {
    layui.jquery(this).blur();
    let select = layui.jquery(this).parent().parent().children(".j_select").attr("select");
    if (!select) {
        let elem = layui.jquery(this).parent().parent();
        //加载面板
        elem = load_panel(elem);
        //展开并获取选项卡数量
        let tab_size = elem.children(".j_select").attr("select", "1").children(".j_select_tab").find("span").size();
        if (!tab_size) {

            //加载选项列表
            load_select(elem, 0);
        }
    }
    return false;

    //加载面板
    function load_panel(elem) {
        if (!elem.children(".j_select").size()) {
            elem.append("<div class=\"j_select layui-anim layui-anim-upbit\"><div class=\"j_select_tab\"></div><div class=\"j_select_content\"></div><div class=\"j_select_fun\"><div class=\"j_cancel\">取消</div><div class=\"j_confirm\">确定</div></div></div>");
            return elem.children().parent();
        }
        return elem;
    }
});

//关闭联动选择
layui.jquery(document).mousedown(function (e) {
    var _con = layui.jquery('.j_select[select="1"]');
    if (!_con.is(e.target) && _con.has(e.target).length === 0) {
        layui.jquery('.j_select[select="1"]').removeAttr("select");
    }
});

//选择选项
layui.jquery(document).delegate(".jsonui_linkage .j_select_content li .option", 'click', function (e) {
    let parent_id = layui.jquery(this).parent().parent().attr("parent_id");
    let id = layui.jquery(this).attr("data_id");
    let title = layui.jquery(this).html();
    let tab_elem = layui.jquery(this).parent().parent().parent().parent().children(".j_select_tab").find(".on");
    let tab_index = tab_elem.index();
    let tab_size = tab_elem.parent().children().size();
    //设置选项
    layui.jquery(this).addClass("on").siblings().removeClass("on");
    //设置当前选项卡值
    tab_elem.html(title).attr("data_id", id);
    //将当前选项卡后面的选项卡删除
    for (let i = tab_size; i > 0; i--) {
        if (i > tab_index) {
            tab_elem.parent().children().eq(i).remove();
        } else {
            break;
        }
    }
    //加载选项列表
    load_select(layui.jquery(this).parent().parent().parent().parent().parent(), id);
});

//点击选项卡
layui.jquery(document).delegate(".jsonui_linkage .j_select_tab span", 'click', function (e) {
    let parent_id = layui.jquery(this).attr("parent_id");
    //设置选项卡
    layui.jquery(this).addClass("on").siblings().removeClass("on");
    //设置选项
    layui.jquery(this).parent().siblings(".j_select_content").children("li").css("display", "none").parent().children("li[parent_id=\"" + parent_id + "\"]").css("display", "block");
});

//点击确定
layui.jquery(document).delegate(".jsonui_linkage .j_confirm", 'click', function (e) {
    let tab_elem = layui.jquery(this).parent().parent().children(".j_select_tab").children();
    let text_elem = layui.jquery(this).parent().parent().parent().children(".j_title").children("input[type=\"text\"]");
    let hidden_elem = text_elem.siblings("input[type=\"hidden\"]");
    let size = tab_elem.size();
    let value = "";
    let title = ""
    for (let i = 0; i < size; i++) {
        let item_id = tab_elem.eq(i).attr("data_id");
        let item_title = tab_elem.eq(i).html();
        if (item_id) {
            value += (value) ? "," + item_id : item_id;
            title += (title) ? "/" + item_title : item_title;
        }
    }
    text_elem.val(title);
    hidden_elem.val(value);
    layui.jquery(this).parent().parent().removeAttr("select");
});

//点击取消
layui.jquery(document).delegate(".jsonui_linkage .j_cancel", 'click', function (e) {
    if (confirm("确定取消吗？")) {
        let select_elem = layui.jquery(this).parent().parent();
        let text_elem = select_elem.siblings(".j_title").children("input[type=\"text\"]");
        let hidden_elem = text_elem.siblings("input[type=\"hidden\"]");
        text_elem.val("");
        hidden_elem.val("");
        select_elem.remove();
    }
});

//加载选项列表
function load_select(elem, parent_id = 0) {
    //alert(parent_id);

    let url = elem.attr("url");
    let min_level = elem.attr("min_level");
    let max_level = elem.attr("max_level");
    let elem_tab = elem.children(".j_select").children(".j_select_tab");
    let elem_content = elem.children(".j_select").children(".j_select_content");
    let elem_confirm = elem.children(".j_select").find(".j_confirm");
    let level = elem_tab.children().size();

    //到达最小等级
    if (level >= min_level) {
        elem_confirm.css("display", "inline-block");
    } else {
        elem_confirm.css("display", "none");
    }
    //到达最大等级
    if (level == max_level) {
        elem.removeAttr("history_value");
        elem_confirm.click();
        return false;
    }

    //取消选项卡选项
    elem_tab.children("span").removeClass("on");
    //创建选项卡
    elem_tab.append("<span class=\"on\" parent_id=\"" + parent_id + "\">请选择</span>");
    //隐藏所有选项
    elem_content.children("li").css("display", "none");

    //判断是否已加载过选项
    let is_li = elem_content.children("li[parent_id=\"" + parent_id + "\"]").size();
    if (is_li) {
        elem_content.children("li[parent_id=\"" + parent_id + "\"]").css("display", "block");
    }
    //没有加载过
    else {
        //创建选项
        elem_content.append("<li parent_id=\"" + parent_id + "\"><div class=\"j_load\"></div><div class=\"j_error\"></div><div class=\"j_values\"></div></li>");
        //当前li选项
        let li_elem = elem_content.children("li[parent_id=\"" + parent_id + "\"]");
        //更新状态
        li_elem.attr("status", 0);
        //拉取选项
        jsonui.parser.api.ajax({
            url: url,
            method: "GET",
            data: {
                parent_id: parent_id
            },
            success: function (result) {
                //有数据
                if (result.result.data.length) {
                    //拉取成功
                    li_elem.attr("status", 1);
                    //渲染选项值
                    for (let index in result.result.data) {
                        let item = result.result.data[index];
                        //title兼容name方案
                        if (!item.hasOwnProperty("title") && item.hasOwnProperty("name")) {
                            item.title = item.name;
                        }
                        li_elem.children(".j_values").append("<div class=\"option\" data_id=\"" + item.id + "\">" + item.title + "</div>");
                    }
                    //执行读取过程
                    {
                        let history_value = elem.attr("history_value");
                        if (history_value) {
                            //从history_value获取本次要点击的id,并更新history_value
                            history_value = history_value.split(",");
                            let data_id = history_value[0];
                            delete history_value[0];
                            let new_history_value = [];
                            let key = 0;
                            for (let i in history_value) {
                                new_history_value[key] = history_value[i];
                                key++;
                            }
                            history_value = new_history_value.toString();
                            //对本次要点击的id进行操作
                            let option_elem = li_elem.children(".j_values").children(".option[data_id=\"" + data_id + "\"]");
                            if (option_elem.size()) {
                                elem.attr("history_value", history_value);
                                option_elem.click();
                                //如果选完了
                                if (!history_value) {
                                    elem.removeAttr("history_value");
                                    elem_confirm.click();
                                }
                            }
                            //如果找不到id
                            else {
                                elem.removeAttr("history_value");
                                elem_confirm.click();
                            }
                        }
                    }
                }
                //无数据
                else {
                    li_elem.attr("status", 2).find(".j_error").html("无数据");
                }
            },
            error: function (msg) {
                //拉取失败
                li_elem.attr("status", 2).find(".j_error").html(msg);
            }
        });
    }
}

jsonui.parser.module.menu = {

    init:function (){
        jsonui.parser.tool.createCss(`
.layui-menu li{
    width:100%;
    margin:0;
}
.layui-menu{
    margin:0;
}
        `);
        jsonui.parser.tool.createTpl(`
<script type="text/html" id="tpl-menu">
    <ul class="layui-menu">
        {{# layui.each(d, function(index, item){ }}
            {{# if(item.parentId==0){ }}
                {{# if(item.children===false){ }}
                    <li index="{{index}}">
                        <div class="layui-menu-body-title">
                            {{item.title}}
                        </div>
                    </li>
                    <li class="layui-menu-item-divider"></li>
                {{# }else{ }}
                    <li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}">
                        <div class="layui-menu-body-title">
                            {{item.title}}<i class="layui-icon layui-icon-up"></i>
                        </div>
                        <ul>
                            {{# layui.each(d, function(index1, item1){ }}
                                {{# if(item1.parentId==item.id){ }}
                                <li index="{{index1}}">
                                    <div class="layui-menu-body-title">
                                        {{item1.title}}
                                    </div>
                                </li>
                                {{# } }}
                            {{# }); }}
                        </ul>
                    </li>
                    <li class="layui-menu-item-divider"></li>
                {{# } }}
            {{# } }}
        {{# }); }}
    </ul>
</script>
        `);


        //点击菜单
        layui.jquery(document).delegate(".jsonui-module>.layui-menu li", 'click', function (e) {
            //阻止冒泡
            e.stopPropagation();
            //获取菜单index
            let index = layui.jquery(this).attr("index");
            if (!index) return false;
            //获取module
            let module = jsonui.parser.tool.getModule(layui.jquery(this));
            //打开一个菜单
            jsonui.parser.open.init(module.data[index].window);
        });
    },

    render: function (module) {
        //下级缺省值处理（由于需要break，故此处不适用layui.each）
        for (let index in module.data) {
            let item = module.data[index];
            //缺省id
            item.id = (item.hasOwnProperty("id")) ? item.id : -1;
            //下级
            item["children"] = false;
            for (let index1 in module.data) {
                let item1 = module.data[index1];
                //缺省parentId
                item1.parentId = (item1.hasOwnProperty("parentId")) ? item1.parentId : 0;
                //如果有下级
                if (item.id == item1.parentId) {
                    item["children"] = true;
                    break;
                }
            }
        }

        layui.use(["laytpl"], function () {
            layui.laytpl(layui.jquery("#tpl-menu").html()).render(module.data, function (html) {
                module.elem.html(html);
            });
        });
    }
};

jsonui.parser.module.part = {

    init: function () {

        jsonui.parser.tool.createCss(`
.part{
    padding:5px 0;
    line-height:24px;
}
        `);
        jsonui.parser.tool.createTpl(`
<script type="text/html" id="tpl-part">
    <div class="part">{{-d.content}}</div>
</script>
        `);

    },

    render: function (module) {
        layui.use(["laytpl"], function () {
            layui.laytpl(layui.jquery("#tpl-part").html()).render(module.data, function (html) {
                module.elem.html(html);
            });
        });
    }

};

jsonui.parser.module.point = {

    init: function () {

        jsonui.parser.tool.createCss(`
.point{}
.point a{
    position: absolute;
    color: #2d8cf0;
    display:none;
}
.point:hover a{display: inline-block;}
.point[h="1"],.point[h="1"] a{font-size:24px;height:26px;line-height:26px;}
.point[h="2"],.point[h="2"] a{font-size:20px;height:22px;line-height:22px;}
.point[h="3"],.point[h="3"] a{font-size:18px;height:20px;line-height:20px;}
.point[h="4"],.point[h="4"] a{font-size:16px;height:18px;line-height:18px;}
.point[h="5"],.point[h="5"] a{font-size:14px;height:16px;line-height:16px;}
.point[h="6"],.point[h="6"] a{font-size:12px;height:14px;line-height:14px;}
.point[h="1"] a{width:26px;margin-left:-26px;}
.point[h="2"] a{width:22px;margin-left:-22px;}
.point[h="3"] a{width:20px;margin-left:-20px;}
.point[h="4"] a{width:18px;margin-left:-18px;}
.point[h="5"] a{width:16px;margin-left:-16px;}
.point[h="6"] a{width:14px;margin-left:-14px;}
        `);
        jsonui.parser.tool.createTpl(`
<script type="text/html" id="tpl-point">
    {{# 
        let point_span_style = "";
        if(d.hasOwnProperty("align")){
            point_span_style += "text-align: "+d.align+";";
        }
        if(d.hasOwnProperty("padding")){
            point_span_style += "padding: "+d.padding+";";
        }
        else{
            point_span_style += "padding: 20px 0;";
        }
    }}
    <div class="point" style="{{point_span_style}}" h="{{d.h}}"><a href="#{{d.name}}" id="{{d.name}}">#</a>{{d.name}}</div>
</script>
        `);

    },

    render: function (module) {
        layui.use(["laytpl"], function () {
            layui.laytpl(layui.jquery("#tpl-point").html()).render(module.data, function (html) {
                module.elem.html(html);
            });
        });
    }

};

/**
 * jsonui-解析器-模块-打印
 * @type {{render: jsonui.parser.module.print.render}}
 */
jsonui.parser.module.print = {
    render: function (module) {
        module.elem.html(module.data);
    }
};

jsonui.parser.module.radio = {

    init:function (){
        jsonui.parser.tool.createCss(`

        `);
        jsonui.parser.tool.createTpl(`
<script type="text/html" id="tpl-radio">
    {{# layui.each(d.options, function(index, item){ }}
    <input 
        type="radio" 
        name="{{d.name}}" 
        value="{{item.value}}" 
        title="{{item.label?item.label:(item.title?item.title:'')}}" 
        {{# if(item.hasOwnProperty("disabled")){ }}disabled="true"{{# } }} 
        >
    {{# }); }}
</script>
        `);
    },

    render: function (module) {
        let _this = this;
        layui.use(["laytpl"], function () {
            layui.laytpl(layui.jquery("#tpl-radio").html()).render(module.data, function (html) {
                module.elem.html(html);
                emitter.on('set-value-by', (values) => {
                    _this.methods.setValue(values, module);
                });
            });
        });
    },

    methods: {
        setValue(values, module) {
            if (module.data.name !== undefined) {
                module.elem.children("input:radio[value="+(values[module.data.name] ?? '')+"]").attr('checked','true');
                layui.form.render('radio');
            }
        }
    },

};

jsonui.parser.module.select = {

    init:function (){
        jsonui.parser.tool.createCss(`

        `);
        jsonui.parser.tool.createTpl(`
<script type="text/html" id="tpl-select">
    <select name="{{d.name}}" {{# if(d.hasOwnProperty("disabled")){ }}disabled="true"{{# } }}>
        <option value="">请选择</option>
        {{# layui.each(d.options, function(index, item){ }}
        <option value="{{item.value}}" {{# if(item.hasOwnProperty("disabled")){ }}disabled="true"{{# } }} >{{item.label?item.label:(item.title?item.title:'')}}</option>
        {{# }); }}
    </select>
</script>
        `);
    },

    render: function (module) {
        let _this = this;
        layui.use(["laytpl"], function () {
            layui.laytpl(layui.jquery("#tpl-select").html()).render(module.data, function (html) {
                module.elem.html(html);
                emitter.on('set-value-by', (values) => {
                    _this.methods.setValue(values, module);
                });
            });
        });
    },

    methods: {
        setValue(values, module) {
            if (module.data.name !== undefined) {
                module.elem.children('select').eq(0).val(values[module.data.name] ?? '');
                layui.form.render('select');
            }
        }
    },

};

jsonui.parser.module.table = {

    init: function () {
        jsonui.parser.tool.createCss(`
.jsonui-module[name="table"]{background:#fff;padding:15px 15px;margin:15px 0 0 0;}

.layui-table-view{border:none;margin:0;}
.layui-table-view .layui-table-tool{padding:0;border:none;margin:0;}
.layui-table-view .layui-table-tool .layui-table-tool-self{right:0;}
.layui-table-view .layui-table-box{border: 1px solid #eee;}
.layui-table-view .layui-table-page{border: none;}
.layui-table-view .layui-table-column{padding: 16px 0 0 0;}

.layui-table-tips-main{overflow-y: auto;}

.layui-btn-tool{border: 1px solid #eee;padding: 3px 12px;display: inline-block;cursor: pointer;line-height: 20px;margin: 0px 7px 0 0;border-radius: 2px;}
.layui-table-btn-lime{display: inline-block;margin: 0 0 0 0;border-radius: 3px;padding: 0 10px;min-width:80px;height: 32px;line-height: 30px;text-align: center;font-size: 15px;background:#F5F7FA;color: #3D485D;}
.layui-table-btn-lime[lay-event="0"]{background: #fff;color: #0052D9;border: 1px solid #0052D9;}
.layui-table-btn-lime:hover{color: #fff;background: #0052D9;}
.layui-table-btn-lime-tool{height:24px;line-height:22px;font-size:13px;padding:0 10px;min-width:50px;}
.layui-table-btn-lime-tool[status="0"]{display:none;}

.layui-table-checked{background:#eff4f8;}
.layui-table-checked.layui-table-hover{background:#d9ecff;}
.layui-table-checked.layui-table-click{background:#eff4f8;}

.layui-laypage-curr em{color: #fff !important;}
.layui-laypage-em{background-image: linear-gradient(to bottom,#0052D9, #0052D9);}
.layui-form-checked[lay-skin=primary] i {border-color: #006eff!important;background-color: #006eff;color: #fff;}

.table_car_name{display:flex;align-items:center;}
.table_car_name .j_img{padding:0 4px 0 0;}
.table_car_name .j_img img{width:24px;height:24px;}
.table_car_name .j_name{}

.table_user{}
.table_user .j_title{cursor:pointer}
.table_user .j_content{display:none;align-items: center;position: fixed;left: 0;top: 0;z-index: 9999;border: 1px solid #f0f0f0;border-radius: 10px;width:300px;height:100px;background:#fff;}
.table_user:hover .j_content{display:flex;}
.table_user .j_content .tx{padding:0 0 0 15px;}
.table_user .j_content .tx img{width:70px;height:70px;border-radius: 10px;}

        `);
        jsonui.parser.tool.createTpl(`
<script type="text/html" id="tpl-table">
    <table class="layui-hide"></table>
</script>

<!--数据表格-模块工具栏模板-->
<script type="text/html" id="table_toolbar_tpl">
    {{#
        let toolbarData = {};
        if(!d.hasOwnProperty("LAY_COL")){
            toolbarData = jsonui.parser.json.merge({},d.toolbarData);
        }
        else{
            if(d.LAY_COL.hasOwnProperty("toolbarData")){
                toolbarData = d.LAY_COL.toolbarData;
            }
            if(d.hasOwnProperty("toolbarData")){
                toolbarData = d.toolbarData;
            }
        }
        layui.each(toolbarData, function(index, item){
    }}
        {{# if(index=="menu"){}}
            <!--菜单-->
            {{# layui.each(item, function(index1, item1){ }}
            
                {{# if(item1.hasOwnProperty("title")){ }}
                    {{# if(!d.hasOwnProperty("LAY_COL")){ }}
                        <a 
                            class="layui-btn layui-table-btn-lime {{# if(item1.hasOwnProperty("disabled")){ }}layui-btn-disabled{{# } }}" 
                            lay-event="{{index1}}" 
                            {{# if(item1.hasOwnProperty("disabled")){ }}
                                disabled="true"
                            {{# } }}
                            >{{item1.title}}</a>
                    {{# }else{ }}
                        <a 
                            class="layui-btn-tool layui-table-btn-lime layui-table-btn-lime-tool {{# if(item1.hasOwnProperty("disabled")){ }}layui-btn-disabled{{# } }}" 
                            lay-event="{{index1}}" 
                            {{# if(item1.hasOwnProperty("disabled")){ }}
                                disabled="true"
                            {{# } }}
                            
                            {{# if(d.toolbar===undefined || d.toolbar[index1]===undefined){ }}
                                status="1"
                            {{# }else{ }}
                                status="{{d.toolbar[index1]}}"
                            {{# } }}
                            
                            >{{item1.title}}</a>
                    {{# } }}
                {{# } }}
            {{# }); }}
        {{# } }}

    {{# }); }}
</script>

<!--数据表格-状态模板-->
<script type="text/html" id="table_status_tpl">
    {{#
    let value = d[d.LAY_COL.field];
    }}
    {{# layui.each(d.LAY_COL.templetData.rule, function(index, item){ }}
    {{# if(item.code==value){ }}
    <span style="{{item.style}}">{{item.title}}</span>
    {{# } }}
    {{# }); }}
</script>

<!--数据表格-用户模板-->
<script type="text/html" id="table_user_tpl">
    {{#
    let value = d[d.LAY_COL.field];
    }}
    {{# if(value){ }}
    <div class="table_user">
        <div class="j_title">
            <span>{{value.nickname}}</span>
        </div>
        <div class="j_content">
            <div class="tx">
                <img src="{{value.head_portrait}}" />
            </div>
        </div>
    </div>
    {{# }else{ }}
    无
    {{# } }}
</script>

<!--数据表格-车辆名称模板-->
<script type="text/html" id="table_car_name_tpl">
    {{#
    let value = d[d.LAY_COL.field];
    }}
    {{# if(value){ }}
    <div class="table_car_name">
        <div class="j_img">
            <img src=\"{{d.iconLink}}\">
        </div>
        <div class="j_name">
            {{value}}
        </div>
    </div>
    {{# } }}
</script>
        `);
    },

    render: function (module) {
        layui.use(["laytpl"], function () {
            layui.laytpl(layui.jquery("#tpl-table").html()).render({}, function (html) {
                //生成表格容器
                module.elem.html(html);
                module.elem.children("table").attr("lay-filter", module.index).attr("id", module.data.elem);
                //移除空表头
                if (module.data.cols !== undefined && module.data.cols[0] !== undefined) {
                    let new_cols_0 = [];
                    for (let item of module.data.cols[0]) {
                        if (jsonui.parser.json.count(item)) {
                            new_cols_0.push(item);
                        }
                    }
                    module.data.cols[0] = new_cols_0;
                }
                //创建表格
                table_display_create(module.data, module.index);
            });
        });
        layui.jquery(document).on('mouseenter', '.table_user', function () {
            let zb = layui.jquery(this).offset();
            zb.top += layui.jquery(this).find('.j_title').height();
            layui.jquery(this).find('.j_content').attr('style', 'left:' + zb['left'] + 'px;top:' + zb['top'] + 'px');
        });
    }
};


/**
 * 创建数据表格的参数，每次创建表格时会将参数存在这里，便于重载表格。
 * @type {{}}
 */
var table_display_param = {};

/**
 * 创建数据表格
 * @param param
 * @param module_index
 */
function table_display_create(param, module_index) {

    //合并参数
    param = jsonui.parser.json.merge({
        parseData: function (result) {
            return {
                code: result.code,
                msg: result.msg,
                count: result.result.total,
                data: result.result.data
            };
        },
        moduleIndex: module_index
    }, param);

    //单独引用elem
    let elem = param.elem;

    //存储到全局变量，用于本窗口或其他窗口调用表格重载
    table_display_param[elem] = param;

    //删除唯一内存
    param = jsonui.parser.json.merge({}, param);

    //加强元素ID
    param["elem"] = "#" + elem;

    layui.use(["table"], function () {
        //数据表格
        let table = layui.table;

        //载入表格
        table.render(param);

        //监听工具栏
        table.on("toolbar(" + module_index + ")", function (obj) {

            //屏蔽右上角菜单
            if (isNaN(obj.event)) {
                return false;
            }

            //取得菜单
            let this_window = {};
            for (let index in obj.config.toolbarData.menu) {
                if (index == obj.event) {
                    this_window = obj.config.toolbarData.menu[index].window;
                }
            }
            //删除唯一内存
            this_window = JSON.parse(JSON.stringify(this_window));

            //表格选项值
            let tableCheck = "";
            //如果需要表格选项
            if (this_window.hasOwnProperty("tableCheck")) {
                //取得选中项
                let checkStatus = table.checkStatus(obj.config.id);
                for (let index in checkStatus.data) {
                    let item = checkStatus.data[index];
                    tableCheck += (tableCheck) ? "," : "";
                    tableCheck += item[this_window.tableCheck];
                }
                //如果表格选项值为必选
                if (this_window.hasOwnProperty("tableCheckRequired")) {
                    if (this_window.tableCheckRequired === true && tableCheck === "") {
                        layer.msg('请选择数据');
                        return false;
                    }
                }
                //如果限制选择数量
                if (this_window.tableCheckLimit !== undefined) {
                    if (checkStatus.data.length > this_window.tableCheckLimit) {
                        layer.msg('操作本菜单最多一次选择' + this_window.tableCheckLimit + '条数据');
                        return false;
                    }
                }
            }

            //处理url(暂时先用固定传参形式实现，后面改成变量解析形式)
            this_window.content += "?check=" + tableCheck;
            table_open_window(this_window, obj.config.id);
        });

        //监听工具条
        table.on("tool(" + module_index + ")", function (obj, obj_table = table_display_param[elem]) {

            //获取工具条数据
            let toolbarData = {};
            //优先使用数据表格接口中的
            if (obj.data.hasOwnProperty("toolbarData")) {
                toolbarData = obj.data.toolbarData;
            }
            //从初始工具条中获取
            else {
                let key = layui.jquery
                (obj.tr[1]).children("td").attr("data-key").split("-");
                for (let index in obj_table.cols) {
                    if (index != key[1]) {
                        continue;
                    }
                    let item = obj_table.cols[index];
                    for (let index1 in item) {
                        if (index1 != key[2]) {
                            continue;
                        }
                        let item1 = item[index1];
                        toolbarData = item1.toolbarData;
                        break;
                    }
                }
            }

            //取得菜单
            let this_window = {};
            for (let index in toolbarData.menu) {
                if (index == obj.event) {
                    this_window = toolbarData.menu[index].window;
                }
            }
            //删除唯一内存
            this_window = JSON.parse(JSON.stringify(this_window));

            //表格选项值
            let tableCheck = "";
            //如果需要表格选项
            if (this_window.hasOwnProperty("tableCheck")) {
                tableCheck = obj.data[this_window.tableCheck];
            }
            //处理url
            this_window.content += "?check=" + tableCheck;

            table_open_window(this_window, obj_table.elem);
        });

    });
}

/**
 * 表格打开窗口
 * @param this_window
 * @param elem
 */
function table_open_window(this_window = {}, elem = "") {
    if (this_window.target === 'api') {
        //调用API接口
        let index = layer.load(1, {shade: [0.1, "#fff"]});
        jsonui.parser.api.ajax({
            url: this_window.content,
            success: function (result) {
                layer.close(index);
                ElementPlus.ElMessage({
                    message: result.msg,
                    type: 'success',
                })
                jsonui.parser.event.action.tableRender(0, {elem: elem});
            },
            error: function (msg) {
                layer.close(index);
                ElementPlus.ElMessage({
                    message: msg,
                    type: 'warning',
                })
            }
        });
    } else if (this_window.target === 'download') {
        //下载文件
        let a = document.createElement('a');
        a.href = this_window.content;
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    } else {
        //打开页面
        jsonui.parser.open.init(this_window);
    }
}

/**
 * 数据表格重载
 * @param elem
 */
function table_display_render(elem = "") {
    //找到elem指定的数据表格
    layui.each(table_display_param, function (index, item) {
        if (item.elem == elem) {
            layui.table.reload(elem, {});
        }
    });
}

jsonui.parser.module.textarea = {
    init:function (){
        jsonui.parser.tool.createCss(`
.layui-textarea[disabled="true"]{
    background: #f6f6f6;
    cursor: not-allowed;
}
        `);
        jsonui.parser.tool.createTpl(`
<script type="text/html" id="tpl-textarea">

    <textarea
            class="layui-textarea"
            name="{{d.name}}"
            {{# if(d.hasOwnProperty("placeholder")){ }}
    placeholder="{{d.placeholder}}"
    {{# } }}
    {{# if(d.hasOwnProperty("disabled")){ }}
    disabled="true"
    {{# } }}
    {{# if(d.hasOwnProperty("readonly")){ }}
    readonly="true"
    {{# } }}
    {{# if(d.hasOwnProperty("style")){ }}
    style="{{d.style}}"
    {{# } }}
    ></textarea>
</script>
        `);
    },
    render: function (module) {
        let _this = this;
        layui.use(["laytpl"], function () {
            layui.laytpl(layui.jquery("#tpl-textarea").html()).render(module.data, function (html) {
                module.elem.html(html);
                emitter.on('set-value-by', (values) => {
                    _this.methods.setValue(values, module);
                });
            });
        });
    },

    methods: {
        setValue(values, module) {
            if (module.data.name !== undefined) {
                module.elem.children('textarea').eq(0).val(values[module.data.name] ?? '');
            }
        }
    },
};

jsonui.parser.module.tips = {

    init: function () {

        jsonui.parser.tool.createCss(`
/*
normal
warning
success
error
*/
.jsonui-tips{
    margin-top:5px;
    padding: 6px 15px;
    line-height:20px;
    color: rgba(0,0,0,.65);
    font-size: 14px;
    border-radius: 2px;
    border: 1px solid #eee;
    background-color: #fdfdfd;
}
.jsonui-tips-warning{
    background-color: #fffbe6;
    border: 1px solid #ffe58f;
}
.jsonui-tips-success{
    background-color: #F0FBF3;
    border: 1px solid #5FB878;
}
.jsonui-tips-error{
    color:#f5222d;
    border-color: #f5222d;
    background: #fff1f0;
}
.jsonui-tips.layui-icon::before{
    padding-right:2px;
}
        `);
        jsonui.parser.tool.createTpl(`
<script type="text/html" id="tpl-tips">
    {{# 
        let attr_class = "jsonui-tips";
        if(d.hasOwnProperty("attr") && d.attr.hasOwnProperty("type")){
            attr_class += " jsonui-tips-"+d.attr.type;
        }
        if(d.hasOwnProperty("attr") && d.attr.hasOwnProperty("icon")){
            attr_class += " layui-icon layui-icon-"+d.attr.icon;
        }
    }}
    <div class="{{attr_class}}">{{# if(d.hasOwnProperty("content")){ }}{{-d.content}}{{# } }}</div>
</script>
        `);

    },

    render: function (module) {
        layui.use(["laytpl"], function () {
            layui.laytpl(layui.jquery("#tpl-tips").html()).render(module.data, function (html) {
                module.elem.html(html);
                //更新elem
                module.elem = module.elem.children(".jsonui-tips");
            });
        });
    }


};

jsonui.parser.module.title = {
    render: function (module) {
        document.title = module.data;
    }
};

jsonui.parser.module.vue = {
    init: function () {
        jsonui.parser.tool.createCss(`

        `);
        jsonui.parser.tool.createTpl(`
<script type="text/html" id="tpl-vue">
  <div id="{{d.el}}">
    {{# 
        if(true){
    }}
        <root json-string="{{jsonui.parser.module.vue.tool.enAttrCode(d)}}"></root>
    {{# 
        } 
    }}
  </div>
</script>
        `);
    },

    render: function (module) {
        layui.use(["laytpl"], function () {
            module.data.el = "app" + jsonui.parser.tool.getRand(12);
            layui.laytpl(layui.jquery("#tpl-vue").html()).render(module.data, function (html) {
                module.elem.html(html);
                const App = {
                    data() {
                        return {};
                    },
                    mounted() {

                    },
                    methods: {}
                };
                const app = Vue.createApp(App);
                app.use(ElementPlus);
                //icon
                for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
                    app.component(key, component)
                }

                app.component("el-alert1", {
    template: `
<el-alert v-bind="json.attr" />
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {

        }
    },
    mounted() {

    },
    methods: {

    }
});

app.component("el-autocomplete1", {
    template: `
<el-autocomplete v-model="value" v-bind="json.attr"></el-autocomplete>
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {
            value: "",
        }
    },
    mounted() {

    },
    methods: {

    }
});

app.component("el-backtop1", {
    template: `
<el-backtop v-bind="json.attr"></el-backtop>
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {

        }
    },
    mounted() {

    },
    methods: {

    }
});

app.component("el-button1", {
    template: `
<el-button v-bind="json.attr">
    <root v-bind="getBind(null,json)"></root>
</el-button>
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {

        }
    },
    mounted() {

    },
    methods: {

    }
});

app.component("el-card1", {
    template: `
<el-card v-bind="json.attr" >
    <template #header>
      <div class="card-header">
        <span>{{json.attr.name}}</span>
      </div>
    </template>
    <root v-bind="getBind(null,json)"></root>
</el-card>
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {

        }
    },
    mounted() {

    },
    methods: {

    }
});

app.component("el-carousel-item1", {
    template: `
<el-carousel-item v-bind="json.attr">
    <root v-bind="getBind(null,json)"></root>
</el-carousel-item>
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {

        }
    },
    mounted() {

    },
    methods: {

    }
});

app.component("el-carousel1", {
    template: `
<el-carousel v-bind="json.attr">
    <root v-bind="getBind(null,json)"></root>
</el-carousel>
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {

        }
    },
    mounted() {

    },
    methods: {

    }
});

app.component("el-cascader1", {
    template: `
<el-cascader v-model="value" v-bind="json.attr"></el-cascader>
<input type="hidden" v-bind="json.attr" :value="toValue()" />
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {
            value: [],
        }
    },
    mounted() {
        emitter.on('set-value-by', (values) => {
            this.setValue(values);
        });
    },
    methods: {
        setValue(values) {
            if (this.json.attr === undefined || this.json.attr.name === undefined) return false;
            let value = values[this.json.attr.name] ?? [];
            this.value = value;
            console.log(value);
        },
        toValue() {
            let value = [];
            try {
                if (typeof this.value == 'object') {
                    for (let item of this.value) {
                        if (typeof item == 'object') {
                            value.push(item[item.length - 1]);
                        }
                        else{
                            value = [item];
                        }
                    }
                }
            } catch (e) {

            }
            return value;
        }
    }
});

app.component("el-checkbox1", {
    template: `
<span class="el-checkbox">
    <el-checkbox-group v-model="value" v-bind="json.attr">
        <template v-if="json.attr!==undefined && json.attr.options!==undefined">
            <template v-for="(item,index) in json.attr.options">
                <el-checkbox v-bind="item" :label="item.value!==undefined?item.value:item.label">{{item.label}}</el-checkbox>
            </template>
        </template>
    </el-checkbox-group>
    <input type="hidden" v-bind="json.attr" :value="value.toString()" />
</span>
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {
            value: [],
        }
    },
    mounted() {
        emitter.on('set-value-by', (values) => {
            this.setValue(values);
        });
    },
    methods: {
        setValue(values) {
            if (this.json.attr === undefined || this.json.attr.name === undefined) return false;
            let value = values[this.json.attr.name] ?? '';
            if (typeof value == 'number') {
                value = value.toString();
            }
            if (typeof value == 'string') {
                value = value.length ? value.split(',') : [];
            }
            this.value = value;
        },
    }
});

jsonui.parser.tool.createCss(`
.el-checkbox .layui-form-checkbox{display:none;}
`);

app.component("el-col1", {
    template: `
<el-col v-bind="json.attr">
    <root v-bind="getBind(null,json)"></root>
</el-col>
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {

        }
    },
    mounted() {

    },
    methods: {

    }
});

app.component("el-color-picker1", {
    template: `
<el-color-picker v-model="value" v-bind="json.attr"></el-color-picker>
<input type="hidden" v-bind="json.attr" :value="value" />
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {
            value: "",
        }
    },
    mounted() {
        emitter.on('set-value-by', (values) => {
            this.setValue(values);
        });
    },
    methods: {
        setValue(values) {
            if (this.json.attr === undefined || this.json.attr.name === undefined) return false;
            this.value = values[this.json.attr.name] ?? '';
        },
    }
});

app.component("el-date-picker1", {
    template: `
<el-date-picker v-model="value" v-bind="json.attr"></el-date-picker>
<input type="hidden" v-bind="json.attr" :value="value" style="display: none;" />
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {
            value: "",
        }
    },
    mounted() {
        emitter.on('set-value-by', (values) => {
            this.setValue(values);
        });
    },
    methods: {
        setValue(values) {
            if (this.json.attr === undefined || this.json.attr.name === undefined) return false;
            this.value = values[this.json.attr.name] ?? '';
        },
    }
});

app.component("el-form-item1", {
    template: `
<el-form-item 
    v-bind="json.attr" 
    :label-width="json.attr['label-width']!=undefined?json.attr['label-width']:'150px'"
    >
    <root v-bind="getBind(null,json)"></root>
</el-form-item>
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {

        }
    },
    mounted() {

    },
    methods: {

    }
});

/**
 * 目前此组件暂时无用
 * 请使用jquery:form模块代替
 */
app.component("el-form1", {
    template: `
<el-form v-bind="json.attr" v-loading="loading">
    <root v-bind="getBind(null,json)"></root>
</el-form>
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {
            componentId: htmlPlus.id.increment.get(),
            componentName: "el-form",
            loading: false,
            values: {},
        }
    },
    created() {
        this.init();
    },
    mounted() {

    },
    methods: {

        init() {
            this.pullAttrValues();
        },

        /**
         * 拉取values值
         * 如果values是string,则调用api拉取结果,取object
         * 如果values是object,则直接使用
         */
        pullAttrValues() {
            let this1 = this;
            let values = this.json.attr.values === undefined ? {} : this.json.attr.values;
            if (typeof values === "string") {
                this1.loading = true;
                htmlPlus.api.ajax({
                    url: values,
                    success: function (result) {
                        this1.loading = false;
                        this1.values = result.result;
                        emitter.emit('get-value-by' + this1.componentId);
                    }
                });
            } else {
                this1.values = values;
            }
        },

        /**
         * 获取values里面的某个值
         * @param key
         * @returns {*}
         */
        getAttrValuesValue(key) {
            return typeof this.values !== "object" || this.values[key] === undefined ? undefined : this.values[key];
        },

        /**
         * 设置values里面的某个值
         * @param key
         * @param value
         */
        setAttrValuesValue(key, value) {
            console.log("设置", key, value)
        }

    }
});


/**
 * 获取上级组件对象
 * @param _this
 * @param componentName
 * @returns {undefined|*}
 */
function getParentsComponentObject(_this, componentName) {
    while (true) {
        try {
            if (typeof _this.$parent['componentName'] === "string" && _this.$parent['componentName'] === componentName) {
                return _this.$parent;
            } else {
                _this = _this.$parent;
            }
        } catch (e) {
            return undefined;
        }
    }
}

app.component("el-input-number1", {
    template: `
<div class="el-input-number1">
    <el-input-number v-model="value" v-bind="json.attr"></el-input-number>
    <input type="hidden" v-bind="json.attr" :value="value" />
</div>
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {
            value: 0,
        }
    },
    mounted() {
        emitter.on('set-value-by', (values) => {
            this.setValue(values);
        });
    },
    methods: {
        setValue(values) {
            if (this.json.attr === undefined || this.json.attr.name === undefined) return false;
            let value = values[this.json.attr.name] ?? 0;
            if (typeof value === "string") {
                if (value.includes('.')) {
                    this.value = parseFloat(value);
                }
                else{
                    this.value = parseInt(value);
                }
            }
        },
    }
});

jsonui.parser.tool.createCss(`
.el-input-number1>input{display:none;}
`);

app.component("el-input1", {
    template: `
<el-input v-model="value" v-bind="json.attr">
    <template #prefix v-if="prefix!==undefined"><root :jsonString="JSON.stringify(prefix)"></root></template>
    <template #suffix v-if="suffix!==undefined"><root :jsonString="JSON.stringify(suffix)"></root></template>
    <template #prepend v-if="prepend!==undefined"><root :jsonString="JSON.stringify(prepend)"></root></template>
    <template #append v-if="append!==undefined"><root :jsonString="JSON.stringify(append)"></root></template>
</el-input>
<input type="hidden" v-bind="json.attr" :value="value" style="display: none" />
    `,
    mixins: [jsonui.parser.module.vue.config],
    watch: {
        json: {
            handler() {
                this.rendering();
            },
            immediate: true
        }
    },
    data: function () {
        return {
            value: "",
            prefix: undefined,
            suffix: undefined,
            prepend: undefined,
            append: undefined,
        }
    },
    mounted() {
        emitter.on('set-value-by', (values) => {
            this.setValue(values);
        });
    },

    methods: {
        rendering() {
            let json = this.json;
            if(json.attr===undefined) return false;
            for (let index in json.attr) {
                let item = json.attr[index];
                if (["prefix", "suffix", "prepend", "append"].indexOf(index) >= 0) {
                    this[index] = item;
                }
            }
        },
        setValue(values) {
            if (this.json.attr === undefined || this.json.attr.name === undefined) return false;
            this.value = values[this.json.attr.name] ?? '';
        },
    }

});

app.component("el-link1", {
    template: `
<el-link v-bind="json.attr">
    <root v-bind="getBind(null,json)"></root>
</el-link>
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {

        }
    },
    mounted() {

    },
    methods: {

    }
});

app.component("el-radio1", {
    template: `
<span class="el-radio">
    <el-radio-group v-model="value" v-bind="json.attr">
        <template v-if="json.attr!==undefined && json.attr.options!==undefined">
            <template v-for="(item,index) in json.attr.options">
                <el-radio v-bind="item" :label="item.value!==undefined?item.value:item.label">{{item.label}}</el-radio>
            </template>
        </template>
    </el-radio-group>
    <input type="hidden" v-bind="json.attr" :value="value" />
</span>
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {
            value: "",
        }
    },
    mounted() {
        emitter.on('set-value-by', (values) => {
            this.setValue(values);
        });
    },
    methods: {
        setValue(values) {
            if (this.json.attr === undefined || this.json.attr.name === undefined) return false;
            this.value = values[this.json.attr.name] ?? '';
        },
    }
});

jsonui.parser.tool.createCss(`
.el-radio .layui-form-radio{display:none;}
`);

app.component("el-rate1", {
    template: `
<el-rate v-model="value" v-bind="json.attr"></el-rate>
<input type="hidden" v-bind="json.attr" :value="value" />
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {
            value: 0,
        }
    },
    mounted() {
        emitter.on('set-value-by', (values) => {
            this.setValue(values);
        });
    },
    methods: {
        setValue(values) {
            if (this.json.attr === undefined || this.json.attr.name === undefined) return false;
            this.value = Number(values[this.json.attr.name] ?? 0);
        },
    }
});

app.component("el-row1", {
    template: `
<el-row v-bind="json.attr">
    <root v-bind="getBind(null,json)"></root>
</el-row>
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {

        }
    },
    mounted() {

    },
    methods: {

    }
});

app.component("el-scrollbar1", {
    template: `
<el-scrollbar v-bind="json.attr">
    <root v-bind="getBind(null,json)"></root>
</el-scrollbar>
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {

        }
    },
    mounted() {

    },
    methods: {

    }
});

app.component("el-select-v21", {
    template: `
<el-select-v2 v-model="value" v-bind="json.attr"></el-select-v2>
<input type="hidden" v-bind="json.attr" :value="value" />
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {
            value: "",
        }
    },
    mounted() {
        emitter.on('set-value-by', (values) => {
            this.setValue(values);
        });
    },
    methods: {
        setValue(values) {
            if (this.json.attr === undefined || this.json.attr.name === undefined) return false;
            this.value = values[this.json.attr.name] ?? '';
        },
    }
});

app.component("el-select1", {
    template: `
<el-select v-model="value" v-bind="json.attr">
    <template v-if="json.attr!==undefined && json.attr.options!==undefined">
        <template v-for="(item,index) in json.attr.options">
            <el-option v-bind="item" />
        </template>
    </template>
</el-select>
<input type="hidden" v-bind="json.attr" :value="value" />
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {
            value: "",
        }
    },
    mounted() {
        emitter.on('set-value-by', (values) => {
            this.setValue(values);
        });
    },
    methods: {
        setValue(values) {
            if (this.json.attr === undefined || this.json.attr.name === undefined) return false;
            let value = values[this.json.attr.name] ?? '';
            if (this.json.attr.multiple !== undefined && this.json.attr.multiple === true) {
                value = value.toString();
                value = value.length ? value.split(",") : [];
            }
            else{
                value = value.toString();
            }
            this.value = value;
        },
    }
});

app.component("el-slider1", {
    template: `
<el-slider v-model="value" v-bind="json.attr"></el-slider>
<input type="hidden" v-bind="json.attr" :value="value" />
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {
            value: 0,
        }
    },
    mounted() {
        emitter.on('set-value-by', (values) => {
            this.setValue(values);
        });
    },
    methods: {
        setValue(values) {
            if (this.json.attr === undefined || this.json.attr.name === undefined) return false;
            this.value = parseInt(values[this.json.attr.name] ?? 0);
        },
    }
});

app.component("el-switch1", {
    template: `
<span class="el-switch">
    <el-switch v-model="value" v-bind="json.attr"></el-switch>
    <input type="hidden" v-bind="json.attr" :value="value" />
</span>
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {
            value: "",
        }
    },
    mounted() {
        emitter.on('set-value-by', (values) => {
            this.setValue(values);
        });
    },
    methods: {
        setValue(values) {
            if (this.json.attr === undefined || this.json.attr.name === undefined) return false;
            this.value = values[this.json.attr.name] ?? '';
        },
    }
});

jsonui.parser.tool.createCss(`
.el-switch .layui-form-checkbox{display:none;}
`);

app.component("el-table-column1", {
    template: `
<el-table-column v-bind="json.attr">
    <root v-bind="getBind(null,json)"></root>
</el-table-column>
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {

        }
    },
    mounted() {

    },
    methods: {

    }
});

app.component("el-table1", {
    template: `
<el-table v-bind="json.attr">
    <root v-bind="getBind(null,json)"></root>
</el-table>
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {

        }
    },
    mounted() {

    },
    methods: {

    }
});

app.component("el-text1", {
    template: `
<el-text v-bind="json.attr">
    <root v-bind="getBind(null,json)"></root>
</el-text>
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {

        }
    },
    mounted() {

    },
    methods: {

    }
});

app.component("el-time-picker1", {
    template: `
<el-time-picker v-model="value" v-bind="json.attr"></el-time-picker>
<input type="hidden" v-bind="json.attr" :value="value" />
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {
            value: "",
        }
    },
    mounted() {
        emitter.on('set-value-by', (values) => {
            this.setValue(values);
        });
    },
    methods: {
        setValue(values) {
            if (this.json.attr === undefined || this.json.attr.name === undefined) return false;
            this.value = values[this.json.attr.name] ?? '';
        },
    }
});

app.component("el-time-select1", {
    template: `
<el-time-select v-model="value" v-bind="json.attr"></el-time-select>
<input type="hidden" v-bind="json.attr" :value="value" />
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {
            value: "",
        }
    },
    mounted() {
        emitter.on('set-value-by', (values) => {
            this.setValue(values);
        });
    },
    methods: {
        setValue(values) {
            if (this.json.attr === undefined || this.json.attr.name === undefined) return false;
            this.value = values[this.json.attr.name] ?? '';
        },
    }
});

app.component("el-transfer1", {
    template: `
<el-transfer v-model="value" v-bind="json.attr"></el-transfer>
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {
            value: [],
        }
    },
    mounted() {

    },
    methods: {

    }
});

app.component("el-upload1", {
    template: `
<el-upload 
    v-model:file-list="value" 
    v-bind="json.attr"
    name="file"
    :on-success="handleSuccess"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    >
    <el-button  type="primary" plain v-if="json.attr['list-type']===undefined || json.attr['list-type']!='picture-card'">上传文件</el-button>
    <el-icon class="avatar-uploader-icon" v-else><Plus /></el-icon>
</el-upload>
<input type="hidden" v-bind="json.attr" :value="getValueText(value)" />
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {
            value: [],
        }
    },
    mounted() {
        emitter.on('set-value-by', (values) => {
            this.setValue(values);
        });
    },
    methods: {
        setValue(values) {
            if (this.json.attr === undefined || this.json.attr.name === undefined) return false;
            if (values[this.json.attr.name] !== undefined) {
                let value = values[this.json.attr.name] ?? [];
                if (typeof value != 'string') {
                    value = JSON.stringify(value);
                }
                this.value = JSON.parse(value);
            }
        },
        //获取纯净的值
        getValueText(){
            let value = [];
            for(let item of this.value){
                value.push({
                    name: item.name,
                    url: item.url,
                });
            }
            return JSON.stringify(value);
        },
        handleSuccess(response, uploadFile, uploadFiles) {
            try {
                //console.log("uploadFiles数组",uploadFiles);
                if (uploadFile.response.code === undefined || uploadFile.response.code !== 0) throw new Error(uploadFile.response.msg ?? '上传失败');
                if (uploadFile.response.result === undefined || uploadFile.response.result.return_key === undefined) throw new Error('上传失败');
                uploadFile.name = uploadFile.response.result.name;
                uploadFile.url = uploadFile.response.result.url;
            } catch (e) {
                //需要进行移除图片处理
                ElementPlus.ElMessage.error(e.toString());
            }
        },
        handleRemove(uploadFile, uploadFiles) {
            console.log(uploadFile, uploadFiles);
        },
        handlePreview(file) {
            console.log(file);
        },
    }
});

app.component("element1", {
    template: `

<template v-if="element=='text'">{{json}}</template>
<img v-else-if="element=='img'" v-bind="json.attr" />
<component v-else :is="element" v-bind="json.attr">
    <root v-bind="getBind(null,json)"></root>
</component>

       `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {

        }
    },
    mounted() {

    },
    methods: {

    }
});


app.component("jquery1", {
    template: `
<div :id="id"></div>
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {
            id: 'jquery-' + jsonui.parser.tool.getRand(9),
        }
    },
    mounted() {
        //发现模块
        jsonui.parser.render.findModule({
            data: this.json,
            index: this.jsonLoc,
            elem: layui.jquery('#' + this.id)
        });
    },
    methods: {}
});

app.component("jym-ad-image", {
    template: `
<span class="jym-ad-image">
    <div style="margin:0 0 15px;" v-if="value.length<max_num">
        <div class="add" @click="clickAdd">
            <el-icon><Plus/></el-icon>
        </div>
    </div>
    <div class="list" v-if="value.length">
        <el-table :data="value" border >
            <el-table-column label="图片" width="68" v-if="is_url">
                <template #default="scope">
                    <el-upload
                        class="sku-image-uploader"
                        :action="json.attr.action??''"
                        :show-file-list="false"
                        :with-credentials="true"
                        :on-success="UploadSkuImageSuccess"
                        :before-upload="UploadSkuImageBeforeUpload"
                        :data="{return_key: scope['$index']}"
                      >
                        <img :src="scope.row.url" class="avatar" v-if="scope.row.url" />
                        <el-icon class="sku-image-uploader-icon" v-else><Upload /></el-icon>
                    </el-upload>
                </template>
            </el-table-column>
            <el-table-column label="名称" width="180" v-if="is_name">
                <template #default="scope">
                    <el-input v-model="scope.row.name" placeholder="请输入名称"  />
                </template>
            </el-table-column>
            <el-table-column label="描述" width="250" v-if="is_desc">
                <template #default="scope">
                    <el-input v-model="scope.row.desc" placeholder="请输入描述"  />
                </template>
            </el-table-column>
            <el-table-column label="跳转链接" width="300" v-if="is_link">
                <template #default="scope">
                    <el-input v-model="scope.row.link" placeholder="请输入跳转链接"  />
                </template>
            </el-table-column>
            <el-table-column label="状态" width="80">
                <template #default="scope">
                    <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" />
                </template>
            </el-table-column>
            <el-table-column label="操作" :width="max_num>1?90:65">
                <template #default="scope">
                    <div class="oper">
                    <div class="li" v-if="max_num>1">
                    <el-dropdown :hide-on-click="false" size="small">
                        <el-text type="primary">排序</el-text>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item :disabled="scope['$index']==0?true:false" @click="sort(scope['$index'],0)">向上移动</el-dropdown-item>
                                <el-dropdown-item :disabled="scope['$index']==value.length-1?true:false" @click="sort(scope['$index'],1)">向下移动</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    </div>
                    <div class="li">
                    <el-popconfirm title="是否确认删除？" confirm-button-text="确认" cancel-button-text="取消" @confirm="removeValue(scope['$index'])">
                        <template #reference>
                            <el-link type="danger">删除</el-link>
                        </template>
                    </el-popconfirm>
                    </div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div v-if="is_url">
        <el-alert :title="'图片尺寸：宽'+(width?width+'px':'不限')+' 高'+(height?height+'px':'不限')+' '" type="info" />
    </div>
    <input type="hidden" :name="json.attr['name']" :value="JSON.stringify(value)"/>
</span>
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {
            value: [],
            max_num: 0,
            is_url: 0,
            is_name: 0,
            is_desc: 0,
            is_link: 0,
            width: 0,
            height:0,
        }
    },
    mounted() {
        emitter.on('set-value-by', (values) => {
            this.setValue(values);
        });
    },

    methods: {
        setValue(values) {
            if (this.json.attr === undefined) return false;
            if (this.json.attr['name'] !== undefined && values[this.json.attr['name']] !== undefined) {
                let value = values[this.json.attr['name']] ?? '[]';
                this.value = JSON.parse(value);
            }
            if (this.json.attr['max_num_name'] !== undefined && values[this.json.attr['max_num_name']] !== undefined) {
                let value = values[this.json.attr['max_num_name']] ?? 0;
                this.max_num = parseInt(value);
            }
            if (this.json.attr['is_url_name'] !== undefined && values[this.json.attr['is_url_name']] !== undefined) {
                let value = values[this.json.attr['is_url_name']] ?? 0;
                this.is_url = parseInt(value);
            }
            if (this.json.attr['is_name_name'] !== undefined && values[this.json.attr['is_name_name']] !== undefined) {
                let value = values[this.json.attr['is_name_name']] ?? 0;
                this.is_name = parseInt(value);
            }
            if (this.json.attr['is_desc_name'] !== undefined && values[this.json.attr['is_desc_name']] !== undefined) {
                let value = values[this.json.attr['is_desc_name']] ?? 0;
                this.is_desc = parseInt(value);
            }
            if (this.json.attr['is_link_name'] !== undefined && values[this.json.attr['is_link_name']] !== undefined) {
                let value = values[this.json.attr['is_link_name']] ?? 0;
                this.is_link = parseInt(value);
            }
            if (this.json.attr['width_name'] !== undefined && values[this.json.attr['width_name']] !== undefined) {
                let value = values[this.json.attr['width_name']] ?? 0;
                this.width = parseInt(value);
            }
            if (this.json.attr['height_name'] !== undefined && values[this.json.attr['height_name']] !== undefined) {
                let value = values[this.json.attr['height_name']] ?? 0;
                this.height = parseInt(value);
            }
        },
        clickAdd() {
            this.value.push({
                url: "",
                name: "",
                link: "",
                status: 1,
            });
        },
        sort(index, de) {
            if (index === 0 && (de === 0 || this.value.length === 1)) return false;
            if (index === this.value.length - 1 && (de === 1 || this.value.length === 1)) return false;
            if (de === 0) {
                [this.value[index - 1], this.value[index]] = [this.value[index], this.value[index - 1]];
            }
            if (de === 1) {
                [this.value[index + 1], this.value[index]] = [this.value[index], this.value[index + 1]];
            }
        },
        removeValue(index) {
            this.value.splice(index, 1);
        },
        UploadSkuImageSuccess(response, uploadFile) {
            try {
                if (uploadFile.response.code === undefined || uploadFile.response.code !== 0) throw new Error(uploadFile.response.msg ?? '上传失败');
                if (uploadFile.response.result === undefined || uploadFile.response.result.return_key === undefined) throw new Error('上传失败');
                for (let index in this.value) {
                    let item = this.value[index];
                    if (index == uploadFile.response.result.return_key) {
                        item.url = uploadFile.response.result.url;
                        break;
                    }
                    this.value[index] = item;
                }
            } catch (e) {
                ElementPlus.ElMessage.error(uploadFile.response.msg ?? '上传失败');
            }
        },
        UploadSkuImageBeforeUpload(file) {
            if (file.size / 1024 / 1024 > 10) {
                ElementPlus.ElMessage.error('图片上传大小限制10MB!');
                return false
            }
            return true
        },
    }

});

jsonui.parser.tool.createCss(`
.jym-ad-image .avatar,.jym-ad-image .sku-image-uploader-icon{width:50px;height:50px;}
.jym-ad-image .list{padding-bottom:10px;position: relative;display:table;}
.jym-ad-image .list .oper{display:flex;align-items:center;}
.jym-ad-image .list .oper .li:first-child{padding-top: 8px;margin-right:8px;}
.jym-ad-image .add{width:48px;height:48px;border: 1px dashed #cdd0d6;border-radius: 6px;box-sizing: border-box;cursor: pointer;background:#fafafa;font-size: 28px;color:#909399;display:flex;justify-content:center;align-items:center;}
.jym-ad-image .add:hover{border-color:#409EFF;}
.jym-ad-image .footer{display:flex;justify-content:space-between;}
`);

app.component("jym-admin", {
    template: `
<div :class="dark?' dark':''">
    <div class="jym-admin">
        <div class="header">
            <div class="header-logo">
                <a href="javascript:;">
                    <img :src="json.attr.config.logo" v-if="json.attr.config.logo && !dark"/>
                    <img :src="json.attr.config.logo_dark" v-if="json.attr.config.logo_dark && dark"/>
                </a>
            </div>
            <div class="header-body">
                <div class="header-body-nav">
                    <template v-for="(item,index) in json.attr.role_list">
                        <li @click="targetUn(item.url)" class="on" v-if="json.attr.role==item.key">{{item.name}}</li>
                        <li @click="targetUn(item.url)" v-else>{{item.name}}</li>
                    </template>
                </div>
                <div class="header-body-info">
                    <div class="dark-switch">
                        <el-switch
                                v-model="dark"
                                inactive-action-icon="Sunny"
                                active-action-icon="Moon"
                                style="--el-switch-on-color: #3c3c3c; --el-switch-off-color: #dddddd;--el-color-white:#999;"
                                @change="changeDark"/>
                    </div>
                    <div class="user-info">
                        <el-popover :width="160" popper-style="padding:0;">
                            <template #reference>
                                <div class="user-info-body">
                                    <div class="head-portrait">
                                        <el-avatar :size="32" :src="json.attr.user_info.head_portrait" />
                                    </div>
                                    <div class="nickname">
                                        <el-text class="w-300px mb-2" truncated>{{json.attr.user_info.nickname}}</el-text>
                                    </div>
                                    <div class="icon">
                                        <el-icon>
                                            <CaretBottom/>
                                        </el-icon>
                                    </div>
                                </div>
                            </template>
                            <template #default>
                                <div class="user-info-menu">
                                    <ul>
                                        <li @click="target('/jsonui/index.html?content=/jiayou/view/admin_user_set/updatePassword/role/user')">
                                            <div class="icon">
                                                <el-icon>
                                                    <Setting/>
                                                </el-icon>
                                            </div>
                                            <div class="name">修改密码</div>
                                        </li>
                                    </ul>
                                    <ul>
                                        <li @click="out">
                                            <div class="icon">
                                                <el-icon>
                                                    <SwitchButton/>
                                                </el-icon>
                                            </div>
                                            <div class="name">退出</div>
                                        </li>
                                    </ul>
                                </div>
                            </template>
                        </el-popover>
                    </div>
                </div>
            </div>
        </div>
    
        <div class="body">
            <div class="jym-menu">
                <el-scrollbar v-if="json.attr!==undefined && json.attr.menu!==undefined" ref="menuScroll" @scroll="menuScroll">
                    <div class="jym-menu-body">
                        <template v-for="(item,index) in json.attr.menu">
                            <div class="dl" :show="item.show?1:0" v-if="item.name!==undefined">
                                <div class="dt" :data-on="index==menu.defaultActive?1:0" @click="clickMenu(index)">
                                    <div class="name">
                                        <div class="icon">
                                            <el-icon v-if="item.icon">
                                                <component :is="item.icon"/>
                                            </el-icon>
                                        </div>
                                        <div class="text">{{item.name}}</div>
                                    </div>
                                    <div class="more" v-if="item.children!==undefined && item.children.length">
                                        <el-icon>
                                            <ArrowDownBold v-if="item.show"/>
                                            <ArrowRightBold v-else/>
                                        </el-icon>
                                    </div>
                                </div>
                                <template v-if="item.children!==undefined && item.children.length">
                                    <div class="dd">
                                        <div class="ul">
                                            <template v-for="(item1,index1) in item.children">
                                                <div class="li" :data-on="(index + ',' + index1)==menu.defaultActive?1:0" @click="clickMenu(index+','+index1)" v-if="item1.name!==undefined">
                                                    <div class="text">{{item1.name}}</div>
                                                </div>
                                            </template>
                                        </div>
                                    </div>
                                </template>
                                <div class="line"></div>
                            </div>
                        </template>
                    </div>
                </el-scrollbar>
            </div>
            <div class="main">
                <div class="menu-line"></div>
                <el-scrollbar>
                    <div class="jym-body">
                        <root v-bind="getBind(null,json)"></root>
                    </div>
                </el-scrollbar>
            </div>
        </div>
    </div>
</div>
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {
            dark: false,
            isWindow: false,
            menu: {
                collapse: false,
                collapseTransition: false,
                defaultActive: '',
                defaultOpeneds: [''],
            },
            main: {
                width: 200,
            }
        }
    },
    mounted() {
        this.init();
        //console.log(window.history);
    },
    methods: {
        changeDark(value) {
            if (value) {
                sessionStorage.setItem('dark', value);
            } else {
                sessionStorage.removeItem('dark');
            }
        },
        out() {
            ElementPlus.ElMessageBox.confirm(
                '确定退出吗？',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'info',
                }
            )
                .then(() => {
                    this.target('/jiayou/login/out');
                })
        },
        init() {
            let _this = this;
            this.dark = sessionStorage.getItem('dark') ? true : false;
            this.menu.collapse = sessionStorage.getItem('menu-is-collapse') ? true : false;
            if (this.menu.collapse) {
                window.setTimeout(() => {
                    _this.menu.collapseTransition = true;
                }, 1);
            } else {
                _this.menu.collapseTransition = true;
            }
            this.initMainWidth();
            //当前选项
            let this_url = decodeURIComponent(window.location.pathname + window.location.search);
            for (let index in this.json.attr.menu) {
                let item = this.json.attr.menu[index];
                if (item.url && this_url.indexOf(item.url) !== -1) {
                    this.menu.defaultActive = index.toString();
                }
                if (!this.menu.defaultActive) {
                    for (let index1 in item.children) {
                        let item1 = item.children[index1];
                        if (item1.url && this_url.indexOf(item1.url) !== -1) {
                            this.menu.defaultActive = index + ',' + index1;
                            this.menu.defaultOpeneds = [index.toString()];
                            break;
                        }
                    }
                }
                item.show = localStorage.getItem(item.name) ? false : true;
                this.json.attr.menu[index] = item;
            }
            //设置菜单滚动条位置
            window.setTimeout(function(){
                _this.$refs.menuScroll.setScrollTop(parseFloat(sessionStorage.getItem('menuScroll')))
            },10);
        },
        initMainWidth() {
            this.main.width = this.menu.collapse ? 64 : 280;
        },
        clickSwitchMenu() {
            this.menu.collapse = this.menu.collapse ? false : true;
            if (this.menu.collapse) {
                sessionStorage.setItem('menu-is-collapse', this.menu.collapse);
            } else {
                sessionStorage.removeItem('menu-is-collapse');
            }
            this.initMainWidth();
        },
        clickMenu(index) {
            let menu = this.json.attr.menu;
            let menu_this = this.json.attr.menu;
            let index_arr = index.toString().split(',');
            for (let index1 in index_arr) {
                let item1 = index_arr[index1];
                if (index1 == 0) {
                    for (let index2 in menu_this) {
                        let item2 = menu_this[index2];
                        if (item1 == index2) {
                            menu_this = item2;
                            break;
                        }
                    }
                }
                if (index1 == 1 && menu_this.children !== undefined) {
                    for (let index2 in menu_this.children) {
                        let item2 = menu_this.children[index2];
                        if (item1 == index2) {
                            menu_this = item2;
                            break;
                        }
                    }
                }
            }
            if (menu_this.children === undefined || (menu_this.children !== undefined && !menu_this.children.length)) {
                window.location.href = menu_this.url;
            } else {
                if (localStorage.getItem(menu[index_arr[0]].name)) {
                    menu[index_arr[0]].show = true;
                    localStorage.removeItem(menu[index_arr[0]].name);
                }
                else {
                    menu[index_arr[0]].show = false;
                    localStorage.setItem(menu[index_arr[0]].name, "1");
                }
                this.json.attr.menu = menu;
            }
        },
        menuScroll(e){
            sessionStorage.setItem('menuScroll', e.scrollTop);
        },
        targetUn(url){
            sessionStorage.setItem('menuScroll', 0);
            this.target(url);
        },
    }
});



jsonui.parser.tool.createCss(`
.jym-admin{position:fixed;width:100%;height:100%;top:0;left:0}

.jym-admin .header{display:flex;height:50px;background:#fff;box-shadow:inset 0 -1px 0 0 #e7eaef}
.jym-admin .header-logo{display:flex;align-items:center;width:185px;height:50px;padding:0 0 0 15px;overflow:hidden}
.jym-admin .header-logo img{max-width:170px;max-height:32px}
.jym-admin .header-body{display:flex;justify-content:space-between;width:calc(100% - 200px);height:50px}
.jym-admin .header-body-nav{display:flex}
.jym-admin .header-body-nav li{height:50px;line-height:50px;padding:0 15px;color:#1e222d;cursor:pointer}
.jym-admin .header-body-nav li:hover{color:#0052D9}
.jym-admin .header-body-nav li.on::after{background:#0052D9;content:"";width:100%;height:2px;display:block;margin:-2px 0 0 0}
.jym-admin .header-body-nav li.on{color:#0052D9}

.jym-admin .header-body-info{display:flex;align-items:center}
.jym-admin .dark-switch{padding:0 15px 0 0}
.user-info-body{display:flex;justify-content:space-between;align-items:center;height:50px;cursor:pointer;padding:0 15px 0 0}
.user-info-body .nickname{max-width:80px;padding:0 6px 0 6px}
.user-info-body .nickname span{color:#1e222d}
.user-info-body .icon{color:#1e222d}
.user-info-menu ul{border-top:1px solid #ddd}
.user-info-menu ul:first-child{border-top:none}
.user-info-menu li{height:40px;cursor:pointer;display:flex;align-items:center}
.user-info-menu li .icon{font-weight:700;padding:2px 0 0 20px}
.user-info-menu li .name{padding:0 0 0 12px}

.jym-admin .body{display:flex;height:calc(100% - 50px)}

.jym-menu{background: #fff;width:216px;}
.jym-menu-body{padding:16px 16px 16px 0;}
.jym-menu .dl{margin:0 0 0 32px;}
.jym-menu .dl .dt{display:flex;justify-content:space-between;align-items:center;width:126px;height:50px;cursor:pointer;}
.jym-menu .dl .dt .name{display:flex;align-items:center;}
.jym-menu .dl .dt .name .icon{display:flex;align-items:center;width:24px;height:40px;font-size:18px;font-weight: bold;}
.jym-menu .dl .dt .name .text{font-size:14px;font-weight: bold;}
.jym-menu .dl .dt[data-on="1"] .name .icon,.jym-menu .dl .dt:hover .name .icon{color:#0052D9;}
.jym-menu .dl .dt[data-on="1"] .name .text,.jym-menu .dl .dt:hover .name .text{color:#0052D9;}
.jym-menu .dl .dt .more{display:flex;align-items:center;color:#666;}
.jym-menu .dl .dd{height:0px;overflow-y:hidden;transition: 460ms;}
.jym-menu .dl[show="1"] .dd{height:auto;transition: 460ms;}
.jym-menu .dl .dd .ul{display:flex;flex-wrap:wrap;padding:0 0 8px 0;}
.jym-menu .dl .dd .ul .li{width:100%;height:38px;}
.jym-menu .dl .dd .ul .li .text{padding:0 0 0 24px;line-height:38px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size:14px;cursor:pointer;}
.jym-menu .dl .dd .ul .li[data-on="1"] .text,.jym-menu .dl .dd .ul .li:hover .text{color:#0052D9;}
.jym-menu .dl .line{width:126px;height:1px;background:#f0f0f0;}
.jym-menu .dl:last-child .line{display:none;}

.jym-admin .body .main{background: #f6f6f6;width:calc(100% - 216px);}
.jym-body{padding:15px;}



.dark .jym-admin .header{background:#071c37;box-shadow:inset 0 -1px 0 0 #4a556b}
.dark .user-info-body .nickname span{color:#c1c6c8}
.dark .user-info-body .icon{color:#c1c6c8}
.dark .header-body-nav li{color:#c1c6c8}
.dark .header-body-nav li:hover{color:#81d3f9}
.dark .header-body-nav li.on::after{background:#81d3f9;}
.dark .header-body-nav li.on{color:#81d3f9}
.dark .jym-menu{background: #071c37;}
.dark .jym-menu .dl .dt .name .icon{color:#dcdcdc;}
.dark .jym-menu .dl .dt .name .text{color:#dcdcdc;}
.dark .jym-menu .dl .dt[data-on="1"] .name .icon,.dark .jym-menu .dl .dt:hover .name .icon{color:#81d3f9;}
.dark .jym-menu .dl .dt[data-on="1"] .name .text,.dark .jym-menu .dl .dt:hover .name .text{color:#81d3f9;}
.dark .jym-menu .dl .dd .ul .li .text{color:#dcdcdc;}
.dark .jym-menu .dl .dd .ul .li[data-on="1"] .text{color:#81d3f9;}
.dark .jym-menu .dl .dd .ul .li:hover .text{color:#81d3f9;}
.dark .jym-menu .dl .line{background:#4a556b;}
.dark .jym-admin .body .main{background: #f6f6f6;}
`);

//顶级窗口打开
if(window.self===window.top){
    jsonui.parser.tool.createCss(`
        html{min-width:1600px;}
    `);
}
//被iframe打开
else{
    jsonui.parser.tool.createCss(`
        .jym-admin .header{display:none;}
        .jym-admin .jym-menu{display:none;}
        .jym-admin .body{height:100%;}
        .jym-admin .body .main{width:100%;}
    `);
}

app.component("jym-export", {
    template: `
<el-dialog v-model="show" title="导出数据" width="800" :draggable="true" :close-on-click-modal="false">
    <div class="T6WFoufY2U">
        <div class="dcl">
            <el-popover title="请选择要导出的列" placement="right-start" width="600px">
                <template #reference>
                    <el-button>选择列</el-button>
                </template>
                <div>
                    <el-transfer v-model="myRow.value" :data="myRow.data" :titles="['可选择列','已选择列']" />
                </div>
            </el-popover>
        </div>
        <div class="jdt">
            <el-progress type="circle"  :percentage="loading.jdt" />
        </div>
        <div class="title" v-if="loading.title.length">{{loading.title}}</div>
        <div class="desc" v-if="loading.desc.length">{{loading.desc}}</div>
        <div class="down">
            <el-button type="primary" @click="down" v-if="loading.status=='success'">
                <el-icon><Download /></el-icon>下载
            </el-button>
        </div>
    </div>
</el-dialog>
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {
            show: false,
            row:[],
            myRow:{
                data: [],
                value: [],
            },
            form: {},
            result: {
                current_page: 0, //当前页
                data:[], //数据
                last_page: 0, //总页数
                per_page:0, //每页条数
                total:0, //总数
            },
            loading: {
                status: '',
                title: '',
                desc: '',
                jdt: 0,
            },
        }
    },
    mounted() {
        this.init();
        emitter.on('jym-export-start', (form) => {
            this.start(form);
        });
    },
    methods: {
        init() {
            let row = [];
            let my_row_data = [];
            let my_row_value = [];
            for(let item of this.json.attr.row){
                if(item.field!==undefined){
                    if(item.hide===undefined){
                        item.hide = false;
                    }
                    row.push(item);
                    my_row_data.push({
                        key: item.field,
                        label: item.title,
                    });
                    if(!item.hide){
                        my_row_value.push(item.field);
                    }
                }
            }
            this.row = row;
            this.myRow.data = my_row_data;
            this.myRow.value = my_row_value;
            //console.log(this.row);
        },
        start(form){
            this.show = true;
            this.form = form;
            this.result = {
                current_page: 0,
                data:[],
                last_page: 0,
                per_page:0,
                total:0,
            };
            
            this.pull();
        },
        pull(){
            let _this = this;
            
            this.result.current_page = this.result.current_page+1;
            

            //初始化进度条
            {
                this.loading.status = 'pull';
                this.loading.title = '正在导出第'+this.result.current_page+'页';
                if(this.result.last_page>0){
                    this.loading.title += '，共'+this.result.last_page+'页';
                    this.loading.jdt = Math.floor(this.result.current_page/this.result.last_page*100);
                }
                else{
                    this.loading.jdt = 0;
                }
                //最大不要超过100%,因为还要往后探测
                this.loading.jdt = this.loading.jdt>100?100:this.loading.jdt;
            }

            let form = {...this.form,...{
                    page: this.result.current_page,
                    limit: 20,
                }};
            if(this.result.data.length && this.result.data[0].id!==undefined){
                form.start_id = this.result.data[0].id;
            }
            
            jsonui.parser.api.ajax({
                url: this.json.attr.url,
                method: 'POST',
                data: form,
                success: function(res){
                    if(res.result.data.length){
                        res.result.data = [..._this.result.data,...res.result.data];
                        _this.result = res.result;
                        _this.pull();
                    }
                    else{
                        if(_this.result.data.length){
                            _this.loading.status = 'success';
                            _this.loading.title = '导出成功';
                            ElementPlus.ElNotification({
                                title: '通知',
                                dangerouslyUseHTMLString: true,
                                message: '<span style="word-break: break-all;">'+_this.get_file_name()+'完成！</span>',
                                type: 'success',
                            })
                        }
                        else{
                            _this.loading.status = 'error';
                            _this.loading.title = '导出失败';
                            _this.loading.desc = '没有数据';
                        }
                    }
                },
                error(msg){
                    _this.loading.status = 'error';
                    _this.loading.title = '导出失败';
                    _this.loading.desc = msg;
                }
            });
        },
        down(){
            
            //重新整理row
            let row = this.row;
            for(let key in this.row){
                let item = this.row[key];
                if(this.myRow.value.indexOf(item.field)>=0){
                    item.hide = false;
                }
                else{
                    item.hide = true;
                }
                this.row[key] = item;
            }
            
            let jsonData = [];
            for(let item of this.result.data){
                let data = {};
                for(let item1 of this.row){
                    if(!item1.hide){
                        data[item1.title] = item[item1.field];
                    }
                }
                jsonData.push(data);
            }

            // 创建工作簿
            let wb = XLSX.utils.book_new();
            // 将JSON数据转换为工作表
            let ws = XLSX.utils.json_to_sheet(jsonData);
            // **设置列宽**
            let lk = [];
            for(let item of this.row){
                if(!item.hide){
                    let width = 100;
                    if(item.width!==undefined){
                        width = item.width;
                    }
                    if(item.minWidth!==undefined){
                        width = item.minWidth;
                    }
                    lk.push({ wch: Math.ceil(width/8) });
                }
            }
            ws['!cols'] = lk;
            // 将工作表添加到工作簿
            XLSX.utils.book_append_sheet(wb, ws, this.json.attr.file_name);
            // 导出Excel文件
            XLSX.writeFile(wb, this.get_file_name());
        },
        get_file_name() {
            if(this.file_name===undefined){
                const now = new Date();
                const year = now.getFullYear();
                const month = String(now.getMonth() + 1).padStart(2, '0');
                const day = String(now.getDate()).padStart(2, '0');
                const hours = String(now.getHours()).padStart(2, '0');
                const minutes = String(now.getMinutes()).padStart(2, '0');
                const seconds = String(now.getSeconds()).padStart(2, '0');
                this.file_name = this.json.attr.file_name+`${year}${month}${day}_${hours}${minutes}${seconds}`+'.xlsx';
            }
            return this.file_name;
        }
    }
});


jsonui.parser.tool.createCss(`
.T6WFoufY2U{min-height:390px;}
.T6WFoufY2U .dcl{height:80px;}
.T6WFoufY2U .jdt{display:flex;justify-content: center;align-items: center;}
.T6WFoufY2U .title{text-align: center;padding: 15px 0 0 0;}
.T6WFoufY2U .desc{padding: 15px 0 0 0;text-align: center;}
.T6WFoufY2U .down{display:flex;justify-content: center;align-items: center;padding: 35px 0 0 0;height:32px;}
`);

app.component("jym-gap", {
    template: `
<div v-bind="json.attr" :style="style"></div>
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {
            style: '',
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            if (this.json.attr !== undefined && this.json.attr.height !== undefined) {
                this.style += 'width:' + this.json.attr.width + 'px;';
            }
            else{
                this.style += 'width:100%;';
            }
            if (this.json.attr !== undefined && this.json.attr.height !== undefined) {
                this.style += 'height:' + this.json.attr.height + 'px;';
            }
            else{
                this.style += 'height:10px;';
            }
            if (this.json.attr !== undefined && this.json.attr.style !== undefined) {
                this.style += this.json.attr.style;
            }
        }
    }
});

app.component("jym-jiayou-money-out-detail", {
    template: `
<div class="jym-jiayou-money-out-detail">
    <div class="tabs">
        <el-tabs v-model="activeName" class="demo-tabs" >
            <el-tab-pane label="发票下载" name="down">
                <el-table :data="data.bill_file?data.bill_file:[]" style="width: 100%">
                    <template #empty>
                        未上传发票
                    </template>
                    <el-table-column prop="id" label="序号" width="100">
                        <template #default="scope">
                            {{scope['$index']+1}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="create_time" label="上传时间" width="180">
                        <template #default="scope">
                            {{data.create_time}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="操作" minWidth="100">
                        <template #default="scope">
                            <el-link type="primary" @click="down(scope)">下载</el-link>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</div>
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {
            data: {

            },
            activeName: 'down',
        }
    },
    mounted() {
        this.getData();
    },
    methods: {
        getData() {
            let _this = this;
            if (this.json.attr === undefined || this.json.attr['data-url'] === undefined) return false;
            jsonui.parser.api.ajax({
                url: this.json.attr['data-url'],
                success: function (res) {
                    _this.data = res.result;
                },
                error: function (msg) {
                    layer.msg(msg);
                }
            });
        },
        down(e){
            window.open(this.data.bill_file[e['$index']].url);
        },
    }
});

jsonui.parser.tool.createCss(`
.jym-jiayou-money-out-detail{}
`);

app.component("jym-page-admin-home-jiayou", {
    template: `
<div class="jym-page-admin-home-jiayou">

    <div class="w10">
        <div class="title">数据总览</div>
        <template v-if="false">
                        <el-skeleton :rows="2" animated/>
                    </template>
                    <template v-else>
        <div class="sjzl">
            <div class="li">
                <div class="icon">
                    <el-icon>
                        <User/>
                    </el-icon>
                </div>
                <div class="nr">
                    <div class="sj">
                        <template v-if="pull.fqxjrewehu.status">
                            <div class="sjsz">{{pull.fqxjrewehu.result[0]}}</div>
                            <div class="sjdw">{{pull.fqxjrewehu.result[1]}}</div>
                        </template>
                    </div>
                    <div class="name">司机数量</div>
                </div>
            </div>
            <div class="li">
                <div class="icon">
                    <el-icon>
                        <OfficeBuilding/>
                    </el-icon>
                </div>
                <div class="nr">
                    <div class="sj">
                        <template v-if="pull.iuojwplicy.status">
                            <div class="sjsz">{{pull.iuojwplicy.result[0]}}</div>
                            <div class="sjdw">{{pull.iuojwplicy.result[1]}}</div>
                        </template>
                    </div>
                    <div class="name">入驻油气站数量</div>
                </div>
            </div>
            <div class="li">
                <div class="icon">
                    <el-icon>
                        <ShoppingCart/>
                    </el-icon>
                </div>
                <div class="nr">
                    <div class="sj">
                        <template v-if="pull.rpxqvnisrk.status">
                            <div class="sjsz">{{pull.rpxqvnisrk.result[0]}}</div>
                            <div class="sjdw">{{pull.rpxqvnisrk.result[1]}}</div>
                        </template>
                    </div>
                    <div class="name">销售订单数</div>
                </div>
            </div>
            <div class="li">
                <div class="icon">
                    <el-icon>
                        <DataAnalysis/>
                    </el-icon>
                </div>
                <div class="nr">
                    <div class="sj">
                        <template v-if="pull.moqxnqftpo.status">
                            <div class="sjsz">{{pull.moqxnqftpo.result[0]}}</div>
                            <div class="sjdw">{{pull.moqxnqftpo.result[1]}}</div>
                        </template>
                    </div>
                    <div class="name">销售总金额</div>
                </div>
            </div>
        </div>
        </template>
    </div>

    <el-divider style="margin:10px 0" border-style="hidden"/>
    <el-row :gutter="20">
        <el-col :span="6">
            <div class="w20">
                <div class="title">用户状态</div>
                <div class="nr">
                    <div style="width:200px;height:200px;">
                        <canvas id="myChart"></canvas>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="w20">
                <div class="title">每日注册新用户统计</div>
                <div class="nr">
                    <div style="width:calc(100% - 30px);height:200px;">
                        <canvas id="myChart1" style="width:100%;height:200px;"></canvas>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="w20">
                <div class="title">订单状态</div>
                <div class="nr">
                    <div style="width:200px;height:200px;">
                        <canvas id="myChart2"></canvas>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="w20">
                <div class="title">每日下单数量统计</div>
                <div class="nr">
                    <div style="width:calc(100% - 30px);height:200px;">
                        <canvas id="myChart3" style="width:100%;height:200px;"></canvas>
                    </div>
                </div>
            </div>
        </el-col>
    </el-row>

    <el-divider style="margin:10px 0" border-style="hidden"/>
    <el-row :gutter="20">
        <el-col :span="6">
            <el-card shadow="never">
                <template #header>
                    <div class="card-header">
                        <b>平台财务数据</b>
                    </div>
                </template>
                <div class="w5" style="height:93px;">
                    <template v-if="!pull.pkecvcnntb.status">
                        <el-skeleton :rows="2" animated/>
                    </template>
                    <template v-else>
                        <el-row :gutter="0">
                            <el-col :span="12">
                                <div class="wait">
                                    <el-statistic title="平台分账金额" :value="pull.pkecvcnntb.result"
                                                  value-style="font-size:32px;"/>
                                </div>
                            </el-col>
                            
                        </el-row>
                      
                    </template>
                </div>
            </el-card>
            <el-divider style="margin:10px 0" border-style="hidden"/>
            <el-card shadow="never">
                <template #header>
                    <div class="card-header">
                        <b>门店财务数据</b>
                    </div>
                </template>
                <div class="w5" style="height:93px;">
                    <template v-if="!pull.eqswicwnuf.status">
                        <el-skeleton :rows="2" animated/>
                    </template>
                    <template v-else>
                      
                        <el-row :gutter="0">
                            
                            <el-col :span="12">
                                <div class="wait">
                                    <el-statistic title="门店分账金额" :value="pull.eqswicwnuf.result"
                                                  value-style="font-size:32px;"/>
                                </div>
                            </el-col>
                        </el-row>
                    </template>
                </div>
            </el-card>
            
        </el-col>
        <el-col :span="18">
            <el-card shadow="never">
                <template #header>
                    <div class="order-img-header">
                        <div class="name">
                            <el-select
                                    v-model="pull.bcvftuftfr.param.item"
                                    placeholder="Select"
                                    :disabled="pull.bcvftuftfr.status?false:true"
                                    style="width: 160px"
                                    @change="initPull('bcvftuftfr')"
                            >
                                <el-option
                                        v-for="item in bcvftuftfr.item"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                />
                            </el-select>
                        </div>
                        <div class="attr">
                            <el-radio-group
                                    v-model="pull.bcvftuftfr.param.times"
                                    size="small"
                                    fill="#0052D9"
                                    :disabled="pull.bcvftuftfr.status?false:true"
                                    @change="initPull('bcvftuftfr')"
                            >
                                <el-radio-button
                                        v-for="item in bcvftuftfr.times"
                                        :label="item.value"
                                >{{item.label}}
                                </el-radio-button>
                            </el-radio-group>
                        </div>
                    </div>
                </template>
                <div class="w3">
                    <div :style="'display:'+(pull.bcvftuftfr.status?'none':'block')">
                        <el-skeleton :rows="5" animated/>
                    </div>
                    <div :style="'display:'+(pull.bcvftuftfr.status?'block':'none')+';height:290px'">
                        <canvas id="imgCountOrderChart"></canvas>
                    </div>
                </div>
            </el-card>
        </el-col>
    </el-row>


</div>
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {
            pull: {
                fqxjrewehu: {
                    status: false,
                    result: [0,''],
                },
                iuojwplicy: {
                    status: false,
                    result: [0,''],
                },
                rpxqvnisrk: {
                    status: false,
                    result: [0,''],
                },
                moqxnqftpo: {
                    status: false,
                    result: [0,''],
                },
                daamdejnxs: {
                    status: false,
                    result: 0,
                },
                ixrnryfkju: {
                    status: false,
                    result: 0,
                },
                hzmeeavudr: {
                    status: false,
                    result: 0,
                },
                kfcpwtcndo: {
                    status: false,
                    result: 0,
                },
                pkecvcnntb: {
                    status: false,
                    result: 0,
                },
                eqswicwnuf: {
                    status: false,
                    result: 0,
                },
                bcvftuftfr: {
                    status: false,
                    param:{
                        item: 'actual_order_money',
                        times: '30day',
                    },
                    result: 0,
                },
            },
            bcvftuftfr:{
                chart: null,
                item: [
                    {
                        value: 'actual_order_money',
                        label: '成交金额',
                    },
                    {
                        value: 'order_count',
                        label: '成交订单数',
                    },
                ],
                times:[
                    {
                        value: 'new',
                        label: '实时',
                    },
                    {
                        value: 'yesterday',
                        label: '昨日',
                    },
                    {
                        value: '7day',
                        label: '7天',
                    },
                    {
                        value: '30day',
                        label: '30天',
                    },
                ],
            },
        }
    },
    mounted() {
        this.getData();
    },
    methods: {
        getData() {
            if (this.json.attr === undefined || this.json.attr['data-url'] === undefined) return false;
            this.initPull(null);
        },
        initPull(pull_key) {
            let _this = this;
            for (let key in _this.pull) {
                if(pull_key===null || pull_key===key){
                    let item = _this.pull[key];
                    jsonui.parser.api.ajax({
                        url: this.json.attr['data-url'],
                        data: {
                            ...{
                                get: key,
                            },
                            ...item.param??{},
                        },
                        success: function (res) {
                            _this.successPull(key, res.result);
                        },
                        error: function (msg) {
                            layer.msg(msg);
                        }
                    });
                }
            }
        },
        successPull(key, result) {
            let _this = this;
            _this.pull[key].status = true;
            _this.pull[key].result = result;

            if(key==='daamdejnxs'){
                new Chart(document.getElementById('myChart'), {
                    type: 'doughnut',
                    data: {
                        labels: [
                            '有效用户',
                            '封号用户',
                            '注销用户'
                        ],
                        datasets: [{
                            label: '用户状态',
                            data: result,
                            backgroundColor: [
                                '#0052D9',
                                '#00C8DC',
                                '#FF5828'
                            ],
                            hoverOffset: 4
                        }]
                    },
                    options: {
                        plugins: {
                            legend: {
                                display: false,
                            }
                        },
                    }
                });
            }
            if(key==='ixrnryfkju'){
                new Chart(document.getElementById('myChart1'), {
                    type: 'line',
                    data: {
                        labels: result.labels,
                        datasets: [{
                            label: '注册数量',
                            data: result.data,
                            fill: false,
                            borderColor: '#0052D9',
                            tension: 0.1
                        }]
                    },
                    options: {
                        plugins: {
                            legend: {
                                display: false,
                            }
                        },
                        scales: {
                            y: {
                                suggestedMin: 0,
                                suggestedMax: 1
                            },
                        }
                    }
                });
            }
            if(key==='hzmeeavudr'){
                new Chart(document.getElementById('myChart2'), {
                    type: 'polarArea',
                    data: {
                        labels: result.labels,
                        datasets: [{
                            label: '订单状态',
                            data: result.data,
                            backgroundColor: [
                                '#00C8DC',
                                '#0052D9',
                                '#FF5828',
                                '#F04142',
                                '#FFBC11',
                                '#575EF4',
                            ]
                        }]
                    },
                    options: {
                        plugins: {
                            legend: {
                                display: false,
                            }
                        },
                    }
                });
            }
            if(key==='kfcpwtcndo'){
                new Chart(document.getElementById('myChart3'), {
                    type: 'line',
                    data: {
                        labels: result.labels,
                        datasets: [{
                            label: '下单数量',
                            data: result.data,
                            fill: false,
                            borderColor: '#0052D9',
                            tension: 0.1
                        }]
                    },
                    options: {
                        plugins: {
                            legend: {
                                display: false,
                            }
                        },
                        scales: {
                            y: {
                                suggestedMin: 0,
                                suggestedMax: 1
                            },
                        }
                    }
                });
            }
            if(key==='bcvftuftfr'){
                if (_this.bcvftuftfr.chart) {
                    _this.bcvftuftfr.chart.destroy();
                }
                _this.bcvftuftfr.chart = new Chart(document.getElementById('imgCountOrderChart'), result);
            }
        },
        target(url) {
            jsonui.parser.open.init({
                target: 'self',
                content: url,
            });
        },
    }
});

jsonui.parser.tool.createCss(`
.jym-page-admin-home-jiayou{}
.jym-page-admin-home-jiayou .w1{height:90px;}
.jym-page-admin-home-jiayou .w3{height:290px;}
.jym-page-admin-home-jiayou .w4{height:160px;}
.jym-page-admin-home-jiayou .w10{min-height:100px;background:#fff;}
.jym-page-admin-home-jiayou .w10 .title{font-size:14px;font-weight: bold;line-height:30px;padding:10px 20px 5px 20px;}
.jym-page-admin-home-jiayou .w10 .sjzl{display:flex;justify-content:space-between;padding:5px 20px 20px 20px;}
.jym-page-admin-home-jiayou .w10 .sjzl .li{display:flex;background:linear-gradient(to bottom right, #2670E8, #0052D9);width:100%;margin-right:15px;border-radius: 10px;}
.jym-page-admin-home-jiayou .w10 .sjzl .li{display:flex;background:linear-gradient(to bottom right, #F5F7FA, #F5F7FA);width:100%;margin-right:15px;border-radius: 10px;}
.jym-page-admin-home-jiayou .w10 .sjzl .li:last-child{margin-right:0;}
.jym-page-admin-home-jiayou .w10 .sjzl .li .icon{width:40%;height:100px;display:flex;justify-content:center;align-items:center;color:#0052D9;font-size:34px;}
.jym-page-admin-home-jiayou .w10 .sjzl .li .nr{}
.jym-page-admin-home-jiayou .w10 .sjzl .li .nr .sj{display:flex;width:100%;align-items:flex-end;height:56px;}
.jym-page-admin-home-jiayou .w10 .sjzl .li .nr .sj .sjsz{color:#0052D9;font-size:36px;font-weight:bold;}
.jym-page-admin-home-jiayou .w10 .sjzl .li .nr .sj .sjdw{color:#0052D9;padding:0 0 8px 8px;}
.jym-page-admin-home-jiayou .w10 .sjzl .li .nr .name{display:flex;width:100%;color:#3D485D;padding:10px 0 0 0;}
.jym-page-admin-home-jiayou .w20{min-height:160px;background:#fff;}
.jym-page-admin-home-jiayou .w20 .title{font-size:14px;font-weight: bold;line-height:30px;padding:10px 20px 5px 20px;}
.jym-page-admin-home-jiayou .w20 .nr{display:flex;justify-content:center;align-items: center;height:220px;}
.jym-page-admin-home-jiayou .divider{height:20px;}
.jym-page-admin-home-jiayou .card-header{display:flex;justify-content:space-between;align-items:center;}
.jym-page-admin-home-jiayou .card-header b{}
.jym-page-admin-home-jiayou .card-header span{}
.jym-page-admin-home-jiayou .order-img-header{display:flex;justify-content:space-between;align-items:center;}
.jym-page-admin-home-jiayou .info{display:flex;align-items:center;}
.jym-page-admin-home-jiayou .info .logo{}
.jym-page-admin-home-jiayou .info .xx{padding:0 0 0 20px;display:flex;align-items:center;flex-wrap:wrap;}
.jym-page-admin-home-jiayou .info .xx b{display:block;width:100%;height:26px;line-height:26px;}
.jym-page-admin-home-jiayou .info .xx span{display:block;width:100%;height:20px;line-height:20px;}
.jym-page-admin-home-jiayou .wait{width:100%;height:100%;cursor:pointer;}
.jym-page-admin-home-jiayou .wait:hover{}
.jym-page-admin-home-jiayou .wait>span{display:block;color:#409EFF;font-size:12px;padding:15px 0 10px;}
.jym-page-admin-home-jiayou .statistic-m{display:flex;justify-content:space-between;align-items:center;}
.jym-page-admin-home-jiayou .statistic-m span{}
.jym-page-admin-home-jiayou .statistic-m b{}
.jym-page-admin-home-jiayou .el-card{border:none;}
.jym-page-admin-home-jiayou .el-card__header{border:none;}



.jym-page-admin-home-jiayou .statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

.jym-page-admin-home-jiayou .statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.jym-page-admin-home-jiayou .statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.jym-page-admin-home-jiayou .green {
  color: #409EFF;
}
.jym-page-admin-home-jiayou .red {
  color: #F56C6C;
}


`);

app.component("jym-page-admin-payment-flow", {
    template: `
<div class="jym-page-admin-payment-flow">
    <el-tabs v-model="activeName">
        <el-tab-pane label="基本设置" name="setting">
            <el-card shadow="never">
                <template #header>
                    <div class="card-header">
                        <b>支付分流配置</b>
                    </div>
                </template>
                <el-divider content-position="left">支付终端配置</el-divider>
                <div class="terminal-list" v-if="json.terminals && json.terminals.length > 0">
                    <el-table :data="json.terminals" border style="width: 100%">
                        <el-table-column prop="payment_channel" label="终端名称" width="150"></el-table-column>
                        <el-table-column prop="merchant_id" label="商户ID" width="180"></el-table-column>
                        <el-table-column prop="terminal_id" label="终端ID" width="180"></el-table-column>
                        <el-table-column prop="terminal_key" label="终端密钥" width="180">
                            <template #default="scope">
                                <div style="word-break: break-all; max-height: 60px; overflow: auto;">
                                    {{ scope.row.terminal_key || '未设置' }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="是否默认" width="100">
                            <template #default="scope">
                                <el-tag type="success" v-if="scope.row.default_terminal === 1 || scope.row.default_terminal === true">默认</el-tag>
                                <el-tag type="info" v-else>非默认</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="180">
                            <template #default="scope">
                                <el-button type="primary" size="small" @click="editTerminal(scope.row)">编辑</el-button>
                                <el-button type="danger" size="small" @click="deleteTerminal(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="terminal-empty" v-else>
                    <el-empty description="暂无支付终端，请添加"></el-empty>
                </div>
                <div class="terminal-add">
                    <el-button type="primary" @click="showAddTerminalDialog">添加支付终端</el-button>
                </div>
            </el-card>
        </el-tab-pane>
        <el-tab-pane label="通用规则" name="commonRule" v-if="json.setting.status">
            <el-card shadow="never">
                <template #header>
                    <div class="card-header">
                        <b>通用规则配置 <el-tag size="small">按条件选择终端商户</el-tag></b>
                        <el-radio-group v-model="sceneType" size="small" @change="loadRules">
                            <el-radio-button label="all">所有场景</el-radio-button>
                            <el-radio-button :label="0">消费场景</el-radio-button>
                            <el-radio-button :label="1">充值场景</el-radio-button>
                        </el-radio-group>
                    </div>
                </template>
                
                <div class="rule-list" v-if="json.commonRules && json.commonRules.length > 0">
                    <el-table :data="json.commonRules" border style="width: 100%">
                        <el-table-column label="支付终端" width="220">
                            <template #default="scope">
                                <div>
                                    <div>{{ getTerminalNameByMerchantId(scope.row.merchant_id) }}</div>
                                    <div style="color: #999; font-size: 12px;">{{ scope.row.merchant_id }}</div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="order_count" label="订单数量尾数" width="120"></el-table-column>
                        <el-table-column prop="scene_type" label="场景类型" width="120">
                            <template #default="scope">
                                <el-tag type="success" v-if="scope.row.scene_type === 0">消费场景</el-tag>
                                <el-tag type="warning" v-else-if="scope.row.scene_type === 1">充值场景</el-tag>
                                <el-tag v-else>未知场景</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="sort" label="排序值" width="100"></el-table-column>
                        <el-table-column prop="remark" label="备注"></el-table-column>
                        <el-table-column label="操作" width="150">
                            <template #default="scope">
                                <el-button type="primary" size="small" @click="editCommonRule(scope.row, scope.$index)">编辑</el-button>
                                <el-button type="danger" size="small" @click="deleteCommonRule(scope.$index)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="rule-empty" v-else>
                    <el-empty description="暂无通用规则，请添加"></el-empty>
                </div>
                <div class="rule-add">
                    <el-button type="primary" @click="showAddCommonRuleDialog">添加通用规则</el-button>
                </div>
            </el-card>
        </el-tab-pane>
        <el-tab-pane label="特殊规则" name="specialRule" v-if="json.setting.status">
            <el-card shadow="never">
                <template #header>
                    <div class="card-header">
                        <b>特殊规则配置 <el-tag size="small" type="warning">优先级高于通用规则</el-tag></b>
                    </div>
                </template>
                
                <div class="rule-list" v-if="json.specialRules && json.specialRules.length > 0">
                    <el-table :data="json.specialRules" border style="width: 100%">
                        <el-table-column prop="condition_type" label="条件类型" width="120">
                            <template #default="scope">
                                <el-tag>{{ scope.row.condition_type === 0 ? '金额范围' : '其他条件' }}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="amount_min" label="金额下限" width="120">
                            <template #default="scope">{{ scope.row.amount_min || '0' }} 元</template>
                        </el-table-column>
                        <el-table-column prop="amount_max" label="金额上限" width="120">
                            <template #default="scope">{{ scope.row.amount_max || '不限' }} {{ scope.row.amount_max ? '元' : '' }}</template>
                        </el-table-column>
                        <el-table-column label="支付终端" width="220">
                            <template #default="scope">
                                <div>
                                    <div>{{ getTerminalNameByMerchantId(scope.row.merchant_id) }}</div>
                                    <div style="color: #999; font-size: 12px;">{{ scope.row.merchant_id }}</div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="merchant_count" label="商户前N笔" width="120"></el-table-column>
                        <el-table-column prop="scene_type" label="场景类型" width="120">
                            <template #default="scope">
                                <el-tag type="success" v-if="scope.row.scene_type === 0">消费场景</el-tag>
                                <el-tag type="warning" v-else-if="scope.row.scene_type === 1">充值场景</el-tag>
                                <el-tag v-else>未知场景</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="sort" label="排序值" width="100"></el-table-column>
                        <el-table-column prop="remark" label="备注"></el-table-column>
                        <el-table-column label="操作" width="150">
                            <template #default="scope">
                                <el-button type="primary" size="small" @click="editSpecialRule(scope.row, scope.$index)">编辑</el-button>
                                <el-button type="danger" size="small" @click="deleteSpecialRule(scope.$index)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="rule-empty" v-else>
                    <el-empty description="暂无特殊规则，请添加"></el-empty>
                </div>
                <div class="rule-add">
                    <el-button type="primary" @click="showAddSpecialRuleDialog">添加特殊规则</el-button>
                </div>
            </el-card>
        </el-tab-pane>
        <el-tab-pane label="分流日志" name="logs" v-if="json.setting.status">
            <el-card shadow="never">
                <template #header>
                    <div class="card-header">
                        <b>分流日志</b>
                        <div class="search-form">
                            <el-date-picker
                                v-model="dateRange"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                @change="loadLogs">
                            </el-date-picker>
                            <el-input
                                v-model="orderNo"
                                placeholder="请输入订单号"
                                clearable
                                style="width: 200px; margin-left: 10px;"
                                @keyup.enter="loadLogs">
                            </el-input>
                            <el-button type="primary" @click="loadLogs" style="margin-left: 10px;">查询</el-button>
                        </div>
                    </div>
                </template>
                
                <div class="logs-list" v-if="json.logs && json.logs.length > 0">
                    <el-table :data="json.logs" border style="width: 100%">
                        <el-table-column prop="create_time" label="时间" width="180"></el-table-column>
                        <el-table-column prop="order_no" label="订单号" width="220"></el-table-column>
                        <el-table-column label="金额" width="120">
                            <template #default="scope">
                                {{ scope.row.payment_amount || '0' }} 元
                            </template>
                        </el-table-column>
                        <el-table-column label="支付终端">
                            <template #default="scope">
                                <div>
                                    <div>{{ getTerminalNameByMerchantId(scope.row.merchant_id) }}</div>
                                    <div style="color: #999; font-size: 12px;">{{ scope.row.merchant_id }}</div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="规则类型">
                            <template #default="scope">
                                <el-tag v-if="scope.row.rule_type == 1" type="warning">特殊规则</el-tag>
                                <el-tag v-else-if="scope.row.rule_type == 0" type="success">通用规则</el-tag>
                                <el-tag v-else type="info">默认商户</el-tag>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination">
                        <el-pagination
                            v-model:current-page="currentPage"
                            v-model:page-size="pageSize"
                            :page-sizes="[10, 20, 50, 100]"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="totalLogs"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange">
                        </el-pagination>
                    </div>
                </div>
                <div class="logs-empty" v-else>
                    <el-empty description="暂无日志记录"></el-empty>
                </div>
            </el-card>
        </el-tab-pane>
        <!--<el-tab-pane label="规则测试" name="test" v-if="json.setting.status">
            <el-card shadow="never">
                <template #header>
                    <div class="card-header">
                        <b>规则匹配测试</b>
                    </div>
                </template>
                
                <div class="test-form">
                    <el-form :model="testForm" label-width="120px">
                        <el-form-item label="支付场景">
                            <el-select v-model="testForm.scene_type" placeholder="请选择支付场景">
                                <el-option label="默认场景" value="all"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="订单金额">
                            <el-input-number v-model="testForm.amount" :precision="2" :min="0.01" :step="0.01"></el-input-number>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="testMatch">开始测试</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                
                <div class="test-result" v-if="testResult">
                    <el-divider content-position="left">测试结果</el-divider>
                    <el-result
                        icon="success"
                        title="匹配成功"
                        sub-title="找到了符合条件的支付商户">
                        <template #extra>
                            <div class="result-info">
                                <p><strong>支付终端：</strong>{{ getTerminalNameByMerchantId(testResult.merchant_id) }}</p>
                                <p><strong>商户ID：</strong>{{ testResult.merchant_id }}</p>
                                <p><strong>规则类型：</strong>
                                    <el-tag v-if="testResult.is_special == 1" type="warning">特殊规则</el-tag>
                                    <el-tag v-else-if="testResult.is_special == 0" type="success">通用规则</el-tag>
                                    <el-tag v-else-if="testResult.terminal && testResult.terminal.default_terminal == 1" type="primary">默认终端</el-tag>
                                    <el-tag v-else type="info">默认商户</el-tag>
                                </p>
                                <p v-if="testResult.rule"><b>规则详情：</b>{{ testResult.rule && testResult.rule.text ? testResult.rule.text : '默认规则' }}</p>
                                <p v-else-if="testResult.terminal && testResult.terminal.default_terminal == 1"><b>备注：</b>未匹配到规则，使用默认终端</p>
                                <p v-else><b>备注：</b>未匹配到规则，使用第一个可用商户</p>
                            </div>
                        </template>
                    </el-result>
                </div>
            </el-card>
        </el-tab-pane>-->
    </el-tabs>

    <!-- 测试结果弹窗 -->
    <el-dialog
        title="规则匹配结果"
        v-model="testResultVisible"
        width="500px">
        <div class="result-info" v-if="testResult">
            <p><b>订单金额：</b>{{ testForm.amount }} 元</p>
            <p><b>支付场景：</b>{{ testForm.scene_type === 'all' ? '默认场景' : '已匹配' }}</p>
            <p><b>匹配结果：</b>{{ testResult.merchant_id ? '已匹配' : '未匹配' }}</p>
            <template v-if="testResult.merchant_id">
                <p><b>支付终端：</b>{{ getTerminalNameByMerchantId(testResult.merchant_id) }}</p>
                <p><b>商户ID：</b>{{ testResult.merchant_id }}</p>
                <p><b>规则类型：</b>
                    <el-tag v-if="testResult.is_special == 1" type="warning">特殊规则</el-tag>
                    <el-tag v-else-if="testResult.is_special == 0" type="success">通用规则</el-tag>
                    <el-tag v-else-if="testResult.terminal && testResult.terminal.default_terminal == 1" type="primary">默认终端</el-tag>
                    <el-tag v-else type="info">默认商户</el-tag>
                </p>
                <p v-if="testResult.rule"><b>规则详情：</b>{{ testResult.rule && testResult.rule.text ? testResult.rule.text : '默认规则' }}</p>
            </template>
            <p v-else><b>未找到匹配规则或默认终端，无法处理此订单</b></p>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="testResultVisible = false">关闭</el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 添加/编辑终端弹窗 -->
    <el-dialog v-model="terminalDialogVisible" :title="editingTerminalId ? '编辑支付终端' : '添加支付终端'" width="500px">
        <el-form :model="terminalForm" label-width="100px">
            <el-form-item label="终端名称">
                <el-input v-model="terminalForm.payment_channel" placeholder="请输入终端名称，如：微信支付"></el-input>
            </el-form-item>
            <el-form-item label="商户ID">
                <el-input v-model="terminalForm.merchant_id" placeholder="请输入商户ID"></el-input>
            </el-form-item>
            <el-form-item label="终端ID">
                <el-input v-model="terminalForm.terminal_id" placeholder="请输入终端ID"></el-input>
            </el-form-item>
            <el-form-item label="终端密钥">
                <el-input v-model="terminalForm.terminal_key" type="textarea" placeholder="请输入终端密钥（可选）"></el-input>
            </el-form-item>
            <el-form-item label="是否默认终端">
                <el-switch v-model="terminalForm.default_terminal"></el-switch>
                <span style="margin-left: 10px; color: #909399; font-size: 12px;">设为默认终端后，其他终端将自动变为非默认</span>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="terminalForm.remark" type="textarea" placeholder="备注信息（可选）"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="terminalDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="saveTerminal" :loading="saveTerminalLoading">确认</el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 添加通用规则弹窗 -->
    <el-dialog v-model="commonRuleDialogVisible" :title="editingCommonRuleIndex >= 0 ? '编辑通用规则' : '添加通用规则'" width="500px">
        <el-form :model="commonRuleForm" label-width="100px">
            <el-form-item label="支付终端">
                <el-select v-model="commonRuleForm.merchant_id" placeholder="请选择商户">
                    <el-option 
                        v-for="item in json.terminals" 
                        :key="item.merchant_id" 
                        :label="item.payment_channel + ' (' + item.merchant_id + ')'" 
                        :value="item.merchant_id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="订单数量尾数">
                <el-input-number v-model="commonRuleForm.order_count" :min="0" :max="100" :step="1" placeholder="默认为1"></el-input-number>
                <div style="width:100%;height:10px;"></div>
                <el-alert description="统计当前订单总数，截取订单总数的尾数=当前设置值时，即生效（可多位,数字大的优先匹配，可通过大数字精细化控制）" />
            </el-form-item>
            <el-form-item label="场景类型">
                <el-radio-group v-model="commonRuleForm.scene_type">
                    <el-radio :label="0">消费场景</el-radio>
                    <el-radio :label="1">充值场景</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="排序值">
                <el-input-number v-model="commonRuleForm.sort" :min="0" :max="999" :step="1" placeholder="数值越小优先级越高"></el-input-number>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="commonRuleForm.remark" type="textarea" placeholder="规则备注信息"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="commonRuleDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addCommonRule">确认</el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 添加特殊规则弹窗 -->
    <el-dialog v-model="specialRuleDialogVisible" :title="editingSpecialRuleIndex >= 0 ? '编辑特殊规则' : '添加特殊规则'" width="500px">
        <el-form :model="specialRuleForm" label-width="120px">
            <el-form-item label="条件类型">
                <el-radio-group v-model="specialRuleForm.condition_type">
                    <el-radio :label="0">金额范围</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="金额下限">
                <el-input-number v-model="specialRuleForm.amount_min" :min="0" :precision="2" :step="0.01" placeholder="不填则无下限"></el-input-number>
            </el-form-item>
            <el-form-item label="金额上限">
                <el-input-number v-model="specialRuleForm.amount_max" :min="0" :precision="2" :step="0.01" placeholder="不填则无上限"></el-input-number>
            </el-form-item>
            <el-form-item label="支付终端">
                <el-select v-model="specialRuleForm.merchant_id" placeholder="请选择商户">
                    <el-option 
                        v-for="item in json.terminals" 
                        :key="item.merchant_id" 
                        :label="item.payment_channel + ' (' + item.merchant_id + ')'" 
                        :value="item.merchant_id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商户前N笔">
                <el-input-number v-model="specialRuleForm.merchant_count" :min="0" :step="1" placeholder="不填则无限制"></el-input-number>
            </el-form-item>
            <el-form-item label="场景类型">
                <el-radio-group v-model="specialRuleForm.scene_type">
                    <el-radio :label="0">消费场景</el-radio>
                    <el-radio :label="1">充值场景</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="排序值">
                <el-input-number v-model="specialRuleForm.sort" :min="0" :max="999" :step="1" placeholder="数值越小优先级越高"></el-input-number>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="specialRuleForm.remark" type="textarea" placeholder="规则备注信息"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="specialRuleDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addSpecialRule">确认</el-button>
            </span>
        </template>
    </el-dialog>
</div>
    `,
    props: {
        role: { type: Object, default: () => ({}) },
        "data-url": { type: String, default: "/jiayou/admin_payment_flow/setting/role/admin" },
        "rules-url": { type: String, default: "/jiayou/admin_payment_flow/rules/role/admin" },
        "save-terminal-url": { type: String, default: "/jiayou/admin_payment_flow/terminal/role/admin" },
        "delete-terminal-url": { type: String, default: "/jiayou/admin_payment_flow/delete_terminal/role/admin" },
        "save-common-rules-url": { type: String, default: "/jiayou/admin_payment_flow/common_rules/role/admin" },
        "save-special-rules-url": { type: String, default: "/jiayou/admin_payment_flow/save_special_rules/role/admin" },
        "logs-url": { type: String, default: "/jiayou/admin_payment_flow/get_logs/role/admin" },
        "test-match-url": { type: String, default: "/jiayou/admin_payment_flow/test_match/role/admin" },
        "jiayouzhan_id": { type: [Number, String] },
    },
    data() {
        return {
            activeName: 'setting',
            json: {
                setting: {},
                terminals: [],
                commonRules: [],
                specialRules: [],
                logs: []
            },
            // 终端相关
            terminalDialogVisible: false,
            terminalForm: {
                payment_channel: '',
                merchant_id: '',
                terminal_id: '',
                terminal_key: '',
                remark: '',
                default_terminal: false
            },
            saveTerminalLoading: false,
            editingTerminalId: null,
            // 通用规则相关
            sceneType: 'all',
            commonRuleDialogVisible: false,
            commonRuleForm: {
                merchant_id: '',
                order_count: 1,
                scene_type: 0,
                sort: 0,
                remark: ''
            },
            editingCommonRuleIndex: -1,
            // 特殊规则相关
            specialRuleDialogVisible: false,
            specialRuleForm: {
                condition_type: 0,
                amount_min: '',
                amount_max: '',
                merchant_id: '',
                merchant_count: 0,
                scene_type: 0,
                sort: 0,
                remark: ''
            },
            editingSpecialRuleIndex: -1,
            is_single: true,
            // 日志相关
            dateRange: [],
            orderNo: '',
            currentPage: 1,
            pageSize: 10,
            totalLogs: 0,
            // 测试相关
            testForm: {
                scene_type: 'all',
                amount: 0.01
            },
            testResultVisible: false,
            testResult: null
        }
    },
    computed: {
        // 计算属性：将status转换为布尔值供el-switch使用
        switchStatus: {
            get() {
                // 确保转换为布尔值
                return this.json.setting.status === 1 || this.json.setting.status === true;
            },
            set(value) {
                // 将布尔值转换回数字，保持与后端一致
                this.json.setting.status = value ? 1 : 0;
            }
        }
    },
    created() {
        this.loadData();

        // 监听标签页切换
        this.$nextTick(() => {
            // 如果标签页切换到日志，加载日志数据
            this.$watch('activeName', (newValue) => {
                if (newValue === 'logs' && this.json.setting.status == 1) {
                    this.loadLogs();
                }
            });
        });
    },
    methods: {
        // 添加根据商户ID获取终端名称的方法
        getTerminalNameByMerchantId(merchantId) {
            if (!merchantId || !this.json.terminals || !Array.isArray(this.json.terminals)) {
                return '';
            }
            
            const terminal = this.json.terminals.find(term => term.merchant_id === merchantId);
            return terminal ? terminal.payment_channel : '';
        },
        
        // 加载基础数据
        loadData() {
            let _this = this;
            console.log('正在加载支付分流数据，URL属性：', this['data-url']);
            
            // 获取加油站ID
            const jiayouzhanId = this.getJiayouzhanId();
            console.log('当前加油站ID:', jiayouzhanId);
            
            // 构建完整URL
            let apiUrl = this["data-url"] || "/jiayou/admin_payment_flow/setting/role/admin";
            if (jiayouzhanId) {
                // 使用check参数，与后端匹配
                if (apiUrl.indexOf('check=') === -1) {
                    apiUrl += (apiUrl.indexOf('?') === -1 ? '?' : '&') + 'check=' + jiayouzhanId;
                }
            }
            
            console.log('发送请求到:', apiUrl);
            
            
            jsonui.parser.api.ajax({
                url: apiUrl,
                method: 'GET',
                success: function(res) {
                    //alert(apiUrl);
                    console.log('收到API响应:', res);
                    if (res.code === 0) {
                        // 安全处理API返回数据
                        if (res.result) {
                            console.log('解析result数据:', res.result);
                            // 根据后端返回的数据结构设置
                            if (res.result.setting) {
                                // 将status确保为数字类型 1/0
                                _this.json.setting.status = parseInt(res.result.setting.status) || 0;
                                console.log('设置status值:', _this.json.setting.status, '类型:', typeof _this.json.setting.status);
                            } else {
                                _this.json.setting.status = 0;
                            }
                            
                            // 处理terminals数据
                            _this.json.terminals = res.result.terminals;
                            _this.json.commonRules = res.result.common_rules;
                            _this.json.specialRules = res.result.special_rules;
                            // if (res.result.terminals && Array.isArray(res.result.terminals)) {
                            //     _this.json.setting.terminals = res.result.terminals;
                            //     _this.json.setting.commonRules = res.result.common_rules;
                            //     _this.json.setting.specialRules = res.result.special_rules;
                            // } else {
                            //     _this.json.setting.terminals = [];
                            //     _this.json.setting.commonRules = [];
                            //     _this.json.setting.specialRules = [];
                            // }
                            
                            console.log('设置后的组件数据:', _this.json);
                            //alert()
                            // 如果status开启，加载规则
                            if (_this.json.setting.status == 1) {
                                _this.loadRules();
                            }
                        } else {
                            layer.msg('返回数据格式错误');
                            // 确保使用默认值
                            _this.json.setting = {
                                status: 0,
                            };
                        }
                    } else {
                        layer.msg(res.msg || '加载数据失败');
                    }
                },
                error: function(msg) {
                    layer.msg(msg);
                    console.error('API请求失败:', msg);
                    // 确保发生错误时使用默认值
                    _this.json.setting = {
                        status: 0,
                    };
                }
            });
        },
        
        // === 终端管理 ===
        showAddTerminalDialog() {
            this.terminalForm = {
                payment_channel: '',
                merchant_id: '',
                terminal_id: '',
                terminal_key: '',
                remark: '',
                default_terminal: false
            };
            this.editingTerminalId = null;
            this.terminalDialogVisible = true;
        },
        
        editTerminal(row) {
            this.terminalForm = {
                payment_channel: row.payment_channel,
                merchant_id: row.merchant_id,
                terminal_id: row.terminal_id || '',
                terminal_key: row.terminal_key || '',
                remark: row.remark || '',
                default_terminal: row.default_terminal === 1 || row.default_terminal === true
            };
            this.editingTerminalId = row.id;
            this.terminalDialogVisible = true;
        },
        
        saveTerminal() {
            if (!this.terminalForm.payment_channel) {
                layer.msg('请输入终端名称');
                return;
            }
            if (!this.terminalForm.merchant_id) {
                layer.msg('请输入商户ID');
                return;
            }
            
            let _this = this;
            _this.saveTerminalLoading = true;
            
            // 获取加油站ID
            const jiayouzhanId = this.getJiayouzhanId();
            
            // 构建URL
            let apiUrl = this["save-terminal-url"] || "/jiayou/admin_payment_flow/terminal/role/admin";
            if (jiayouzhanId) {
                apiUrl += (apiUrl.indexOf('?') === -1 ? '?' : '&') + 'check=' + jiayouzhanId;
            }
            
            // 准备请求数据
            const requestData = {
                payment_channel: this.terminalForm.payment_channel,
                merchant_id: this.terminalForm.merchant_id,
                terminal_id: this.terminalForm.terminal_id || '',
                terminal_key: this.terminalForm.terminal_key || '',
                remark: this.terminalForm.remark || '',
                default_terminal: this.terminalForm.default_terminal ? 1 : 0
            };
            
            // 如果是编辑模式，添加ID
            if (this.editingTerminalId) {
                requestData.id = this.editingTerminalId;
            }
            
            jsonui.parser.api.ajax({
                url: apiUrl,
                method: 'POST',
                data: requestData,
                success: function(res) {
                    _this.saveTerminalLoading = false;
                    if (res.code === 0) {
                        layer.msg(res.msg || (_this.editingTerminalId ? '修改成功' : '添加成功'));
                        _this.terminalDialogVisible = false;
                        _this.loadData();
                    } else {
                        layer.msg(res.msg || (_this.editingTerminalId ? '修改失败' : '添加失败'));
                    }
                },
                error: function(msg) {
                    _this.saveTerminalLoading = false;
                    layer.msg(msg);
                }
            });
        },
        
        deleteTerminal(row) {
            let _this = this;
            this.$confirm('确定要删除这个支付终端吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 获取加油站ID
                const jiayouzhanId = this.getJiayouzhanId();
                
                // 构建URL
                let apiUrl = this["delete-terminal-url"] || "/jiayou/admin_payment_flow/delete_terminal/role/admin";
                if (jiayouzhanId) {
                    apiUrl += (apiUrl.indexOf('?') === -1 ? '?' : '&') + 'check=' + jiayouzhanId;
                }
                
                jsonui.parser.api.ajax({
                    url: apiUrl,
                    method: 'POST',
                    data: {
                        id: row.id,
                        _method: 'DELETE'  // 模拟DELETE请求
                    },
                    success: function(res) {
                        if (res.code === 0) {
                            layer.msg(res.msg || '删除成功');
                            _this.loadData();
                        } else {
                            layer.msg(res.msg || '删除失败');
                        }
                    },
                    error: function(msg) {
                        layer.msg(msg);
                    }
                });
            }).catch(() => {});
        },
        
        // === 通用规则管理 ===
        showAddCommonRuleDialog() {
            this.commonRuleForm = {
                merchant_id: '',
                order_count: 1,
                scene_type: 0,
                sort: 0,
                remark: ''
            };
            this.editingCommonRuleIndex = -1;
            this.commonRuleDialogVisible = true;
        },
        
        editCommonRule(row, index) {
            this.commonRuleForm = JSON.parse(JSON.stringify(row));
            this.editingCommonRuleIndex = index;
            this.commonRuleDialogVisible = true;
        },
        
        addCommonRule() {
            if (!this.commonRuleForm.merchant_id) {
                this.$message.error('请选择商户ID');
                return;
            }
            
            let ruleData = JSON.parse(JSON.stringify(this.commonRuleForm));
            
            if (this.editingCommonRuleIndex >= 0) {
                // 编辑模式，更新本地数据
                this.json.commonRules[this.editingCommonRuleIndex] = ruleData;
            } else {
                // 新增模式，添加到本地数据
                this.json.commonRules.push(ruleData);
            }
            
            // 立即保存到服务器
            this.saveCommonRule(ruleData, this.editingCommonRuleIndex >= 0);
            
            this.commonRuleDialogVisible = false;
        },
        
        saveCommonRule(rule, isEdit) {
            let _this = this;
            // 显示加载中
            layer.load(1);
            
            // 获取加油站ID
            const jiayouzhanId = this.getJiayouzhanId();
            
            // 构建URL
            let apiUrl = this["save-common-rules-url"] || "/jiayou/admin_payment_flow/common_rules/role/admin";
            if (jiayouzhanId) {
                apiUrl += (apiUrl.indexOf('?') === -1 ? '?' : '&') + 'check=' + jiayouzhanId;
            }
            
            jsonui.parser.api.ajax({
                url: apiUrl,
                method: 'POST',
                data: {
                    scene_type: this.sceneType || 'all',
                    is_single: 1, // 标记为单条保存
                    rule: rule,
                    is_edit: isEdit ? 1 : 0
                },
                success: function(res) {
                    layer.closeAll('loading');
                    if (res.code === 0) {
                        layer.msg(res.msg || '保存成功');
                        _this.loadRules(); // 重新加载所有规则
                    } else {
                        layer.msg(res.msg || '保存失败');
                    }
                },
                error: function(msg) {
                    layer.closeAll('loading');
                    layer.msg(msg);
                }
            });
        },
        
        deleteCommonRule(index) {
            let _this = this;
            this.$confirm('确定要删除这条通用规则吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 获取规则ID
                const rule = _this.json.commonRules[index];
                
                // 如果规则有ID，则从服务器删除
                if (rule.id) {
                    // 显示加载中
                    layer.load(1);
                    
                    // 获取加油站ID
                    const jiayouzhanId = _this.getJiayouzhanId();
                    
                    // 构建URL
                    let apiUrl = _this["save-common-rules-url"] || "/jiayou/admin_payment_flow/common_rules/role/admin";
                    if (jiayouzhanId) {
                        apiUrl += (apiUrl.indexOf('?') === -1 ? '?' : '&') + 'check=' + jiayouzhanId;
                    }
                    
                    jsonui.parser.api.ajax({
                        url: apiUrl,
                        method: 'POST',
                        data: {
                            scene_type: _this.sceneType || 'all',
                            is_single: 1,  // 添加is_single参数，表示这是单条操作
                            is_delete: 1,
                            rule_id: rule.id
                        },
                        success: function(res) {
                            layer.closeAll('loading');
                            if (res.code === 0) {
                                layer.msg(res.msg || '删除成功');
                                _this.json.commonRules.splice(index, 1);
                                _this.loadRules(); // 重新加载所有规则
                            } else {
                                layer.msg(res.msg || '删除失败');
                            }
                        },
                        error: function(msg) {
                            layer.closeAll('loading');
                            layer.msg(msg);
                        }
                    });
                } else {
                    // 本地删除
                    _this.json.commonRules.splice(index, 1);
                }
            }).catch(() => {});
        },
        
        // === 特殊规则管理 ===
        showAddSpecialRuleDialog() {
            this.specialRuleForm = {
                condition_type: 0,
                amount_min: '',
                amount_max: '',
                merchant_id: '',
                merchant_count: 0,
                scene_type: 0,
                sort: 0,
                remark: ''
            };
            this.editingSpecialRuleIndex = -1;
            this.specialRuleDialogVisible = true;
            this.is_single = true;
        },
        
        editSpecialRule(row, index) {
            this.specialRuleForm = JSON.parse(JSON.stringify(row));
            this.editingSpecialRuleIndex = index;
            this.specialRuleDialogVisible = true;
            this.is_single = true;
        },
        
        addSpecialRule() {
            if (!this.specialRuleForm.merchant_id) {
                this.$message.error('请选择商户ID');
                return;
            }
            
            let ruleData = JSON.parse(JSON.stringify(this.specialRuleForm));
            
            if (this.editingSpecialRuleIndex >= 0) {
                // 编辑模式
                this.json.specialRules[this.editingSpecialRuleIndex] = ruleData;
                // 编辑模式下保持is_single为true
            } else {
                // 新增模式
                this.json.specialRules.push(ruleData);
                this.is_single = false;
            }
            
            // 立即保存到服务器
            this.saveSpecialRule(ruleData, this.editingSpecialRuleIndex >= 0);
            
            this.specialRuleDialogVisible = false;
        },
        
        saveSpecialRule(rule, isEdit) {
            let _this = this;
            // 显示加载中
            layer.load(1);
            
            // 获取加油站ID
            const jiayouzhanId = this.getJiayouzhanId();
            
            // 构建URL
            let apiUrl = this["save-special-rules-url"] || "/jiayou/admin_payment_flow/save_special_rules/role/admin";
            if (jiayouzhanId) {
                apiUrl += (apiUrl.indexOf('?') === -1 ? '?' : '&') + 'check=' + jiayouzhanId;
            }
            
            // 准备发送的数据
            const requestData = {
                scene_type: 'all',
                is_single: this.is_single ? 1 : 0, // 单条处理标志
                is_edit: isEdit ? 1 : 0
            };
            
            // 根据是否为单条保存，使用不同的参数名
            if (this.is_single) {
                requestData.rules = rule; // 单条保存使用rule参数
            } else {
                requestData.rules = rule; // 批量保存使用rules参数
            }
            
            console.log('特殊规则保存参数:', {
                'is_single': this.is_single,
                'is_single值': requestData.is_single,
                '是否编辑模式': isEdit,
                '规则ID': rule.id || '无',
                '参数名称': this.is_single ? 'rule' : 'rules',
                '规则数据': rule
            });
            
            jsonui.parser.api.ajax({
                url: apiUrl,
                method: 'POST',
                data: requestData,
                success: function(res) {
                    layer.closeAll('loading');
                    if (res.code === 0) {
                        layer.msg(res.msg || '保存成功');
                        _this.loadRules(); // 重新加载所有规则
                    } else {
                        layer.msg(res.msg || '保存失败');
                        console.error('保存特殊规则失败:', res);
                    }
                },
                error: function(msg) {
                    layer.closeAll('loading');
                    layer.msg(msg);
                    console.error('保存特殊规则请求错误:', msg);
                }
            });
        },
        
        deleteSpecialRule(index) {
            let _this = this;
            this.$confirm('确定要删除这条特殊规则吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 获取规则ID
                const rule = _this.json.specialRules[index];
                
                // 如果规则有ID，则从服务器删除
                if (rule.id) {
                    // 显示加载中
                    layer.load(1);
                    
                    // 获取加油站ID
                    const jiayouzhanId = _this.getJiayouzhanId();
                    
                    // 构建URL
                    let apiUrl = _this["save-special-rules-url"] || "/jiayou/admin_payment_flow/save_special_rules/role/admin";
                    if (jiayouzhanId) {
                        apiUrl += (apiUrl.indexOf('?') === -1 ? '?' : '&') + 'check=' + jiayouzhanId;
                    }
                    
                    jsonui.parser.api.ajax({
                        url: apiUrl,
                        method: 'POST',
                        data: {
                            scene_type: 'all',
                            is_single: 1,  // 添加is_single参数，表示这是单条操作
                            is_delete: 1,
                            rule_id: rule.id
                        },
                        success: function(res) {
                            layer.closeAll('loading');
                            if (res.code === 0) {
                                layer.msg(res.msg || '删除成功');
                                _this.json.specialRules.splice(index, 1);
                                _this.loadRules(); // 重新加载所有规则
                            } else {
                                layer.msg(res.msg || '删除失败');
                            }
                        },
                        error: function(msg) {
                            layer.closeAll('loading');
                            layer.msg(msg);
                        }
                    });
                } else {
                    // 本地删除
                    _this.json.specialRules.splice(index, 1);
                }
            }).catch(() => {});
        },
        
        // === 日志查询 ===
        loadLogs() {
            let _this = this;
            
            // 显示加载中
            layer.load(1);
            
            // 获取加油站ID
            const jiayouzhanId = this.getJiayouzhanId();
            console.log('加载日志 - 加油站ID:', jiayouzhanId);
            
            // 构建URL
            let apiUrl = this["logs-url"] || "/jiayou/admin_payment_flow/get_logs/role/admin";
            if (jiayouzhanId) {
                apiUrl += (apiUrl.indexOf('?') === -1 ? '?' : '&') + 'check=' + jiayouzhanId;
            }
            
            console.log('加载日志 - 请求URL:', apiUrl);
            
            jsonui.parser.api.ajax({
                url: apiUrl,
                method: 'GET',
                data: {
                    page: this.currentPage,
                    limit: this.pageSize,
                    start_date: this.dateRange && this.dateRange[0] ? this.formatDate(this.dateRange[0]) : '',
                    end_date: this.dateRange && this.dateRange[1] ? this.formatDate(this.dateRange[1]) : '',
                    order_no: this.orderNo
                },
                success: function(res) {
                    layer.closeAll('loading');
                    console.log('加载日志 - 响应:', res);
                    
                    if (res.code === 0) {
                        // 处理后端返回的数据
                        const data = res.result || res.data || {};
                        console.log('日志数据:', data);
                        
                        // 直接使用后端返回的日志数据
                        _this.json.logs = data.logs || data.list || [];
                        _this.totalLogs = data.total || 0;
                        
                        console.log('加载日志 - 成功，共', _this.json.logs.length, '条记录');
                    } else {
                        layer.msg(res.msg || '加载日志失败');
                        console.error('加载日志 - 失败:', res.msg);
                    }
                },
                error: function(msg) {
                    layer.closeAll('loading');
                    layer.msg(msg || '加载日志失败');
                    console.error('加载日志 - 请求错误:', msg);
                }
            });
        },
        
        handleSizeChange(val) {
            this.pageSize = val;
            this.loadLogs();
        },
        
        handleCurrentChange(val) {
            this.currentPage = val;
            this.loadLogs();
        },
        
        formatDate(date) {
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const day = date.getDate().toString().padStart(2, '0');
            return `${year}-${month}-${day}`;
        },
        
        // === 规则测试 ===
        testMatch() {
            if (!this.testForm.amount) {
                layer.msg('请输入订单金额');
                return;
            }
            
            let _this = this;
            
            // 获取加油站ID
            const jiayouzhanId = this.getJiayouzhanId();
            
            // 构建URL
            let apiUrl = this["test-match-url"] || "/jiayou/admin_payment_flow/test_match/role/admin";
            if (jiayouzhanId) {
                apiUrl += (apiUrl.indexOf('?') === -1 ? '?' : '&') + 'check=' + jiayouzhanId;
            }
            
            jsonui.parser.api.ajax({
                url: apiUrl,
                method: 'POST',
                data: {
                    scene_type: 'all',
                    amount: this.testForm.amount
                },
                success: function(res) {
                    if (res.code === 0) {
                        _this.testResult = res.result || res.data;
                        _this.testResultVisible = true;
                    } else {
                        layer.msg(res.msg || '测试失败');
                    }
                },
                error: function(msg) {
                    layer.msg(msg);
                }
            });
        },
        
        // 添加获取加油站ID的工具方法
        getJiayouzhanId() {
            // 优先使用props传入的jiayouzhan_id
            if (this.jiayouzhan_id) {
                return this.jiayouzhan_id;
            }
            
            // 其次尝试从role对象获取
            if (this.role && this.role.id) {
                return this.role.id;
            }
            
            // 最后尝试从URL中提取
            const urlParams = new URLSearchParams(window.location.search);
            const checkParam = urlParams.get('check');
            
            if (checkParam) {
                return checkParam;
            }
            
            // 尝试从content参数中提取
            const contentParam = urlParams.get('content');
            if (contentParam) {
                // 解析content参数中的check值
                const contentUrl = decodeURIComponent(contentParam);
                const checkMatch = /check[\/=](\d+)/.exec(contentUrl);
                if (checkMatch && checkMatch[1]) {
                    return checkMatch[1];
                }
            }
            
            console.warn('无法获取加油站ID');
            return '';
        },

        // 添加一个工具方法来辅助调试
        debugDataStructure(message, data) {
            console.log(`[支付分流组件] ${message}`, data);
            return data;
        }
    }
});

jsonui.parser.tool.createCss(`
.jym-page-admin-payment-flow {
    padding: 20px;
}
.jym-page-admin-payment-flow .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.jym-page-admin-payment-flow .switch-setting {
    display: flex;
    padding: 10px 0;
    align-items: center;
}
.jym-page-admin-payment-flow .switch-setting .name {
    width: 150px;
    font-weight: bold;
}
.jym-page-admin-payment-flow .terminal-list {
    margin: 20px 0;
}
.jym-page-admin-payment-flow .terminal-empty {
    margin: 20px 0;
    text-align: center;
}
.jym-page-admin-payment-flow .terminal-add {
    margin: 20px 0;
}
.jym-page-admin-payment-flow .rule-list {
    margin: 20px 0;
}
.jym-page-admin-payment-flow .rule-empty {
    margin: 20px 0;
    text-align: center;
}
.jym-page-admin-payment-flow .rule-add {
    margin: 20px 0;
}
.jym-page-admin-payment-flow .search-form {
    display: flex;
    align-items: center;
}
.jym-page-admin-payment-flow .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
.jym-page-admin-payment-flow .test-form {
    max-width: 500px;
    margin: 20px auto;
}
.jym-page-admin-payment-flow .test-result {
    max-width: 600px;
    margin: 20px auto;
}
.jym-page-admin-payment-flow .result-info {
    text-align: left;
    background: #f8f8f8;
    padding: 15px;
    border-radius: 5px;
}
.jym-page-admin-payment-flow .result-info p {
    margin: 10px 0;
}
`); 

app.component("jym-page-dailishang-home", {
    template: `
<div class="jym-page-dailishang-home">

    <div class="w10">
        <div class="title">代理商数据总览</div>
        <div class="sjzl">
            <div class="li">
                <div class="icon">
                    <el-icon>
                        <User />
                    </el-icon>
                </div>
                <div class="nr">
                    <div class="sj">
                        <div class="sjsz">
                            <el-statistic :value="json.attr.count.user" :precision="0" value-style="font-size:36px;color:#0052D9;font-weight:bold;"></el-statistic>
                        </div>
                        <div class="sjdw">个</div>
                    </div>
                    <div class="name">用户数量</div>
                </div>
            </div>
            <div class="li" v-if="json.attr.auth_app.indexOf('jiayou')>=0">
                <div class="icon">
                    <el-icon>
                        <Orange />
                    </el-icon>
                </div>
                <div class="nr">
                    <div class="sj">
                        <div class="sjsz">
                            <el-statistic :value="json.attr.count.jiayouzhan" :precision="0" value-style="font-size:36px;color:#0052D9;font-weight:bold;"></el-statistic>
                        </div>
                        <div class="sjdw">个</div>
                    </div>
                    <div class="name">油站数量</div>
                </div>
            </div>
            <div class="li">
                <div class="icon">
                    <el-icon>
                        <ShoppingCart />
                    </el-icon>
                </div>
                <div class="nr">
                    <div class="sj">
                        <div class="sjsz">
                            <el-statistic :value="json.attr.count.order" :precision="0" value-style="font-size:36px;color:#0052D9;font-weight:bold;"></el-statistic>
                        </div>
                        <div class="sjdw">单</div>
                    </div>
                    <div class="name">成交订单数</div>
                </div>
            </div>
            <div class="li">
                <div class="icon">
                    <el-icon>
                        <DataAnalysis />
                    </el-icon>
                </div>
                <div class="nr">
                    <div class="sj">
                        <div class="sjsz">
                            <el-statistic :value="json.attr.count.actual_order_money" :precision="0" value-style="font-size:36px;color:#0052D9;font-weight:bold;"></el-statistic>
                        </div>
                        <div class="sjdw">元</div>
                    </div>
                    <div class="name">成交金额</div>
                </div>
            </div>
        </div>
    </div>
            


    
    <el-divider style="margin:10px 0" border-style="hidden"  />
    
    <el-row :gutter="20">
        <el-col :span="6">
            <div class="w20">
                <div class="title">代理商财务数据</div>
                <div class="cw" style="height:567px;">
                    <div class="jiayou_money">
                        <div class="value">{{json.attr.finance.money}}</div>
                        <div class="name">{{json.attr.finance.money_name}}</div>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="18">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="w20">
                        <div class="title">代理商用户注册统计</div>
                        <div class="nr">
                            <div style="width:calc(100% - 30px);height:240px;">
                                <canvas id="myChart" style="width:100%;height:240px;"></canvas>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="w20">
                        <div class="title">代理商订单统计</div>
                        <div class="nr">
                            <div style="width:calc(100% - 30px);height:240px;">
                                <canvas id="myChart1" style="width:100%;height:240px;"></canvas>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-divider style="margin:10px 0" border-style="hidden"  />
            <el-row :gutter="20">
                <el-col :span="24">
                    <div class="w20">
                        <div class="title">代理商成交金额统计</div>
                        <div class="nr">
                            <div style="width:calc(100% - 30px);height:240px;">
                                <canvas id="myChart2" style="width:100%;height:240px;"></canvas>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-col>
    </el-row>
    
</div>
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {
            order: {
                status: false,
                result: {},
            },

        }
    },
    mounted() {
        this.getData();
        this.test();
    },
    methods: {
        getData() {
            if (this.json.attr === undefined || this.json.attr['data-url'] === undefined) return false;
            //this.loadOrder();

        },
        loadOrder() {
            let _this = this;
            _this.order.status = false;
            jsonui.parser.api.ajax({
                url: this.json.attr['data-url'],
                data: {
                    get: 'order',
                },
                success: function (res) {
                    _this.order.status = true;
                    _this.order.result = res.result;
                },
                error: function (msg) {
                    layer.msg(msg);
                }
            });
        },
        target(url) {
            jsonui.parser.open.init({
                target: 'self',
                content: url,
            });
        },
        test() {
            const ctx = document.getElementById('myChart');
            const ctx1 = document.getElementById('myChart1');
            const ctx2 = document.getElementById('myChart2');
            //const ctx3 = document.getElementById('myChart3');
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: this.json.attr.user.time,
                    datasets: [{
                        label: "",
                        data: this.json.attr.user.data,
                        fill: false,
                        borderColor: '#0052D9',
                        tension: 0.1
                    }]
                },
                options: {
                    plugins: {
                        legend: {
                            display: false,
                        }
                    },
                    scales: {
                        y: {
                            suggestedMin: 0,
                            suggestedMax: 1
                        },
                    }
                }
            });

            new Chart(ctx1, {
                type: 'line',
                data: {
                    labels: this.json.attr.order.time,
                    datasets: [{
                        label: "",
                        data: this.json.attr.order.data,
                        fill: false,
                        borderColor: '#0052D9',
                        tension: 0.1
                    }]
                },
                options: {
                    plugins: {
                        legend: {
                            display: false,
                        }
                    },
                    scales: {
                        y: {
                            suggestedMin: 0,
                            suggestedMax: 1
                        },
                    }
                }
            });

            new Chart(ctx2, {
                type: 'bar',
                data: {
                    labels: this.json.attr.actual_order_money.time,
                    datasets: [{
                        label: "",
                        data: this.json.attr.actual_order_money.data,
                        backgroundColor: '#0052D9',
                        hoverOffset: 4
                    }]
                },
                options: {
                    plugins: {
                        legend: {
                            display: false,
                        }
                    },
                }
            });
        },
    }
});

jsonui.parser.tool.createCss(`
.jym-page-dailishang-home .w10{min-height:100px;background:#fff;}
.jym-page-dailishang-home .w10 .title{font-size:14px;font-weight: bold;line-height:30px;padding:10px 20px 5px 20px;}
.jym-page-dailishang-home .w10 .sjzl{display:flex;justify-content:space-between;padding:5px 20px 20px 20px;}
.jym-page-dailishang-home .w10 .sjzl .li{display:flex;background:linear-gradient(to bottom right, #2670E8, #0052D9);width:100%;margin-right:15px;border-radius: 10px;}
.jym-page-dailishang-home .w10 .sjzl .li{display:flex;background:linear-gradient(to bottom right, #F5F7FA, #F5F7FA);width:100%;margin-right:15px;border-radius: 10px;}
.jym-page-dailishang-home .w10 .sjzl .li:last-child{margin-right:0;}
.jym-page-dailishang-home .w10 .sjzl .li .icon{width:40%;height:100px;display:flex;justify-content:center;align-items:center;color:#0052D9;font-size:34px;}
.jym-page-dailishang-home .w10 .sjzl .li .nr{display:flex;flex-wrap:wrap;}
.jym-page-dailishang-home .w10 .sjzl .li .nr .sj{display:flex;width:100%;align-items:flex-end;}
.jym-page-dailishang-home .w10 .sjzl .li .nr .sj .sjsz{color:#0052D9;}
.jym-page-dailishang-home .w10 .sjzl .li .nr .sj .sjdw{color:#0052D9;padding:0 0 8px 8px;}
.jym-page-dailishang-home .w10 .sjzl .li .nr .name{display:flex;width:100%;color:#3D485D;padding:10px 0 0 0;}
.jym-page-dailishang-home .w20{min-height:160px;background:#fff;}
.jym-page-dailishang-home .w20 .title{font-size:14px;font-weight: bold;line-height:30px;padding:10px 20px 5px 20px;}
.jym-page-dailishang-home .w20 .nr{display:flex;justify-content:center;height:250px;}
.jym-page-dailishang-home .w20 .cw{box-sizing: border-box;padding:10px 20px 5px 20px;}
.jiayou_money{
box-sizing: border-box;
display:flex;
align-items: center;
flex-wrap: wrap;
    background: linear-gradient(to bottom right, #F5F7FA, #F5F7FA);
padding:30px 0;
height: 120px;
border-radius: 10px;
}
.jiayou_money .value{width:100%;text-align: center;font-weight: bold;color: #0052D9;font-size:32px;}
.jiayou_money .name{width:100%;text-align: center;color: #3D485D;font-size:14px;}
`);

app.component("jym-page-import", {
    template: `
<div class="z7Z6LaBkW9">
    <div class="header">
        <div class="daoru" :task-status="taskStatus?1:0" @click="daoru">
            <input type="file" id="file" style="display:none;" @change="changeFile" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/>
            <div class="icon">
                <el-icon>
                    <Upload/>
                </el-icon>
            </div>
            <div class="text">上传.xlsx文件导入</div>
        </div>
        <div class="down" @click="down">
            <div class="icon">
                <el-icon>
                    <Download/>
                </el-icon>
            </div>
            <div class="text">下载导入模板</div>
        </div>
    </div>
    <div class="task" v-if="taskStatus">
        <div class="name">{{name}}</div>
        <div class="jdt">
            <el-progress
                :percentage="100"
                :stroke-width="20"
                striped
                striped-flow
                :duration="20"
                :show-text="false"
            />
        </div>
    </div>
    <div class="res" v-if="res.code>=0">
        <el-result
            :icon="res.code==0?'success':'warning'"
            :sub-title="res.msg"
        >
            <template #extra>
                <el-button type="primary" @click="success" v-if="res.code==0">完成</el-button>
                <el-button type="danger" @click="close" v-else>关闭</el-button>
            </template>
        </el-result>
    </div>
</div>
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {
            name: '',
            data: [],
            taskStatus: false,
            res: {
                code: -1,
                msg: '',
            },
        }
    },
    mounted() {
        this.getData();
    },
    methods: {
        getData() {
            if (this.json.attr === undefined) return false;

        },
        daoru() {
            if (this.taskStatus) return false;
            document.getElementById('file').click();
        },
        changeFile(e) {
            let _this = this;
            let file = e.target.files[0];
            let reader = new FileReader();
            reader.onload = function (e) {
                let data = new Uint8Array(e.target.result);
                let workbook = XLSX.read(data, {type: 'array'});
                let firstSheetName = workbook.SheetNames[0];
                let worksheet = workbook.Sheets[firstSheetName];
                let jsonData = XLSX.utils.sheet_to_json(worksheet, {header: 1});
                _this.name = file.name;
                _this.data = jsonData;
                _this.formSubmit();
            };
            reader.readAsArrayBuffer(file);
        },
        formSubmit() {
            let _this = this;
            _this.taskStatus = true;
            _this.res.code = -1;
            jsonui.parser.api.ajax({
                url: this.json.attr.import_url,
                method: 'POST',
                data: {
                    data: _this.data,
                },
                success: function (res) {
                    _this.taskStatus = false;
                    _this.res = {
                        code: 0,
                        msg: '批量导入成功',
                    };
                },
                error: function (msg) {
                    _this.taskStatus = false;
                    _this.res = {
                        code: 1,
                        msg: '导入失败：'+msg,
                    };
                }
            });
        },
        down() {
            window.location.href = this.json.attr.down_url;
        },
        success() {
            jsonui.parser.event.init([
                {
                    level: 0,
                    action: {
                        close: true,
                    },
                },
                {
                    level: 1,
                    action: {
                        renovate: true,
                    },
                },
            ]);
        },
        close(){
            jsonui.parser.event.init([
                {
                    level: 0,
                    action: {
                        close: true,
                    },
                },
            ]);
        },
    }
});

jsonui.parser.tool.createCss(`
.z7Z6LaBkW9{}
.z7Z6LaBkW9 .header{display:flex;justify-content: space-between;}
.z7Z6LaBkW9 .header .daoru{background:#f5f7fa;padding:25px 0;width:70%;cursor:pointer;}
.z7Z6LaBkW9 .header .daoru .icon{width:100%;background-image: linear-gradient(#ff7528, #ffbc11);color:#fff;font-size:22px;width:40px;height:40px;border-radius: 50%;display:flex;align-items: center;justify-content:center;margin:0 auto;}
.z7Z6LaBkW9 .header .daoru .text{width:100%;display:flex;justify-content:center;align-items: center;height:30px;padding:10px 0 0;}
.z7Z6LaBkW9 .header .daoru[task-status="1"] .icon{opacity: 0.4;}
.z7Z6LaBkW9 .header .daoru[task-status="1"] .text{opacity: 0.4;}
.z7Z6LaBkW9 .header .down{background:#f5f7fa;padding:25px 0;width:calc(30% - 15px);cursor:pointer;}
.z7Z6LaBkW9 .header .down .icon{width:100%;background-image: linear-gradient(#0052d9, #2670e8);color:#fff;font-size:22px;width:40px;height:40px;border-radius: 50%;display:flex;align-items: center;justify-content:center;margin:0 auto;}
.z7Z6LaBkW9 .header .down .text{width:100%;display:flex;justify-content:center;align-items: center;height:30px;padding:10px 0 0;}
.z7Z6LaBkW9 .task{margin:15px 0 0 0;padding:10px 15px 15px 10px;background:#f5f7fa;}
.z7Z6LaBkW9 .task .name{height:30px;display:flex;align-items: center;}
.z7Z6LaBkW9 .task .jdt{padding:5px 0 0 0;}
`);

app.component("jym-page-jiayou-jiayouzhan-open-index", {
    template: `
<div class="jym-page-jiayou-jiayouzhan-open-index">
    <el-tabs v-model="activeName">
        <el-tab-pane label="油站开放平台" name="a">
            <el-card shadow="never">
                <template #header>
                    <div class="card-header">
                        <b>开发者信息</b>
                    </div>
                </template>
                <div class="li">
                    <div class="name">appid</div>
                    <div class="zw">
                        <div class="dd">
                            <div class="text" v-if="json.attr.id">{{json.attr.id}}</div>
                            <div class="ps" v-else>未设置</div>
                        </div>
                    </div>
                </div>
                <div class="li">
                    <div class="name">secret</div>
                    <div class="zw">
                        <div class="dd">
                            <div class="text" v-if="json.attr.secret">{{json.attr.secret}}</div>
                            <div class="ps" v-else>未设置</div>
                        </div>
                        <div class="dd">
                            <a href="javascript:;" @click="updateBase">设置</a>
                        </div>
                    </div>
                </div>
                <div class="li">
                    <div class="name">签名方式</div>
                    <div class="zw">
                        <div class="dd">
                            <div class="text" v-if="json.attr.sign_type_name">{{json.attr.sign_type_name}}</div>
                            <div class="ps" v-else>未设置</div>
                        </div>
                        <div class="dd">
                            <a href="javascript:;" @click="updateBase">设置</a>
                        </div>
                    </div>
                </div>
            </el-card>
            <el-divider style="margin:10px 0" border-style="hidden" />
            <el-card shadow="never">
                <template #header>
                    <div class="card-header">
                        <b>通知管理</b>
                    </div>
                </template>
                <div class="li">
                    <div class="name">通知接口地址</div>
                    <div class="zw">
                        <div class="dd">
                            <div class="text" v-if="json.attr.notice_url">{{json.attr.notice_url}}</div>
                            <div class="ps" v-else>未设置</div>
                        </div>
                        <div class="dd">
                            <a href="javascript:;" @click="updateNotice">设置</a>
                            <a href="javascript:;" @click="notice" v-if="false">通知日志</a>
                        </div>
                    </div>
                </div>
            </el-card>
            <el-divider style="margin:10px 0" border-style="hidden" />
            <el-card shadow="never">
                <template #header>
                    <div class="card-header">
                        <b>接口文档</b>
                    </div>
                </template>
                <div class="doc">
                    <el-button @click="doc">接口文档</el-button>
                </div>
            </el-card>
            <el-divider style="margin:10px 0" border-style="hidden" />
        </el-tab-pane>
    </el-tabs>
</div>
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {
            activeName: "a",
        }
    },
    mounted() {

    },
    methods: {
        updateBase(){
            jsonui.parser.open.init({
                target: 'window',
                type: 2,
                content: "/jiayou/view/jiayouzhan_open/update_base/role/jiayouzhan",
                title: "设置开发者信息",
                area: ["800px", "400px"],
            });
        },
        updateNotice(){
            jsonui.parser.open.init({
                target: 'window',
                type: 2,
                content: "/jiayou/view/jiayouzhan_open/update_notice/role/jiayouzhan",
                title: "设置通知信息",
                area: ["800px", "400px"],
            });
        },
        notice(){
            jsonui.parser.open.init({
                target: 'window',
                type: 2,
                content: "/jiayou/view/jiayouzhan_open_notice/listing/role/jiayouzhan",
                title: "通知日志",
                area: ["90%", "90%"],
            });
        },
        doc(){
            window.open("https://docs.apipost.net/docs/detail/5b1e2d973851000?target_id=31d62bb6314001", "_blank");
        },
    }
});

jsonui.parser.tool.createCss(`
.jym-page-jiayou-jiayouzhan-open-index{}
.jym-page-jiayou-jiayouzhan-open-index .li{display:flex;}
.jym-page-jiayou-jiayouzhan-open-index .li .name{display:flex;width:183px;line-height:80px;color: #73767a;}
.jym-page-jiayou-jiayouzhan-open-index .li .zw{display:flex;width:calc(100% - 183px);min-height:80px;align-items:center;box-shadow: inset 0 -1px 0 0 #e7eaef;}
.jym-page-jiayou-jiayouzhan-open-index .li:last-child .zw{box-shadow: none;}
.jym-page-jiayou-jiayouzhan-open-index .li .zw .dd{display:flex;align-items:center;}
.jym-page-jiayou-jiayouzhan-open-index .li .zw .dd .name{}
.jym-page-jiayou-jiayouzhan-open-index .li .zw .dd .ps{color:#98A3B7;}
.jym-page-jiayou-jiayouzhan-open-index .li .zw .dd .logo{}
.jym-page-jiayou-jiayouzhan-open-index .li .zw .dd .logo img{height:44px;max-width:300px;}
.jym-page-jiayou-jiayouzhan-open-index .li .zw .dd .qr_code{}
.jym-page-jiayou-jiayouzhan-open-index .li .zw .dd .qr_code img{height:100px;max-width:100px;}
.jym-page-jiayou-jiayouzhan-open-index .li .zw .dd:nth-child(1){display:flex;width:calc(100% - 130px);}
.jym-page-jiayou-jiayouzhan-open-index .li .zw .dd:nth-child(2){display:flex;width:130px;}
.jym-page-jiayou-jiayouzhan-open-index .li .zw .dd a{color: #006eff;margin-right:10px;}
.jym-page-jiayou-jiayouzhan-open-index .doc{display:flex;height:100px;align-items:center;padding-left:183px;}

`);

app.component("jym-page-login", {
    template: `<div class="Fsre7JZ2Ts">

    <div class="header">
        <div class="logo">
            <img :src="json.attr.logo" :alt="json.attr.name"/>
        </div>
    </div>
    <div class="main" :style="'background-image:url('+json.attr.login.background_image+')'">
        <div class="box">

            <transition name="el-fade-in">

            <form class="body" @submit.prevent="return false;" v-if="bodyShow">


                <div class="login-type" v-if="['mobile','name'].indexOf(form.login_type)>=0">
                    <div class="li" :data-on="form.login_type=='name'?1:0" @click="form.login_type='name'">
				        <div class="text">账号登录</div>
				        <transition name="el-zoom-in-center">
				            <div class="line" v-if="form.login_type=='name'"></div>
				        </transition>
				    </div>
					<div class="li" :data-on="form.login_type=='mobile'?1:0" @click="form.login_type='mobile'">
                        <div class="text">短信登录</div>
                        <transition name="el-zoom-in-center">
				            <div class="line" v-if="form.login_type=='mobile'"></div>
				        </transition>
				    </div>
				</div>

                <div class="li" v-if="form.login_type=='name'">
                    <div class="wbk">
                        <el-input
                          v-model="form.name"
                          type="text"
                          name="name"
                          size="large"
                          placeholder="请输入用户名/邮箱/手机号码"
                        >
                          <template #prepend>
                            <div class="label">账号</div>
                          </template>
                        </el-input>
                    </div>
                    <div class="wbk">
                        <el-input
                          v-model="form.password"
                          type="password"
                          name="password"
                          size="large"
                          placeholder="请输入密码"
                        >
                          <template #prepend>
                            <div class="label">密码</div>
                          </template>
                        </el-input>
                    </div>
                </div>

                <div class="li" v-if="form.login_type=='mobile'">
                    <div class="wbk">
                        <el-input
                          v-model="form.mobile"
                          type="text"
                          name="mobile"
                          size="large"
                          :max="11"
                          placeholder="请输入手机号码"
                        >
                          <template #prepend>
                            <div class="label">手机号</div>
                          </template>
                        </el-input>
                    </div>
                    <div class="wbk">
                        <el-input
                          v-model="form.mobile_code"
                          type="text"
                          name="mobile_code"
                          size="large"
                          :max="11"
                          placeholder="请输入短信验证码"
                        >
                          <template #prepend>
                            <div class="label">验证码</div>
                          </template>
                          <template #append>
                            <div class="send">
                                <el-button plain :loading="getCodeLoading" :disabled="getCodeDisabled" @click="getCode(1)">{{tips}}</el-button>
                            </div>
                          </template>
                        </el-input>
                    </div>
                </div>

                <div class="submit">
                    <el-button type="primary" native-type="submit" :loading="confirmLoading" color="#0052D9" size="large" style="width:100%;" @click="confirmLogin(1)">登录</el-button>
                </div>

            </form>
            </transition>
        </div>
    </div>

    <div class="footer">
        <div class="hh">
            {{json.attr.copyright}}
            <a href="https://beian.miit.gov.cn" target="_blank" v-if="json.attr.icp_id">{{json.attr.icp_id}}</a>
        </div>
        <div class="hh" v-if="json.attr.auth.version">
            Powered by <a href="https://www.jiayouma.com" target="_blank">jiayouma V{{json.attr.auth.version}}</a>
        </div>
    </div>

</div>`,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {
            form: {
                login_type: 'name',
                login_code: '',
                mobile: '',
                mobile_code: '',
                name: '',
                password: '',
                captcha_value: null,
            },
            tips: '获取验证码',
            bodyShow: false,
            getCodeDisabled: false,
            getCodeLoading: false,
            confirmLoading: false,
        }
    },
    mounted() {
        this.getData();
    },
    methods: {
        getData() {
            if (this.json.attr === undefined) return false;

            this.bodyShow = true;

            //登陆码
            this.form.login_code = ((length = 32) => {
                const characters = 'abcdefghijklmnopqrstuvwxyz0123456789';
                let result = '';
                const charactersLength = characters.length;
                for (let i = 0; i < length; i++) {
                    result += characters.charAt(Math.floor(Math.random() * charactersLength));
                }
                return result;
            })();
        },

        /**
         * 3:确定登录
         */
        confirmLogin(step = 1) {
            let _this = this;

            if (['name'].indexOf(this.form.login_type) >= 0) {
                if (!_this.form.name.length || !_this.form.password.length) {
                    ElementPlus.ElMessage({
                        message: '请输入账号和密码',
                        type: 'warning',
                    });
                    return false;
                }
            }

            if (['mobile'].indexOf(this.form.login_type) >= 0) {
                if (!_this.form.mobile.length || !_this.form.mobile_code.length) {
                    ElementPlus.ElMessage({
                        message: '请输入手机号码和验证码',
                        type: 'warning',
                    });
                    return false;
                }
            }

            //验证码
            if (['name'].indexOf(this.form.login_type) >= 0) {
                _this.captchaNextCode = 'confirmLogin';
                if (step === 1) {
                    _this.initCaptcha();
                    return false;
                }
                if (step === 2) {
                    _this.captchaShow();
                    return false;
                }
            }

            _this.confirmLoading = true;
            jsonui.parser.api.ajax({
                url: "/jiayou/uniLogin/login",
                method: "POST",
                data: {
                    ...{
                        role: 'public',
                        uni_platform: 'web',
                        version: '1.1',
                    },
                    ...this.form
                },
                success: function (res) {
                    _this.getAccessTokenByLoginCode();
                },
                error: function (msg) {
                    ElementPlus.ElMessage({
                        message: msg,
                        type: 'error',
                    });
                    _this.confirmLoading = false;
                }
            });
        },

        /**
         * 4:获取token-通过登陆码
         */
        getAccessTokenByLoginCode() {
            let _this = this;

            jsonui.parser.api.ajax({
                url: "/jiayou/uniLogin/getAccessTokenByLoginCode",
                method: "POST",
                data: {
                    role: 'public',
                    login_code: _this.form.login_code,
                },
                success: function (res) {
                    if (res.result.login_status) {
                        _this.loginSuccess(res.result);
                    } else {
                        ElementPlus.ElMessage({
                            message: '获取access_token失败',
                            type: 'error',
                        });
                        _this.confirmLoading = false;
                    }
                },
                error: function (msg) {
                    ElementPlus.ElMessage({
                        message: msg,
                        type: 'error',
                    });
                    _this.confirmLoading = false;
                }
            });
        },

        /**
         * 5:登录成功
         * @param {Object} userTemp
         */
        loginSuccess(userTemp) {
            let _this = this;

            //此处可以存储登录信息到本地
            //...
            //暂无必要,目前使用cookies方案

            _this.confirmLoading = false;
            _this.loginSuccessTarget(userTemp.access_token);
        },

        /**
         * 6:登录成功后的跳转目标
         */
        loginSuccessTarget(access_token) {
            window.location.href = '/jiayou/login/success?access_token=' + access_token;
        },


        //获取验证码
        getCode(step = 1) {
            let _this = this;

            if (!_this.form.mobile.length) {
                ElementPlus.ElMessage({
                    message: '请输入手机号码',
                    type: 'warning',
                });
                return false;
            }

            //验证码
            {
                _this.captchaNextCode = 'getCode';
                if (step === 1) {
                    _this.initCaptcha();
                    return false;
                }
                if (step === 2) {
                    _this.captchaShow();
                    return false;
                }
            }

            _this.getCodeLoading = true;
            jsonui.parser.api.ajax({
                url: "/jiayou/mobile_code/create",
                method: "POST",
                data: {
                    uni_platform: 'web',
                    mobile: _this.form.mobile,
                    scene: 2,
                    passageway: 1,
                    captcha_value: _this.form.captcha_value,
                    version: '1.1',
                },
                success: function (res) {
                    ElementPlus.ElMessage({
                        message: res.msg,
                        type: 'success',
                    });
                    _this.getCodeLoading = false;
                    _this.getCodeTips(120);
                },
                error: function (msg) {
                    ElementPlus.ElMessage({
                        message: msg,
                        type: 'error',
                    });
                    _this.getCodeLoading = false;
                }
            });
        },

        //获取验证码提示
        getCodeTips(s) {
            let _this = this;
            if (s < 1) {
                _this.tips = '重发验证码';
                _this.getCodeDisabled = false;
            } else {
                _this.tips = s + '秒后可重新获取';
                _this.getCodeDisabled = true;
                window.setTimeout(function () {
                    _this.getCodeTips(s - 1);
                }, 1000);
            }
        },

        //初始化验证码
        async initCaptcha() {
            let _this = this;

            if (_this.json.attr.captcha.captcha_type === 'aliyun') {

                try {
                    window.AliyunCaptchaConfig = {
                        region: "cn",
                        prefix: _this.json.attr.captcha.aliyun.prefix,
                    };
                    await jsonui.parser.tool.loadScript('https://o.alicdn.com/captcha-frontend/aliyunCaptcha/AliyunCaptcha.js');
                    if (_this.captcha === undefined) {
                        window.initAliyunCaptcha({
                            SceneId: _this.json.attr.captcha.aliyun.scene_id_web,
                            mode: "popup",
                            //验证通过
                            success(captchaVerifyParam) {
                                _this.form.captcha_value = captchaVerifyParam;
                                _this.captcha = undefined;
                                _this.captchaNext(3);
                            },
                            //验证失败
                            fail(err) {

                            },
                            //获取实例
                            getInstance(instance) {
                                _this.captcha = instance;
                                _this.captchaNext(2);
                            },
                            //滑块尺寸
                            slideStyle: {width: 320, height: 40},
                            language: "cn"
                        });
                    } else {
                        _this.captchaNext(2);
                    }
                } catch (err) {
                    ElementPlus.ElMessage({
                        message: '验证码加载失败',
                        type: 'error',
                    });
                }
            } else {
                ElementPlus.ElMessage({
                    message: '客户端不支持此验证码类型',
                    type: 'error',
                });
            }
        },

        //展示验证码
        captchaShow(){
            let _this = this;
            _this.captcha.show();
        },

        //验证码下一步
        captchaNext(step) {
            if (this.captchaNextCode === 'getCode') {
                this.getCode(step);
            }
            if (this.captchaNextCode === 'confirmLogin') {
                this.confirmLogin(step);
            }
        },


    }
});

jsonui.parser.tool.createCss(`
.Fsre7JZ2Ts{position: fixed;width: 100%;height: 100%;}


.Fsre7JZ2Ts .header{
    display: flex;
    align-items: center;
    height:100px;
    background-image: linear-gradient(#fff, #fff);
}
.Fsre7JZ2Ts .header .logo{
    display: flex;
    width: 205px;
    padding: 0 0 0 33px;
}
.Fsre7JZ2Ts .header .logo img{
    width:auto;
    max-height:46px;
}

.Fsre7JZ2Ts .footer{
    background: #fff;
    display: flex;
    align-items:center;
    flex-wrap:wrap;
    border-top: 1px solid #fff;
    padding: 16px 0 0 0;
    margin:0 0 12px 0;
    height: 44px;
    overflow-y: hidden;
}
.Fsre7JZ2Ts .footer .hh{
    width:100%;
    text-align: center;
    line-height: 22px;
    color: #505050;
    font-size: 12px;
}
.Fsre7JZ2Ts .footer .hh a{
    font-size: 12px;
    color: #505050;
    text-decoration:underline;
}


.Fsre7JZ2Ts .main {
    display: flex;
    align-items: center;
    justify-content: center;
    height:calc(100% - 100px - 74px);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.Fsre7JZ2Ts .box{
    display: flex;
    width:1300px;
    justify-content: flex-end;
}
.Fsre7JZ2Ts .body{
    width: 450px;
    height:340px;
    border-radius: 10px;
    box-shadow: 0 0 8px rgba(0, 0, 0, .1);
    vertical-align: middle;
    padding-bottom: 45px;
    background-color: #fff;
}



.Fsre7JZ2Ts .body .login-type {
    display: flex;
    margin:30px 0 0 0;
    padding: 15px 50px 15px 50px;
}
.Fsre7JZ2Ts .body .login-type .li {
	width: 50%;
	cursor: pointer;
}
.Fsre7JZ2Ts .body .login-type .li .text {
	text-align: center;
	padding: 0 0 5px 0;
	border-bottom: 2px solid #fff;
	font-weight: bold;
	font-size:18px;
	min-width:10px;
	margin:0 auto;

}
.Fsre7JZ2Ts .body .login-type .li .line {
    height:2px;
    background:#0052D9;
    width:70px;
    margin:0 auto;
}
.Fsre7JZ2Ts .body .login-type .li[data-on="1"] .text {
    color:#0052D9;
}



.Fsre7JZ2Ts .body>.li{
    margin:30px 0 0 0;
}
.Fsre7JZ2Ts .body .wbk{
    padding: 0 40px;
    margin:0 0 30px 0;
}

.Fsre7JZ2Ts .body .wbk .label{
    width:70px;
    text-align:center;
}

.Fsre7JZ2Ts .body .submit{
    padding: 0 40px;
}
.Fsre7JZ2Ts .body .more-login-type{
    margin:0 0 0 40px;
    padding:20px 0 0 0;
    display: flex;
}
.Fsre7JZ2Ts .body .more-login-type .t-title{
    line-height: 30px;
}
.Fsre7JZ2Ts .body .more-login-type .t-ul{
    display: flex;
    height: 30px;
    align-items: center;
    padding:0 0 0 8px;
}
.Fsre7JZ2Ts .body .more-login-type .t-ul a{
    display: block;
    margin:0 8px 0 0;
}
.Fsre7JZ2Ts .body .more-login-type .t-ul a i{
    font-size: 20px;
    font-weight: bolder;
    background-image: linear-gradient(to bottom,#0052D9, #2670E8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.Fsre7JZ2Ts .body .more-login-type .t-ul a:hover{}

.Fsre7JZ2Ts .main_erweima {
    padding-top: 15px;
    text-align: center;
}

.Fsre7JZ2Ts .main_erweima .code {
    margin: 15px auto 10px auto;
    width: 200px;
    height: 200px;
}

.Fsre7JZ2Ts .main_erweima img {
    width: 200px;
    height: 200px;
}

.Fsre7JZ2Ts .main_erweima span {
    display: block;
    text-align: center;
    color: #bbb;
    font-size: 14px;
}

#think_page_trace_open{
    display: none !important;
}



@media only screen and (max-width: 768px) {
    .Fsre7JZ2Ts .box{
        width:100%;
        justify-content: center;
    }
    .Fsre7JZ2Ts .body{
        width:calc(100% - 30px);
        padding-bottom: 25px;
    }
    .Fsre7JZ2Ts .body .title{
        padding: 30px 25px 30px 25px;
    }
    .Fsre7JZ2Ts .body .wbk{
        width:calc(100% - 50px);
        margin: 0 0 30px 25px;
    }
    .Fsre7JZ2Ts .body .submit{
        width:calc(100% - 50px);
        margin: 0 0 0 25px;
    }
}
`);


app.component("jym-page-set", {
    template: `<div class="jym-page-set">
    <div class="page-header">
        <div class="header-content">
            <div class="title">
                <el-icon class="title-icon" size="32"><Setting /></el-icon>
                <span>系统设置中心</span>
            </div>
            <p class="subtitle">管理系统各项配置，优化平台运行</p>
        </div>
    </div>

    <div class="page-content">
        <div class="settings-grid">
            <div 
                v-for="(item, index) in settingsList" 
                :key="index" 
                class="setting-card"
                @click="openSetting(item.url)"
            >
                <div class="card-icon" :class="item.iconClass">
                    <component :is="item.icon"></component>
                </div>
                <div class="card-content">
                    <div class="card-name">{{ item.name }}</div>
                    <div class="card-desc">{{ item.desc }}</div>
                </div>
                <div class="card-arrow">
                    <el-icon size="18"><ArrowRight /></el-icon>
                </div>
            </div>
        </div>
    </div>
</div>`,
    mixins: [jsonui.parser.module.vue.config],
    components: {
        Setting: ElementPlus.ElIcon.Setting,
        ArrowRight: ElementPlus.ElIcon.ArrowRight,
        Link: ElementPlus.ElIcon.Link,
        ChatDotRound: ElementPlus.ElIcon.ChatDotRound,
        Cellphone: ElementPlus.ElIcon.Cellphone,
        Grid: ElementPlus.ElIcon.Grid,
        Coin: ElementPlus.ElIcon.Coin,
        Office: ElementPlus.ElIcon.Office,
        Cloudy: ElementPlus.ElIcon.Cloudy,
        Location: ElementPlus.ElIcon.Location,
        Box: ElementPlus.ElIcon.Box,
        Document: ElementPlus.ElIcon.Document,
        User: ElementPlus.ElIcon.User,
        Van: ElementPlus.ElIcon.Van,
        Printer: ElementPlus.ElIcon.Printer,
    },
    data: function () {
        return {
            settingsList: [
                {
                    name: '平台设置',
                    desc: '配置平台基础信息和参数',
                    url: '/jiayou/view/admin_set/pingtai/role/admin',
                    icon: 'Link',
                    iconClass: 'icon-blue'
                },
                {
                    name: '微信公众号设置',
                    desc: '配置微信公众号相关参数',
                    url: '/jiayou/view/admin_set/wechat/role/admin',
                    icon: 'ChatDotRound',
                    iconClass: 'icon-green'
                },
                {
                    name: '微信小程序设置',
                    desc: '配置微信小程序相关参数',
                    url: '/jiayou/view/admin_set/wechatMin/role/admin',
                    icon: 'Cellphone',
                    iconClass: 'icon-orange'
                },
                {
                    name: '微信开放平台设置',
                    desc: '配置微信开放平台参数',
                    url: '/jiayou/view/admin_set/wechatOpen/role/admin',
                    icon: 'Grid',
                    iconClass: 'icon-purple'
                },
                {
                    name: '支付宝H5设置',
                    desc: '配置支付宝H5支付参数',
                    url: '/jiayou/view/admin_set/zhifubaoH5/role/admin',
                    icon: 'Coin',
                    iconClass: 'icon-cyan'
                },
                {
                    name: '拉卡拉支付设置',
                    desc: '配置拉卡拉支付参数',
                    url: '/jiayou/view/admin_set/payLakala/role/admin',
                    icon: 'Office',
                    iconClass: 'icon-pink'
                },
                {
                    name: '阿里云设置',
                    desc: '配置阿里云相关服务',
                    url: '/jiayou/view/admin_set/aliyun/role/admin',
                    icon: 'Cloudy',
                    iconClass: 'icon-indigo'
                },
                {
                    name: '聚合数据设置',
                    desc: '配置聚合数据接口',
                    url: '/jiayou/view/admin_set/juhe/role/admin',
                    icon: 'Grid',
                    iconClass: 'icon-blue'
                },
                {
                    name: '地图设置',
                    desc: '配置地图服务相关参数',
                    url: '/jiayou/view/admin_set/map/role/admin',
                    icon: 'Location',
                    iconClass: 'icon-green'
                },
                {
                    name: '短信设置',
                    desc: '配置短信服务相关参数',
                    url: '/jiayou/view/admin_set/sms/role/admin',
                    icon: 'Box',
                    iconClass: 'icon-orange'
                },
                {
                    name: '对象存储设置',
                    desc: '配置文件存储服务',
                    url: '/jiayou/view/admin_set/storage/role/admin',
                    icon: 'Document',
                    iconClass: 'icon-purple'
                },
                {
                    name: '提现设置',
                    desc: '配置提现相关规则',
                    url: '/jiayou/view/admin_set/moneyOut/role/admin',
                    icon: 'Coin',
                    iconClass: 'icon-cyan'
                },
                {
                    name: '加油金转赠设置',
                    desc: '配置加油金转赠规则',
                    url: '/jiayou/view/admin_set/jiayouMoneyTransfer/role/admin',
                    icon: 'Coin',
                    iconClass: 'icon-pink'
                },
                {
                    name: '会员设置',
                    desc: '配置会员相关规则',
                    url: '/jiayou/view/admin_set/member/role/admin',
                    icon: 'User',
                    iconClass: 'icon-indigo'
                },
                {
                    name: '加油站设置',
                    desc: '配置加油站相关参数',
                    url: '/jiayou/view/admin_set/jiayouzhan/role/admin',
                    icon: 'Van',
                    iconClass: 'icon-red'
                },
                {
                    name: '加油订单设置',
                    desc: '配置订单相关规则',
                    url: '/jiayou/view/admin_set/oilOrder/role/admin',
                    icon: 'Document',
                    iconClass: 'icon-blue'
                },
                {
                    name: '小票打印机设置',
                    desc: '配置小票打印参数',
                    url: '/jiayou/view/admin_set/xiaopiaodayin/role/admin',
                    icon: 'Printer',
                    iconClass: 'icon-green'
                }
            ]
        }
    },
    mounted() {
        // 组件挂载完成后的初始化操作
    },
    methods: {
        /**
         * 打开设置页面弹窗
         * @param {string} url - 设置页面URL
         */
        openSetting(url) {
            // 获取当前窗口对象
            const this_window = window;
            
            // 调用jsonui.parser.open.init打开弹窗
            if (typeof jsonui !== 'undefined' && jsonui.parser && jsonui.parser.open && jsonui.parser.open.init) {
                jsonui.parser.open.init({
                    target: "window",
                    type: 2,
                    content: url,
                    title: this.getSettingName(url),
                    area: ["90%","90%"],
                });
            } else {
                // 如果jsonui未加载，直接跳转
                window.location.href = url;
            }
        },
        
        /**
         * 根据URL获取设置项名称
         * @param {string} url - 设置页面URL
         * @returns {string} - 设置项名称
         */
        getSettingName(url) {
            const setting = this.settingsList.find(item => item.url === url);
            return setting ? setting.name : '设置';
        }
    }
});

jsonui.parser.tool.createCss(`
.jym-page-set {
    min-height: 100vh;
    background: #F5F7FA;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 页面头部 */
.jym-page-set .page-header {
    background: linear-gradient(135deg, #0052D9 0%, #2670E8 50%, #00C8DC 100%);
    padding: 40px 30px;
    box-shadow: 0 4px 20px rgba(0, 82, 217, 0.3);
}

.jym-page-set .header-content {
    max-width: 1200px;
    margin: 0 auto;
}

.jym-page-set .title {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 10px;
}

.jym-page-set .title-icon {
    margin-right: 12px;
    opacity: 0.9;
}

.jym-page-set .subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    margin: 0;
}

/* 页面内容 */
.jym-page-set .page-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px;
}

/* 设置项网格 */
.jym-page-set .settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

/* 设置卡片 */
.jym-page-set .setting-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #D3D7DE;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.jym-page-set .setting-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 82, 217, 0.15);
    border-color: #0052D9;
}

.jym-page-set .setting-card:active {
    transform: translateY(-1px);
}

/* 卡片图标 */
.jym-page-set .card-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    flex-shrink: 0;
    font-size: 22px;
    transition: transform 0.3s ease;
}

.jym-page-set .setting-card:hover .card-icon {
    transform: scale(1.08);
}

/* 图标颜色分类 - 管理端蓝色系 */
.jym-page-set .icon-blue {
    background: linear-gradient(135deg, #0052D9 0%, #2670E8 100%);
    color: #fff;
}

.jym-page-set .icon-green {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: #fff;
}

.jym-page-set .icon-orange {
    background: linear-gradient(135deg, #FF7528 0%, #FFBC11 100%);
    color: #fff;
}

.jym-page-set .icon-purple {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.jym-page-set .icon-cyan {
    background: linear-gradient(135deg, #00C8DC 0%, #2670E8 100%);
    color: #fff;
}

.jym-page-set .icon-pink {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: #fff;
}

.jym-page-set .icon-indigo {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: #fff;
}

.jym-page-set .icon-red {
    background: linear-gradient(135deg, #F04142 0%, #FF7528 100%);
    color: #fff;
}

/* 卡片内容 */
.jym-page-set .card-content {
    flex: 1;
    min-width: 0;
}

.jym-page-set .card-name {
    font-size: 15px;
    font-weight: 600;
    color: #070707;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jym-page-set .card-desc {
    font-size: 12px;
    color: #3D485D;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 卡片箭头 */
.jym-page-set .card-arrow {
    color: #98A3B7;
    transition: all 0.3s ease;
    margin-left: 12px;
}

.jym-page-set .setting-card:hover .card-arrow {
    color: #0052D9;
    transform: translateX(3px);
}

/* 响应式设计 */
@media only screen and (max-width: 768px) {
    .jym-page-set .page-header {
        padding: 25px 20px;
    }

    .jym-page-set .title {
        font-size: 22px;
    }

    .jym-page-set .page-content {
        padding: 20px;
    }

    .jym-page-set .settings-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .jym-page-set .setting-card {
        padding: 18px;
    }

    .jym-page-set .card-icon {
        width: 46px;
        height: 46px;
        font-size: 20px;
        margin-right: 14px;
    }
}

@media only screen and (max-width: 480px) {
    .jym-page-set .page-header {
        padding: 20px 15px;
    }

    .jym-page-set .title {
        font-size: 20px;
    }

    .jym-page-set .subtitle {
        font-size: 12px;
    }

    .jym-page-set .page-content {
        padding: 15px;
    }

    .jym-page-set .setting-card {
        padding: 14px;
    }

    .jym-page-set .card-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
        margin-right: 12px;
    }

    .jym-page-set .card-name {
        font-size: 14px;
    }

    .jym-page-set .card-desc {
        font-size: 12px;
    }
}
`);

app.component("jym-permission-select", {
    template: `
<span class="jym-permission-select">
    <el-tree
            :data="json.attr.options!==undefined?json.attr.options:[]"
            show-checkbox
            node-key="code"
            :default-checked-keys="JSON.parse(value)"
            :check-strictly="true"
            :props="{children: 'children',label: 'name'}"
            @check="check"
    />
    <input type="hidden" v-bind="json.attr" :value="value" style="display: none"/>
</span>
    `,
    mixins: [jsonui.parser.module.vue.config],
    data: function () {
        return {
            value: "[]",
        }
    },
    mounted() {
        emitter.on('set-value-by', (values) => {
            this.setValue(values);
        });
    },
    methods: {
        setValue(values) {
            if (this.json.attr === undefined || this.json.attr.name === undefined) return false;
            if (values[this.json.attr.name] !== undefined) {
                let value = values[this.json.attr.name] ?? '[]';
                if (typeof value != 'string') {
                    value = JSON.stringify(value);
                }
                this.value = value;
            }
        },
        check(e, e1) {
            if (this.json.attr === undefined || this.json.attr.name === undefined) return false;
            let values = [];
            values[this.json.attr.name] = e1.checkedKeys;
            this.setValue(values);
        },
    }

});

jsonui.parser.tool.createCss(`
.jym-permission-select .layui-form-checkbox{display:none;}
`);

app.component("root", {
    template: `

<template v-if="json1 instanceof Array">
    <template v-for="(item,index) in json1" >
        <root v-bind="getBind(index.toString(),item)"></root>
    </template>
</template>
<template v-else>
    <template v-for="(item,index) in json1" >
        <template v-if="index=='result'">
            <root v-bind="getBind(index,item)"></root>
        </template>
        <jquery1 v-bind="getBind(index,item)" v-else-if="index=='jquery'"></jquery1>
        <element1 v-bind="getBind(index,item)" v-else-if="elementList.indexOf(index)>=0"></element1>
        <el-alert1 v-bind="getBind(index,item)" v-else-if="index=='el-alert'"></el-alert1>
        <el-backtop1 v-bind="getBind(index,item)" v-else-if="index=='el-backtop'"></el-backtop1>
        <el-button1 v-bind="getBind(index,item)" v-else-if="index=='el-button'"></el-button1>
        <el-card1 v-bind="getBind(index,item)" v-else-if="index=='el-card'"></el-card1>
        <el-link1 v-bind="getBind(index,item)" v-else-if="index=='el-link'"></el-link1>
        <el-text1 v-bind="getBind(index,item)" v-else-if="index=='el-text'"></el-text1>
        <el-scrollbar1 v-bind="getBind(index,item)" v-else-if="index=='el-scrollbar'"></el-scrollbar1>
        <el-row1 v-bind="getBind(index,item)" v-else-if="index=='el-row'"></el-row1>
        <el-col1 v-bind="getBind(index,item)" v-else-if="index=='el-col'"></el-col1>
        <el-table1 v-bind="getBind(index,item)" v-else-if="index=='el-table'"></el-table1>
        <el-table-column1 v-bind="getBind(index,item)" v-else-if="index=='el-table-column'"></el-table-column1>
        <el-form1 v-bind="getBind(index,item)" v-else-if="index=='el-form'"></el-form1>
        <el-form-item1 v-bind="getBind(index,item)" v-else-if="index=='el-form-item'"></el-form-item1>
        <el-input1 v-bind="getBind(index,item)" v-else-if="index=='el-input'"></el-input1>
        <el-input-number1 v-bind="getBind(index,item)" v-else-if="index=='el-input-number'"></el-input-number1>
        <el-autocomplete1 v-bind="getBind(index,item)" v-else-if="index=='el-autocomplete'"></el-autocomplete1>
        <el-switch1 v-bind="getBind(index,item)" v-else-if="index=='el-switch'"></el-switch1>
        <el-rate1 v-bind="getBind(index,item)" v-else-if="index=='el-rate'"></el-rate1>
        <el-checkbox1 v-bind="getBind(index,item)" v-else-if="index=='el-checkbox'"></el-checkbox1>
        <el-radio1 v-bind="getBind(index,item)" v-else-if="index=='el-radio'"></el-radio1>
        <el-color-picker1 v-bind="getBind(index,item)" v-else-if="index=='el-color-picker'"></el-color-picker1>
        <el-slider1 v-bind="getBind(index,item)" v-else-if="index=='el-slider'"></el-slider1>
        <el-transfer1 v-bind="getBind(index,item)" v-else-if="index=='el-transfer'"></el-transfer1>
        <el-date-picker1 v-bind="getBind(index,item)" v-else-if="index=='el-date-picker'"></el-date-picker1>
        <el-time-picker1 v-bind="getBind(index,item)" v-else-if="index=='el-time-picker'"></el-time-picker1>
        <el-time-select1 v-bind="getBind(index,item)" v-else-if="index=='el-time-select'"></el-time-select1>
        <el-cascader1 v-bind="getBind(index,item)" v-else-if="index=='el-cascader'"></el-cascader1>
        <el-select1 v-bind="getBind(index,item)" v-else-if="index=='el-select'"></el-select1>
        <el-select-v21 v-bind="getBind(index,item)" v-else-if="index=='el-select-v2'"></el-select-v21>
        <el-upload1 v-bind="getBind(index,item)" v-else-if="index=='el-upload'"></el-upload1>
        <el-carousel1 v-bind="getBind(index,item)" v-else-if="index=='el-carousel'"></el-carousel1>
        <el-carousel-item v-bind="getBind(index,item)" v-else-if="index=='el-carousel-item'"></el-carousel-item>
        <component v-else :is="index" v-bind="getBind(index,item)"></component>
    </template>
</template>
       `,
    mixins: [jsonui.parser.module.vue.config],
    watch: {
        jsonString: {
            handler() {
                if (this.jsonString) {
                    this.json1 = this.deAttrCode(this.jsonString);
                }
            },
            immediate: true
        },
        json: {
            handler() {
                if (this.json) {
                    this.json1 = this.json;
                }
            },
            immediate: true
        },
    },
    data: function () {
        return {
            json1: {},
            elementList: [
                "a",
                "b",
                "div",
                "h1",
                "h2",
                "h3",
                "h4",
                "h5",
                "h6",
                "span",
                "i",
                "img",
                "ignore",
                "table",
                "text",
                "col",
                "colgroup",
                "th",
                "tr",
                "td",
                "ul",
                "ol",
                "li",
            ],
        }
    },
    mounted() {

    },
    methods: {

    }
});



                app.mount("#" + module.data.el);
            });
        });
    },

    /**
     * 工具类
     */
    tool: {
        enAttrCode: (arr) => {
            return encodeURIComponent(JSON.stringify(arr));
        },
        deAttrCode: (str) => {
            return JSON.parse(decodeURIComponent(str));
        }
    },

    /**
     * 配置类
     */
    config: {
        props: {
            //元素
            element: {
                type: String,
                default: ''
            },
            //json位置
            jsonLoc: {
                type: String,
                default: ''
            },
            //json
            json: {
                type: [Object, String],
                default: ''
            },
            //用json字符串解析
            jsonString: {
                type: String,
                default: ''
            },
        },
        data() {
            return {}
        },
        onLoad() {

        },
        methods: {
            enAttrCode(arr) {
                return jsonui.parser.module.vue.tool.enAttrCode(arr);
            },
            deAttrCode(str) {
                return jsonui.parser.module.vue.tool.deAttrCode(str);
            },
            getJsonLoc(str) {
                let str1 = this.jsonLoc;
                if (str) {
                    str1 += str1 ? ',' : '';
                    str1 += str;
                }
                return str1;
            },
            getBind(element, json) {
                return {
                    element: element,
                    'json-loc': this.getJsonLoc(element),
                    json: json,
                };
            },
            target(url){
                window.location.href = url;
            },
        }
    }
};