<!-- 模态框（Modal） -->
<div>
<div class="modal fade bs-example-modal-lg" id="configModel" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myLargeModalLabel">更改配置</h4>
            </div>
            <div class="modal-body">
                <ul class="nav nav-tabs" id="config_model_group_id"></ul>
                <div class="tab-content" id="config_model_group_content_id"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn btn-link" id="but_initConfigId">初始化配置信息</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
</div>
<div>
    <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" id="configValueModel_id">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title">查看/修改</h4>
                </div>
                <div class="modal-body">
                    <form class="bs-example bs-example-form" role="form" id="configValueModelForm" method="post" action="${ctx!}/config/post/save">
                        <div class="input-group">
                            <span class="input-group-addon">配置项：</span>
                            <input type="text" class="form-control" value="哈哈">
                        </div>
                        <br>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="submitForm();">提交并使用</button>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .form-modol{
        height: 38px;
        width: 24%;
        border-color: #ebebeb;
        -webkit-border-radius: 2px;
        border-radius: 2px;
        text-align: center;
        color: #8b95a5;
        padding: 0px 0px;
        line-height: inherit;
        -webkit-transition: 0.2s linear;
        transition: 0.2s linear;
        -webkit-box-shadow: none;
        box-shadow: none;
        border: 1px solid #ccc;
        border-top-color: rgb(204, 204, 204);
        border-right-color: rgb(204, 204, 204);
        border-bottom-color: rgb(204, 204, 204);
        border-left-color: rgb(204, 204, 204);
    }
