java/PlayPai.git

@layout("/common/_container.html"){
<div class="ibox float-e-margins">
    <div class="ibox-content">
        <div class="form-horizontal">
            <input type="hidden" id="id" value="${item.id!}"/>
            <input type="hidden" id="objectType" value="${objectType!}"/>
            <input type="hidden" id="operatorId" value="${operatorId!}"/>
            <div class="row">
                @if(objectType == 1){
                    <div class="tabs-container">
                        <ul class="nav nav-tabs">
                            <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">添加人员说明文案</a></li>
                            <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">选择人员说明文案</a></li>
                        </ul>
                        <div class="tab-content">
                            <div id="tab-1" class="tab-pane active">
                                <div class="panel-body">
                                    <textarea id="editor_1" type="text/plain" style="width:1200px;height:400px;">${item.addUserRemark!}</textarea>
                                </div>
                            </div>
                            <div id="tab-2" class="tab-pane">
                                <div class="panel-body">
                                    <textarea type="text/plain" id="editor_2" style="width:1200px;height:400px;">${item.selectUserRemark!}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                <hr>
                @}
                <div class="form-group">
                    <label class="col-sm-1 control-label" for="operator">所属运营商：</label>
                    <div class="col-sm-3">
                        <select id="operator" class="form-control">
                            @if(objectType == 1){
                            <option value="">默认</option>
                            @}
                            @if(isNotEmpty(operatorList)){
                            @for(item in operatorList){
                                @if(objectType == 2){
                                    <option value="${item.id}" ${operatorId == item.id ? 'selected disabled' : ''}>${item.name}</option>
                                @}else{
                                    <option value="${item.id}">${item.name}</option>
                                @}
                            @}
                            @}
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-1 control-label">门店无玩湃惠民卡介绍页</label>
                    <div class="col-sm-9">
                        <textarea id="editor_3" type="text/plain" style="width:1200px;height:400px;">${item.storeNoHuiminCardIntro!}</textarea>
                    </div>
                </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-1 control-label" for="agreement">协议配置：</label>
                    <div class="col-sm-3">
                        <div class="input-group">
                            <input type="text" id="agreement" name="agreement" class="form-control" placeholder="请输入协议配置标题">
                            <span class="input-group-btn">
                                <button type="button" id="agreementAdd" name="agreementAdd" class="btn btn-primary">添加</button>
                            </span>
                        </div>
                    </div>
                </div>
                
                <!-- 动态添加的协议Tab -->
                <div id="dynamic-editors-container" class="col-sm-12" style="margin-top: 20px;">
                    <div class="tabs-container" id="dynamic-tabs-container" style="display: none;">
                        <ul class="nav nav-tabs" id="agreement-tabs">
                            <!-- 动态添加的Tab将在这里显示 -->
                        </ul>
                        <div class="tab-content" id="agreement-content">
                            <!-- 动态添加的内容将在这里显示 -->
                        </div>
                    </div>
                </div>
 
            </div>
 
            <div class="row btn-group-m-t">
                <div class="col-sm-10" style="margin-top: 10px;">
                    <#button btnCss="info" name="保存" id="ensure" icon="fa-check" clickFun="submitData()"/>
                </div>
            </div>
        </div>
 
    </div>
</div>
<script src="${ctxPath}/modular/system/tHuiminAgreement/tHuiminAgreement_info.js"></script>
<script>
    
    var editor_1 = null;
    var editor_2 = null;
    var editor_3 = null;
    var dynamicEditors = []; // 存储动态创建的编辑器实例
    var editorCounter = 0; // 用于生成唯一ID
 
    $(function () {
        var objectType = '${objectType!}';
        var operatorId;
        if(objectType == 1){
            //初始化编辑器
            editor_1 = UE.getEditor('editor_1');
            editor_2 = UE.getEditor('editor_2');
            editor_3 = UE.getEditor('editor_3');
        }else{
            editor_3 = UE.getEditor('editor_3');
            operatorId ='${operatorId!}';
            console.log("operatorId",operatorId);
        }
        // 改用全局方法处理删除
        window.deleteTab = function(counter) {
            console.log("全局删除方法被调用，counter =", counter);
            deleteEditor(parseInt(counter));
        };
 
        // 绑定添加按钮的点击事件
        $("#agreementAdd").click(function() {
            var title = $("#agreement").val().trim();
            if(title === "") {
                Feng.error("请输入协议配置标题");
                return;
            }
            
            // 创建新的编辑器区域
            addNewEditor(title,"");
            
            // 清空输入框
            $("#agreement").val("");
        });
        
        // 确保编辑器初始化完成后再获取数据
        editor_3.ready(function() {
            console.log("编辑器初始化完成，准备加载数据");
            
            // 页面初始化时通过AJAX请求获取协议配置数据
            console.log("页面初始化，当前运营商ID:", operatorId);
            
            // 调用接口获取协议配置数据（只回显协议配置，不回显门店无玩湃惠民卡介绍页）
            var ajax = new $ax(Feng.ctxPath + "/tHuiminAgreement/selectAgreementByOperationId", function(data){
                console.log("获取到的玩湃惠民卡数据:", data);
                if (data.data != null){
                    // 只更新协议配置
                    if (data.data.settingList && data.data.settingList.length > 0) {
                        console.log("协议配置数据:", data.data.settingList);
                        review(data.data.settingList);
                    }
                }
            },function(data){
                console.error("获取玩湃惠民卡数据失败:", data);
                Feng.error("获取玩湃惠民卡数据失败!");
            });
            ajax.set("operatorId", operatorId);
            ajax.start();
        });
        
        //经营商切换事件
        $("#operator").change(function() {
            console.log("运营商切换事件触发，选择的运营商ID:", $("#operator").val());
            
            // 先主动清空编辑器内容
            if(editor_3 && editor_3.body) {
                editor_3.setContent("");
                console.log("主动清空门店无玩湃惠民卡介绍页内容");
            }
            
            //清空协议配置
            removeAll();
            //调用接口获取协议配置数据
            //提交信息
            var ajax = new $ax(Feng.ctxPath + "/tHuiminAgreement/selectAgreementByOperationId", function(data){
                console.log("获取到的玩湃惠民卡数据:", data);
                if (data.data != null){
                    // 更新门店无玩湃惠民卡介绍页内容
                    try {
                        var introContent = "";
                        // 严格判断内容是否存在且非空
                        if(data.data.storeNoHuiminCardIntro !== null && 
                           data.data.storeNoHuiminCardIntro !== undefined && 
                           data.data.storeNoHuiminCardIntro !== "") {
                            introContent = data.data.storeNoHuiminCardIntro;
                        }
                        
                        // 确保编辑器实例存在且已初始化
                        if(editor_3 && editor_3.body) {
                            // 设置编辑器内容（空内容会清空编辑器）
                            editor_3.setContent(introContent);
                            console.log("已更新门店无玩湃惠民卡介绍页内容:", introContent ? "有内容" : "内容为空");
                        } else {
                            console.error("编辑器未准备好，无法设置内容");
                            // 延迟设置内容
                            setTimeout(function() {
                                try {
                                    if(editor_3) {
                                        editor_3.setContent(introContent);
                                        console.log("延迟更新门店无玩湃惠民卡介绍页内容成功");
                                    }
                                } catch(e) {
                                    console.error("延迟设置编辑器内容出错:", e);
                                }
                            }, 1000);
                        }
                    } catch(e) {
                        console.error("设置编辑器内容出错:", e);
                    }
                    
                    // 更新协议配置
                    if (data.data.settingList && data.data.settingList.length > 0) {
                        console.log("协议配置数据:", data.data.settingList);
                        review(data.data.settingList);
                    }
                }
            },function(data){
                console.error("获取玩湃惠民卡数据失败:", data);
                Feng.error("获取玩湃惠民卡数据失败!");
            });
            ajax.set("operatorId",$("#operator").val());
            ajax.start();
        });
    });
 
    // 清空所有编辑器实例和UI元素
    function removeAll(){
        console.log("清空协议配置");
        $("#dynamic-tabs-container").hide();
        // 彻底清空容器内容，确保没有残留
        $("#agreement-tabs").empty();
        $("#agreement-content").empty();
        
        // 销毁所有编辑器实例
        for(var i = 0; i < dynamicEditors.length; i++) {
            try {
                if(dynamicEditors[i].editor) {
                    dynamicEditors[i].editor.destroy();
                    dynamicEditors[i].editor = null;
                }
            } catch(e) {
                console.error("销毁编辑器出错:", e);
            }
        }
        
        editorCounter = 0;
        //清空动态创建的编辑器实例
        dynamicEditors=[];
        console.log("dynamicEditors",dynamicEditors)
    }
 
    // 协议配置回显
    function review(settingArr){
        if (typeof settingArr !== 'undefined' && settingArr.length > 0) {
            settingArr.forEach(function(item) {
                // 详细记录每个配置项
                console.log("处理协议配置项:", item);
                
                // 获取标题和内容，兼容不同字段名
                var title = item.agreementName || item.title || "";
                var content = item.agreementContent || item.content || "";
                
                console.log("使用标题:", title, "内容长度:", content.length, "内容前20字符:", content.substring(0, 20));
                addNewEditor(title, content);
            });
        }
    }
 
    // 添加新的编辑器函数 - 修改为接受内容参数
    function addNewEditor(title, content) {
        editorCounter++;
        // 立即捕获当前counter值，防止闭包问题
        var currentCounter = editorCounter;
        
        var editorId = "dynamic-editor-" + currentCounter;
        var tabId = "agreement-tab-" + currentCounter;
        var isFirstTab = (dynamicEditors.length === 0);
        
        // 如果是第一个编辑器，显示tabs容器
        if(isFirstTab) {
            $("#dynamic-tabs-container").show();
        }
        
        // 先将所有协议配置tab设为非激活状态
        $("#agreement-tabs li").removeClass("active");
        $("#agreement-content .tab-pane").removeClass("active");
        
        // 创建新的Tab - 始终设置为激活状态
        // 修改删除按钮DOM结构，确保按钮在标题右侧
        var tabHtml = '<li class="active" id="tab-li-' + currentCounter + '" style="position:relative;">' +
                      '<a data-toggle="tab" href="#' + tabId + '" aria-expanded="true" style="padding-right:25px;">' + title + '</a>' + 
                      '<span onclick="deleteTab(' + currentCounter + ')" ' +
                      'style="position:absolute;right:5px;top:10px;cursor:pointer;color:#f00;z-index:100;">' +
                      '<i class="fa fa-times-circle"></i></span></li>';
        
        // 记录创建的按钮信息，辅助调试
        console.log("创建删除按钮, counter =", currentCounter, "title =", title);
        
        // 创建Tab内容 - 始终设置为激活状态
        var contentHtml = '<div id="' + tabId + '" class="tab-pane active">' +
                         '<div class="panel-body">' +
                         '<textarea id="' + editorId + '" type="text/plain" style="width:100%;height:300px;"></textarea>' +
                         '</div></div>';
        
        // 添加到容器中
        $("#agreement-tabs").append(tabHtml);
        $("#agreement-content").append(contentHtml);
        
        // 创建一个新的编辑器实例对象
        var editor = UE.getEditor(editorId, {
            initialFrameHeight: 300,
            initialFrameWidth: '100%',
            enableAutoSave: false,
            autoHeightEnabled: false,
            autoFloatEnabled: false
        });
        
        // 确保编辑器已准备好，使用立即执行函数捕获当前counter值
        (function(capturedCounter, editorId, tabId, titleText, contentText) {
            editor.ready(function() {
                try {
                    // 检查编辑器是否已准备好接收内容
                    if(editor.body) {
                        // 初始化内容
                        editor.setContent(contentText || "");
                    } else {
                        // 如果编辑器body未准备好，延迟设置内容
                        setTimeout(function() {
                            try {
                                editor.setContent(contentText || "");
                            } catch(e) {
                                console.error("延迟设置编辑器内容出错:", e);
                            }
                        }, 500);
                    }
                    
                    // 存储编辑器实例和标题信息，使用捕获的counter
                    dynamicEditors.push({
                        id: editorId,
                        tabId: tabId,
                        counter: capturedCounter,  // 使用捕获的值，而不是外部变量
                        title: titleText,
                        editor: editor,
                        content: contentText || ""
                    });
                    
                    console.log("编辑器准备完成，添加到dynamicEditors，counter =", capturedCounter);
                    
                    // 不再需要在这里绑定事件，因为已经使用事件委托
                } catch(e) {
                    console.error("编辑器初始化出错:", e);
                }
            });
        })(currentCounter, editorId, tabId, title, content);
        
        // 手动激活新添加的标签页
        $('#agreement-tabs a[href="#' + tabId + '"]').tab('show');
    }
 
    // 删除编辑器函数 - 优化标签页激活逻辑
    function deleteEditor(counter) {
        // 确保counter是整数
        counter = parseInt(counter);
        
        var index = -1;
        var isActive = $("#tab-li-" + counter).hasClass("active");
        var nextActive = null;
        
        // 输出当前所有编辑器的counter值，辅助调试
        console.log("当前所有编辑器的counter值:", dynamicEditors.map(function(item) { return item.counter; }));
        console.log("完整的dynamicEditors数组:", JSON.stringify(dynamicEditors.map(function(item) { 
            return {
                counter: item.counter,
                title: item.title,
                tabId: item.tabId,
                id: item.id
            }; 
        })));
        
        // 查找编辑器索引
        for(var i = 0; i < dynamicEditors.length; i++) {
            console.log("检查编辑器", i, "counter =", dynamicEditors[i].counter, "要删除的counter =", counter);
            // 使用严格的整数比较
            if(parseInt(dynamicEditors[i].counter) === counter) {
                index = i;
                break;
            }
        }
        
        if(index === -1) {
            console.error("找不到要删除的编辑器:", counter);
            // 尝试遍历DOM查找是否存在该元素
            console.log("尝试检查DOM元素是否存在:", "#tab-li-" + counter);
            console.log("DOM元素存在:", $("#tab-li-" + counter).length > 0);
            return;
        }
        
        console.log("删除编辑器", counter, "索引:", index, "是否当前活跃:", isActive);
        
        // 确定删除后需要激活哪个标签页
        if(isActive && dynamicEditors.length > 1) {
            // 优先选择下一个，如果没有则选择上一个
            if(index < dynamicEditors.length - 1) {
                nextActive = dynamicEditors[index + 1].tabId;
                console.log("将激活下一个标签页:", nextActive);
            } else {
                nextActive = dynamicEditors[index - 1].tabId;
                console.log("将激活上一个标签页:", nextActive);
            }
        }
        
        // 如果是当前活跃标签，先激活另一个标签，再删除当前标签
        if(isActive && nextActive) {
            try {
                console.log("先激活其他标签页:", nextActive);
                $('a[href="#' + nextActive + '"]').tab('show');
            } catch(e) {
                console.error("激活其他标签页失败:", e);
            }
        }
        
        // 销毁编辑器实例
        try {
            if(dynamicEditors[index].editor) {
                dynamicEditors[index].editor.destroy();
            }
        } catch(e) {
            console.error("销毁编辑器出错:", e);
        }
        
        // 完全清理DOM元素
        try {
            $("#tab-li-" + counter).remove();
            $("#" + dynamicEditors[index].tabId).remove();
            
            // 确保UEditor容器被完全移除
            $("#" + dynamicEditors[index].id).parents(".edui-default").remove();
            $("#" + dynamicEditors[index].id).remove();
        } catch(e) {
            console.error("清理DOM元素出错:", e);
        }
        
        // 从数组中移除
        dynamicEditors.splice(index, 1);
        console.log("删除后的编辑器列表:", dynamicEditors.map(function(item) { return item.title; }));
        
        // 如果没有编辑器了，清空并隐藏tabs容器
        if(dynamicEditors.length === 0) {
            $("#dynamic-tabs-container").hide();
            // 彻底清空容器内容，确保没有残留
            $("#agreement-tabs").empty();
            $("#agreement-content").empty();
        }
        // 不再需要这个逻辑，因为我们在删除前已经激活了其他标签
    }
    
    //收集动态编辑器内容
    collectDynamicEditors = function() {
        var agreements = [];
        for(var i = 0; i < dynamicEditors.length; i++) {
            var content = "";
            try {
                // 确保编辑器实例存在且可用
                if(dynamicEditors[i].editor && dynamicEditors[i].editor.isReady) {
                    content = dynamicEditors[i].editor.getContent();
                } else {
                    content = dynamicEditors[i].content || "";
                }
            } catch(e) {
                console.error("获取编辑器内容出错:", e);
                content = dynamicEditors[i].content || "";
            }
            
            // 使用与后端一致的字段名
            agreements.push({
                agreementName: dynamicEditors[i].title,
                agreementContent: content
            });
        }
        console.log("收集到的协议配置数据:", agreements);
        return agreements;
    };
 
    function submitData() {
        let objectType = $("#objectType").val();
        //提交信息
        var ajax = new $ax(Feng.ctxPath + "/tHuiminAgreement/save", function(data){
            Feng.success("保存成功!");
        },function(data){
            Feng.error("保存失败!" + data.responseJSON.message + "!");
        });
        if (Number(objectType) === 1) {
            ajax.set("addUserRemark", editor_1.getContent());
            ajax.set("selectUserRemark", editor_2.getContent());
            ajax.set("operatorId", $("#operator").val());
        }else {
            ajax.set("operatorId", $("#operatorId").val());
        }
        ajax.set("storeNoHuiminCardIntro", editor_3.getContent());
        ajax.set("agreementSettings", JSON.stringify(collectDynamicEditors()));
        ajax.set("id", $("#id").val());
        ajax.start();
    }
</script>
@}