{extend name="public/base" /}

{block name="body"}
<div class="x7">
    <blockquote class="layui-elem-quote">
        <button type="button" class="layui-btn layui-btn-small layui-btn-danger" data-href="{:url('auth/remove')}" id="del"><i class="layui-icon">&#xe640;</i> 移除授权</button>
        已授权用户
    </blockquote>
    <div class="layui-form admin-main" id="authed">
        <table class="layui-table">
            <thead>
                <tr>
                    <th width="20"><input type="checkbox" lay-skin="primary" lay-filter="allChoose"></th>
                    <th>UID</th>
                    <th>用户名</th>
                    <th>昵称</th>
                    <th>创建时间</th>
                </tr>
            </thead>
            <tbody>
                {volist name="list" id="vo"}
                <tr>
                    <td><input type="checkbox" data-id="{$vo.id}" lay-filter="id" lay-skin="primary"></td>
                    <td>{$vo.id}</td>
                    <td>{$vo.username}</td>
                    <td>{$vo.info.nickname}</td>
                    <td>{$vo.auth_user.create_time}</td>
                </tr>
                {/volist}
            </tbody>
        </table>
        {$list->render();}
    </div>
</div>

<div class="x5" style="padding-left:10px;box-sizing:border-box;">
    <blockquote class="layui-elem-quote">
        添加用户到分组
    </blockquote>
    <div class="layui-form">
        <form class="layui-form-pane" action="__SELF__">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" name="username" lay-verify="required" placeholder="请输用户名/UID" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <button class="layui-btn" lay-submit lay-filter="search">搜索</button>
                </div>
            </div>
        </form>
        <div id="view"></div>
    </div>
</div>

<script id="demo" type="text/html">
    <div class="layui-form">
        <table class="layui-table">
            <thead>
                <tr>
                    <th width="20"><input type="checkbox" lay-skin="primary" lay-filter="allChoose"></th>
                    <th>UID</th>
                    <th>用户名</th>
                    <th>姓名</th>
                </tr>
            </thead>
            <tbody>
                {{#  layui.each(d.data, function(index, item){ }}
                    <tr>
                        <td><input type="checkbox" data-id="{{ item.id }}" lay-filter="id" lay-skin="primary"></td>
                        <td>{{ item.id }}</td>
                        <td>{{ item.username }}</td>
                        <td>{{ item.nickname }}</td>
                    </tr>
                    {{#  }); }}
                {{#  if(d.data.length === 0){ }}
                <tr>
                    <td colspan="3" align="center">未找到相关用户</td>
                </tr>
                {{#  } }}
            </tbody>
        </table>
        {{#  if(d.data.length > 0){ }}
        <button class="layui-btn" onclick="layui.laytpl.add()">授权至分组</button>
        {{#  } }}
    </div>
</script>
{/block}


{block name="layui"}
<script>
    layui.use(['form', 'laytpl', 'element'], function(){
        var $ = layui.jquery, form = layui.form(), laytpl = layui.laytpl;
        var element = layui.element();
        form.on('checkbox(allChoose)', function(data) {
            var child = $(data.elem).parents('table').find('tbody input[lay-filter="id"]');
            child.each(function(index, item) {
                item.checked = data.elem.checked;
            });
            form.render('checkbox');
        });

        form.on('submit(search)', function(data) {
            $.post(data.form.action, data.field, function(res) {
                if (res.code == 1) {
                    //第三步：渲染模版
                    var getTpl = demo.innerHTML;
                    laytpl(getTpl).render(res, function(html) {
                        view.innerHTML = html;
                        form.render();
                        element.init();
                    });
                } else {
                    layer.msg(res.msg, {icon: 0, time: 1000});
                }
            });
            return false;
        });

        $('#del').on('click', function(e) {
            var $this = $(this);
            var nodes = getSelected('authed');
            var id = {$Think.get.id};

            if (nodes.length < 1) {
                layer.msg('请选择一条要删除的数据');
            } else {
                $.post($this.data('href'), {id: id, uid: nodes}, function(res) {
                    layer.msg(res.msg, {icon: Math.abs(res.code - 2), time: 1000}, function() {
                        location.reload();
                    });
                });
            }
        });

        laytpl.add = function() {
            var nodes = getSelected('view');
            var id = {$Think.get.id};
            if (nodes.length < 1) {
                layer.msg('请选择一个要操作的用户');
            } else {
                $.post("{:url('auth/insert')}", {id: id, uid: nodes}, function(res) {
                    layer.msg(res.msg, {icon: Math.abs(res.code - 2), time: 1000}, function() {
                        location.reload();
                    });
                });
            }
        };

        function getSelected(elem) {
            var child = $('#' + elem).find('tbody input[lay-filter="id"]:checked');
            var idArr = [];
            child.each(function(index, item) {
                idArr[index] = $(item).data('id');
            });
            return idArr;
        }
    });
</script>
{/block}