{extend name='main'}

{block name='button'}
{if auth("admin/node/clear")}
<button data-load='{:url("clear")}' class='layui-btn layui-btn-sm layui-btn-primary'>清理记录</button>
{/if}
{/block}

{block name='style'}
<style>
    .layui-table tr:last-child td {
        border: none
    }

    .layui-table label {
        margin-top: 0;
        cursor: pointer
    }

    .layui-table .title-input {
        width: auto;
        height: 28px;
        line-height: 28px
    }
</style>
{/block}

{block name="content"}
<div class="layui-tab layui-tab-card layui-box" style="background:#fff">
    <ul class="layui-tab-title notselect">
        {foreach $groups as $key=>$group}
        <li data-type='{$key}'>{$group.node.title|default='<span class="color-desc">未配置名称</span>'|raw}（{$key}）</li>
        {/foreach}
    </ul>
    <div class="layui-tab-content padding-0">
        {foreach $groups as $key=>$group}
        <div class="layui-tab-item layui-anim layui-anim-upbit">
            <table class="layui-table border-0 margin-0" lay-skin="line">
                <!--{empty name='nodes'}-->
                <p class="help-block text-center well">没 有 记 录 哦！</p>
                <!--{else}-->
                <!--{foreach $group.list as $key=>$vo}-->
                <tr>
                    <td class='text-left nowrap'>
                        <span class="color-desc">{$vo.spl|raw}</span>{$vo.node}
                        {if auth("admin/node/save")}
                        <label class="margin-left-5 color-text">
                            <input autocomplete="off" class='layui-input inline-block title-input' name='title' data-node="{$vo.node}" value="{$vo.title}">
                        </label>
                        {/if}
                    </td>
                    <td class='text-left nowrap text-middle'>
                        {if auth("admin/node/save") and $vo.spt eq 1}
                        <label class="color-desc think-checkbox">
                            <input data-login-group="{$vo.node}" type="checkbox"> 全部加入登录控制
                        </label>
                        <label class="notselect margin-left-20 color-desc think-checkbox">
                            <input data-auth-group="{$vo.node}" type="checkbox"> 全部加入权限控制
                        </label>
                        <label class="notselect margin-left-20 color-desc think-checkbox">
                            <input data-menu-group="{$vo.node}" type="checkbox"> 全部加入菜单节点选择器
                        </label>
                        {/if}
                        {if auth("admin/node/save") and $vo.spt eq 2}
                        <span class="color-desc">　├　</span>
                        <label class="notselect margin-right-20 think-checkbox">
                            <!--{notempty name='vo.is_login'}-->
                            <input data-login-filter="{$vo.pnode}" checked='checked' class="check-box login_{$key}" type='checkbox' value='1' name='is_login' data-node="{$vo.node}" onclick="!this.checked && ($('.auth_{$key}')[0].checked = !!this.checked)">
                            <!--{else}-->
                            <input data-login-filter="{$vo.pnode}" class="check-box login_{$key}" type='checkbox' value='1' name='is_login' data-node="{$vo.node}" onclick="!this.checked && ($('.auth_{$key}')[0].checked = !!this.checked)">
                            <!--{/notempty}-->
                            加入登录控制
                        </label>
                        <span class="color-desc">　├　</span>
                        <label class="notselect margin-right-20 think-checkbox">
                            <!--{notempty name='vo.is_auth'}-->
                            <input data-auth-filter="{$vo.pnode}" name='is_auth' data-node="{$vo.node}" checked='checked' class="check-box auth_{$key}" type='checkbox' onclick="this.checked && ($('.login_{$key}')[0].checked = !!this.checked)" value='1'>
                            <!--{else}-->
                            <input data-auth-filter="{$vo.pnode}" name='is_auth' data-node="{$vo.node}" class="check-box auth_{$key}" type='checkbox' value='1' onclick="this.checked && ($('.login_{$key}')[0].checked = !!this.checked)">
                            <!--{/notempty}-->
                            加入权限控制
                        </label>
                        <span class="color-desc">　├　</span>
                        <label class="notselect think-checkbox">
                            <!--{notempty name='vo.is_menu'}-->
                            <input data-menu-filter="{$vo.pnode}" name='is_menu' data-node="{$vo.node}" checked='checked' class='check-box menu_{$key}' type='checkbox' value='1'>
                            <!--{else}-->
                            <input data-menu-filter="{$vo.pnode}" name='is_menu' data-node="{$vo.node}" class='check-box menu_{$key}' type='checkbox' value='1'>
                            <!--{/notempty}-->
                            加入菜单节点选择器
                        </label>
                        {/if}
                    </td>
                    <td data-tips-filter="{$vo.pnode}" class="loading-tips nowrap full-width"></td>
                </tr>
                <!--{/foreach}-->
                <!--{/empty}-->
            </table>
        </div>
        {/foreach}
    </div>