</style>
<script>
    function showFranConfigModel(group,franId){
        document.getElementById("js_load").style.display = "inline";
        let liHtml="";
        let contentHtml="";
        let one=getOne(group);
        let active="";
        let sunsGroup={};
        for(let key  in group){
            //先识别是否是父级
            if(group[key].isSuper){
                $.ajax({
                    data:{
                        "groupKey":key,
                        "franId":franId
                    },
                    type: "GET",
                    url: "${ctx}/config/get/list/group",
                    async: false,
                    success :function(res){
                        for(let row of res.rows){
                            sunsGroup[(row.configKey)]=row.configName;
                            active=(row.configKey===one)?"active":"";
                            liHtml=liHtml+"<li class='"+active+"' ><a href='#"+row.configKey+"' data-toggle='tab' >"+row.configName+"</a></li>";
                            contentHtml=contentHtml+"<div class='tab-pane fade "+active+" in' id='"+row.configKey+"'><table id='table_"+row.configKey+"'></table></div>";
                        }
                        group[key]=group[key].name;
                    },
                    error:function(res){
                        lightyear.notify("网络连接异常，请检查网络设置", 'danger');
                    }
                });
            }
            active=(key===one)?"active":"";
            liHtml=liHtml+"<li class='"+active+"' ><a href='#"+key+"' data-toggle='tab' >"+group[key]+"</a></li>";
            contentHtml=contentHtml+"<div class='tab-pane fade "+active+" in' id='"+key+"'><table id='table_"+key+"'></table></div>";
        }
        group=Object.assign(group,sunsGroup);
        console.log("嘿嘿嘿",group);
        document.getElementById("config_model_group_content_id").innerHTML=contentHtml;
        document.getElementById("config_model_group_id").innerHTML=liHtml;
        for (let key  in group){
            /*if(key ==="premium_type"){
                preForm(key,franId);
            }else {
                appendForm(key,franId)
            }*/
            appendForm(key,franId)
        };
        $("#but_initConfigId").unbind("click");
        //绑定初始话事件
        $("#but_initConfigId").click(function (){
            initConfig(group,franId);
        });
        document.getElementById("js_load").style.display = "none";
        $('#configModel').modal('show');
    }
    /**
     * 注入表单元素
     **/
    function appendForm(groupKey,franId){
        console.log("C端计费保单元素",franId)
        $("#table_"+groupKey).bootstrapTable({
            url: '${ctx}/config/get/list/group',
            pagination: true,
            uniqueId:'id',
            queryParams:function (params){return {
                "groupKey":groupKey,
                "franId":franId,
                pageSize: params.limit, // 每页要显示的数据条数
                offset: params.offset, // 每页显示数据的开始行号
                sort: params.sort, // 要排序的字段
                sortOrder: params.order, // 排序规则,
                showRefresh: true
            }},
            onLoadSuccess:function (data){
                if(data.total<1){
                    let addNod=$("<a style='display: block;text-align: center' href='#'>生成初始配置</a>");
                    addNod.attr("id","config_add_"+groupKey);
                    addNod.on('click',function (){
                        addCNewConfig(table,groupKey,franId);
                    });
                    $("#"+groupKey).append(addNod);
                }
            },
            columns: [{
                field: 'id',
                title: 'ID',
                align:'center'
            },{
                field: 'franName',
                title: '加盟商',
                align:'center'
            },{
                field: 'configName',
                title: '配置项名称',
                align:'center'
            }, {
                field: 'configKey',
                title: '配置项名Key',
                align:'center'
            },{
                field: 'configStatus',
                title: '状态',
                align:'center'
            },{
                title: "操作",
                formatter:function (value, row, index){
                    let statusSet='<a> </a>';
                    if(row.configGroup === "premium_type" || row.configGroup === "freight_type"){
                        if(row.configStatus==='已停用' || row.configStatus==='草稿'){
                            statusSet='<a style="color: #02b588" href="javascript:setBendConfigStatus(\''+groupKey+'\','+row.id+',\'使用中\');"> 启用</a>';
                        }else {
                            statusSet='<a style="color: #ff7b1a" href="javascript:setBendConfigStatus(\''+groupKey+'\','+row.id+',\'已停用\');"> 停用</a>';
                        }
                    }
                    return '<a href="javascript:showConfigValueModel(\''+groupKey+'\','+row.id+');"> 更改</a>&nbsp;'+
                        '<a href="javascript:deleteConfig(\''+groupKey+'\','+row.id+');"> 删除</a>&nbsp;'+
                        '<a href="javascript:cloneNewConfig(\''+groupKey+'\','+row.id+');"> 克隆</a>&nbsp;'+statusSet;
                },
                align:'center'
            }, {
                title: "排序",
                formatter:function (value, row, index){
                    return '<a href="javascript:sortConfig(\''+groupKey+'\','+row.id+',\'up\');" class="mdi mdi-arrow-up-bold mdi-18px" style="color: #006cfa" title="上移一行">&nbsp;&nbsp;'+
                        '<a href="javascript:sortConfig(\''+groupKey+'\','+row.id+',\'down\');" class="mdi mdi-arrow-down-bold mdi-18px" style="color: #eea236" title="下移一行"';
                },
                align:'center'
            }
            ]
        });
    }
    /**
     * 打开修改配置项值的模态框
     **/
    function showConfigValueModel(table,id){
        $('#configModel').modal('hide');
        $("#configValueModel_id").modal('show');
        $('#configValueModel_id').on('hidden.bs.modal', function () {
            $('#configModel').modal('show');
        });
        let configGroup=$('#table_'+table).bootstrapTable('getRowByUniqueId',id).configGroup;
        let configValue=$('#table_'+table).bootstrapTable('getRowByUniqueId',id).configValue;
        let valueStr='<input type="hidden" name="id" value="'+id+'">'+
                     '<input type="hidden" name="configGroup" value="'+table+'" id="configFormActiveId">';
        let i=0;
        console.log("$$$$$$$$$$$$$$$$$$$$$$$$$:",configGroup)
        switch (configGroup){
            case "premium_type":
                valueStr=valueStr+
                    '<div class="input-group">' +
                    '             <span class="input-group-addon">显示名称</span>' +
                    '             <input type="hidden" name="keys" value="显示名称">'+
                    '             <input type="text" class="form-control" placeholder="例如：xx加价" name="values" value="'+configValue["显示名称"]+'">' +
                    '          </div><br>'+
                    '<div class="input-group">' +
                    '             <span class="input-group-addon">溢价费用</span>' +
                    '             <input type="hidden" name="keys" value="溢价费用">'+
                    '             <input type="text" class="form-control" name="values"  value="'+configValue["溢价费用"]+'">' +
                    '         </div><br>'+
                    '<div class="input-group">' +
                    '             <span class="input-group-addon">生效开始日期</span>' +
                    '             <input type="hidden" name="keys" value="开始日期">'+
                    '             <input type="date" class="form-control" name="values" pattern="2023-01-01" value="'+configValue["开始日期"]+'">' +
                    '         </div><br>'+
                    '<div class="input-group">' +
                    '             <span class="input-group-addon">生效结束日期</span>' +
                    '             <input type="hidden" name="keys" value="结束日期">'+
                    '             <input type="date" class="form-control" name="values" pattern="2023-01-01" value="'+configValue["结束日期"]+'">' +
                    '         </div><br>'+
                    '<div class="input-group">' +
                    '             <span class="input-group-addon">执行开始时间</span>' +
                    '             <input type="hidden" name="keys" value="开始时间">'+
                    '             <input type="time" class="form-control" name="values" pattern="00:00" value="'+configValue["开始时间"]+'">' +
                    '         </div><br>'+
                    '<div class="input-group">' +
                    '             <span class="input-group-addon">执行结束时间</span>' +
                    '             <input type="hidden" name="keys" value="结束时间">'+
                    '             <input type="time" class="form-control" name="values" pattern="00:00" value="'+configValue["结束时间"]+'">' +
                    '         </div><br>';break;
            case "freight_type":
                for(let key in configValue){
                    if(key==="显示名称"){
                        valueStr=valueStr+
                            '<div class="input-group">' +
                            '             <span class="input-group-addon">显示名称</span>' +
                            '             <input type="hidden" name="keys" value="显示名称">'+
                            '             <input type="text" class="form-control" placeholder="例如：xx加价" name="values" value="'+configValue["显示名称"]+'">' +
                            '          </div><br>'
                    }else {
                        let sonValue=$('#table_'+table).bootstrapTable('getRowByUniqueId',id).configValue[key];
                        valueStr=valueStr+
                            '<div class="input-group">' +
                            '             <span class="input-group-addon">'+key+'</span>' +
                            '             <input type="hidden" name="keys" value="'+key+'">'+
                            '             <input type="text" class="form-modol" name="values" value="'+sonValue["begin"]+'">' +"km"+"————>"+
                            '             <input type="text" class="form-modol" name="values" value="'+sonValue["ending"]+'">' +"km"+
                            '             <input type="text" class="form-modol" name="values" value="'+sonValue["price"]+'">' +"元"+
                            '         </div><br>';
                        i++;
                    }
                }break;
            default:
                for(let key in configValue){
                    valueStr=valueStr+'<div class="input-group">' +
                        '             <span class="input-group-addon">'+key+'</span>' +
                        '             <input type="hidden" name="keys" value="'+key+'">'+
                        '             <input type="text" class="form-control" name="values" value="'+configValue[key]+'">' +
                        '         </div><br>';
                    i++;
                }
        }
        document.getElementById("configValueModelForm").innerHTML=valueStr;
    }

    /**
     * 删除配置项
     * @param id
     */
    function deleteConfig(table,id){
        $.confirm({
            title: '删除确认',
            content: '您即将删除该条配置项，是否继续？',
            type: 'red',
            typeAnimated: true,
            buttons: {
                tryAgain: {
                    text: '继续',
                    btnClass: 'btn-blue',
                    action: function(){
                        document.getElementById("js_load").style.display = "inline";
                        $.ajax({
                            type: "GET",//方法类型
                            dataType: "json",//预期服务器返回的数据类型
                            url: "${ctx!}/config/get/delete" ,
                            data: {"configId":id},
                            success: function (res) {
                                if (res.status==200){
                                    lightyear.notify('操作成功!', 'success');
                                    document.getElementById("js_load").style.display = "none";
                                    $('#table_'+table).bootstrapTable('refresh',{url: "${ctx}/config/get/list/group"});
                                    return;
                                }
                                document.getElementById("js_load").style.display = "none";
                                lightyear.notify(res.message, 'danger');
                            },
                            error : function() {
                                document.getElementById("js_load").style.display = "none";
                                alert("异常！");
                            }
                        })
                    }
                },
                close: {
                    text: '放弃'
                }
            }
        });
        return;
    }

    /**
     * 开启、关闭配置
     * @param id
     */
    function setBendConfigStatus(table,id,configStatus){
        document.getElementById("js_load").style.display = "inline";
        $.ajax({
            type: "GET",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "${ctx!}/config/set/status" ,
            data: {"configId":id,configStatus:configStatus},
            success: function (res) {
                if (res.status==200){
                    lightyear.notify('操作成功!', 'success');
                    document.getElementById("js_load").style.display = "none";
                    $('#table_'+table).bootstrapTable('refresh',{url: "${ctx}/config/get/list/group"});
                    return;
                }
                document.getElementById("js_load").style.display = "none";
                lightyear.notify(res.message, 'danger');
            },
            error : function() {
                document.getElementById("js_load").style.display = "none";
                alert("异常！");
            }
        })
    }
    /**
     * 克隆一个配置项目
     * */
    function cloneNewConfig(table,id){
        document.getElementById("js_load").style.display = "inline";
        $.ajax({
            type: "GET",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "${ctx!}/config/get/clone" ,
            data: {"configId":id},
            success: function (res) {
                if (res.status==200){
                    lightyear.notify('克隆成功!', 'success');
                    document.getElementById("js_load").style.display = "none";
                    $('#table_'+table).bootstrapTable('refresh',{url: "${ctx}/config/get/list/group"});
                    return;
                }
                document.getElementById("js_load").style.display = "none";
                lightyear.notify(res.message, 'danger');

            },
            error : function() {
                document.getElementById("js_load").style.display = "none";
                alert("异常！");
            }
        });

    }

    /**
     * 排序
     **/
    function sortConfig(table,id,type){
        document.getElementById("js_load").style.display = "inline";
        $.ajax({
            type: "GET",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "${ctx!}/config/get/sort" ,
            data: {"configId":id,"type":type},
            success: function (res) {
                if (res.status===200){
                    document.getElementById("js_load").style.display = "none";
                    $('#table_'+table).bootstrapTable('refresh',{url: "${ctx}/config/get/list/group"});
                    return;
                }
                document.getElementById("js_load").style.display = "none";
                lightyear.notify(res.message, 'danger');
            },
            error : function() {
                document.getElementById("js_load").style.display = "none";
                lightyear.notify("链接失败，请检查网络~", 'danger');
            }
        });

    }

    /**
     * 提交表单
     **/
    function submitForm(){
        document.getElementById("js_load").style.display = "inline";
        $.ajax({
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "${ctx!}/config/post/save" ,
            data: $('#configValueModelForm').serialize(),
            success: function (res) {
                if (res.status==200){
                    lightyear.notify('操作成功!', 'success');
                    document.getElementById("js_load").style.display = "none";
                    $("#configValueModel_id").modal('hide');
                    $('#table_'+$("#configFormActiveId").val()).bootstrapTable('refresh',{url: "${ctx}/config/get/list/group"});
                    return;
                }
                document.getElementById("js_load").style.display = "none";
                lightyear.notify(res.message, 'danger');

            },
            error : function() {
                document.getElementById("js_load").style.display = "none";
                alert("异常！");
            }
        });
    }
    /**
     * 添加一个配置项
     * @param groupKey
     * @param franId
     * @param templateCode
     */
    function addCNewConfig(table,groupKey,franId){
        document.getElementById("js_load").style.display = "inline";
        $.ajax({
            data:{
                "groupKey":groupKey,
                "franId":franId,
            },
            type: "GET",
            url: "${ctx}/config/add/configure",
            async: false,
            success :function(res){
                console.log("@@@@@@@",res)
                if (res.status==200){
                    lightyear.notify('新增成功!', 'success');
                    document.getElementById("js_load").style.display = "none";
                    $('#table_'+table).bootstrapTable('refresh',{url: "${ctx}/config/get/list/group"});
                    return;
                }
                document.getElementById("js_load").style.display = "none";
                lightyear.notify(res.message, 'danger');
            },
            error:function(res){
                lightyear.notify("网络连接异常，请检查网络设置", 'danger');
            }
        });
    }


    /**
     * 初始化配置
     * */
    function initConfig(group,franId){
        $.confirm({
            title: '初始化配置确认',
            content: '您即将执行初始化操作，将为会您创建一套默认配置，是否继续？',
            type: 'blue',
            typeAnimated: true,
            buttons: {
                tryAgain: {
                    text: '继续',
                    btnClass: 'btn-blue',
                    action: function(){
                        runAjax("${ctx!}/config/get/init","GET",{"groups":Object.keys(group).toString(),"franId":franId},function (res){
                            lightyear.notify('操作成功!', 'success');
                            $('#configModel').modal('hide');
                        });
                    }
                },
                close: {
                    text: '放弃'
                }
            }
        });

    }

    /**
     * 获取对象第一个元素key
     * @param obj
     * @returns {*}
     */
    function getOne(obj){
        for(let key in obj){
            return key;
        }
    }

</script>