{template "header.html"}

<form action="" class="form-horizontal" method="post" name="myform" id="myform">
    {$form}
    <div class="portlet bordered light myfbody">
        <div class="portlet-title tabbable-line">
            <ul class="nav nav-tabs" style="float:left;">
                <li class="{if $page==0}active{/if}">
                    <a href="#tab_0" data-toggle="tab" onclick="$('#dr_page').val('0')"> <i class="fa fa-list-alt"></i> {dr_lang('菜单权限')} </a>
                </li>
                {if $module_auth}
                <li class="{if $page==1}active{/if}">
                    <a href="#tab_1" data-toggle="tab" onclick="$('#dr_page').val('1');"> <i class="fa fa-th-large"></i> {dr_lang('内容权限')} </a>
                </li>
                {/if}
            </ul>
        </div>
        <div class="portlet-body">
            <div class="tab-content">

                <div class="tab-pane {if $page==0}active{/if}" id="tab_0">

                    <div class="menu-auth-tools">
                        <div class="menu-auth-tool-group">
                            <a href="javascript:;" id="dr_auth_expand_all"><i class="fa fa-angle-double-down"></i>{dr_lang('全部展开')}</a>
                            <a href="javascript:;" id="dr_auth_collapse_all"><i class="fa fa-angle-double-up"></i>{dr_lang('全部折叠')}</a>
                        </div>
                    </div>
                    <table class="table table-striped table-bordered table-checkable">
                        <thead>
                        <tr style="background-color: #fbfcfd;">
                            <th width="50" style="text-align:center"> Id </th>
                            <th> {dr_lang('菜单名称')} </th>
                            <th  class="myselect" style="text-align:center;max-width: 50px!important;width: 50px!important">
                                <label class="mt-table mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                    <input type="checkbox" class="group-checkable" data-set=".checkboxes" />
                                    <span></span>
                                </label>
                            </th>
                            <th width="50" style="text-align:center"> {dr_lang('增')} </th>
                            <th width="50" style="text-align:center"> {dr_lang('改')} </th>
                            <th width="50" style="text-align:center"> {dr_lang('删')} </th>
                        </tr>
                        </thead>
                        <tbody>
                        {php $uris=[]; $top=[]; $l1_has_child=[]; $l2_has_child=[]; $sib_ids=[];}
                        {loop $menu_data $t}
                        {php $t.pid == 0 && $top[] = $t.id;}
                        {php dr_in_array($t.pid, (array)$top) && $l1_has_child[$t.pid]=1;}
                        {php $t.pid && !dr_in_array($t.pid, (array)$top) && $l2_has_child[$t.pid]=1;}
                        {php $sib_ids[$t.pid][] = $t.id;}
                        {/loop}
                        {loop $menu_data $t}
                        {php $menu_level = $t.pid == 0 ? 1 : (dr_in_array($t.pid, (array)$top) ? 2 : 3);}
                        {php $menu_top_id = $menu_level == 1 ? $t.id : ($menu_level == 2 ? $t.pid : $t.tid);}
                        {php $has_l3_child = $menu_level == 2 && !empty($l2_has_child[$t.id]);}
                        {php $show_link = ($menu_level == 1 && !empty($l1_has_child[$t.id])) || $has_l3_child;}
                        {php $sibs = isset($sib_ids[$t.pid]) ? $sib_ids[$t.pid] : [];}
                        {php $is_last_sib = $sibs && $sibs[count($sibs)-1] == $t.id;}
                        {php $auth_self = $t.uri ? '.zsg'.$t.id : '.dr-auth-noset';}
                        {php $auth_link = $t.uri ? '.zsg'.$t.id.', .menu'.$t.id : '.menu'.$t.id;}
                        {php $auth_dataset = $show_link ? $auth_link : ($t.uri ? '.zsg'.$t.id : '.menu'.$t.id);}
                        <tr class="{if $menu_level==1}menu-row-top menu-row-l1{elseif $menu_level==2}menu-row-child menu-row-l2 menu-row-top-{$menu_top_id}{else}menu-row-child menu-row-l3 menu-row-top-{$menu_top_id} menu-row-parent-{$t.pid}{/if} odd gradeX" id="dr_row_{$t.id}" data-level="{$menu_level}" data-pid="{$t.pid}" data-top="{$menu_top_id}">

                            <td style="text-align:center">
                                {$t.id}
                            </td>
                            <td>
                                <div class="menu-auth-name menu-auth-lv{$menu_level}">
                                    <span class="menu-tree-slot">
                                        {if $menu_level==1}
                                        <a href="javascript:;" class="menu-tree-toggle menu-tree-toggle-l1" data-top-id="{$t.id}"><i class="fa fa-caret-down"></i></a>
                                        {elseif $has_l3_child}
                                        <a href="javascript:;" class="menu-tree-toggle menu-tree-toggle-l2" data-parent-id="{$t.id}"><i class="fa fa-caret-down"></i></a>
                                        {/if}
                                    </span>
                                    {if $menu_level>1}<span class="menu-tree-branch">{if $is_last_sib}└{else}├{/if}</span>{/if}
                                    <i class="{$t.icon}"></i> <span class="menu-auth-label">{$t.name} {if $t.uri} - {$t.uri}{/if}</span>
                                </div>
                            </td>
                            <td class="myselect" style="text-align:center;max-width: 40px!important;width: 40px!important">
                                <label class="mt-table mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                    <input type="checkbox" class="checkboxes group-checkable menu{$t.pid} menu{$t.tid}{if $show_link} menu-auth-node{/if}" data-set="{$auth_dataset}" {if $show_link}data-self-set="{$auth_self}" data-link-set="{$auth_link}"{/if} name="data[mark][]" {if $t.mark && dr_in_array($t.mark, (array)$data.system.mark)}checked{/if} value="{$t.mark}" />
                                    <span></span>
                                </label>
                            </td>
                            {if $show_link}
                            <td >
                                {if $t.uri}
                                <label class="mt-table mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                    <input type="checkbox" class="checkboxes zsg{$t.id}  menu{$t.pid} menu{$t.tid}" {if dr_in_array('add', (array)$data['system']['auth'][$t.uri])}checked{/if} name="data[auth][{$t.uri}][]" value="add" />
                                    <span></span>
                                </label>
                                <label class="mt-table mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                    <input type="checkbox" class="checkboxes zsg{$t.id}  menu{$t.pid} menu{$t.tid}" {if dr_in_array('edit', (array)$data['system']['auth'][$t.uri])}checked{/if} name="data[auth][{$t.uri}][]" value="edit" />
                                    <span></span>
                                </label>
                                <label class="mt-table mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                    <input type="checkbox" class="checkboxes zsg{$t.id}  menu{$t.pid} menu{$t.tid}" {if dr_in_array('del', (array)$data['system']['auth'][$t.uri])}checked{/if} name="data[auth][{$t.uri}][]" value="del" />
                                    <span></span>
                                </label>
                                {php $uris[]=$t.uri;}
                                {/if}
                                <label class="mt-table mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                    <input type="checkbox" class="" data-id="{$t.id}" checked /> 
                                    <span></span>
                                </label>
                            </td>
                            <td colspan="2" class="menu-auth-link-cell">
                                {dr_lang('勾选下级')}
                            </td>
                            {else}
                            <td style="text-align:center" class="myselect">
                                {if $t.uri}
                                <label class="mt-table mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                    <input type="checkbox" class="checkboxes zsg{$t.id}  menu{$t.pid} menu{$t.tid}" {if dr_in_array('add', (array)$data['system']['auth'][$t.uri])}checked{/if} name="data[auth][{$t.uri}][]" value="add" />
                                    <span></span>
                                </label>
                                {php $uris[]=$t.uri;}
                                {/if}
                            </td>
                            <td style="text-align:center" class="myselect">
                                {if $t.uri}
                                <label class="mt-table mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                    <input type="checkbox" class="checkboxes zsg{$t.id}  menu{$t.pid} menu{$t.tid}" {if dr_in_array('edit', (array)$data['system']['auth'][$t.uri])}checked{/if} name="data[auth][{$t.uri}][]" value="edit" />
                                    <span></span>
                                </label>
                                {/if}
                            </td>
                            <td style="text-align:center" class="myselect">
                                {if $t.uri}
                                <label class="mt-table mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                    <input type="checkbox" class="checkboxes zsg{$t.id}  menu{$t.pid} menu{$t.tid}" {if dr_in_array('del', (array)$data['system']['auth'][$t.uri])}checked{/if} name="data[auth][{$t.uri}][]" value="del" />
                                    <span></span>
                                </label>
                                {/if}
                            </td>
                            {/if}
                        </tr>
                        {/loop}
                        </tbody>
                    </table>


                </div>
                <div class="tab-pane {if $page==1}active{/if}" id="tab_1">
                    {php $ikey=0;}
                    {loop $module_auth $dir $t}
                    <table class="table table-striped table-bordered table-hover table-checkable">
                        <thead>
                        <tr style="background-color: #fbfcfd;">
                            <th width="50" style="text-align:center"> Id </th>
                            <th> {$t.name}</th>
                            <th width="50" class="myselect" style="text-align:center;max-width: 40px!important;width: 40px!important">
                                <label class="mt-table mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                    <input type="checkbox" class="group-checkable" data-set=".menu_module_{$dir}" />
                                    <span></span>
                                </label>
                            </th>
                            <th width="50" style="text-align:center" class="myselect"> {dr_lang('增')} </th>
                            <th width="50" style="text-align:center" class="myselect"> {dr_lang('改')} </th>
                            <th width="50" style="text-align:center" class="myselect"> {dr_lang('删')} </th>
                        </tr>
                        </thead>
                        <tbody>
                        {loop $t.auth $uri $name}
                        {if !dr_in_array($uri.'index', $uris)}
                        {php $ikey++;}
                        <tr class="odd gradeX">
                            <td>
                            {$ikey}
                            </td>
                            <td>
                                {$name} - {$uri}index
                            </td>
                            <td style="text-align:center;max-width: 40px!important;width: 40px!important" class="myselect">
                                <label class="mt-table mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                    <input type="checkbox" class="checkboxes menu{md5($uri)} menu_module_{$dir}" {if dr_in_array($uri.'add', (array)$data.module)}checked{/if} name="module[{$uri}add]" value="{$uri.'add'}" />
                                    <span></span>
                                </label>
                            </td>
                            <td class="myselect" style="text-align:center">
                                <label class="mt-table mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                    <input type="checkbox" class="checkboxes group-checkable menu_module_{$dir} menu{md5($uri)}" data-set=".menu{md5($uri)}" name="module[{$uri}index]" {if dr_in_array($uri.'index', (array)$data.module)}checked{/if} value="{$uri.'index'}" />
                                    <span></span>
                                </label>
                            </td>
                            <td style="text-align:center" class="myselect">
                                <label class="mt-table mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                    <input type="checkbox" class="checkboxes menu{md5($uri)} menu_module_{$dir}" {if dr_in_array($uri.'edit', (array)$data.module)}checked{/if} name="module[{$uri}edit]" value="{$uri.'edit'}" />
                                    <span></span>
                                </label>
                            </td>
                            <td style="text-align:center" class="myselect">
                                <label class="mt-table mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                    <input type="checkbox" class="checkboxes menu{md5($uri)} menu_module_{$dir}" {if dr_in_array($uri.'del', (array)$data.module)}checked{/if} name="module[{$uri}del]" value="{$uri.'del'}" />
                                    <span></span>
                                </label>
                            </td>
                        </tr>
                        {/if}
                        {/loop}
                        </tbody>
                    </table>
                    {/loop}
                </div>

            </div>
        </div>
    </div>

    <div class="portlet-body form myfooter">
        <div class="form-actions text-center">
            <button type="button" onclick="dr_auth_save()" class="btn blue"> <i class="fa fa-save"></i> {dr_lang('保存')}</button>
        </div>
    </div>
