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


{block name="content"}
<!-- 操作指南开始 -->
<div class="think-box-shadow" style="margin-bottom: 15px; padding: 15px;">
    <h3 class="layui-inline" style="margin-right: 15px;">回传配置指南</h3>
    <button class="layui-btn layui-btn-sm" id="showGuide">展开/收起</button>
    <div class="guide-content layui-hide" style="margin-top: 10px;">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-elem-quote" style="border-left: 5px solid #009688;">
                    <h4>基本说明：</h4>
                    <p>本页面用于管理事件回传配置，支持变量替换功能，可以灵活配置回传地址。</p>
                </div>

                <div class="layui-elem-quote" style="border-left: 5px solid #FFB800;">
                    <h4>支持的变量：</h4>
                    <ol>
                        <li><code>{package_name}</code> - 应用包名，如：com.example.app</li>
                        <li><code>{event_name}</code> - 事件名称，如：install, register</li>
                        <li><code>{event_time}</code> - 事件发生时间，格式：YYYY-MM-DD HH:mm:ss</li>
                        <li><code>{gaid}</code> - 广告ID</li>
                        <li><code>{network_name}</code> - 网络名称，如：AppsFlyer, Kochava</li>
                    </ol>
                </div>

                <div class="layui-elem-quote" style="border-left: 5px solid #FF5722;">
                    <h4>配置示例：</h4>
                    <ol>
                        <li>基础URL：http://api.example.com/callback</li>
                        <li>
                            完整示例：http://api.example.com/callback?package={package_name}&event={event_name}&time={event_time}&gaid={gaid}&network={network_name}
                        </li>
                        <li>实际回传时，花括号中的变量会被替换为实际值</li>
                        <li>所有特殊字符会自动进行URL编码</li>
                    </ol>
                </div>

                <div class="layui-elem-quote" style="border-left: 5px solid #01AAED;">
                    <h4>注意事项：</h4>
                    <ol>
                        <li>变量名称必须使用大括号{}包裹，且区分大小写</li>
                        <li>同一个包名下不能配置重复的事件名称</li>
                        <li>回传地址必须以http://或https://开头</li>
                        <li>建议在测试环境验证回传地址的正确性</li>
                        <li>可以通过状态开关临时停用某个回传配置</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 操作指南结束 -->

<!-- 表单搜索区域 -->
<div class="think-box-shadow">
    <div class="layui-row">
        <div class="layui-col-md11">
            <form class="layui-form layui-form-pane form-search" action="">
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">包名</label>
                    <div class="layui-input-inline">
                        <input name="package_name" placeholder="请输入包名" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">事件名称</label>
                    <div class="layui-input-inline">
                        <input name="event_name" placeholder="请输入事件名称" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-inline">
                        <select name="status" lay-search>
                            <option value="">所有状态</option>
                            <option value="1">启用</option>
                            <option value="0">停用</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item layui-inline">
                    <button class="layui-btn layui-btn-primary" lay-submit lay-filter="search_form">
                        <i class="layui-icon">&#xe615;</i> 搜 索
                    </button>
                </div>
            </form>
        </div>

        <div class="layui-col-md1 text-right">
            <!--{if auth("add")}-->
            <button class='layui-btn layui-btn-normal' data-modal='{:url("add")}'
                    data-title="添加回传配置">
                <i class="layui-icon layui-icon-add-circle"></i> 添加事件
            </button>
            <!--{/if}-->
        </div>
    </div>
</div>

<!-- 数据表格区域 -->
<div class="think-box-shadow">
    <table class="layui-table" id="CallbackTable" data-url="{:url('get_list')}"
           data-target-search="form.form-search"></table>
</div>

<!-- 数据操作工具条模板 -->
<script type="text/html" id="toolbar">
    <!--{if auth("edit")}-->
    <a class="layui-btn layui-btn-sm" data-modal="{:url('edit')}?id={{d.id}}" data-title="编辑回传配置">
        <i class="layui-icon layui-icon-edit"></i> 编辑
    </a>
    <!--{/if}-->
    <!--{if auth("remove")}-->
    <a class="layui-btn layui-btn-sm layui-btn-danger" data-action="{:url('remove')}" data-value="id#{{d.id}}"
       data-confirm="确定要删除此配置吗？">
        <i class="layui-icon layui-icon-delete"></i> 删除
    </a>
    <!--{/if}-->
</script>

<!-- 数据状态切换模板 -->
<script type="text/html" id="statusTpl">
    <!--{if auth("state")}-->
    <input type="checkbox" value="{{d.id}}" lay-skin="switch" lay-text="启用|停用" lay-filter="status"
           {{d.status>0?'checked':''}}>
    <!--{else}-->
    {{d.status ? '<b class="color-green">启用</b>' : '<b class="color-red">停用</b>'}}
    <!--{/if}-->
</script>
{/block}

{block name="script"}
<script>
    $(function () {
        let table; // 定义表格变量

        // 初始化表格组件
        table = $('#CallbackTable').layTable({
            url: '{:url("get_list")}',
            method: 'get',
            even: true,
            page: true,
            limit: 15,
            limits: [10, 15, 20, 25, 50, 100],
            cols: [[
                {field: 'id', title: 'ID', width: 80, align: 'center'},
                {field: 'package_name', title: '包名', minWidth: 200},
                {field: 'event_name', title: '事件名称', minWidth: 150},
                {field: 'callback_url', title: '回传地址', minWidth: 300},
                {field: 'status', title: '状态', width: 100, align: 'center', templet: '#statusTpl'},
                {field: 'create_at', title: '创建时间', width: 180, align: 'center'},
                {title: '操作', toolbar: '#toolbar', width: 180, align: 'center', fixed: 'right'}
            ]],
            text: {
                none: '暂无回传配置数据'
            }
        });

        // 数据状态切换操作
        form.on('switch(status)', function (obj) {
            $.ajax({
                url: '{:url("state")}',
                type: 'POST',
                data: {
                    id: obj.value,
                    status: obj.elem.checked ? 1 : 0
                },
                dataType: 'json',
                success: function (res) {
                    if (res.code === 1) {
                        layer.msg(res.info, {icon: 1});
                        // 仅重载表格数据
                        table.reload('CallbackTable', {
                            page: {
                                curr: $(".layui-laypage-em").next().html() // 保持在当前页
                            }
                        });
                    } else {
                        layer.msg(res.info, {icon: 2});
                        // 状态切换失败，回滚switch状态
                        obj.elem.checked = !obj.elem.checked;
                        form.render('checkbox');
                    }
                },
                error: function () {
                    layer.msg('操作失败，请重试', {icon: 2});
                    // 发生错误时也回滚switch状态
                    obj.elem.checked = !obj.elem.checked;
                    form.render('checkbox');
                }
            });
        });

        // 操作指南展开/收起
        $('#showGuide').on('click', function () {
            $('.guide-content').toggleClass('layui-hide');
        });
    });
</script>

<style>
    /* 操作指南样式 */
    .guide-content .layui-elem-quote {
        margin: 10px 0;
        padding: 15px;
        background-color: #f8f8f8;
    }

    .guide-content h4 {
        margin-bottom: 10px;
        font-weight: bold;
    }

    .guide-content code {
        padding: 2px 4px;
        background-color: #f1f1f1;
        border-radius: 3px;
        color: #333;
        font-family: Consolas, monospace;
    }

    .guide-content ol li {
        margin: 5px 0;
        color: #666;
    }
</style>
{/block}