@extends('manager.layout.master')

@section('style')
    <style>
        /* 弹窗内边距 */
        .layui-layer-content body {
            padding: 20px 24px;
        }
        /* 全选行 */
        .qx_ck {
            padding: 10px 14px;
            margin-bottom: 16px;
            background: #fff;
            border-radius: 8px;
            border: 1px solid #E5E7EB;
            font-size: 14px;
            font-weight: 500;
            color: #1F2937;
        }
        .qx_ck input[type="checkbox"] {
            cursor: pointer;
            width: 16px;
            height: 16px;
            vertical-align: -2px;
            margin-right: 6px;
        }
        /* 权限主体 */
        .zt_div {
            padding: 0 4px 12px;
        }
        .zt_div input[type="checkbox"] {
            cursor: pointer;
            width: 14px;
            height: 14px;
            vertical-align: -2px;
            margin-right: 4px;
        }
        /* 大模块 */
        .dadui {
            overflow: hidden;
            margin-top: 16px;
            background: #fff;
            border-radius: 10px;
            border: 1px solid #E5E7EB;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        }
        .dadui:first-child {
            margin-top: 0;
        }
        /* 模块标题 */
        .dadui1 {
            background: #F8FAFC;
            color: #1F2937;
            padding: 12px 16px;
            font-size: 14px;
            font-weight: 600;
            border-bottom: 1px solid #E5E7EB;
            border-radius: 10px 10px 0 0;
        }
        .dadui1 input[type="checkbox"] {
            width: 16px;
            height: 16px;
            vertical-align: -3px;
            margin-right: 6px;
        }
        /* 子模块容器 */
        .zhongDui {
            float: left;
            margin: 12px 0 12px 14px;
            background: #fff;
            width: 176px;
            border-radius: 8px;
            border: 1px solid #E5E7EB;
            overflow: hidden;
        }
        /* 子模块标题 */
        .zd_p {
            background: #F3F4F6;
            color: #374151;
            padding: 7px 12px;
            font-size: 13px;
            font-weight: 500;
            border-bottom: 1px solid #E5E7EB;
        }
        .zd_p input[type="checkbox"] {
            margin-right: 5px;
        }
        /* 功能项 */
        .group_p {
            padding: 6px 12px;
            font-size: 13px;
            color: #4B5563;
            transition: background 0.15s ease;
        }
        .group_p:hover {
            background: #F9FAFB;
        }
        .group_p input[type="checkbox"] {
            vertical-align: -2px;
        }
        /* 底部按钮 */
        .zt_div + .layui-form-item {
            margin-top: 20px !important;
            padding: 14px 8px 0;
            border-top: 1px solid #E5E7EB;
        }
        .zt_div + .layui-form-item .layui-input-inline {
            display: flex;
            gap: 12px;
        }
    </style>
@stop

@section('body')
    <form action="" method="post" enctype="multipart/form-data">
        <!--权限主体-->
        <div class="zt_div">
            <p class="qx_ck"><input type="checkbox"/>&nbsp;全选</p>
            <!--管理组-->
            @foreach($menuList as $key=>$vo)
                <div class="dadui">
                    <div class="dadui1">
                        <input type="checkbox" name="id[]" value="{{$key}}" @if(in_array($key,$userMenu)) checked @endif  />&nbsp;{{$vo['title']}}
                    </div>
                    <!--菜单栏&功能菜单-->
                    @if(array_key_exists('_child', $vo))
                        @foreach($vo['_child'] as $k=>$v)
                            <div class="zhongDui">
                                <!--菜单栏-->
                                <p class="zd_p"><input type="checkbox" name="id[]" value="{{$k}}" @if(in_array($k,$userMenu)) checked @endif  />&nbsp;{{$v['title']}}</p>
                                <!--功能-->
                                @if(array_key_exists('_child', $v))
                                    @foreach($v['_child'] as $k0=>$v0)
                                        <p class="group_p"><input type="checkbox" name="id[]" value="{{$k0}}" @if(in_array($k0,$userMenu)) checked @endif />&nbsp;{{$v0['title']}}</p>
                                    @endforeach
                                @endif
                            </div>
                        @endforeach
                    @endif
                </div>
            @endforeach
        </div>

        <div class="layui-form-item" style="margin-top: 10px;">
            <div class="layui-input-inline">
                {{csrf_field()}}
                <button class="layui-btn layui-btn-normal" type="button" lay-submit="" lay-filter="ajax_sub"><i class="layui-icon layui-icon-ok"></i> 保 存</button>
                <button class="layui-btn layui-btn-primary" type="button" onclick="closeSelf()"><i class="layui-icon layui-icon-close"></i> 取 消</button>
            </div>
        </div>
    </form>
@stop

@section('js')
    <script type="text/javascript">
        $(function(){
            /*全选操作*/
            $('.qx_ck :checkbox').change(function(){
                var msg=$(this).prop('checked');
                $('.zt_div :checkbox').prop('checked',msg);
            });
            /*管理组选择*/
            $('.dadui1 :checkbox').change(function(){
                $(this).parent().parent().find(':checkbox').prop('checked',$(this).prop('checked'));
            });
            /*菜单栏选择*/
            $('.zd_p :checkbox').change(function(){
                /*该菜单栏选中*/
                if($(this).prop('checked')){
                    /*该菜单栏下所有功能都选中*/
                    $(this).parent().parent().find(':checkbox').prop('checked',true);
                    /*改菜单栏 所属管理组也设为选中*/
                    $(this).parent().parent().parent().find('.dadui1 :checkbox').prop('checked',true);
                }else{
                    /*该菜单栏未选中 该菜单栏下所有功能设为未选中*/
                    $(this).parent().parent().find(':checkbox').prop('checked',false);
                    /*找到该菜单栏所属管理组下所有菜单栏是否选中 判断该管理组是否该选中*/
                    var floag2=2;
                    $(this).parent().parent().parent().find('.zd_p :checkbox').each(function(){
                        /*有一个选中  则不操作 跳出循环*/
                        if($(this).prop('checked')){
                            floag2=1;return;
                        }
                    });
                    /*floag=2 则该管理组下没有任何菜单栏选中  则将该管理组 设为未选中*/
                    if(floag2==2){
                        $(this).parent().parent().parent().find('.dadui1 :checkbox').prop('checked',false);
                    }

                }

            });
            /*功能变化判断菜单栏是否需要选中*/
            $('.group_p :checkbox').change(function(){
                /*该功能选中 该菜单栏直接设为选中*/
                if($(this).prop('checked')){
                    $(this).parent().parent().find('.zd_p :checkbox').prop('checked',true);
                    /*该管理组也直接选中*/
                    $(this).parent().parent().parent().find('.dadui1 :checkbox').prop('checked',true);
                }else{
                    /*该功能不选中 找到同菜单栏中所有功能判断是否还有未选中*/
                    var floag=2;
                    $(this).parent().parent().find('.group_p :checkbox').each(function(){
                        /*有一个选中  则不操作 跳出循环*/
                        if($(this).prop('checked')){
                            floag=1;return;
                        }
                    });
                    /*floag =2 则改变改菜单栏为未选中*/
                    if(floag==2){
                        $(this).parent().parent().find('.zd_p :checkbox').prop('checked',false);
                        /*找到该管理组下所有菜单栏 判断是否有选中的菜单栏来决定该管理组是否被旋转*/
                        var floag2=2;
                        $(this).parent().parent().parent().find('.zd_p :checkbox').each(function(){
                            /*有一个选中  则不操作 跳出循环*/
                            if($(this).prop('checked')){
                                floag2=1;return;
                            }
                        });
                        /*floag=2 则该管理组下没有任何菜单栏选中  则将该管理组 设为未选中*/
                        if(floag2==2){
                            $(this).parent().parent().parent().find('.dadui1 :checkbox').prop('checked',false);
                        }
                    }
                }
            })

            /*判断全选是否应该选中*/
            var is_check=true;
            $('.dadui :checkbox').each(function(key,vo){
                if(!$(this).prop('checked')){
                    is_check=false;
                    return false;
                }
            });
            $('.qx_ck :checkbox').prop('checked',is_check);
        });
    </script>
@stop