{% load i18n %}



    <link rel="stylesheet" href="/static/js/jquery-treeview/jquery.treeview.css" />
	<script src="/static/js/jquery-treeview/jquery.treeview.js" type="text/javascript"></script>

    <link rel="stylesheet" href="/static/js/jQuery-contextMenu-master/dist/jquery.contextMenu.min.css" />
   
    
    <script src="/static/js/jQuery-contextMenu-master/dist/jquery.contextMenu.js" type="text/javascript"></script>
    <script src="/static/js/jQuery-contextMenu-master/dist/jquery.ui.position.js" type="text/javascript"></script>
   


<style>
  
    #chart-main .chart-list{
        min-height:750px;
        max-height:750px;
        border-right:1px solid #ddd;
        overflow-y:auto;
    }
    #chart-main .chart-list .tt{
        cursor:pointer;
    }

    #chart-main .chart-list .tt i{
        margin-left:5px;
    }


    #div-edit .breadcrumb{
        display:none;
    }

    #chart-main .chart-list .active{
        color:red;
        font-weight:bold;
    }

</style>


<script type="text/javascript">
    $(document).ready(function(){         

        $("#browser").treeview({
			toggle: function() {
				//console.log("%s was toggled.", $(this).find(">span").text());
			}
		});     


        $('#browser .tt').dblclick(function(){
            $('#browser .tt').removeClass('active');
            $(this).addClass('active');
            var menu_id=$(this).attr('menu_id'); 
            $.ajax({
                type:'GET',
                processData: false,
                contentType: 'application/json; charset=utf-8',
                url:'/rbac/menu/'+menu_id+'/',
                success: function (html) { 
                    $('#div-edit').html(html);  
                    return;
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert('连接服务器失败');
                    return;
                }
            });   
        });


        $('.bnt-create').click(function(){
            event.stopPropagation(); 
            event.preventDefault();
            var url=$(this).attr('href');
            $.ajax({
                type:'GET',
                processData: false,
                contentType: 'application/json; charset=utf-8',
                url:url,
                success: function (html) { 
                    $('#div-edit').html(html);  
                    return;
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert('连接服务器失败');
                    return;
                }
            });  
        });      

        {% if perms.company.sys_admin %}
            $.contextMenu({
                selector: '#browser .tt', 
                callback: function(key, options) {                    
                    var menu_id=$(this).attr('menu_id');                    
                    var act='';
                    var url='/rbac/menu/';                    
                    switch (key){
                        case 'edit':
                            act='修改';
                            url=url+menu_id+'/';
                            break;
                        case 'add':
                            act='新建';
                            url=url+'?parent_id='+menu_id;
                            break;
                        case 'delete':
                            act='删除';
                            url=url+menu_id+'/';
                            break;
                    };
                    if(['edit','add'].indexOf(key)>-1){
                        if (key=='edit'){
                            $('#browser .tt').removeClass('active');
                            $(this).addClass('active');
                        };
                        event.stopPropagation(); 
                        event.preventDefault();                        
                        $.ajax({
                            type:'GET',
                            processData: false,
                            contentType: 'application/json; charset=utf-8',
                            url:url,
                            success: function (html) { 
                                $('#div-edit').html(html);  
                                return;
                            },
                            error: function(XMLHttpRequest, textStatus, errorThrown) {
                                alert('连接服务器失败');
                                return;
                            }
                        });                        
                    }else{
                        if(key=='delete'){
                            $.ajax({
                                url: url,
                                type: "POST",                               
                                data: { delete: "true"},
                                dataType:'json',
                                success: function (data) { 
                                    toastr.success(data.msg, '操作完成：');  
                                    $.RefreshContent('/rbac/list/menu/');
                                },

                            });                                        
                        }                        
                    };
                },
                items: {
                    "edit":{name: "修改", icon: "edit"},
                    "add": {name: "插入", icon: "add"},     
                    "delete": {name: "删除", icon: "delete"},
                    "sep1": "---------",
                    "quit": {name: "退出", icon: function(){
                        return 'context-menu-icon context-menu-icon-quit';
                    }}
                }
            });
        {% endif %}

    });
</script>






<ol class="breadcrumb">
    <li>{% trans "系统菜单" %}</li>
    <li>{% trans "菜单管理" %}</li>

    <a  class='pull-right btn btn-primary btn-xs bnt-create' href="/rbac/menu/">新建一级菜单</a>
</ol>


<div class="clearfix"></div>


<div class='x_panel' id='chart-main'>

    <div class='col-sm-3 chart-list'>
    <ul id="browser" class="filetree treeview-famfamfam">
    {% for i in menuitems %}
        <li><span class='folder tt' menu_id='{{i.id}}' pid='{{i.parent_id}}'>
                <i class="{{i.icon}}"></i>{{i.title}} {% if i.remark %}
                <span>({{i.remark}})</span>{% endif %}</span>  
            {% for c in i.children %}<ul>            
                <li class='closed'><span class='folder tt' menu_id='{{c.id}}' pid='{{c.parent_id}}'>
                    <i class="{{c.icon}}"></i>{{c.title}} {% if c.remark %}
                    <span>({{c.remark}})</span>{% endif %}</span>  
                    {% for cc in c.children %}<ul>                  
                        <li class='closed'><span class='folder tt' menu_id='{{cc.id}}' pid='{{cc.parent_id}}'>
                            <i class="{{cc.icon}}"></i>{{cc.title}}{% if cc.remark %}
                            <span>({{cc.remark}})</span>{% endif %}</span>                
                            {% for ccc in cc.children %}<ul>
                                <li><span class='folder tt' menu_id='{{ccc.id}}' pid='{{ccc.parent_id}}'>
                                    <i class="{{ccc.icon}}"></i>{{ccc.title}}{% if ccc.remark %}
                                        <span>({{ccc.remark}})</span>
                                    {% endif %}</span>
                                </li>
                            </ul>{% endfor %}
                        </li>
                    </ul>{% endfor %}                   
                </li>           
            </ul>{% endfor %}
        </li>
    {% endfor %}
    </ul>
    </div>
    <div class='col-sm-9' id="div-edit"></div>

</div>


