<?php
use yii\helpers\Url;
use app\ht\widgets\LinkPager;

$this->title = '路由管理';
$this->params['breadcrumbs'][] =  '系统管理';
$this->params['breadcrumbs'][] = $this->title;

?>

<link rel="stylesheet" type="text/css" href="<?= Yii::$app->request->baseUrl . "/exts/combo-select/css/combo.select.css"?>" />
<style>
    .groupSelect .combo-select{width:100%;max-width:100%}
    .groupSelect .combo-select .combo-input{
        padding: 0.8rem ;
        box-sizing: border-box;
        line-height: 1.2rem;
        margin-top:0
    }
    .action-confirm-head{background:#fff;padding:1rem;box-sizing: border-box;font-weight: bold}
    #myAccordion .panel-heading{padding:0.8rem;box-sizing: border-box}
    #myAccordion .panel-sub-group{margin-bottom:0}
    #myAccordion .panel-sub-group .panel-default{border-radius: 0;}

    #myAccordion .panel-sub-title{font-weight: normal}
    #myAccordion .panel-sub-group .perm-item-cls{padding:0.8rem 0.5rem ;box-sizing: border-box;border:1px solid #ccc;border-bottom: 0;display: flex; flex-direction: row;justify-content: space-between;}
    #myAccordion .panel-sub-group .perm-item-box .perm-item-cls:last-child{border-bottom: 1px solid #ccc}
    #myAccordion .panel-sub-group .item-btn-cls{margin-left:1rem;padding:0.3rem;box-sizing: border-box;display: inline-block;color:#0c80d8;cursor: pointer}
    #myAccordion .panel-sub-group .item-del-cls{color:#ed0000}
</style>


<div class="row">
    <div class="col-md-4">
        <div class="action-confirm-head">
            <span style="width:100%;padding:1rem;display: block;box-sizing: border-box">已经部署</span>
        </div>
        <div class="panel-group" id="myAccordion">

            <?php if (!empty($groupActions)) : ?>
                <?php foreach ($groupActions as $k => $action) : ?>
                    <div class="panel panel-default">
                        <div class="panel-heading" id="heading_<?=$action['id']?>">
                            <h4 class="panel-title">
                                <a role="button" data-toggle="collapse" data-parent="#myAccordion" href="#collapse_<?=$action['id']?>" >
                                    <?= $action['label'] ?>
                                </a>
                            </h4>
                        </div>
                        <div id="collapse_<?=$action['id']?>" class="panel-collapse collapse">
                            <div class="panel-body">
                                <?php foreach ($action['items'] as $subK => $subAction) : ?>

                                    <div class="panel-group panel-sub-group" id="subAccordion_<?=$subAction['id']?>">
                                        <div class="panel panel-default">
                                            <div class="panel-heading" id="heading_<?=$subAction['id']?>">
                                                <h4 class="panel-title panel-sub-title">
                                                    <a role="button" data-toggle="collapse" data-parent="#subAccordion_<?=$subAction['id']?>" href="#collapse_<?=$subAction['id']?>" >
                                                        <?= $subAction['label'] ?>
                                                    </a>
                                                </h4>
                                            </div>
                                            <div id="collapse_<?=$subAction['id']?>" class="panel-collapse collapse">
                                                <div class="panel-body perm-item-box">
                                                <?php foreach ($subAction['items'] as $subKK => $subSubAction) : ?>
                                                    <div class="perm-item-cls" data-id="<?=$subSubAction['id']?>" data-label="<?=$subSubAction['label']?>" data-routes="<?=$subSubAction['routes']?>">
                                                        <span class="sub-label"><?=$subSubAction['label']?></span>
                                                        <div class="action-cls"><span class="item-btn-cls item-edit-cls" >编辑</span><span class="item-btn-cls item-del-cls">删除</span></div>
                                                    </div>
                                                <?php endforeach;?>
                                                </div>
                                            </div>
                                        </div>

                                    </div>


                                <?php endforeach; ?>
                            </div>
                        </div>
                    </div>

                <?php endforeach; ?>
            <?php else : ?>
                <div style="display: block;background: #fff;padding: 1rem 1.2rem;box-sizing: border-box;">
                    <div>暂无</div>
                </div>
            <?php endif; ?>


        </div>

    </div>
    <div class="col-md-4">
        <div class="panel panel-default">
            <div  class="panel-body">
                <table class="table table-striped table-bordered">
                    <thead>
                    <tr>
                        <th colspan="2">未部署</th>
                    </tr>
                    </thead>
                    <tbody>
                    <?php if (!empty($notConfirmActions)) : ?>
                        <?php foreach ($notConfirmActions as $k => $action) : ?>
                            <tr data-id="<?=$k?>">
                                <td><div data-id="<?=$action?>"><?= $action ?></div></td>
                                <td><a class="addRouterBtn" data-id="<?=$action?>" href="javascript:void(0)">部署</a></td>
                            </tr>
                        <?php endforeach; ?>
                    <?php else : ?>
                        <tr>
                            <td colspan="2">暂无</td>
                        </tr>
                    <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="panel panel-default">
            <div  class="panel-body">
                <table class="table table-striped table-bordered">
                    <thead>
                    <tr>
                        <th colspan="2">已作废路由</th>
                    </tr>
                    </thead>
                    <tbody>
                    <?php if (!empty($delActions)) : ?>
                        <?php foreach ($delActions as $k => $action) : ?>
                            <tr>
                                <td><?= $action ?></td>
                                <td width="70"><?php if('dashboard/index' != $action) {?><a class="delRouterBtn" data-id="<?=$action?>" href="javascript:void(0)">删除</a><?php } else {?>无 <?php }?></td>
                            </tr>
                        <?php endforeach; ?>
                    <?php else : ?>
                        <tr>
                            <td colspan="2">暂无</td>
                        </tr>
                    <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>


    </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">设置路由权限</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="currRoute">路由</label>
                        <input type="text" class="form-control" id="currRoute" readonly >

                    </div>
                    <div class="form-group groupSelect">
                        <label for="permGroup">所属菜单</label>
                        <select id="permGroup" class="form-control">


                        </select>
                    </div>
                    <div class="form-group">
                        <label for="routeName">权限名称</label>
                        <input type="text" class="typeahead form-control" id="routeName" placeholder="权限名称">
                        <input type="hidden" id="routeId" />
                    </div>
                    <div class="form-group">
                        <label for="routeDesc">说明</label>
                        <textarea class="form-control" id="routeDesc"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="savePermBtn">提交</button>
            </div>
        </div>
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="modal fade" id="myEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">编辑权限</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="permName">权限名</label>
                        <input type="text" class="form-control" id="permName" value="" >
                        <input type="hidden" id="currPermId" value="" >
                    </div>

                    <div class="form-group">
                        <label for="routeNames">路由</label>
                        <textarea class="form-control" id="routeNames" style="min-height: 15rem"></textarea>

                    </div>
                    <div class="form-group">
                        <label for="permDesc">说明</label>
                        <textarea class="form-control" id="permDesc"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveEditPermBtn">提交</button>
            </div>
        </div>
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script type="text/javascript" src="<?=Url::toRoute('/exts/base/1.0.0/ui/typeahead/bootstrap3-typeahead.min.js')?>" ></script>
<script src="<?= Yii::$app->request->baseUrl . "/exts/combo-select/js/jquery.combo.select.js"?>"></script>

<script>
$(function(){
    var delPermURL      = '<?=Url::toRoute("/system/perm/del-perm")?>';
    var searchPermUrl   = '<?=Url::toRoute("/system/perm/search-perm")?>';
    var getGroupPermUrl = '<?=Url::toRoute("/system/perm/get-group-perm")?>';
    var createPermUrl   = '<?=Url::toRoute("/system/perm/create-perm")?>';
    var delInvalidActionURL    = '<?=Url::toRoute("/system/perm/del-invalid-action")?>';
    var editPermURL    = '<?=Url::toRoute("/system/perm/edit-perm")?>';

    function bindEvents() {
        $('.addRouterBtn').click(function(e) {
            var route = $(this).attr('data-id');
            $('#currRoute').val(route);
            $('#routeId').val('');
            $('#routeName').val('');
            $('#routeDesc').val('');
            $('#myModal').modal('show');
            loadSelect();
        })

        $('.delRouterBtn').click(function(e) {
            var that = $(this);
            var route = that.attr('data-id');
            $.post(delInvalidActionURL,{route:route},function(res) {
                if (res.success) {
                    that.parents('tr').remove();
                    //window.location.reload();
                } else {
                    alert(res.message);
                }
            }, 'json')
        })

        $('#routeName').typeahead({
            minLength: 1,
            items: 15,
            source: function(query, process) {
                var permGroup = $('#permGroup').val();
                if (0 == permGroup) {
                    return false;
                }
                var parameter = {query: query, route: $('#currRoute').val()};
                $('#routeId').val('');
                $.post(searchPermUrl, parameter, function (res) {
                    var data = [];
                    var iList = res.list;
                    for(i in iList){
                        var tItem = iList[i];
                        data.push(JSON.stringify(tItem));
                    }
                    process(data);
                }, 'json');
            },
            highlighter: function(item) {
                var itemObject = JSON.parse(item);
                var title = itemObject.name;
                return  title ;
            },

            updater: function(item) {
                var itemObject = JSON.parse(item);
                console.log(itemObject)
                var title = itemObject.name;
                $('#routeId').val(itemObject.id);
                return title;
            }
        })

        $('#permGroup').change(function(e){
            $('#routeId').val('');
        })

        $('body').on('click','#savePermBtn',function(e){
            console.log('save')
            var route = $('#currRoute').val()
            var permGroup = $('#permGroup').val()
            var routeName = $('#routeName').val()
            var routeId = $('#routeId').val()
            var routeDesc = $('#routeDesc').val()

            $.post(createPermUrl, {route: route, permGroup: permGroup, routeName: routeName, routeId: routeId, routeDesc: routeDesc}, function(res) {
                console.log(res)
                if (res.success) {
                    $('.addRouterBtn[data-id="'+route+'"]').parents('tr').remove();
                    $('#myModal').modal('hide');
                } else {
                    alert(res.message);
                }

            } , 'json')
        })

        $('.item-edit-cls').click(function(e){
            var parent = $(this).parents('.perm-item-cls');
            var id = parent.attr('data-id');
            var pName = parent.attr('data-label');
            var routes = parent.attr('data-routes');
            routes = routes.split(',');
            routes = routes.join("\r\n");

            //console.log(routes)
            $('#currPermId').val(id);
            $('#permName').val(pName);
            $('#routeNames').val(routes);
            $('#myEditModal').modal('show');
        })

        $('.item-del-cls').click(function(e) {
            var parent = $(this).parents('.perm-item-cls');
            var id = parent.attr('data-id');
            if(!confirm('确定删除该记录')) {
                return false;
            }

            $.post(delPermURL, {id: id}, function(res) {
                if (res.success) {
                    parent.remove();
                    $('#myEditModal').modal('hide');
                } else {
                    alert(res.message);
                }

            } , 'json')
        })

        $('#saveEditPermBtn').click(function(e){

            var id = $('#currPermId').val()
            var permName = $('#permName').val()
            var routeNames = $('#routeNames').val()
            var permDesc = $('#permDesc').val()
            var parent = $('.perm-item-cls[data-id="'+id+'"]');

            $.post(editPermURL, {id: id, permName: permName, permRoutes: routeNames, permDesc: permDesc}, function(res) {
                console.log(res)
                if (res.success) {
                    var updateRoutes = res.routes
                    parent.find('.sub-label').html(permName);
                    parent.attr('data-label', permName);
                    parent.attr('data-routes', updateRoutes);
                    $('#myEditModal').modal('hide');
                } else {
                    alert(res.message);
                }

            } , 'json')
        })

    }

    function loadSelect() {
        var route = $('#currRoute').val()
        $('#permGroup').empty()
        $.post(getGroupPermUrl, {route: route}, function(res) {
            if (res.list) {
                var str = '<option value="0">选择所属菜单</option>';
                $.each(res.list,function(i,n){
                    str = str + '<option value="'+ n.id+'">' + n.name +'</option>'
                })
                $('#permGroup').append(str);
                $('#permGroup').comboSelect();
            }

        } , 'json')
    }
    loadSelect();
    bindEvents();

})
</script>