</div>

<script>
    $(function () {

        $('.layui-tab ul.layui-tab-title li').on('click', function () {
            layui.data('node', {key: 'type', value: this.getAttribute('data-type')});
        });

        (function () {
            this.selectedType = layui.data('node')['type'] || '';
            this.selectedItem = $('.layui-tab ul.layui-tab-title li[data-type="' + this.selectedType + '"]');
            if (this.selectedItem.length < 1) this.selectedItem = $('.layui-tab ul.layui-tab-title li:first');
            this.selectedItem.trigger('click');
        }).call({});

        syncLoginGroup.call(this);
        $('[data-login-group]').on('click', function () {
            var twoNode = this.getAttribute('data-login-group');
            if (!checkRequestStatus(twoNode)) {
                this.checked = !this.checked;
                return $.msg.tips('正在处理中, 请稍候...');
            }
            var checked = !!this.checked;
            $('[data-login-filter="' + twoNode + '"]').map(function () {
                if (!(this.checked = checked)) {
                    $('[data-auth-filter="' + twoNode + '"]').map(function () {
                        this.checked = false;
                    });
                }
                update(this);
            });
        });

        syncAuthGroup.call(this);
        $('[data-auth-group]').on('click', function () {
            var twoNode = this.getAttribute('data-auth-group');
            if (!checkRequestStatus(twoNode)) {
                this.checked = !this.checked;
                return $.msg.tips('正在处理中, 请稍候...');
            }
            var checked = !!this.checked;
            $('[data-auth-filter="' + twoNode + '"]').map(function () {
                if ((this.checked = checked)) {
                    $('[data-login-filter="' + twoNode + '"]').map(function () {
                        this.checked = checked;
                    });
                }
                update(this);
            });
        });

        syncMenuGroup.call(this);
        $('[data-menu-group]').on('click', function () {
            var twoNode = this.getAttribute('data-menu-group');
            if (!checkRequestStatus(twoNode)) {
                this.checked = !this.checked;
                return $.msg.tips('正在处理中, 请稍候...');
            }
            var checked = !!this.checked;
            $('[data-menu-filter="' + twoNode + '"]').map(function () {
                this.checked = checked;
                update(this);
            });
        });

        // 更新触发更新
        $('input.check-box').on('click', function () {
            update(this);
        });

        $('input.title-input').on('blur', function () {
            update(this);
        });

        // 数据自动更新
        function update(self) {
            var $item = $(self).parents('tr'), data = {list: []};
            $item.find('input').map(function () {
                var value = this.type === 'text' ? this.value : (this.checked ? 1 : 0);
                data.list.push({name: this.name, value: value, node: this.getAttribute('data-node')});
            });
            $item.find('.loading-tips').html('<p class="color-green"><i class="fa fa-spinner fa-spin"></i> 更新数据...</p>');
            $.form.load('{:url("save")}', data, 'post', function (ret) {
                if (ret.code === 0) {
                    var tips = '<p class="color-red"><i class="fa fa-close"></i> 更新异常</p>';
                    return $item.find('.loading-tips').html(tips), false;
                }
                return $item.find('.loading-tips').html(''), false;
            }, false);
            return syncLoginGroup(), syncMenuGroup(), syncAuthGroup();
        }

        // 状态网络处理状态
        function checkRequestStatus(twoNode) {
            var status = true;
            $('.loading-tips[data-tips-filter="' + twoNode + '"]').map(function () {
                $(this).html() && (status = false);
            });
            return status;
        }

        // 同步登录分组状态
        function syncLoginGroup() {
            $('[data-login-group]').map(function () {
                var node = this.getAttribute('data-login-group'), checked = true;
                $('[data-login-filter="' + node + '"]').map(function () {
                    this.checked || (checked = false);
                });
                this.checked = checked;
            });
        }

        // 同步权限分组状态
        function syncAuthGroup() {
            $('[data-auth-group]').map(function () {
                var node = this.getAttribute('data-auth-group'), checked = true;
                $('[data-auth-filter="' + node + '"]').map(function () {
                    this.checked || (checked = false);
                });
                this.checked = checked;
            });
        }

        // 同步菜单分组状态
        function syncMenuGroup() {
            $('[data-menu-group]').map(function () {
                var node = this.getAttribute('data-menu-group'), checked = true;
                $('[data-menu-filter="' + node + '"]').map(function () {
                    this.checked || (checked = false);
                });
                this.checked = checked;
            });
        }
    });
</script>
{/block}