@{
    ViewBag.Title = "查看授信";

    Layout = "~/Views/Shared/_InfoLayout.cshtml";
}
<link href="~/Statics/libs/jqueryorgchart/jquery.orgchart.css" rel="stylesheet" />
<link href="~/Statics/libs/jqueryorgchart/index.css" rel="stylesheet" />
<script src="~/Statics/libs/jqueryorgchart/jquery.orgchart.js"></script>
<style type="text/css">
    .echart-cont {
        width: 100%;
    }

</style>
<div align="center" class="echart-cont" id="divUserLevel">


</div>
<script type="text/javascript">
    let data = [];
    let datascource = {};
    let Id = @ViewBag.Id;

    $(function () {

        main.post("/System/GetChildrenSystemUsers", { parentId: Id }).done(function (res) {
            if (res != null) {
                data = res;
                var rootUser = data.filter(x => x.Id == Id)[0];


                if (rootUser.ParentId != 0 && rootUser.ParentId != null) {
                    var parentUser = data.filter(x => x.Id == rootUser.ParentId)[0];
                    datascource = {
                        name: parentUser.Name,
                        bg_color: 'color4',
                        children: toChildren(data, parentUser.Id)
                    }
                } else {
                    datascource = {
                        name: rootUser.Name,
                        bg_color: 'color4',
                        children: toChildren(data, rootUser.Id)
                    }
                }

                $('#divUserLevel').orgchart({
                    'data': datascource,
                    'nodeContent': 'title',
                    'direction': 'l2r'
                });

                $(".title:not(':first')").each(function () {
                    var tit = $(this).html();
                    if (strlen(tit) > 20) {
                        $(this).addClass("special_prouduct")
                    }
                })

                //绝对居中
                resize_view();
                $(window).resize(function () {
                    resize_view();
                })
            }
        })
    })

    function toChildren(arr, pid) {
        var clidrens = arr.filter(x => x.ParentId === pid);
        if (clidrens.length > 0) {
            return clidrens.map(x => new Object({
                name: x.Name,
                bg_color: IsColor(arr,x.Id),
                children: toChildren(arr, x.Id)
            }))
        }
    }

    function IsColor(arr,Id) {
        var clidrens = arr.filter(x => x.ParentId === Id);
        return clidrens.length > 0 ? 'color2':'color6'
    }


    //判断字节长度
    function strlen(str) {
        var len = 0;
        for (var i = 0; i < str.length; i++) {
            var c = str.charCodeAt(i);
            //单字节加1   
            if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
                len++;
            }
            else {
                len += 2;
            }
        }
        return len;
    }

    function resize_view() {
        var ww = $(".orgchart").width();
        var wh = $(".orgchart").height();
        var f_height = $(".orgchart>table>tr>td> .node .title").height();
        $(".orgchart").css({
            "left": "50%",
            "top": "50%",
            "margin-left": -((wh / 2) + (f_height / 2))+60,
            "margin-top": -(ww / 2)
        })
        if (ww > 750) {
            $(".orgchart").addClass("scale")
        }
    }
</script>