<!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/lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="../static/js/jquery.ui.min.js"></script>
    <style>

        #deployRoleModal {
            margin-bottom: 95px;
            height: 500px;
            overflow-y: hidden;
        }

        .modal-content {
            overflow: auto;
            max-height: 500px;
        }

        .modal-header {
            padding: 10px;
        }

        .modal-footer {
            padding-top: 10px;
            padding-bottom: 30px;
        }
    </style>
</head>
<body>
<!-- 权限配置模态框 -->
<div aria-labelledby="myModalLabel" class="modal  fade" data-backdrop="static" data-keyboard="false" id="deployRoleModal"
     role="dialog" tabindex="-1">
    <div class="modal-dialog modal-sm" 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="deployButton">配置权限项</h4>
            </div>
            <div class="modal-body modal-body-deploy">
            </div>
            <div class="modal-footer">
                <button class="btn btn-default cancel-deploy" data-dismiss="modal" type="button">取消</button>
                <button class="btn btn-primary save-deploy" type="button">保存</button>
            </div>
        </div>
    </div>
</div>
<!-- 权限模态框 end -->
<script>
    function editRole(roleUid) {
        showPowerTree(roleUid);
        $("#deployRoleModal").modal();
    }

    $(".save-deploy").click(function () {
        let firstMenuUid = [];
        let secondMenuUid = [];
        let powerId = [];
        $('input[name="checkbox-first-menu-uid"]:checked').each(function () {
            firstMenuUid.push($(this).val());
        });
        $('input[name="checkbox-second-menu-uid"]:checked').each(function () {
            secondMenuUid.push($(this).val());
        });
        $('input[name="checkbox-power-id"]:checked').each(function () {
            powerId.push($(this).val());
        });

        let roleUid = $("#roleUid").html();

        savePower({
            "firstMenuUid": firstMenuUid,
            "secondMenuUid": secondMenuUid,
            "powerId": powerId,
            "roleUid": roleUid
        });
    });

    //对已经选择checkbox进行打钩
    function setCheckboxChecked(res) {
        $('input[name="checkbox-first-menu-uid"]').each(function () {
            let firstMenuUid = $(this).val();
            if (res.ShowFirstMenuUid[firstMenuUid]) {
                $(this).attr("checked", true);
            }
        });
        $('input[name="checkbox-second-menu-uid"]').each(function () {
            let secondMenuUid = $(this).val();
            if (res.ShowSecondMenuUid[secondMenuUid]) {
                $(this).attr('checked', true);
            }
        });
        $('input[name="checkbox-power-id"]').each(function () {
            let powerId = $(this).val();
            if (res.ShowPowerUid[powerId]) {
                $(this).attr('checked', true);
            }
        });
    }

    function getCheckboxFirstMenuUid() {
        let firstMenuUid = [];
        $('input[name="checkbox-first-menu-uid"]:checked').each(function () {
            firstMenuUid.push($(this).val());
        });
        return firstMenuUid;
    }

    function getCheckboxSecondMenuUid() {
        let secondMenuUid = [];
        $('input[name="checkbox-second-menu-uid"]:checked').each(function () {
            secondMenuUid.push($(this).val());
        });
        return secondMenuUid;
    }

    function getCheckboxPowerId() {
        let powerUid = [];
        $('input[name="checkbox-power-id"]:checked').each(function () {
            powerUid.push($(this).val());
        });
        return powerUid;
    }

    function savePower(dataJSON) {
        $.ajax({
            url: "/save/power",
            data: dataJSON,
            success: function (res) {
                if (res.Code == 404) {
                    window.parent.location = "/login.html";
                    return;
                } else if (res.Code == 200) {
                    alert("保存成功");
                } else {
                    alert("保存失败");
                }
                $(".cancel-deploy").trigger('click');
            },

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

    function showPowerTree(roleUid) {
        $.ajax({
            url: "/get/deployTree",
            async: false,
            data: {
                "roleUid": roleUid
            },

            success: function (res) {
                if (res.Code == 404) {
                    window.parent.location = "/login.html";
                    return;
                }
                $(".modal-body-deploy").html("");
                let str = '<span id="roleUid" style="display: none;">' + roleUid + '</span>';
                for (let i = 0; i < res.AllFirstMenu.length; i++) {
                    str += '<ul>';
                    str += '<li><input type="checkbox" name="checkbox-first-menu-uid" class="checkbox-first-menu-uid" value="' + res.AllFirstMenu[i].MenuUid + '">' + res.AllFirstMenu[i].FirstMenu + '</li>';
                    for (let j = 0; j < res.AllSecondMenu.length; j++) {
                        str += '<ul>';
                        if (res.AllSecondMenu[j].FirstMenuUid == res.AllFirstMenu[i].MenuUid) {
                            str += '<li><input type="checkbox" name="checkbox-second-menu-uid" class="checkbox-second-menu-uid" value="' + res.AllSecondMenu[j].SecondMenuUid + '">' + res.AllSecondMenu[j].SecondMenu + '</li>';
                            str += '<ul>';
                            for (let k = 0; k < res.AllPower.length; k++) {
                                if (res.AllPower[k].SecondMenuUid == res.AllSecondMenu[j].SecondMenuUid) {
                                    str += '<li><input type="checkbox" name="checkbox-power-id" class="checkbox-power-id" value="' + res.AllPower[k].PowerId + '">' + res.AllPower[k].PowerItem + '</li>';
                                }
                            }
                            str += '</ul>';
                        }
                        str += '</ul>';
                    }
                    str += '</ul>';
                }
                $(".modal-body-deploy").html(str);
                setCheckboxChecked(res);
            },

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

    $(document).on("show.bs.modal", ".modal", function () {
        $(this).draggable();
        $(this).css("overflow-y", "hidden");
        // 防止出现滚动条，出现的话，你会把滚动条一起拖着走的
    });
    $(".modal-body-deploy").on("click", ".checkbox-first-menu-uid", function () {
        if (this.checked) {
            $(this).parent().parent().children("ul").children('li').children('.checkbox-second-menu-uid').prop('checked', 'checked');
        } else {
            $(this).parent().parent().children("ul").children('li').children('.checkbox-second-menu-uid').removeAttr('checked');
            $(this).parent().parent().children("ul").children('ul').children('li').children('.checkbox-power-id').removeAttr('checked');
        }
    });
    $(".modal-body-deploy").on("click", ".checkbox-second-menu-uid", function () {
        if (this.checked) {
            $(this).parent().parent().parent().children('li').children('.checkbox-first-menu-uid').prop('checked', 'checked');
        } else {
            $(this).parent().parent().children("ul").children('li').children('.checkbox-power-id').removeAttr('checked');
            if (getCheckboxSecondMenuUid() <= 0) {
                $(this).parent().parent().parent().children('li').children('.checkbox-first-menu-uid').removeAttr('checked');
            }
        }
    });
    $(".modal-body-deploy").on("click", ".checkbox-power-id", function () {
        if (this.checked) {
            $(this).parent().parent().parent().children('li').children('.checkbox-second-menu-uid').prop('checked', 'checked');
            $(this).parent().parent().parent().parent().children('li').children('.checkbox-first-menu-uid').prop('checked', 'checked')
        }
    });
</script>
</body>
</html>