{extend name="$_admin_base_layout" /}

{block name="style"}
<link href="__LIBS__/jstree/themes/default/style.min.css" rel="stylesheet" />
{/block}

{block name="content"}
    <div class="row">
        <div class="col-md-12">
            <div class="block">
                <ul class="nav nav-tabs" data-toggle="tabs">
                    <li class="active">
                        <a href="#tab1">角色信息</a>
                    </li>
                    <li>
                        <a href="#tab2">访问授权</a>
                    </li>
                    <li class="pull-right">
                        <ul class="block-options push-10-t push-10-r">
                            <li>
                                <button type="button" data-toggle="block-option" data-action="fullscreen_toggle"></button>
                            </li>
                            <li>
                                <button type="button" data-toggle="block-option" data-action="refresh_toggle" data-action-mode="demo"><i class="si si-refresh"></i></button>
                            </li>
                            <li>
                                <button type="button" data-toggle="block-option" data-action="content_toggle"></button>
                            </li>
                            <li>
                                <button type="button" data-toggle="block-option" data-action="close"><i class="si si-close"></i></button>
                            </li>
                        </ul>
                    </li>
                </ul>

                <form name="form-builder" id="form" class="form-horizontal form-builder">
                    <input type="hidden" name="id" value="{$info.id}">
                    <div class="block-content tab-content">
                        <div class="tab-pane fade in active push-20" id="tab1">
                            <div class="form-group">
                                <label class="col-xs-12" for="pid">所属角色</label>
                                <div class="col-sm-12">
                                    <select class="form-control" id="pid" name="pid">
                                        <option value="">请选择：</option>
                                        {volist name="role_list" id="role"}
                                        <option value="{$key}" {eq name="$info['pid']" value="$key"}selected{/eq}>{$role|raw}</option>
                                        {/volist}
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-xs-12" for="title">角色名称</label>
                                <div class="col-sm-12">
                                    <input class="form-control" type="text" id="title" name="name" value="{$info.name}" placeholder="请输入角色名称">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-xs-12" for="description">角色描述</label>
                                <div class="col-xs-12">
                                    <textarea class="form-control" id="description" rows="7" name="description" placeholder="请输入角色描述">{$info.description}</textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-xs-12" for="pid">默认模块</label>
                                <div class="col-sm-12">
                                    <select class="form-control" id="default_module" name="default_module">
                                        {volist name="module_list" id="module"}
                                        <option value="{$key}" {eq name="$info['default_module']" value="$key"}selected{/eq}>{$module|raw}</option>
                                        {/volist}
                                    </select>
                                    <div class="help-block">该角色登录后，默认跳转的模块。注意，该角色必须有该模块的节点访问权限。</div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-xs-12">是否可登录后台</label>
                                <div class="col-xs-12">
                                    <label class="css-input css-radio css-radio-primary css-radio-sm push-10-r">
                                        <input type="radio" name="access" id="access1" value="0" {eq name="$info['access']" value="0"}checked{/eq}>
                                        <span></span> 否</label>
                                    <label class="css-input css-radio css-radio-primary css-radio-sm push-10-r">
                                        <input type="radio" name="access" id="access2" value="1" {eq name="$info['access']" value="1"}checked{/eq}>
                                        <span></span> 是</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-xs-12" for="sort">排序</label>
                                <div class="col-sm-12">
                                    <input class="form-control" type="text" id="sort" name="sort" value="{$info.sort}" placeholder="请输入排序">
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade auth-node" id="tab2">
                            <div class="row data-table-toolbar">
                                <div class="col-sm-12">
                                    <div class="toolbar-btn-action">
                                        <button title="全选" type="button" class="btn btn-info" id="check-all"><i class="fa fa-check-circle-o"></i> 全选</button>
                                        <button title="取消全选" type="button" class="btn btn-danger" id="uncheck-all"><i class="fa fa-ban"></i> 取消全选</button>
                                        <button title="展开所有节点" type="button" class="btn btn-success" id="expand-all"><i class="fa fa-plus"></i> 展开所有节点</button>
                                        <button title="收起所有节点" type="button" class="btn btn-warning" id="collapse-all"><i class="fa fa-minus"></i> 收起所有节点</button>
                                        <span class="form-inline">
                                            <input class="form-control" id="search-auth" onkeydown="if(event.keyCode === 13){return false;}" type="text" value="" placeholder="输入关键字搜索">
                                        </span>
                                    </div>
                                </div>
                            </div>
                            {notempty name="menus"}
                            <div class="block">
                                <ul class="nav nav-tabs nav-tabs-alt" data-toggle="tabs" id="menu-tab">
                                    {volist name="menus" id="vo"}
                                    <li class="{$curr_tab == $key ?= 'active'}">
                                        <a href="#{$key}" data-tab="{$key}">{$vo.title}</a>
                                    </li>
                                    {/volist}
                                </ul>
                                <div class="block-content tab-content">
                                    {volist name="menus" id="vo"}
                                    <div class="tab-pane {$curr_tab == $key ?= 'active'}" id="{$key}">
                                        <div class="push js-tree" data-tab="{$key}">{$vo.menus|raw|default=''}</div>
                                    </div>
                                    {/volist}
                                </div>
                            </div>
                            {else/}
                            <p class="text-center text-muted">暂无可分配节点</p>
                            {/notempty}
                        </div>
                        <div class="push-20">
                            <button class="btn btn-minw btn-primary" type="submit">
                                确定
                            </button>
                            <button class="btn btn-default" type="button" onclick="javascript:history.back(-1);return false;">
                                返回
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
{/block}

