{extend name="public/base" /}

{block name="body"}

  <div class="layui-form" lay-filter="layuiadmin-form-role" id="layuiadmin-form-role" style="padding: 20px 30px 0 0;">
    <div class="layui-form-item">
      <label class="layui-form-label">角色</label>
      <div class="layui-input-inline">
        <input type="text" name="title" lay-verify="required" placeholder="请输入角色名" autocomplete="off" class="layui-input">
      </div>
    </div>
	
	<div class="layui-form-item" id="test">
        <label class="layui-form-label">权限范围</label>             
			{volist name="menus" id="vo1"}
			 <ul class="layui-input-block" style="margin-top: 10px ;">
				 <li>
					 <input type="checkbox" name="rules" class="parent"  lay-skin="primary" data-level="{$vo1.level}" value="{$vo1.id}" title="{$vo1.title}------|">
					 <ul>
					{if condition="isset($vo1['children'])"}
						{volist name="vo1['children']" id="vo2"}
						<li>
							{if condition="isset($vo2['children'])"}
							<input type="checkbox" name="rules" class="parent"  lay-skin="primary" data-level="{$vo2.level}" value="{$vo2.id}" title="{$vo2.title}：">
								
								{volist name="vo2['children']" id="vo3"}
									<input type="checkbox" name="rules"  lay-skin="primary" id="{$vo3.id}" data-level="{$vo3.level}" value="{$vo3.id}" title="{$vo3.title}">
								{/volist}
								
							{else /}
							<input type="checkbox" name="rules" lay-skin="primary" id="{$vo2.id}" data-level="{$vo2.level}" value="{$vo2.id}" title="{$vo2.title}：">
							{/if}
						</li>	
						{/volist}
					{/if}
					 </ul>
				 </li>
			 </ul>
			{/volist}
    </div>
		
    <div class="layui-form-item">
      <label class="layui-form-label">具体描述</label>
      <div class="layui-input-block">
        <textarea type="text" name="descr" lay-verify="required" autocomplete="off" class="layui-textarea"></textarea>
      </div>
    </div>
    <div class="layui-form-item layui-hide">
      <button class="layui-btn" lay-submit lay-filter="LAY-user-role-submit" id="LAY-user-role-submit">提交</button>
    </div>
  </div>

{/block}
{block name="js"}   
  <script>
  layui.config({
    base: '/static/admin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'form'], function(){
    var $ = layui.$
    ,form = layui.form ;
	
	form.on('checkbox()', function(data){
        //var pc =  data.elem.classList; //获取选中的checkbox的class属性
		var othis = $(data.elem);
		var level = $(data.elem).attr('data-level');

		
		//选择
        if(data.elem.checked==true){

		//主菜单
			if(level === '0'){
                var c =$(data.elem).siblings().find("input[type='checkbox']");
                c.each(function(){
                    var e = $(this); 
                    e.next().addClass("layui-form-checked");
                });
			
			}
			//子菜单及子项
			if(level === '1'){		
				 var c = $(data.elem).siblings("input[type='checkbox']");
                c.each(function(){
                    var e = $(this); 
                    e.next().addClass("layui-form-checked");
               });
			   
			  $(data.elem).parent().parent().prev().addClass("layui-form-checked");
                    
			}
			
			//子项
			if(level === '2'){

				$(data.elem).siblings('div:first').addClass("layui-form-checked");
                $(data.elem).parent().parent().prev().addClass("layui-form-checked");			
			}
                            
        }else{
		//取消

			if(level === '0'){
                var c =$(data.elem).siblings().find("input[type='checkbox']");
                c.each(function(){
                    var e = $(this); 
                    e.next().removeClass("layui-form-checked");
                });
			
			}

		if(level === '1'){
				 var c = $(data.elem).siblings("input[type='checkbox']");
                c.each(function(){
                    var e = $(this); 
                    e.next().removeClass("layui-form-checked");
               });
			   //子项为0，菜单取消选择
			   var s = $(data.elem).parent().parent().children('li').children('div:first-of-type .layui-form-checked');
				if(s.length === 0){
					$(data.elem).parent().parent().prev().removeClass("layui-form-checked");
				}
                    
			}
			
			//子项
			if(level === '2'){	
				var t = othis.siblings('div .layui-form-checked');
				if(t.length == 1){
					$(data.elem).siblings('div:first').removeClass("layui-form-checked");
				}
				//子项为0，菜单取消选择
				var s = $(data.elem).parent().parent().children('li').children('div:first-of-type .layui-form-checked');
				if(s.length === 0){
					$(data.elem).parent().parent().prev().removeClass("layui-form-checked");
				}			
			}
        }
    }); 
	
  })
  </script>
{/block}