{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"  value="{$vo1.id}" title="{$vo1.title}：">
					 
					 <ul>
					{if condition="isset($vo1['children'])"}
						{volist name="vo1['children']" id="vo2"}
						{if condition="isset($vo2['children'])"}
							<input type="checkbox" name="rules"   lay-skin="primary"  value="{$vo2.id}" title="{$vo2.title}：">
								{volist name="vo2['children']" id="vo3"}
									<input type="checkbox" name="rules"  lay-skin="primary" id="{$vo3.id}" value="{$vo3.id}" title="{$vo3.title}">
								{/volist}
							{else /}
							<input type="checkbox" name="rules" lay-skin="primary" id="{$vo2.id}" value="{$vo2.id}" title="{$vo2.title}">
							{/if}
						{/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属性
        if(data.elem.checked==true){
            if(pc=="parent"){ 
                var c =$(data.elem).siblings().children("input[type='checkbox']");
                c.each(function(){
                    var e = $(this); 
                    e.next().addClass("layui-form-checked");
                });
            }else{                    
                $(data.elem).parent().prev().addClass("layui-form-checked");
            }
                            
        }else{                   
            if(pc=="parent"){
                var c =$(data.elem).siblings().children("input[type='checkbox']");
                c.each(function(){
                var e = $(this);
                e.next().removeClass("layui-form-checked");
                });
            }else{                     
                var c = $(data.elem).siblings("div");
                var count =0;
                c.each(function(){                            
					var is =  $(this).get(0).classList;
					if(is.length==3){
						count++;
					}
                });   
                 if(count>0){
                                         
                 }else{
                    $(data.elem).parent().prev().removeClass("layui-form-checked");
                }
            }
        }
    }); 
	
  })
  </script>
{/block}