{block name="script"}
<script src="__LIBS__/jstree/jstree.min.js"></script>
<script>
    $(document).ready(function(){
        const $tree_list = {};
        const $key_auth  = {};
        let curr_tab     = '{$curr_tab}';

        // 切换节点tab
        $('#menu-tab > li > a').click(function () {
            curr_tab = $(this).data('tab');
            $('#search-auth').val($key_auth[curr_tab]);
        });
        // 初始化节点
        $('.js-tree').each(function () {
            const $tree = $(this);
            const tab   = $(this).data('tab');

            $key_auth[tab] = '';

            $tree.jstree({
                plugins: ["checkbox", "search"],
                "checkbox" : {
                    "keep_selected_style" : false,
                    "three_state" : false,
                    "cascade" : 'down+up'
                },
                "search" : {
                    'show_only_matches' : true,
                    'show_only_matches_children' : true
                }
            });
            $tree_list[tab] = $tree;
        });

        // 全选
        $('#check-all').click(function () {
            $tree_list[curr_tab].jstree(true).check_all();
        });
        // 取消全选
        $('#uncheck-all').click(function () {
            $tree_list[curr_tab].jstree(true).uncheck_all();
        });
        // 展开所有
        $('#expand-all').click(function () {
            $tree_list[curr_tab].jstree(true).open_all();
        });
        // 收起所有
        $('#collapse-all').click(function () {
            $tree_list[curr_tab].jstree(true).close_all();
        });

        var to = false;
        $('#search-auth').keyup(function (event) {
            if(to) { clearTimeout(to); }
            to = setTimeout(function () {
                var v = $('#search-auth').val();
                $key_auth[curr_tab] = v;
                $tree_list[curr_tab].jstree(true).search(v);
            }, 250);
        });

        // 提交表单
        $('#form').submit(function () {
            var form_data = $(this).serialize();
            var auth_node = [];
            $.each($tree_list, function () {
                auth_node.push.apply(auth_node, $(this).jstree(true).get_checked());
            });

            if (auth_node.length) {
                form_data += '&menu_auth='+auth_node.join(',');
            }
            $.post("{:url('')}", form_data).success(function (res) {
                if (res.code) {
                    Dolphin.notify(res.msg, 'success');
                    setTimeout(function () {
                        location.href = res.url;
                    }, 1500);
                } else {
                    Dolphin.notify(res.msg, 'danger');
                }
            }).fail(function () {
                Dolphin.notify('服务器发生错误~', 'danger');
            });
            return false;
        });
    });
</script>
{/block}