<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
>
<head th:replace="admin/common/html/head :: head_Normal(~{::title},~{::link},~{::style})">

    <title th:text=${title}></title>
    <link rel="stylesheet" th:href="@{/static/admin/assets/js/button/ladda/ladda.min.css}">
    <link th:href="@{/static/admin/assets/js/bootstrap/css/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>

    <style type="text/css">

        .select-list ul li{
            list-style-type: none;
            float: left;
        }
    </style>

</head>

<body id="listbody">

<!-- 右边内容 -->
<div class="wrap-fluid">
    <div class="container-fluid paper-wrap bevel tlbr">
        <!-- 内容 -->
        <div class="content-wrap">
            <!-- 结束内容 -->
            <div class="row">
                <div class="col-sm-12">
                    <!-- 搜索条件 -->
                    <div class="nest" id="inlineClose">
                        <div class="title-alt">
                            <h6>搜索条件</h6>
                        </div>

                        <div class="body-nest" id="search_div"  style="display: block">
                            <div class="form_left">
                                <form role="form" class="form-inline">
                                    <div class="form-group" style="width: 16%">
                                        <label class="control-label timeBut2" style="float: left;padding-top: 10px">所属APP：</label>
                                        <select name="app" id="apps"  class="form-control" style="width: 66%">
                                        </select>
                                    </div>
                                    <button onclick="$.table.search(this)" class="btn btn-success" style="margin-left: 2%;" id="recordSearch" type="button"><i class="fa fa-search"></i>&nbsp;搜索</button>
                                </form>
                            </div>
                        </div>
                    </div>
                    <!-- END搜索条件 -->
                    <!-- 空白页开始-->
                    <div class="nest" id="Blank_PageClose">
                        <div class="title-alt">
                            <h6>表单</h6>
                            <div class="titleClose">
                                <a class="gone" href="#Blank_PageClose">
                                    <span class="entypo-cancel"></span>
                                </a>
                            </div>
                            <div class="titleToggle">
                                <a class="nav-toggle-alt" href="#Blank_Page_Content">
                                    <span class="entypo-up-open"></span>
                                </a>
                            </div>
                        </div>

                        <div class="body-nest" id="Blank_Page_Content">
                            <!-- 工具条 -->
                            <div class="btn-group hidden-xs" id="exampleTableEventsToolbar" role="group">
                                <button onclick="addRules()" type="button" class="btn btn-primary">
                                    <span class="entypo-plus-squared"></span>&nbsp;&nbsp;新增
                                </button>
                            </div>
                            <!-- 工具条 end-->
                            <table id="dataTable" class="table-striped footable-res footable metro-blue" data-page-size="6">
                            </table>

                        </div>
                    </div>
                </div>
                <!-- 空白页结束 -->
            </div>
            <!-- 结束内容 -->
        </div>
    </div>
</div>
<!-- 结束右边内容 -->

<!-- 通用js -->
<div th:include="admin/common/html/js :: onload_js">

</div>
<!-- bootstarp 表格 -->
<script th:src="@{/static/admin/assets/js/bootstrap/js/bootstrap-table/bootstrap-table.min.js}" type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}" type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/js/base_list.js}" type="text/javascript"></script>
<!-- 弹窗 -->
<script th:src="@{/static/admin/assets/js/layer/layer.js}" type="text/javascript"></script>
<!-- 遮罩层 -->
<script th:src="@{/static/admin/assets/js/blockUI/jquery.blockUI.js}" type="text/javascript"></script>

<script type="text/javascript">
    var dataUrl="/rule/list";
    var removeUrl="/rule/remove";
    var createUrl="/rule/add";
    var updateUrl="/rule/edit/";
    var options = {
        dataUrl: dataUrl,
        createUrl: createUrl,
        updateUrl: updateUrl,
        removeUrl: removeUrl,
        sortName: "key",
        modalName: "规则",
        search: false,
        dataColumns: [
            { field: 'app', title: 'app',width:100,align:"center"},
            { field: 'rules', title: '规则'},
            {
                title: '操作',
                formatter: function (value, row, index) {
                    var id = row.id;
                    var actions = [];
                    actions.push('<a class="btn btn-success btn-xs"  href="#" onclick="editRules(\'' + (row.app) + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                    actions.push('<a class="btn btn-danger btn-xs" href="#" onclick="$.operate.remove(\'' + (row.app) + '\')"><i class="fa fa-remove"></i>删除</a>');
                    return actions.join('');
                }
            }]
    };
    $(function(){
        $.ajax({
            cache : true,
            type : "POST",
            url : "/user/info",
            headers: {
                "Authorization":getCookie("token")
            },
            async : false,
            error : function(XMLHttpRequest){
                $.modal.alertError(XMLHttpRequest.responseJSON.msg);
            },
            success : function(data) {
                console.log(data)
                var role = data.role;
                if(role === "ADMIN"){
                    $("#apps").append("<option></option>");
                }
                var apps = data.appNames;
                var appName = data.appName;
                for (var i = 0; i < apps.length; i++) {
                    var app = apps[i];
                    if(app === appName){
                        $("#apps").append("<option selected = selected>" + apps[i] + "</option>");
                    }else{
                        $("#apps").append("<option>" + apps[i] + "</option>");
                    }
                }
            }
        });
        var oTab=$.table.oTableInit(options);
        oTab.Init();
    })
    function addRules(){
        $.modal.open("添加规则", createUrl, 1100, 600);
    }

    function editRules(app){
        $.modal.open("编辑规则", updateUrl+app, 1100, 600);
    }

</script>

</body>

</html>
