<!doctype html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>管理后台</title>
    <link href="../static/css/basic.css" rel="stylesheet" type="text/css">
    <script src="../static/js/jquery.min.js"></script>
    <script src="../static/js/filter.js"></script>
    <script src="../static/js/basic.js"></script>
    <style>
        .first-input-group .basic-url {
            width: 300px;
        }
    </style>
</head>
<body>
<!-- 添加菜单的模态框 -->
<div aria-labelledby="myModalLabel" class="modal fade" data-backdrop="static" data-keyboard="false" id="addMenuModal"
     role="dialog" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">添加一级菜单</h4>
            </div>
            <div class="modal-body modal-body-menu">
                <div class="input-group first-input-group">
                    <span class="input-group-addon basic-addon3">一级菜单</span>
                    <input class="form-control basic-url" type="text">
                    <span class="first-menu-error"></span>
                </div>

            </div>
            <div class="modal-footer">
                <button class="btn btn-default cancel-menu" data-dismiss="modal" type="button">取消</button>
                <button class="btn btn-primary save-menu" type="button">保存</button>
            </div>
        </div>
    </div>
</div>
<div class="search">
    <div>
        <span>一级菜单</span>
        <input class="first-menu-serach" placeholder="模糊匹配" type="text" value="">
    </div>
    <div>
        <button class="btn btn-default first-menu-search" type="button">搜索</button>
    </div>
</div>
<div class="add-menu">
    <button class="btn btn-default btn-xs glyphicon glyphicon-plus add-button" data-target="#addMenuModal" data-toggle="modal"
            type="button">添加一级菜单
    </button>
    <strong>提示：创建导航菜单栏，一般由技术开发人员进行配置！</strong>

</div>
<div class="menu-table">
    <table>
        <thead class="thead-dark">
        <tr>
            <th>序列号</th>
            <th>菜单识别号</th>
            <th>一级菜单</th>
            <th>菜单顺序号</th>
            <th>二级菜单</th>
            <th>创建者</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="menu_table_body">

        </tbody>
    </table>
</div>
<!-- 分页插件 -->
<div class="cut_page">
    <li>
        每页显示
        <select id="display_count">
            <option value="20">20</option>
            <option value="30">30</option>
            <option value="50">50</option>
            <option value="100">100</option>
        </select>
    </li>

    <li class="current_total_page">第<span class="current_page">1</span>/<span class="total_page">2</span>页</li>
    <li class="pre_page">上一页</li>
    <li class="next_page">下一页</li>
    <li class="jump_page">跳转 <input name="jump_page" type="text" value="">
        <button class="btn btn-default" type="button">Go</button>
    </li>
</div>