</form>

<style>
    .menu-auth-name { display: flex; align-items: center; white-space: nowrap; }
    .menu-auth-lv2 { padding-left: 28px; }
    .menu-auth-lv3 { padding-left: 64px; }
    .menu-tree-slot { display: inline-flex; width: 16px; flex: 0 0 16px; align-items: center; justify-content: center; }
    .menu-tree-toggle { display: inline-block; width: 14px; color: #666; text-decoration: none; text-align: center; }
    .menu-tree-toggle:hover { color: #333; }
    .menu-tree-branch { display: inline-block; width: 18px; flex: 0 0 18px; color: #b7c0ca; text-align: center; }
    .menu-auth-label { margin-left: 4px; }
    .menu-row-l2 td { background-color: #fafbfc; }
    .menu-row-l3 td { background-color: #f5f7fa; }
    .menu-auth-warn td { background-color: #fff1f0 !important; }
    .menu-auth-link-cell { text-align: left !important; white-space: nowrap; }
    .menu-auth-link-cell .mt-checkbox { display: inline-block; margin: 0 12px 0 0; }
    .menu-auth-tools { display: flex; justify-content: flex-end; margin-bottom: 10px; }
    .menu-auth-tool-group { display: inline-flex; border: 1px solid #d5dee8; border-radius: 4px; overflow: hidden; background: #fff; }
    .menu-auth-tool-group a { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; color: #5c6b7a; font-size: 12px; line-height: 28px; text-decoration: none; background: #fff; border-left: 1px solid #d5dee8; }
    .menu-auth-tool-group a:first-child { border-left: 0; }
    .menu-auth-tool-group a i { margin-right: 5px; font-size: 12px; color: #8b9aab; }
    .menu-auth-tool-group a:hover { color: var(--btn-blue, #3598dc); background: #f3f8fc; }
    .menu-auth-tool-group a:hover i { color: var(--btn-blue, #3598dc); }
</style>
<script type="text/javascript">
    function dr_auth_tree_icon($toggle, open) {
        var $icon = $toggle.find('i');
        if (open) {
            $icon.removeClass('fa-caret-right').addClass('fa-caret-down');
        } else {
            $icon.removeClass('fa-caret-down').addClass('fa-caret-right');
        }
    }

    function dr_auth_tree_init() {
        $('.menu-row-top').each(function () {
            var topId = $(this).find('.menu-tree-toggle-l1').data('top-id');
            if (!$('.menu-row-l2.menu-row-top-' + topId).length) {
                $(this).find('.menu-tree-toggle-l1').hide();
            }
        });
        $('.menu-row-l2').each(function () {
            var parentId = $(this).attr('id').replace('dr_row_', '');
            if (!$('.menu-row-l3.menu-row-parent-' + parentId).length) {
                $(this).find('.menu-tree-toggle-l2').hide();
            }
        });
    }

    function dr_auth_apply_link($input) {
        var id = $input.attr('data-id');
        var $box = $('#dr_row_' + id).find('.menu-auth-node');
        if (!$box.length) {
            return;
        }
        $box.attr('data-set', $input.is(':checked') ? $box.attr('data-link-set') : $box.attr('data-self-set'));
    }

    function dr_auth_menu_name($tr) {
        return $.trim($tr.find('.menu-auth-label').text());
    }

    function dr_auth_row_checked($tr) {
        if ($tr.find('input[name="data[mark][]"]').is(':checked')) {
            return true;
        }
        return $tr.find('input[name^="data[auth]"]').is(':checked');
    }

    function dr_auth_parent_checked(id) {
        var $tr = $('#dr_row_' + id);
        if (!$tr.length) {
            return true;
        }
        return $tr.find('input[name="data[mark][]"]').is(':checked');
    }

    function dr_auth_save() {
        $('#tab_0 tr').removeClass('menu-auth-warn');
        var lines = [];
        $('#tab_0 tbody tr').each(function () {
            var $tr = $(this);
            var level = parseInt($tr.attr('data-level'), 10) || 1;
            if (level < 2 || !dr_auth_row_checked($tr)) {
                return;
            }
            var lack = [];
            var pid = $tr.attr('data-pid');
            var top = $tr.attr('data-top');
            if (pid && pid != '0' && !dr_auth_parent_checked(pid)) {
                lack.push(dr_auth_menu_name($('#dr_row_' + pid)));
            }
            if (top && top != '0' && top != pid && !dr_auth_parent_checked(top)) {
                lack.push(dr_auth_menu_name($('#dr_row_' + top)));
            }
            if (!lack.length) {
                return;
            }
            $tr.addClass('menu-auth-warn').show();
            if (top) {
                $('.menu-row-l2.menu-row-top-' + top + ', .menu-row-l3.menu-row-top-' + top).show();
                $('.menu-row-top#dr_row_' + top).find('.menu-tree-toggle-l1 i').removeClass('fa-caret-right').addClass('fa-caret-down');
            }
            if (pid) {
                $('.menu-row-l3.menu-row-parent-' + pid).show();
                $('#dr_row_' + pid).find('.menu-tree-toggle-l2 i').removeClass('fa-caret-right').addClass('fa-caret-down');
            }
            lines.push(dr_auth_menu_name($tr) + '　未勾选：' + lack.join('、'));
        });
        if (lines.length) {
            var show = lines.slice(0, 12);
            var more = lines.length > show.length ? '<br>… 共 ' + lines.length + ' 项' : '';
            dr_tips(0, '{dr_lang('子菜单已勾选，但未勾选对应的父级或顶级菜单，这些权限无效')}<br>' + show.join('<br>') + more);
            var $first = $('#tab_0 tr.menu-auth-warn').first();
            if ($first.length) {
                $('a[href="#tab_0"]').tab('show');
                $('html,body').animate({scrollTop: $first.offset().top - 80}, 200);
            }
            return;
        }
        dr_ajax_submit('{dr_now_url()}&page='+$('#dr_page').val(), 'myform', '2000');
    }

    $(function () {
        dr_auth_tree_init();
        $('.dr-auth-link-one').each(function () {
            dr_auth_apply_link($(this));
        });

        $(document).on('change', '.dr-auth-link-one', function () {
            dr_auth_apply_link($(this));
        });

        $('#dr_auth_expand_all').on('click', function () {
            $('.menu-row-l2, .menu-row-l3').show();
            dr_auth_tree_icon($('.menu-tree-toggle'), 1);
        });
        $('#dr_auth_collapse_all').on('click', function () {
            $('.menu-row-l2, .menu-row-l3').hide();
            dr_auth_tree_icon($('.menu-tree-toggle'), 0);
        });

        $(document).on('click', '.menu-tree-toggle-l1', function (e) {
            e.preventDefault();
            e.stopPropagation();
            var topId = $(this).data('top-id');
            var $icon = $(this).find('i');
            var $l2 = $('.menu-row-l2.menu-row-top-' + topId);
            var $l3 = $('.menu-row-l3.menu-row-top-' + topId);
            if ($icon.hasClass('fa-caret-down')) {
                dr_auth_tree_icon($(this), 0);
                $l2.hide();
                $l3.hide();
                $l2.find('.menu-tree-toggle-l2 i').removeClass('fa-caret-down').addClass('fa-caret-right');
            } else {
                dr_auth_tree_icon($(this), 1);
                $l2.show();
                $l3.hide();
                $l2.find('.menu-tree-toggle-l2 i').removeClass('fa-caret-down').addClass('fa-caret-right');
            }
        });

        $(document).on('click', '.menu-tree-toggle-l2', function (e) {
            e.preventDefault();
            e.stopPropagation();
            var parentId = $(this).data('parent-id');
            var $icon = $(this).find('i');
            var $l3 = $('.menu-row-l3.menu-row-parent-' + parentId);
            if ($icon.hasClass('fa-caret-down')) {
                dr_auth_tree_icon($(this), 0);
                $l3.hide();
            } else {
                dr_auth_tree_icon($(this), 1);
                $l3.show();
            }
        });
    });
</script>
{template "footer.html"}