{extend name="../../admin/view/main"}

{block name="content"}
<form class="layui-form layui-card" action="{:request()->url()}" data-auto="true" method="post">
    <div class="layui-card-body">
        <div class="layui-form-item">
            <label class="layui-form-label">选择包名</label>
            <div class="layui-input-block">
                <div id="packageSelect"></div>
                <input type="hidden" name="package_id" id="selectedPackageId">
                <input type="hidden" name="package_name" id="selectedPackageName">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">事件名称</label>
            <div class="layui-input-block">
                <input type="text" name="event_name" required lay-verify="required" placeholder="请输入事件名称" class="layui-input">
                <tip>例如：install, register, purchase 等</tip>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">回传地址</label>
            <div class="layui-input-block">
                <input type="text" name="callback_url" required lay-verify="required|callback_url" placeholder="请输入回传地址" class="layui-input">
                <tip>
                    完整的回传接口地址，例如：http://api.example.com/callback<br>
                    支持变量替换，如 {package_name}, {event_name} 等<br>
                    详细说明请查看完整回传指南
                </tip>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="1" title="启用" checked>
                <input type="radio" name="status" value="0" title="停用">
            </div>
        </div>
    </div>

    <div class="hr-line-dashed"></div>

    <div class="layui-form-item text-center">
        <button class="layui-btn" lay-submit lay-filter="formSubmit">保存数据</button>
        <button class="layui-btn layui-btn-danger" type="button" data-close>取消添加</button>
    </div>
</form>
{/block}

{block name="script"}
<style>
.layui-form tip {
    display: block;
    padding: 10px;
    margin-top: 10px;
    color: #666;
    background-color: #f8f8f8;
    border-radius: 2px;
    line-height: 1.8;
}
.layui-badge {
    margin: 2px;
    font-family: Consolas, monospace;
}
</style>
<script>
    $(function () {
        layui.use(['form', 'xmSelect', 'layer'], function () {
            let form = layui.form;
            let layer = layui.layer;
            let existingConfig = null; // 用于存储已存在的配置信息
            
            // 定义包名选择器
            const packageSelect = xmSelect.render({
                el: '#packageSelect',
                name: 'package_id',
                radio: true,
                clickClose: true,
                filterable: true,
                tips: '请选择包名',
                data: [],
                direction: 'auto',
                model: { label: { type: 'text' } },
                on: function(data) {
                    if(data.arr.length > 0) {
                        let selected = data.arr[0];
                        $('#selectedPackageId').val(selected.value);
                        $('#selectedPackageName').val(selected.package_name);
                        // 选择包名后，如果已有事件名称，则检查是否存在
                        checkEventExists();
                    } else {
                        $('#selectedPackageId').val('');
                        $('#selectedPackageName').val('');
                    }
                    form.render();
                }
            });

            let checkTimer = null; // 添加防抖定时器

            // 监听事件名称输入框
            $('input[name="event_name"]').on('input propertychange', function() {
                let currentValue = $(this).val();
                console.log('事件名称输入:', currentValue);
                
                // 使用防抖，避免频繁请求
                if (checkTimer) clearTimeout(checkTimer);
                checkTimer = setTimeout(function() {
                    checkEventExists(currentValue);
                }, 300);
            });

            // 检查事件是否存在
            function checkEventExists(eventValue) {
                // 获取当前弹窗内的元素
                let $dialog = $('.layui-layer-page').last();
                let packageId = $('#selectedPackageId').val();
                let $eventInput = $dialog.find('input[name="event_name"]');
                
                // 清除现有提示和验证状态
                $eventInput.removeClass('layui-form-danger');
                $eventInput.nextAll('.layui-form-mid,.layui-word-aux').remove();
                $dialog.find('tip').show();
                
                // 重置existingConfig
                existingConfig = null;
                
                if (packageId && eventValue) {
                    // 直接获取配置详情
                    $.ajax({
                        url: '{:url("getExistingConfig")}',
                        type: 'POST',
                        data: {
                            package_id: packageId,
                            event_name: eventValue
                        },
                        dataType: 'json',
                        success: function(configRes) {
                            if (configRes.code === 1 && configRes.data) {
                                // 保存已存在的配置信息
                                existingConfig = configRes.data; // 保存完整的配置信息
                                
                                // 添加验证失败样式
                                $eventInput.addClass('layui-form-danger');
                                // 隐藏当前弹窗内的tip
                                $dialog.find('.layui-input-block tip').hide();
                                // 添加提示信息
                                $eventInput.after(`
                                    <div class="layui-form-mid" style="margin-top: 5px;">
                                        <div style="color: #FF5722; font-weight: bold; margin-bottom: 5px;">
                                            <i class="layui-icon layui-icon-warning" style="font-size: 16px; margin-right: 5px;"></i>
                                            该包名下已存在此事件名称的配置，提交时将覆盖现有配置
                                        </div>
                                        <div style="color: #666; background: #f8f8f8; padding: 8px; border-radius: 2px; margin-top: 5px;">
                                            <i class="layui-icon layui-icon-link" style="margin-right: 5px;"></i>
                                            已配置的回调地址：${configRes.data.callback_url}
                                        </div>
                                    </div>
                                `);
                            }
                        }
                    });
                }
            }

            // 加载包名列表
            function loadPackageList() {
                $.get('{:url("searchPackages")}', {
                    init: 1
                }, function(res) {
                    if (res.code === 1) {
                        let data = res.data.map(function(item) {
                            return {
                                name: item.package_name + ' (' + item.name + ')',
                                value: item.id,
                                package_name: item.package_name
                            };
                        });
                        packageSelect.update({
                            data: data,
                            autoRow: true
                        });
                    }
                }, 'json');
            }

            // 初始加载包名列表
            loadPackageList();

            // 表单验证
            form.verify({
                callback_url: function(value) {
                    if (!/^https?:\/\/.+/.test(value)) {
                        return '请输入正确的URL地址';
                    }
                }
            });

            // 修改表单提交处理
            form.on('submit(formSubmit)', function(data) {
                // 如果存在配置，显示确认框
                if (existingConfig) {
                    layer.confirm('该包名下已存在此事件配置，是否确认覆盖？', {
                        title: '覆盖确认',
                        btn: ['确认覆盖', '取消'],
                        icon: 3
                    }, function(index) {
                        // 确认覆盖，将请求转为更新操作
                        let formData = data.field;
                        formData.id = existingConfig.id; // 添加已存在配置的ID
                        
                        $.ajax({
                            url: '{:url("edit")}',
                            type: 'POST',
                            data: formData,
                            dataType: 'json',
                            success: function(res) {
                                if (res.code === 1) {
                                    layer.msg(res.info, {icon: 1, time: 1500}, function() {
                                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                                        parent.location.reload();
                                    });
                                } else {
                                    layer.msg(res.info, {icon: 2, time: 1500});
                                }
                            }
                        });
                        layer.close(index);
                    });
                } else {
                    // 如果不存在配置，使用默认表单提交
                    let formData = data.field;
                    $.ajax({
                        url: '{:url("add")}',
                        type: 'POST',
                        data: formData,
                        dataType: 'json',
                        success: function(res) {
                            if (res.code === 1) {
                                layer.msg(res.info, {icon: 1, time: 1500}, function() {
                                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                                    parent.location.reload();
                                });
                            } else {
                                layer.msg(res.info, {icon: 2, time: 1500});
                            }
                        }
                    });
                }
                return false; // 阻止表单默认提交
            });
        });
    });
</script>
{/block}