<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>权限树</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script src="/js/jquery.js"></script>
    <script src="/js/translationVal.js"></script>
    <style type="text/css">
        body,html{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        #tree{
            margin: 50px;
        }
        .button_div{
            width: 100%;
            height: auto;
            text-align: center;
        }
        .layui-btn-normal{
            width: 230px;
            height: 40px;
            background: linear-gradient(270deg, #015EEA 0%, #00C0FA 100%);
            box-shadow: 0px 3px 60px 2px rgb(44 135 164 / 15%);
            border-radius: 35px;
            text-align: center;
            line-height: 40px;
            margin: auto;
            font-size: 18px;
            cursor: pointer;
            color: #fff;
        }
    </style>
    <script type="text/javascript">
        var id = "[[${id}]]"; //子账户编号
        var $ = null;
        var layer = null;
        var tree = null;
        layui.use(['layer', 'tree', 'util'], function(){
            $ = layui.$
            layer = layui.layer;
            tree = layui.tree
            //树数据
            var data = [
                {
                    title: '报价单',
                    id: 'A-1',
                    spread: true,
                    children: [
                        {
                            title: '已回答',
                            id: 'A-1-1'
                        },
                        {
                            title: '待回答',
                            id: 'A-1-2'
                        },
                        {
                            title: '已付费',
                            id: 'A-1-3'
                        },
                        {
                            title: '取消行程',
                            id: 'A-1-4'
                        }
                    ]
                },
                {
                    title: '退款申请',
                    id: 'A-2',
                    spread: true,
                    children: [
                        {
                            title: '待审核',
                            id: 'A-2-1'
                        },
                        {
                            title: '已审核',
                            id: 'A-2-2'
                        }
                    ]
                },
                {
                    title: '路线发布',
                    id: 'A-3',
                    spread: true,
                },
                {
                    title: '账户信息',
                    id: 'A-4',
                    spread: true,
                },
                {
                    title: '人员设置',
                    id: 'A-5',
                    spread: true,
                },
                {
                    title: '途丫旅游',
                    id: 'A-6',
                    spread: true,
                },
                {
                    title: '操作教程',
                    id: 'A-7',
                    spread: true,
                }
            ];
            //树渲染
            tree.render({
                elem: '#tree'
                ,data: data
                ,showCheckbox: true  //是否显示复选框
                ,id: 'demoId'
                ,isJump: true //是否允许点击节点时弹出新窗口跳转
            });
            //保存
            $(".layui-btn-normal").on("click", function(e){
                layer.load(3);
                let list = tree.getChecked("demoId");
                let permissionsType = "";
                $.each(list, (index, item) => {
                    permissionsType = permissionsType + item.id + ",";
                    if(typeof(item.children) != "undefined"){
                        $.each(item.children, (index, elem) => {
                            permissionsType = permissionsType + elem.id + ",";
                        });
                    }
                });
                //增加页面权限
                $.ajax({
                    url: "/personal/editorModify",
                    type: "put",
                    data: {
                        "code": id,
                        "permissionsType": permissionsType.substring(0, permissionsType.length - 1)
                    },
                    headers: {"token": localStorage.getItem("token")},
                    dataType: "json",
                    success: (data) => {
                        if(data.msg == "200"){
                            parent.layer.alert("权限赋予成功");
                        }
                        layer.closeAll("loading");
                    },
                    error: () => {
                        layer.alert(paramReturn("服务器异常，请联系管理员", parent.type), {icon: 2});
                        layer.closeAll("loading");
                    }
                });
            });
            //数据渲染
            layer.load(3);
            $.ajax({
                url: "/personal/getModify",
                type: "get",
                data: {
                    "code": id
                },
                headers: {"token": localStorage.getItem("token")},
                dataType: "json",
                success: (data) => {
                    if(data.msg == "200"){
                        //判断部分父节点里是否存在子节点也被选中情况 layui漏洞 如果父节先被选中则子节点全部选中
                        var list = new Array();
                        for(let i = 1; i < data.data.permissionsType.split(",").length; i++){
                            let permissionsType = data.data.permissionsType.split(",")[i];
                            let onPermissionsType = data.data.permissionsType.split(",")[i - 1];
                            if(permissionsType.indexOf(onPermissionsType) > -1){
                                list.push(permissionsType);
                            } else {
                                list.push(onPermissionsType);
                            }
                        }
                        list.push(data.data.permissionsType.split(",")[data.data.permissionsType.split(",").length - 1]);
                        tree.setChecked('demoId', list); //多个勾选树节点
                    }
                    layer.closeAll("loading");
                },
                error: () => {
                    layer.alert(paramReturn("服务器异常，请联系管理员", parent.type), {icon: 2});
                    layer.closeAll("loading");
                }
            });
            translationVal(parent.parent.type);//翻译
        });
    </script>
</head>
<body>
    <div id="tree"></div>
    <div class="button_div">
        <button class="layui-btn layui-btn-normal" data-locale="baocun">保存</button>
    </div>
</body>
</html>