<script>
    $(".search div button").click(function () {
        let firstMenuSearch = $(".first-menu-serach").val();
        let dataJSON = getCutPageData();
        dataJSON["firstMenuSearch"] = firstMenuSearch;
        showMenuList(dataJSON);
    });

    //获取分页的基础数据
    function getCutPageData() {
        let displayCount = $("#display_count").val();
        let currentPage = $(".current_page").html();
        let totalPage = $(".total_page").html();
        let jumpPage = $(".jump_page input").val();

        return {"displayCount": displayCount, "currentPage": currentPage, "totalPage": totalPage, "jumpPage": jumpPage};
    }

    $(".first-menu-search").click(function () {
        showMenuList(getCutPageData());
    });
    //刚开始加载页面的时候，执行的一系列操作
    $(document).ready(function () {
        showMenuList(getCutPageData());
    });
    //获取数据
    //当每页显示数更改后，执行的操作
    $("#display_count").change(function () {
        showMenuList(getCutPageData());
    });

    //点击上一页的按钮
    $(".pre_page").click(function () {
        let dataJSON = getCutPageData();

        if (dataJSON["currentPage"] == 1) {
            return;
        }
        dataJSON["currentPage"] = parseInt(dataJSON["currentPage"]) - 1;
        showMenuList(dataJSON);
    });
    //点击下一页的按钮时
    $(".next_page").click(function () {
        let dataJSON = getCutPageData();

        if (dataJSON["currentPage"] == dataJSON["totalPage"]) {
            return;
        }

        dataJSON["currentPage"] = parseInt(dataJSON["currentPage"]) + 1;

        showMenuList(dataJSON);
    });
    //点击跳转那一页的按钮
    $(".jump_page button").click(function () {
        let dataJSON = getCutPageData();

        if (dataJSON["jumpPage"].length <= 0) {
            return;
        }

        showMenuList(dataJSON);
    });

    function Ajax(menuUid, hostUrl) {
        $.ajax({
            url: hostUrl,
            data: {
                "menuUid": menuUid
            },

            success: function (res) {

                if (res.Code == 404) {
                    window.parent.location = "/login.html";
                } else if (res.Code == 200) {
                    showMenuList(getCutPageData());
                    $(".table-caption").html("");

                } else {
                }
            },

            error: function () {
                alert("系统异常，请稍后重试");
            }

        });
    }

    //提升菜单的顺序
    function menuUp(menuUid) {
        Ajax(menuUid, "/up/menu");
    }

    //降低菜单的顺序
    function menuDown(menuUid) {
        Ajax(menuUid, "/down/menu");
    }

    //删除菜单
    function menuDelete(menuUid) {
        if (!window.confirm("是否确定删除该项?")) {
            return;
        }
        Ajax(menuUid, "/delete/menu");
    }

    //此函数的作用，是在每行的最后一格，加入可操作的按钮图标
    function showMenuList(dataJSON) {
        $.ajax({
            url: "/get/menu",
            data: dataJSON,

            success: function (res) {

                $(".current_page").html(res.CurrentPage);
                $(".total_page").html(res.TotalPage);
                $("#display_count option").each(function () {
                    if ($(this).text() == res.DisplayCount) {
                        $(this).attr('selected', true);
                    }
                });
                $(".jump_page input").val("");


                if (res.Code == -1) {
                    alert(res.Msg);
                    return;
                } else if (res.Code == 404) {
                    window.parent.location = "/login.html";
                } else {
                    //将先前的内容清空
                    $("#menu_table_body").html("");
                    let str = "";
                    for (let i = 0; i < res.MenuList.length; i++) {
                        let v = res.MenuList[i];

                        // let secondMenus = v.SecondMenu.split("|");

                        let tmp = "<tr>" + "<th>" + (res.StartIndex + i + 1) + "</th>" +
                            "<th>" + v.MenuUid + "</th>" + "<th>" + v.FirstMenu + "</th>" + "<th>" + v.MenuOrder + "</th>" +
                            "<th>" + v.SecondMenu + "</th>" + "<th>" + v.Creater + "</th>";
                        tmp = tmp + "<th>" + '<div class="btn-group" role="group" aria-label="...">' +
                            '<button type="button" value="' + v.MenuUid + '" class="btn btn-default" onclick="menuUp(this.value);"><span class="glyphicon glyphicon-arrow-up"></span></button>' +
                            '<button type="button" value="' + v.MenuUid + '" class="btn btn-default" onclick="menuDown(this.value);"><span class="glyphicon glyphicon-arrow-down"></span></button>' +
                            '<button type="button" value="' + v.MenuUid + '" class="btn btn-default" onclick="menuDelete(this.value);"><span class="glyphicon glyphicon-trash"></span></button>' +
                            '</div>' + "</th>" + "</tr>";
                        str = str + tmp;
                    }
                    $("#menu_table_body").append(str);
                }
            },

            error: function () {
                alert("系统异常，请稍后重试");
            }
        });
    }

    $(".save-menu").click(function () {
        let oneMenu = $(".basic-url").val();


        if (oneMenu.length <= 0) {
            $(".first-menu-error").text(" * 一级菜单不能为空");
            return;
        }

        $(".first-menu-error").text("");
        $.ajax({
            url: "/add/menu",
            data: {
                oneMenu: oneMenu
            },

            success: function (res) {
                if (res.Code == 200) {
                    $(".cancel-menu").trigger('click');
                    showMenuList();

                } else if (res.Code == 404) {
                    window.parent.location = "/login.html";
                } else {
                    $(".first-menu-error").text(res.Msg);
                }
            },
            error: function () {
                alert("系统异常，请稍后重试");
            }
        });
    });

    $(".add-button").click(function () {
        $(".basic-url").val("");
        $(".basic-url-4").val("");
        $(".first-menu-error").text("");

    });
</script>
</body>
</html>