{extend name="layout"}

<div class="layui-container">
    <div class="admin-title">认证账号</div>
    <div class="layui-text" style="margin-bottom:10px;color:#999;">
        当"允许匿名连接"关闭时，客户端必须使用此处账号连接；超级用户跳过 ACL 校验。
    </div>
    <button class="layui-btn layui-btn-sm" onclick="editAuth()">+ 新增账号</button>
    <table class="layui-table" style="margin-top:10px;">
        <thead>
            <tr><th>ID</th><th>用户名</th><th>超级用户</th><th>状态</th><th>备注</th><th>操作</th></tr>
        </thead>
        <tbody>
            {foreach $list as $c}
            <tr>
                <td>{$c.id}</td>
                <td>{$c.username}</td>
                <td>{if $c.is_superuser}<span class="layui-badge layui-bg-orange">是</span>{else}否{/if}</td>
                <td>{if $c.status}<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='editAuth({$c|json_encode})'>编辑</a>
                    <a class="layui-btn layui-btn-xs layui-btn-danger" onclick="delAuth({$c.id})">删除</a>
                </td>
            </tr>
            {/foreach}
        </tbody>
    </table>
    {$list|raw}
</div>

<script>
layui.use(['layer', 'jquery'], function(){
    var $ = layui.jquery, layer = layui.layer;
    window.editAuth = function(row){
        row = row || {};
        var html = '<form class="layui-form" style="padding:20px;" lay-filter="authForm">'
          + '<input type="hidden" name="id" value="'+(row.id||'')+'">'
          + '<div class="layui-form-item"><label class="layui-form-label">用户名</label><div class="layui-input-inline"><input name="username" class="layui-input" value="'+(row.username||'')+'"></div></div>'
          + '<div class="layui-form-item"><label class="layui-form-label">密码</label><div class="layui-input-inline"><input name="password" class="layui-input" placeholder="'+(row.id?'留空表示不修改':'必填')+'"></div></div>'
          + '<div class="layui-form-item"><label class="layui-form-label">超级用户</label><div class="layui-input-inline"><select name="is_superuser"><option value="0" '+(!row.is_superuser?'selected':'')+'>否</option><option value="1" '+(row.is_superuser==1?'selected':'')+'>是</option></select></div></div>'
          + '<div class="layui-form-item"><label class="layui-form-label">状态</label><div class="layui-input-inline"><select name="status"><option value="1" '+(row.status!=0?'selected':'')+'>启用</option><option value="0" '+(row.status==0?'selected':'')+'>禁用</option></select></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:['480px','auto'], content:html, btn:['保存','取消'],
            success:function(){ layui.form.render(); },
            yes:function(idx){
                var data = {};
                $('[lay-filter=authForm]').serializeArray().forEach(function(i){ data[i.name]=i.value; });
                $.post('/mqttbroker/backend/saveAuth', data, function(res){
                    layer.msg(res.message||res.msg||'ok');
                    if((res.code===0)||(res.code===1)) { layer.close(idx); setTimeout(function(){location.reload();},600); }
                });
            }
        });
    };
    window.delAuth = function(id){
        layer.confirm('确认删除该账号？', function(idx){
            $.post('/mqttbroker/backend/deleteAuth', {id:id}, function(res){ layer.msg(res.message||'已删除'); setTimeout(function(){location.reload();},600); });
            layer.close(idx);
        });
    };
});
</script>