{extend name="layout"}

<div class="layui-container">
    <div class="admin-title">ACL 权限规则</div>
    <div class="layui-text" style="margin-bottom:10px;color:#999;">
        需在"服务设置"中开启 ACL 才生效。按 sort 升序匹配，命中第一条即决定放行/拒绝；
        主题支持通配符 <code>+ / #</code> 与占位符 <code>%u</code>(用户名) <code>%c</code>(clientId)。
    </div>
    <button class="layui-btn layui-btn-sm" onclick="editAcl()">+ 新增规则</button>
    <table class="layui-table" style="margin-top:10px;">
        <thead>
            <tr><th>sort</th><th>目标</th><th>主题过滤器</th><th>权限</th><th>动作</th><th>备注</th><th>操作</th></tr>
        </thead>
        <tbody>
            {foreach $list as $c}
            <tr>
                <td>{$c.sort}</td>
                <td>{$c.target_type}{if $c.target}:{$c.target}{/if}</td>
                <td>{$c.topic}</td>
                <td>{if $c.access==1}订阅{elseif $c.access==2}发布{else}订阅+发布{/if}</td>
                <td>{if $c.allow}<span class="layui-badge layui-bg-green">允许</span>{else}<span class="layui-badge">拒绝</span>{/if}</td>
                <td>{$c.remark}</td>
                <td>
                    <a class="layui-btn layui-btn-xs" onclick='editAcl({$c|json_encode})'>编辑</a>
                    <a class="layui-btn layui-btn-xs layui-btn-danger" onclick="delAcl({$c.id})">删除</a>
                </td>
            </tr>
            {/foreach}
        </tbody>
    </table>
    {$list|raw}
</div>

<script>
layui.use(['layer', 'jquery'], function(){
    var $ = layui.jquery, layer = layui.layer;
    window.editAcl = function(row){
        row = row || {};
        var sel = function(name, val, opts){
            var s = '<select name="'+name+'">';
            opts.forEach(function(o){ s += '<option value="'+o[0]+'" '+(val==o[0]?'selected':'')+'>'+o[1]+'</option>'; });
            return s + '</select>';
        };
        var html = '<form class="layui-form" style="padding:20px;" lay-filter="aclForm">'
          + '<input type="hidden" name="id" value="'+(row.id||'')+'">'
          + '<div class="layui-form-item"><label class="layui-form-label">目标类型</label><div class="layui-input-inline">'+sel('target_type', row.target_type||'all', [['all','全部'],['user','按用户名'],['client','按clientId']])+'</div></div>'
          + '<div class="layui-form-item"><label class="layui-form-label">目标值</label><div class="layui-input-inline"><input name="target" class="layui-input" value="'+(row.target||'')+'" placeholder="target_type=all 时留空"></div></div>'
          + '<div class="layui-form-item"><label class="layui-form-label">主题过滤器</label><div class="layui-input-inline"><input name="topic" class="layui-input" value="'+(row.topic||'')+'" placeholder="如 device/%c/# 或 sensor/+/temp"></div></div>'
          + '<div class="layui-form-item"><label class="layui-form-label">权限</label><div class="layui-input-inline">'+sel('access', row.access||3, [[1,'订阅'],[2,'发布'],[3,'订阅+发布']])+'</div></div>'
          + '<div class="layui-form-item"><label class="layui-form-label">动作</label><div class="layui-input-inline">'+sel('allow', (row.allow===undefined?1:row.allow), [[1,'允许'],[0,'拒绝']])+'</div></div>'
          + '<div class="layui-form-item"><label class="layui-form-label">排序</label><div class="layui-input-inline"><input name="sort" class="layui-input" value="'+(row.sort||0)+'"></div></div>'
          + '<div class="layui-form-item"><label class="layui-form-label">备注</label><div class="layui-input-inline"><input name="remark" class="layui-input" value="'+(row.remark||'')+'"></div></div>'
          + '</form>';
        layer.open({type:1, title:(row.id?'编辑':'新增')+'规则', area:['520px','auto'], content:html, btn:['保存','取消'],
            success:function(){ layui.form.render(); },
            yes:function(idx){
                var data = {};
                $('[lay-filter=aclForm]').serializeArray().forEach(function(i){ data[i.name]=i.value; });
                $.post('/mqttbroker/backend/saveAcl', data, function(res){
                    layer.msg(res.message||res.msg||'ok');
                    layer.close(idx); setTimeout(function(){location.reload();},600);
                });
            }
        });
    };
    window.delAcl = function(id){
        layer.confirm('确认删除该规则？', function(idx){
            $.post('/mqttbroker/backend/deleteAcl', {id:id}, function(res){ layer.msg(res.message||'已删除'); setTimeout(function(){location.reload();},600); });
            layer.close(idx);
        });
    };
});
</script>